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

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

สีปุ่มสื่อแบรนด์

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

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

Blue

• ความน่าเชื่อถือ / ความแข็งแรง

Pink

• วัยรุ่น / ความตื่นเต้น

Green

• ความสงบ / สุขภาพ

Purple

• ความสร้างสรรค์ / จิตนาการ

Orange

• ความเป็นมิตร / ความร่าเริง

Brown

• ธรรมชาติ / ความสบาย

Yellow

• การมองโลกในแง่ดี / ความชัดเจน

Black

• ความสมดุล / ความน่าเชื่อถือ

พาเลตสีคุมโทนเว็บ

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

สีสื่ออารมณ์แทน Action

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

สีเข้มเน้นจุดสำคัญ

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

ใช้สีโทน Neutral

การใช้ Neutral Color หรือการใช้โทนสีอ่อนและสีเข้มกับสี Opacity Shades สามารถทำได้ง่าย ๆ โดยการเอาสีตั้งต้นมาจากนั้นค่อยไล่เพิ่มความเข้มอ่อนเข้าไป ก็จะได้สีในเฉดเดียวกัน แต่ต่างกันตรงที่ความเข้มอ่อน เพื่อเพิ่มมิติของงาน โดยที่ยังคุมอยู่ในโทนเดียวกัน

ปรับ Contrast ให้เห็นความต่าง

ก่อนอื่นต้องมั่นใจว่า Visual ต่าง ๆ ทั้ง สี และตัวหนังสือ ไปในทิศทางเดียวกัน เพื่อให้อ่านง่าย นอกจากนี้อีกหนึ่งทริกในการนำเสนอให้เห็นความแตกต่างของข้อมูล คือ การปรับ Contrast เพื่อนำเสนอให้เห็นความแตกต่างของข้อมูล สามารถทำได้แต่จำเป็นต้องอยู่ในระดับ AA ที่ Contrast Ratio ควรจะอยู่ที่ 4:5:1 เพื่อให้ยังง่ายต่อการอ่าน

คำนึงถึงคนตาบอดสี

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

อ้างอิง: DIGITAL SYNOPSIS