การใช้สี ในงาน UI

สารจากนักเขียน

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

เขียนโดย

โศจิรัตน์ เพชรไพบูลย์

บทความนี้ตีพิมพ์ และ เผยแพร่เมื่อ 29 พฤศจิกายน 2023

Share Tweet

ประเภทของสี

1. Primary Colors

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

2. Secondary Colors

สีรอง เกิดจากการผสมสีพื้นฐานเข้าด้วยกัน สีรองที่สำคัญคือสีม่วง, สีส้ม, และสีเขียว. สีรองสามารถใช้ในการเน้นหรือแสดงข้อมูลในออกแบบและสร้างความหลากหลายในการใช้สีได้

3. Neutrals Colors

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

ที่มา https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/ โดย Cameron Chapman

หลักการใช้สีในงาน UI

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

1. Consistency : ความสม่ำเสมอ

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

2. Distinct : ความแตกต่าง 

ใช้สีเพื่อสร้างความแตกต่างข้อมูล เพื่อให้ผู้ใช้งานเข้าใจการทำงานของปุ่มต่าง ๆ

ที่มา https://www.sphinx-solution.com/blog/types-of-ux-buttons-and-best-design-practices/

3. Intentional : ความจงใจ

ใช้ชุดสีในการสื่อความหมาย และเชื่อมโยงความสัมพันธ์ขององค์ประกอบต่าง ๆ เพื่อให้เกิดปฏิสัมพันธ์กับผู้ใช้งาน

ที่มา https://www.sphinx-solution.com/blog/types-of-ux-buttons-and-best-design-practices/ โดย Anand Mahajan

4. Contrast : คอนทราสต์

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

ที่มา https://axesslab.com/top-color-contrast-checkers/ โดย Hampus Sethfors

5. Hierarchical : ลำดับชั้น

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

6. Legible : ชัดเจน

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

ที่มา https://m2.material.io/design/color/the-color-system.html

7. Color Accessibility : ความสามารถในการเข้าถึงของสี

การใช้สีในงานออกแบบ ต้องคำนึงถึงผู้ใช้งาน ซึ่งผู้ใช้อาจจะมีความสามารถในการแยกสีที่แตกต่างกัน ดังนั้นการในการออกแบบ ควรทดสอบสีกับผู้ใช้งาน และปรับปรุงการใช้สีตามความต้องการของผู้ใช้.

ที่มา https://venngage.com/blog/accessible-colors/ โดย Jessie Strongitharm

สรุป

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

อ้างอิง

1. Color Theory for Designers, Part 1: The Meaning of Color สืบค้นเมื่อ 14 ตุลาคม 2566 จาก https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/
2. The color system สืบค้นเมื่อ 14 ตุลาคม 2566 จาก https://m2.material.io/design/color/the-color-system.html
3. 8 important color rules for UI Design สืบค้นเมื่อ 16 ตุลาคม 2566 จาก https://digitalsynopsis.com/design/ui-design-color-rules/
4. [UI Design] สีกับ UI Design มากกว่าความสวยงามคือการใช้งาน Part 2 สืบค้นเมื่อ 16 ตุลาคม 2566 จาก https://medium.com/@4namikaze.minato4/applycolortouidesign-25e47a633146