ดาวน์โหลดโปรแกรมฟรี
Facebook  Twitter  YouTube  News Letter  Rss Feed
ติดตามไทยแวร์ได้ที่นี่
  
ไทยแวร์รีวิว
 
ส่งรีวิวเข้าไทยแวร์ดอทคอม (Submit Review to Thaiware.com)
 
 

Recommended for you

รีวิว Adobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพ

เมื่อ :
ผู้เข้าชม : 1,216
เขียนโดย :
Adobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพ
0 %E0%B8%A3%E0%B8%B5%E0%B8%A7%E0%B8%B4%E0%B8%A7+Adobe+XD+CC+%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B9%81%E0%B8%A1%E0%B9%88%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B8%94%E0%B8%B5%E0%B9%84%E0%B8%8B%E0%B8%99%E0%B9%8C%E0%B9%81%E0%B8%AD%E0%B8%9E%E0%B8%AF+%E0%B8%AB%E0%B8%A3%E0%B8%B7%E0%B8%AD%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C+%E0%B9%80%E0%B8%AA%E0%B8%99%E0%B8%AD%E0%B8%87%E0%B8%B2%E0%B8%99%E0%B8%A5%E0%B8%B9%E0%B8%81%E0%B8%84%E0%B9%89%E0%B8%B2%2F%E0%B8%97%E0%B8%B5%E0%B8%A1%E0%B9%84%E0%B8%94%E0%B9%89%E0%B8%AD%E0%B8%A2%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B8%A1%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B2%E0%B8%8A%E0%B8%B5%E0%B8%9E
A- A+

รีวิว Adobe XD CC
โปรแกรมสร้างต้นแบบดีไซน์ แอพฯ/เว็บไซต์ ไว้พรีเซนต์งาน

 ข้อดี

  • UI สะอาด เรียนรู้ง่าย
  • รองรับระบบคลาวด์ของ Adobe
  • เครื่องมือใช้งานง่าย ตามสไตล์ Adobe

 ข้อสังเกต

  • เครื่องมือน้อย ไม่หลากหลาย

บทความรีวิวนี้ เราขอหยิบหนึ่งในโปรแกรมกลุ่ม Adobe มาแนะนำให้ได้รู้จักกัน นั่นก็คือโปรแกรม Adobe XD CC (XD ย่อมาจาก Experience Design) ซึ่งก็ตามชื่อของตัวโปรแกรมเลย Adobe XD CC เอาไว้สำหรับสร้างต้นแบบของแอพฯ หรือเว็บไซต์ที่เราออกแบบให้สมจริง เพื่อใช้ในการพรีเซนต์งาน พูดคุยกับทีม หรือเอาไว้นำเสนอ/ขายงานกับลูกค้า ที่มีตัวอย่างแอพฯ ให้ดูอย่างสมจริง สามารถคลิกใช้งานเป็นตัวอย่างได้ ก่อนจะไปสู่ขั้นตอนการผลิต/พัฒนาขึ้นมาจริงๆ

จุดเด่นของโปรแกรมนี้ ก็คือความง่ายในการใช้งาน ไม่ว่าจะหน้า UI ที่เรียบร้อยมากๆ เครื่องมือที่มีอยู่น้อยนิด (แต่เพียงพอต่อการใช้งาน) การนำเสนองานที่สะดวกทั้งการเปิดแสดงผลบนหน้าเว็บไซต์ หรือจะเปิดบนอุปกรณ์มือถือก็ได้ และที่สำคัญคือ มีทั้งเวอร์ชั่นฟรีและแบบจ่ายเงินให้ได้ใช้งาน (ซึ่งจะขอพูดถึงในช่วงท้ายของบทความ)

อย่างไรก็ตาม โปรแกรม Adobe XD CC เป็นเพียงโปรแกรมสร้างต้นแบบไว้นำเสนองานเท่านั้น ไม่ใช่โปรแกรมเขียนแอพฯ หรือเว็บไซต์ ที่สามารถนำมาใช้งานได้ทันทีนะครับ


สำรวจโปรแกรม Adobe XD CC

กระบวนการทำงานของโปรแกรม Adobe XD CC จะแบ่งออกเป็น 3 ขั้นตอนใหญ่ๆ ได้แก่ Design - ออกแบบแอพฯ มีทั้งหมดกี่หน้า แต่ละหน้ามีหน้าตาเป็นอย่างไร, Prototype - สร้างต้นแบบขึ้นมา นำแต่ละหน้าที่ดีไซน์มาเชื่อมโยงกัน จากหน้านี้ คลิกแล้วไปไหน? และ Publish - นำต้นแบบที่สร้างเสร็จแล้ว อัพโหลดขึ้นคลาวด์ของ Adobe เพื่อนำไปใช้งาน นำเสนอในลำดับต่อไป เอาเป็นว่า ลองมาดูความน่าสนใจของโปรแกรมนี้ ไปทีละขั้นตอนกัน


Design

ในส่วนของ Design เป็นหนึ่งในสองแท็บหลักของโปรแกรมนี้ ซึ่งเมื่อเข้ามาในโปรแกรมส่วนนี้ เราจะเจอกับ Workspace สำหรับจัดวาง layout หน้าต่างๆ ที่เตรียมไว้สำหรับการดีไซน์ มีแถบเครื่องมืออยู่ด้านซ้ายที่คนใช้งาน Adobe จะคุ้นเคยกันเป็นอย่างดี ไม่ว่าจะเป็น Arrow ลูกศรสำหรับเลือกวัตถุ และลากเพื่อจัดวางตำแหน่ง, เครื่องมือสร้างเส้นหรือเลขาคณิต (สี่เหลี่ยม, วงกลม), เครื่องมือ Type สำหรับเพิ่มตัวอักษร แว่นขยายสำหรับการซูม ไปจนถึง Pen tools สำหรับวาดเส้นโค้งต่างๆ ส่วนด้านขวาเป็นตัวเลือกเพิ่มเติม สำหรับปรับแต่งรายละเอียดของเครื่องมือ อย่างเช่น การเลือกฟอนต์ ขนาดเส้น หรือสีของวัตถุ

Adobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพ

ส่วนเครื่องมือหน้ากระดาษที่ยังไม่ได้กล่าวถึง (ใต้เครื่องมือ Type) เป็นเครื่องมือสร้างหน้า Artboard ใหม่ ที่ตัวโปรแกรมจะมีหน้าเทมเพลตสำเร็จรูปมาให้เลือก ที่ค่อนข้างจะครอบคลุมอุปกรณ์ในปัจจุบันอยู่พอสมควร ทั้งอุปกรณ์แอปเปิ้ลตั้งแต่ ไอโฟนยันแอปเปิ้ลวอช อุปกรณ์เซอร์เฟส หน้าเว็บขนาดต่างๆ ส่วนแอนดรอยด์ จะให้มีทุกรุ่นคงยากหน่อย ก็เลยมีแยกออกมาเป็นโมบาย แท็บเล็ตและแอนดรอยด์แวร์ ส่วนขนาดอื่นๆ ก็สามารถสร้างแบบกำหนดค่าเองได้

สไลด์รูปภาพ

 Adobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพAdobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพ

นอกจากเครื่องมือที่มีให้แล้ว แน่นอนว่าเราต้องสามารถแอดรูปถ่ายต่างๆ หรือรูปงานดีไซน์ที่เราทำไว้ เพิ่มลงในโปรแกรมได้ ด้วยวิธี Drag and Drop โดยเราจะสร้างกรอบขึ้นมาก่อน แล้วค่อยลากรูปลงไป หรือจะลากรูปมาก่อน แล้วค่อยปรับขนาดให้เข้ากับขนาดที่ต้องการ ก็ทำได้เช่นเดียวกัน

Adobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพ
ลากรูปใส่กรอบที่สร้างไว้ โปรแกรมจะจัดภาพให้พอดีกรอบอัตโนมัติ

Adobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพ
หรือจะลากมาลงดื้อๆ แล้วค่อยปรับขนาดทีหลังก็ได้เช่นกัน

วัตถุต่างๆ ที่ใช้ออกแบบ ถูกจัดลำดับด้วยรูปแบบ Layer เหมือนโปรแกรม Adobe อื่นๆ เราสามารถจัดลำดับการแสดงผลก่อน-หลังได้ หรือจะใช้หน้า Layer นี้ในการเลือกวัตถุที่ต้องการปรับแต่ง/แก้ไขได้

Adobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพ

Adobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพ
วัตถุแต่ละชิ้น ก็จะมีตัวเลือกด้านขวาให้ปรับแต่งต่างกัน แยกไปตามชนิด เช่น พวกตัวอักษรก็จะมีการปรับขนาดฟอนต์หรือรูปแบบฟอนต์เพิ่มเข้ามา

Adobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพ
ตัวโปรแกรมมีระบบ Smart grid ช่วยในการจัดวางองค์ประกอบต่างๆ ด้วย ทำงานงานดูเป็นระเบียบมากขึ้น  

Adobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพ
เครื่องมือสร้างกรอบสี่เหลี่ยมสามารถปรับให้เป็นมุมมนได้ง่ายๆ

Adobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพ
Pen Tools สามารถวาดเส้นโค้งได้เหมือนโปรแกรม Adobe อื่นๆ

Adobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพ
รูปที่วาดมาไม่สมส่วน ก็สามารถดัดให้สมบูรณ์ได้ด้วยจุดและก้านที่คุ้นเคย


Prototype

เมื่อเราดีไซน์หน้าทั้งหมดของแอพฯ หรือ เว็บไซต์เสร็จเรียบร้อย ก็จะมาต่อในแท็บที่สอง นั่นก็คือส่วนของ Prototype สิ่งที่เราต้องทำคือการเชื่อมโยงหน้าต่างๆ ที่สร้างขึ้นมาเข้าหากัน ทั้งการเซ็ตหน้าแรก (Home) การเชื่อมต่อจากปุ่มหรือหน้าต่างๆ ไปยังหน้าถัดไป โดยจะมีลูกศรให้เราลากไปยังหน้าต่างๆ ที่ดูแล้วเข้าใจง่าย

Adobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพ

เราสามารถลากเส้นเชื่อมจากหน้าสู่หน้าก็ได้ หรือจะสร้างปุ่ม/ใส่รูปต่างๆ แล้วลากเส้นเชื่อมจากปุ่มไปสู่หน้าต่างๆ ก็ได้เช่นกัน

Adobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพ

โดยการลากเชื่อมต่อแต่ละหน้า เราสามารถปรับเปลี่ยนทั้ง Trigger, Action และ Animation ได้

Adobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพ

ระหว่างการสร้าง Prototype เราสามารถเปิด Preview ลองคลิกลองใช้งานตัว Prototype ของเราได้ตลอดเวลา ผ่านไอคอน Play (Preview) ด้านขวาบน เพื่อจะได้ดูว่า ที่ทำไว้เวิร์คไหม ขาดตกอะไรหรือไม่ หรือควรจะปรับเปลี่ยนอะไรมั้ย? 

Adobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพ


Share

พอทุกอย่างสมบูรณ์แบบแล้ว เราสามารถแชร์ให้ผู้อื่นชมได้ 2 รูปแบบ ขึ้นอยู่กับจุดประสงค์การใช้งาน โดยแบ่งออกเป็น การแชร์แบบ Design Spec ที่จะบอกข้อมูลรายละเอียดของการดีไซน์ ให้ทีมงานได้ดูและคอมเม้นต์กัน และ Prototype ที่เป็นแม่แบบสำหรับการนำเสนอ ที่สามารถคลิกใช้งานได้ เหมือนกับการกด Preview ในโปรแกรม

เมื่อเราเลือกแชร์ Design Spec ก็จะสามารถเปิดผลงานผ่านลิ้งเว็บไซต์บนคลาวด์ โดยจะมีการบอกข้อมูลของการดีไซน์ทั้งหมด ไม่ว่าจะเป็นขนาดของ Artboard สีที่ใช้ รูปแบบฟอนต์ วัตถุต่างๆ ฯลฯ ซึ่งผู้ที่เข้ามาดู สามารถคอมเม้นต์ผ่านหน้าเว็บไซต์นี้ได้โดยตรง

สไลด์รูปภาพ

 Adobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพAdobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพAdobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพ

ส่วนการแชร์แบบ Prototype จะเป็นรูปแบบการสาธิตแม่แบบของแอพฯ ที่เราออกแบบ ที่สามารถลองกดใช้งานผ่านลิ้งเว็บไซต์ได้เลย และสามารถคอมเม้นต์ได้เช่นเดียวกับแบบ Design Spec

สไลด์รูปภาพ

 Adobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพAdobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพ

นอกจากการแชร์ผ่านหน้าเว็บ หรือไปแสดงผลบนมือถือแล้ว เราสามารถนำโค้ดฝัง (Embed) ไปฝังไว้ในหน้าเว็บที่เราต้องการ เพื่อลองใช้งาน Prototype ได้

Adobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพ
คัดลอกโค้ดตรงไอคอนนี้ ไปฝังไว้ในหน้าเว็บที่ต้องการ


ลองฝังโค้ดให้ดูกันในบทความ ดีไซน์จะแย่ๆ หน่อยนะ 555


Adobe XD CC เวอร์ชั่นฟรี ต่างกับเวอร์ชั่นเสียเงินอย่างไร?

เมื่อช่วงกลางปี 2018 ทาง Adobe ได้ปล่อย Adobe XD CC เวอร์ชั่นฟรีออกมาให้ใช้งานกันแบบไม่ใช่ Trailer ให้ใช้งานแบบจำกัดเวลา ก็คือใช้ได้เรื่อยๆ นั้นแหละ แต่ก็แน่นอนว่าของฟรีดีๆ ไม่มีในโลก ซึ่งใน Adobe XD CC เวอร์ชั่นฟรีนั้น จะถูกจำกัดการใช้งานหลายๆ อย่าง ดังนี้

 Free Starter Plan for Adobe XD

  • 1 active shared prototype
  • 1 active shared design spec
  • 2 GB cloud storage
  • Typekit Free (limited set of fonts)

 Paid Plans for Adobe XD

  • Unlimited prototypes
  • Unlimited design specs
  • 100 GB cloud storage
  • Typekit Portfolio (full library of fonts)

จากตารางด้านบนจะเห็นว่า ในเวอร์ชั่นฟรีนั้น รองรับการใช้งานเพียงแค่โปรเจคเดียวเท่านั้น ทั้งการจำกัด Design spec และ Prototype บนคลาวด์ได้เพียงแค่ 1 งานเท่านั้น รวมทั้งขนาดคลาวด์ที่จำกัดอีกด้วย ถ้าลองใช้เสนอแค่งานเดียว หรือใช้ชั่วคราวเวอร์ชั่นฟรี ก็ (อาจจะ) พอใช้อยู่บ้าง แต่ถ้าต้องใช้งานเป็นโปรแกรมหลักแล้วละก็ แนะนำให้ใช้เวอร์ชั่นเสียเงินดีกว่าครับ จะได้แชร์ต้นแบบแอพฯ ให้ลูกค้าดูได้หลายๆ แบบ แถมทำได้หลายโปรเจคด้วย อีกอย่างก็คือ มีฟอนต์จาก Typekit แพ็ค Portfolio ที่มีให้เลือกมากกว่า 7500 ฟอนต์ไว้ใช้งานอีกด้วย (Typekit Free มีประมาณ 950 ฟอนต์ แต่เชื่อสิ ยิ่งมีวัตถุดิบเยอะ ตัวเลือกก็ยิ่งเยอะกว่า)

Adobe XD CC สร้างแม่แบบดีไซน์แอพฯ หรือเว็บไซต์ เสนองานลูกค้า/ทีมได้อย่างมืออาชีพ
หากยังเป็นเวอร์ชั่นฟรี แล้วเราไป Publish ตัว Prototype อันที่ 2 เพิ่ม จะมีคำเตือนให้เปลี่ยน Plan ไม่งั้นก็ต้องไปลบ Prototype ตัวเก่าที่อยู่บนคลาวด์ซะก่อน


สรุป Adobe XD CC

เป็นโปรแกรมสร้างแม่แบบ Prototype ที่ใช้งานง่ายมาก ยิ่งใครที่ใช้โปรแกรมตระกูล Adobe กันเป็นประจำอยู่แล้ว เครื่องมือในโปรแกรมนี้ เรียกว่า ง่ายเสียยิ่งกว่าง่าย มีทั้ง Pentools ให้ใช้งาน มีทั้งระบบ Layers ที่คุ้นเคยกัน รวมทั้งการเซฟงานหรือแชร์งานผ่านคลาวด์ ก็ทำได้สะดวกสบาย แต่สำหรับเวอร์ชั่นฟรีนั้น หากต้องใช้งานจริงๆ การจำกัดเซฟ Prototype กับ Design Spec เพียงแค่อย่างละอัน ไม่พอใช้แน่นอน สำหรับใครที่คิดจะใช้งาน Adobe XD CC เป็นอีกหนึ่งโปรแกรมประจำละก็ ซื้อไว้ใช้งานได้เลย


 
0 %E0%B8%A3%E0%B8%B5%E0%B8%A7%E0%B8%B4%E0%B8%A7+Adobe+XD+CC+%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B9%81%E0%B8%A1%E0%B9%88%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B8%94%E0%B8%B5%E0%B9%84%E0%B8%8B%E0%B8%99%E0%B9%8C%E0%B9%81%E0%B8%AD%E0%B8%9E%E0%B8%AF+%E0%B8%AB%E0%B8%A3%E0%B8%B7%E0%B8%AD%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C+%E0%B9%80%E0%B8%AA%E0%B8%99%E0%B8%AD%E0%B8%87%E0%B8%B2%E0%B8%99%E0%B8%A5%E0%B8%B9%E0%B8%81%E0%B8%84%E0%B9%89%E0%B8%B2%2F%E0%B8%97%E0%B8%B5%E0%B8%A1%E0%B9%84%E0%B8%94%E0%B9%89%E0%B8%AD%E0%B8%A2%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B8%A1%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B2%E0%B8%8A%E0%B8%B5%E0%B8%9E
แบ่งปันหน้าเว็บนี้ผ่าน URL :
Keyword คำสำคัญ »
เขียนโดย
ระดับผู้ใช้ : Admin    Thaiware
รู้สึกเซ็งทุกที ที่ครูประถมแจกกระดาษฟูลสแก๊บให้ ก็เข้าใจมาตลอดว่า ตัวเองไม่ชอบเขียนเรียงความ แต่จริงๆ แล้วคือเราไม่ชอบการเขียนตัวหนังสือเต็มบรรทัด ..เท่านั้นเอง..
 
สั่งซื้อ
 
 
 

รีวิวที่เกี่ยวข้อง



 

Recommended for you

 

แสดงความคิดเห็น

 

แผนผังเว็บไซต์ (XML Sitemap)
Thaiware Communication Co.,Ltd.

Thaiware Communication Co.,Ltd.

Copyright 1999-2018 Thaiware.com All rights reserved.
E-Commerce Registration Number : 0108414736771
เลขประจำตัวผู้เสียภาษี / Tax ID : 010-554-707-3996