หลักในการออกแบบ UI

Graphic design ความรู้สำหรับ การออกแบบ ออกแบบเว็บ Phothoshop ตัดต่อวีดีโอ

Moderators: mindphp, ผู้ดูแลกระดาน

numtan5839
PHP Hero Member
PHP Hero Member
Posts: 170
Joined: 04/11/2019 10:18 am

หลักในการออกแบบ UI

Post by numtan5839 » 05/11/2019 3:33 pm

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

หลักในการออกแบบ UI ให้น่าใช้งาน

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

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

การเลือกใช้สี
ในการทำ UI นั้นไม่จำเป็นจะต้องใช้สีหลายสี เพราะอาจจะทำให้งานดูเลอะเทอะเกินไป เราอาจะใช้เพียง 2-3 สีก็พอแล้ว
บางบริษัท อาจมีสีที่สื่อถึงบริษัทอยู่แล้ว เราควรนำสีที่เป็นสัญลักษณ์ของบริษัทมาใช้เป็นสีหลักในการทำ UI ด้วยเช่นกัน
การทำแบบนี้จะทำให้เป็นที่จดจำของผู้ใช้งานได้ง่าย ตัวอย่างเช่น ธนาคารกสิกร สีเขียว , ธนาคารกรุงไทย เป็นสีฟ้า และธนาคารไทยพาณืช์ สีม่วง
จะเห็นได้ว่า Application ของพวกเขาเหล่านี้ จะมีสีของหน้า UI ตามสีของบริษัทเช่นกัน
https://mgronline.com/onlinesection/detail/9610000103639
https://mgronline.com/onlinesection/detail/9610000103639
ktb.png (50.35 KiB) Viewed 64 times
https://www.moneyandbanking.co.th/new/13904/13/%E0%B8%AA%E0%B8%A1%E0%B8%B1%E0%B8%84%E0%B8%A3%E0%B8%9A%E0%B8%B1%E0%B8%95%E0%B8%A3%E0%B9%80%E0%B8%94%E0%B8%9A%E0%B8%B4%E0%B8%95%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C%E0%B8%87%E0%B9%88%E0%B8%B2%E0%B8%A2%E0%B9%86-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-k-mobile-banking-p
https://www.moneyandbanking.co.th/new/13904/13/%E0%B8%AA%E0%B8%A1%E0%B8%B1%E0%B8%84%E0%B8%A3%E0%B8%9A%E0%B8%B1%E0%B8%95%E0%B8%A3%E0%B9%80%E0%B8%94%E0%B8%9A%E0%B8%B4%E0%B8%95%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C%E0%B8%87%E0%B9%88%E0%B8%B2%E0%B8%A2%E0%B9%86-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-k-mobile-banking-p
k.png (54.5 KiB) Viewed 64 times
https://www.scb.co.th/th/personal-banking/digital-banking/scb-easy/get-start.html
https://www.scb.co.th/th/personal-banking/digital-banking/scb-easy/get-start.html
sc.png (24.59 KiB) Viewed 64 times
ความเรียบง่าย
เราไม่จำเป็นต้องใส่ข้อความทุกอย่างลงไปในแอพของเรา สิ่งที่ไม่จำเป็นสามารถตัดออกได้ก็ควรตัดออก
เน้นความเรียบง่าย เพื่อให้ผู้ใช้สามารถใช้งานได้อย่างสบายตา

โปรแกรมที่ใช้ในการออกแบบ UI
ปัจจุบันมีโปรแกรมที่สามารถใช้ในการออกแบบ UI มากมาย ไม่ว่าจะเป็น AI , PS , Sketch , Adobe XD
ซึ่งสามารถทำได้ไม่ยาก หากเราวางแผนการทำงานตามหลักด้านบน เราก็จะสามารถได้ UI ที่สวยงามและน่าใช้งานแล้ว

แหล่งอ้างอิง
http://www.monmai.net/ux-ui/
https://www.designil.com/7-rules-beautiful-ui-design.html
sysadmin.psu.ac.th/2015/07/11/รวมเทคนิคการออกแบบ-ui-ให้/
https://www.wynnsoftstudio.com/7-ways-to-make-beautiful-UI-design
http://www.thaiprogrammer.org/2018/12/ui-vs-ux-อะไรคือความแตกต่างระห/

numtan5839
PHP Hero Member
PHP Hero Member
Posts: 170
Joined: 04/11/2019 10:18 am

Re: หลักในการออกแบบ UI

Post by numtan5839 » 06/11/2019 2:00 pm

สิ่งที่แก้ไข

- เพิ่มลิ้งค์ตอนเกริ่นนำ 3 ลิ้งค์
- เพิ่มแหล่งอ้างอิงเนื้อหา

Post Reply

Return to “Graphic design”

Who is online

Users browsing this forum: No registered users and 7 guests