Skip to main content

สารจากผู้เขียน

เนื่องจากปัจจุบันเครื่องมือที่ใช้ในการออกแบบ UI นั้นมีการพัฒนาออกมามากมาย จนนักออกแบบเองก็เลือกไม่ถูกว่าควรจะเริ่มต้นกับเครื่องมือตัวไหนดี วันนี้อยากจะขอแนะนำเครื่องมือที่ใช้ในการออกแบบ UI ที่นิยมใช้กันในหมู่ Designer มาให้ทุกคนได้ศึกษากัน

เครื่องมือที่ใช้ในการออกแบบ UI

1.Sketch

image by Icon-Icons


SketchApp เป็นเจ้าพ่อแห่งเครื่องมือออกแบบทั้งหมด เครื่องมือสร้าง prototype ส่วนใหญ่ทำงานได้ดีกับ Sketch มีเครื่องมือที่ช่วยให้เราสามารถออกแบบได้รวดเร็วขึ้น โดยโปรแกรมสามารถทำงานกับหน้า Artboard จำนวนมากๆได้อย่างลื่นไหล และสามารถสร้างตัว Symbol ต่างๆ ไว้ใช้สำหรับทำเป็น UI Asset ที่สามารถนำมาใช้ซ้ำได้

สะดวกต่อการทำ Design System ได้อย่างเป็นระบบ โดยการทำงานยังรวดเร็ว และไฟล์งานก็ยังมีขนาดที่เล็ก รวมถึงยังมีเครื่องมือช่วยเหลือเพิ่มเติมอีกด้วย

สรุปข้อดีและข้อเสียของโปรแกรม Sketch

ข้อดี : เป็นเครื่องมือที่เป็นที่นิยมทำให้หาข้อมูลใน Comunity ได้ง่าย มีการอัพเดทเวอร์ชั่นอยู่เสมอ มี Resoure หรือ Plugin ให้เลือกใช้งานเยอะ 
ข้อเสีย : รองรับแค่ระบบปฏิบัติการ OS X บนเครื่อง MAC เท่านั้น, เสียค่าบริการ
เว็บไซต์ : https://www.sketchapp.com/

2.Figma

image by Figma


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

การแชร์งานจากตัว Design นั้น สามารถทำได้ง่ายๆเพียงแค่กดแชร์ผ่าน Figma ได้โดยตรงโดยไม่ต้องลงโปรแกรมหรือ Plug in อื่นๆเพิ่มเลย ทำให้มันใช้งานได้สะดวกเอามากๆ ทำให้นักออกแบบหลายคนเปลี่ยนใจจากการใช้งาน Sketch มาใช้ Figma กันมากขึ้น

สรุปข้อดีและข้อเสียของโปรแกรม Figma

ข้อดี : สามารถร่วมทำงานได้หลายคนผ่าน Cloud แบบ Realtime, ใช้งานได้ทุกแพลทฟอร์ม, มีให้ใช้งานได้ฟรี
ข้อเสีย : ไม่สามารถทำงาน Offline ได้อย่างเต็มที่ จำเป็นต้องต่อ Internet เพื่อใช้งาน, ยังไม่ค่อยมีเครื่องมือช่วยเหลือเพิ่มเติมแบบ Sketch
เว็บไซต์https://www.figma.com

3.Adobe XD

image by Icon-Icons


Adobe XD เป็นโปรแกรมออกแบบ UI น้องใหม่ ที่อยู่ในชุด Creative Cloud  จาก Adobe ที่ Designer คุ้นเคยกันเป็นอย่างดี และที่สำคัญยังสามารถติดตั้งและใช้งานได้ฟรีอีกด้วย แต่ตัวฟรีสามารถแชร์ Prototype, Design Spec ได้แค่ 1 โปรเจคเท่านั้น

ตัวโปรแกรม Adobe XD นั้นมีขนาดเบา ทำงานได้รวดเร็ว และยังสามารถทำ Animation ของตัว Prototype ได้อย่างสวยงาม สามารถแชร์งานให้กับผู้ร่วมงานได้ง่ายและสะดวก  ในตัวโปรแกรมเองมี UI Kit สวยๆให้ดาวน์โหลดมาเพื่อใช้งานกับโปรเจคมากมายอีกด้วย

สรุปข้อดีและข้อเสียของโปรแกรม Adobe XD

ข้อดี : พัฒนาเร็วมาก มี Template จาก Adobe ให้ Update ตลอดเวลา, มี Plug in ให้ใช้งานเยอะ, สามารถเซฟงานบน Cloud ได้
ข้อเสีย : เครื่องมือยังมี Bug บ้างในบางครั้งคราว
เว็บไซต์https://www.adobe.com/products/xd.htm

4.Invision

image by Invision

Invision เป็นเว็บไซต์ที่ช่วยในการออกแบบ UI (User Interface) อีกเว็บไซต์หนึ่ง โดยจุดเด่นของ Invision ค่อนข้างคล้าย Figma คือการทำงานบน Cloud และเน้นการทำงานแบบร่วมกันทำงานหลายคนได้
นอกจากนี้มันยังใช้ได้ดีกับ Sketch แล้วอีกด้วย

สรุปข้อดีและข้อเสียของโปรแกรม Invision

ข้อดี : ใช้งานและเก็บข้อมูลบน Cloud ได้
ข้อเสีย : ไม่มีโปรแกรมที่ใช้งานบนคอมพิวเตอร์ได้ (อาจจะต้องใช้งานบนเว็บไซต์อย่างเดียว)
เว็บไซต์ : https://www.invisionapp.com/

5.Proto.io

image by Proto.io

Proto.io เป็นหนึ่งใน Prototyping Tools ที่มีความน่าสนใจอยู่ไม่น้อย มี Component ให้ใช้งานได้หลากหลาย และสามารถเลือกธีมของ Component ได้ ไม่ว่าจะเป็น iOS, Android หรือ Material Design ก็มีให้ ถือว่ามี Component สำเร็จรูปมาก และมี Plug-in สำหรับ Photoshop, Sketch และ Dropbox เพื่อช่วยให้ Import ภาพเข้ามาใช้งานได้ง่ายขึ้น

สรุปข้อดีและข้อเสียของโปรแกรม Proto.io

ข้อดี : ใช้งานค่อนข้างง่าย, เครื่องมือหลากหลายและเหมือนจริง
ข้อเสีย : ไม่สามารถใช้งานแบบออฟไลน์ได้, ต้องใช้งานบนเว็บไซต์อย่างเดียว
เว็บไซต์ : https://proto.io/

สรุปใจความสำคัญ

หวังว่าทุกคนที่อ่านจบแล้วจะได้แนวทางในการเลือกเครื่องมือสำหรับออกแบบ UI ไปไม่มากก็น้อยนะคะ
ส่วนตัวผู้เขียนทุกวันนี้ใช้งาน Figma เป็นตัวหลักในการออกแบบ UI (User Interface) เพราะใช้งานง่าย เหมาะกับผู้เริ่มต้นในการออกแบบอีกด้วยค่ะ

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

References

  1. 5 สุดยอด! เครื่องมือที่ใช้ในการออกแบบ UI (User Interface), สืบค้นเมื่อ 27 ตุลาคม 2566
    จาก: https://medium.com/nerdbook-by-koonkritt/5-สุดยอด-เครื่องมือที่ใช้ในการออกแบบ-ui-user-interface-11ea47080d22
  2. Proto.io เครื่องมือออกแบบ UI ขั้นเทพ !!, สืบค้นเมื่อ 27 ตุลาคม 2566
    จาก: https://www.glurgeek.com/education/software-engineering/proto-io-เครื่องมือออกแบบ-ui-ขั้น/
  3. 3 สุดยอดเครื่องมือ ออกแบบ UI ที่ Designer ทั่วโลกนิยมใช้, สืบค้นเมื่อ 25 ตุลาคม 2566
    จาก: https://blog.clicknext.com/top-3-ui-design-tools/
  4. เครื่องมือที่ UX/UI Designer ไม่ควรพลาด Sketch, Figma, Adobe XD, สืบค้นเมื่อ 25 ตุลาคม 2566
    จาก: https://thegrowthmaster.com/software-review/sketch-figma-adobe-xd
Chutikan Prasert

Author Chutikan Prasert

Data Intelligence

More posts by Chutikan Prasert

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า