5 สุดยอด! เครื่องมือที่ใช้ในการออกแบบ UI (User Interface)

Krit Chainoi
Koonkritt’s Notebook.
2 min readFeb 23, 2019

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

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

เรามักจะเรียกการออกแบบนี้ว่า “UI (User Interface)”

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

เครื่องมือที่ใช้ในการออกแบบ UX/UI (User Experience & User Interface)

1.Sketch App

เจ้า Sketch เป็นโปรแกรมที่ใช้ในการออกแบบ UI (User Interface) ที่ช่วยมีเครื่องมือช่วยให้เราสามารถออกแบบได้รวดเร็วขึ้น โดยสามารถสร้าง Art board ได้มากมาย โดยการทำงานยังรวดเร็ว และไฟล์งานก็ยังมีขนาดที่เล็ก รวมถึงยังมีเครื่องมือช่วยเหลือเพิ่มเติมอีกด้วย

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

2.Figma

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

ข้อดี : สามารถร่วมทำงานได้หลายคน, เก็บไฟล์ขึ้นบน Cloud ไม่ต้องกลัวหาย, ใช้งานฟรี, ดูโค๊ดการจัดวางตำแหน่ง CSS, Android และ iOS, สามารถให้ผู้ใช้งานอื่นๆ คอมเมนต์งานได้แบบ Realtime ได้เลย
ข้อเสีย : ยังไม่ค่อยมีเครื่องมือช่วยเหลือเพิ่มเติมแบบ Sketch
เว็บไซต์ : https://www.figma.com

3.Adobe XD

Adobe XD น้องใหม่ของค่าย Adobe ซึ่งถึงพัฒนาเพื่อตอบโจทย์ของการทำ UI (User Interface) โดย Adobe ก็พยายามที่จะพัฒนาเพื่อให้ตอบโจทย์นักออกแบบ UI มากขึ้น

ข้อดี : พัฒนาเร็วมาก, สามารถใช้งานบน Cloud ได้ (บันทึกงานไว้บน Cloud Adobe), ใช้งานง่าย
ข้อเสีย : เปิดให้ใช้งานได้ฟรี แต่อาจจะจำกัดบ้างส่วนเสริมไว้
เว็บไซต์ : https://www.adobe.com/products/xd.html

4.Invision

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

5.Proto.io

Proto.io เป็นอีกหนึ่งเว็บไซต์แอปพลิเคชันที่สามารถออกแบบ UI (User Interface) ได้โดยมีเครื่องมือให้เลือกใช้งานหลากหลาย

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

เป็นไงบ้างทุกคน คงจะได้เครื่องมือในการออกแบบ UI (User Interface) ไปบ้างแล้ว

ส่วนตัวทุกวันนี้ใช้งาน Figma เป็นตัวหลักในการออกแบบ UI (User Interface) เพราะต้องทำงานร่วมกับพี่ๆ คนอื่นๆ ในทีม และยังต้องทำงานร่วมกับฝ่ายอื่นๆ ในองค์กรอีก

สุดท้ายนี้ผมหวังว่าทุกคน คงจะได้เครื่องมือไปใช้งาน และสร้างสรรค์ UI (User Interface) ให้สวยงาน และใช้งานง่าย กันทุกคนนะครับ บาย….

ติดตามสาระความรู้ใหม่ได้ที่ Facebook Page : Koonkritt

--

--