สเปกตรัมของความเป็นไปได้: The Go-to UI Color Guide

เผยแพร่แล้ว: 2022-03-11

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

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

สียังมีบทบาทสำคัญในโลกของการออกแบบส่วนต่อประสานกับผู้ใช้ ผลิตภัณฑ์ดิจิทัลที่เราโต้ตอบด้วยทุกวันขึ้นอยู่กับการใช้สีอย่างมีกลยุทธ์ในการสื่อสารข้อมูลสำคัญ ดังนั้นจึงเป็นเรื่องสำคัญที่นักออกแบบ UX และ UI จะต้องเข้าใจวิธีการใช้สีอย่างชาญฉลาด

ในคู่มือนี้ เราจะ:

  • ทำความเข้าใจพื้นฐานของทฤษฎีสี
  • ให้หลักการที่มั่นคงในการทำงานกับสีในส่วนต่อประสานดิจิทัล
  • แบ่งปันแหล่งข้อมูลที่เป็นประโยชน์สำหรับการสร้างการรับรู้สีและ
  • ส่งเสริมให้นักออกแบบ UI สร้างชุดสีที่โดดเด่นของตนเอง

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

จานสี UI สามารถเป็นสีรุ้งได้

Crash Course: ทฤษฎีสีสำหรับนักออกแบบ UI

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

ในการใช้สีในลักษณะนี้ นักออกแบบ UI ต้องมีความเข้าใจอย่างถ่องแท้เกี่ยวกับแนวคิดทฤษฎีสีหลักเหล่านี้:

  • สีเป็นญาติ
  • ความอิ่มตัวเกินพิกัดจะฆ่าความสั่นสะเทือนของสี
  • คอนทราสต์พร้อมกันมีทั้งข้อดีและข้อเสีย
  • โทนสีพื้นฐานดีที่สุด
  • ฮิวมีผลกระทบต่อมูลค่าเสมอ

มาขุดกันเถอะ

สีเป็นญาติ

สีไม่เคยยืนอยู่คนเดียว เนื่องจากดวงตาและสมองของมนุษย์ทำงานร่วมกันเพื่อดูสี สิ่งเหล่านี้มักได้รับอิทธิพลจาก:

  • แสงที่ส่องประกายบนสี
  • สีอื่นๆ รอบสี

ดูตัวอย่างจากธรรมชาติ:

สัมพัทธภาพสีในการออกแบบ UI และธรรมชาติ
การสังเกตเงาและไฮไลท์ในธรรมชาติเป็นวิธีที่ง่ายในการดูสัมพัทธภาพสีในที่ทำงาน

ตอบ: สมองและดวงตาทำงานร่วมกันเพื่อช่วยให้เราเข้าใจว่าดอกไม้โดยรวมนั้นเป็นสีแดงสด

B & C: สีน้ำตาลเข้มของเงาของดอกไม้ (B) ทำให้ไฮไลท์บนสันกลีบของกลีบดอกไม้ (C) ดูสว่างกว่าสีน้ำตาลแดงทึบๆ ที่เป็นจริง โดยพื้นฐานแล้ว แสงที่ส่องบนสันกลีบของกลีบดอกไม้และสีของเงาจะทำงานควบคู่กันไปเพื่อหลอกตาและเน้นที่ไฮไลท์

นี่เป็นอีกตัวอย่างหนึ่งที่แสดงให้เห็นว่าสีที่หลอกลวงสามารถเป็นอย่างไร:

ทฤษฎีสัมพัทธภาพสีและการออกแบบส่วนต่อประสานกับผู้ใช้
กล่องภายในทั้งสองกล่องมีสี ความอิ่มตัว และความสว่างเหมือนกัน อย่างไรก็ตาม กล่องภายในด้านซ้ายดูเหมือนจะเข้มกว่ากล่องด้านขวา เนื่องจากสีโดยรอบจะสว่างกว่า

ในการออกแบบ UI ทฤษฎีสัมพัทธภาพสีอาจไม่ชัดเจนเสมอไป ดังนั้นควรทดสอบสีภายในแบบแผนเปรียบเทียบกัน ทำไม? เนื่องจากการเลือกสีที่จัดเรียงอย่างสวยงามในคู่มือสไตล์ของคุณอาจกลายเป็นปัญหาเมื่อใช้กับอินเทอร์เฟซ

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

Takeaway ใหญ่? อย่าประนีประนอมกับแนวคิดเรื่องสีของคุณ หากตัวอย่างสีเหลืองเน้นสีดูเขียวชอุ่มเมื่อล้อมรอบด้วยช่องว่างใน Sketch แต่ขัดแย้งกับรูปแบบสีที่โดดเด่นของ UI ให้ค้นหาวิธีแก้ไขปัญหาอื่น

ความอิ่มตัวของสีเกินจะฆ่าความสั่นสะเทือนของสี

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

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

ความคมชัดพร้อมกันมีข้อดีและข้อเสีย

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

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

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

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

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

คอนทราสต์พร้อมกันในการออกแบบ UI ที่ทันสมัย: จานสี UI ที่ไม่ดี
คอนทราสต์พร้อมกันไม่เหมาะสำหรับการตัดสินใจออกแบบ UI ทุกครั้ง โดยเฉพาะอย่างยิ่งเมื่อเกี่ยวข้องกับข้อความ

โครงร่างสีพื้นฐานดีที่สุด

สายรุ้งนั้นสวยงาม—ในธรรมชาติ ในการออกแบบ UI ต้องใช้สีอย่างเลือกสรรมากกว่า มิฉะนั้นจะทำให้เสียประสบการณ์ แม้ว่าแบรนด์ต่างๆ จะมีจานสีที่มีผลกระทบสูงพร้อมตัวเลือกมากมาย วิธีที่ดีที่สุดคือแสดงความยับยั้งชั่งใจและสร้างอินเทอร์เฟซผู้ใช้รอบโทนสีที่เรียบง่าย

ต่อไปนี้คือแผนที่เข้าใจผิดสองแผนสำหรับการสร้างชุดสี UI พื้นฐาน:

1. โครงร่างสี UI ที่คล้ายคลึงกัน

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

การออกแบบ UI สีคล้ายคลึงกัน
เป็นเรื่องง่ายที่จะสร้าง "อารมณ์ภาพ" ในรูปแบบที่คล้ายคลึงกันโดยการเลือกระหว่างสีที่อบอุ่นและเย็นและการทดลองกับความอิ่มตัว

2. ชุดรูปแบบสี UI เสริม

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

สีการออกแบบ UI เสริม
สีแดงและสีเขียวเป็นสีที่เสริมกัน และตัวเลือกของตัวแปรที่มีความอิ่มตัวน้อยกว่าจะผูกโครงร่างเข้าด้วยกัน

ฮิวส่งผลกระทบต่อมูลค่าเสมอ

อาจฟังดูแปลก แต่สีมีค่าสีเทาที่สอดคล้องกัน นี่คือหลักฐาน:

การออกแบบ UI ทฤษฎีสี

ในภาพด้านบน เรามีช่วงของเฉดสีที่ความสว่างและความอิ่มตัว 100% แต่ดูว่าเกิดอะไรขึ้นเมื่อสีเหล่านี้ถูกแปลงเป็นโทนสีเทา:

สีที่แปลงเป็นการออกแบบ UI ระดับสีเทา
แม้ว่าสีในแถวบนสุดจะมีความสว่างและความอิ่มตัว 100% แต่ค่าระดับสีเทาที่สอดคล้องกันจะแตกต่างกันอย่างมาก

บูม! ค่าสีเทาทั้งหมดจะถูกเปิดเผย เหตุใดจึงสำคัญสำหรับนักออกแบบ UI หนึ่งคำ: ความคมชัด

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

โปรดจำไว้ว่า สีสันส่งผลต่อมูลค่าเสมอ

ต้องการนักออกแบบ UI อิสระที่ทำงานเต็มเวลาในสหรัฐอเมริกา

4 หลักการสีที่จำเป็นสำหรับอินเทอร์เฟซดิจิตอล

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

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

ความสัมพันธ์ระหว่างข้อความและสีเป็นสิ่งสำคัญ

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

รักษาความสัมพันธ์ของข้อความ/สีที่ดีต่อสุขภาพโดยปฏิบัติตามหลักเกณฑ์ง่ายๆ เหล่านี้:

  • หลีกเลี่ยงคอนทราสต์ต่ำระหว่างข้อความและพื้นหลังเสมอ
  • อย่าใช้สีเสริมสำหรับข้อความและพื้นหลัง โดยเฉพาะอย่างยิ่งเมื่อสีมีความสว่างและความอิ่มตัวใกล้เคียงกัน (เช่น ข้อความสีเหลืองบนพื้นหลังสีม่วง)
  • แม้แต่บนพื้นหลังสีขาว อย่าตั้งค่าข้อความเนื้อหาเป็นสีสดใส สีดำและสีเทาเข้มอ่านง่ายที่สุด

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

การเข้าถึงสีไม่สามารถละเลยได้

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

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

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

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

คอนทราสต์เป็นสิ่งสำคัญแต่ไม่ใช่การออกแบบให้หายขาด

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

รูปร่าง พื้นที่ ขนาด และองค์ประกอบการออกแบบอื่นๆ ต้องไม่ถูกละเลย คอนทราสต์ของสีสามารถทำให้ UI ดูน่าดึงดูด แต่ไม่สามารถแก้ไขประสบการณ์ผู้ใช้ที่ไม่ดีได้

สีทำงานได้ดีที่สุดเมื่อใช้ตามสัดส่วน

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

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

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

ทรัพยากรสีเพื่อความก้าวหน้าต่อไป

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

หากต้องการเชี่ยวชาญด้านสีอย่างแท้จริงและเห็นผลกระทบอย่างเต็มที่ต่อการออกแบบ UI นักออกแบบต้องฝึกฝน โชคดีที่มีแหล่งข้อมูลมากมายที่ช่วยในการเรียนรู้สีและสร้างทักษะอย่างต่อเนื่อง

Ctrl+Paint

หากคุณเป็นนักออกแบบ UI ที่ต้องการเพิ่มความมั่นใจให้กับสีในทันที ให้เริ่มที่ ctrlpaint.com ซึ่งเป็นเว็บไซต์ที่เน้นการสอนการวาดภาพดิจิทัลโดยเฉพาะ การวาดภาพดิจิตอล? จริงๆ?

อย่างแน่นอน. Matt Kohr ศิลปินแนวคอนเซ็ปมืออาชีพสอนการใช้สีดิจิทัลผ่านวิดีโอแนะนำสั้นๆ และแบบฝึกหัดภาคปฏิบัติ หลักสูตรนี้เรียบง่ายอย่างน่าอัศจรรย์และเน้นที่ "การวาดภาพในสิ่งที่คุณเห็น" ทั้งในโลกแห่งความเป็นจริงและในจินตนาการ

เริ่มต้นด้วยไลบรารีวิดีโอฟรี (ส่วนที่ 11) ก่อนทำแบบฝึกหัดที่เข้มข้นยิ่งขึ้นใน Color Starter Kit

แบบฝึกหัดทฤษฎีสีดิจิทัล
ภาพวาดแนวคิดดิจิทัลของ Matt Kohr แสดงให้เห็นถึงความเชี่ยวชาญในทฤษฎีสี และวิดีโอแนะนำของเขานั้นสนุกและน่าติดตาม

Josef Albers และการโต้ตอบของแอปสี

ความเข้าใจร่วมสมัยเกี่ยวกับสัมพัทธภาพสีได้รับการสำรวจและก้าวหน้าอย่างมากโดย วิธีปฏิบัติ ก่อน ทฤษฎี ของ Josef Albers ศิลปิน/นักการศึกษา

Albers เสนอว่าสีเดียวสามารถมี "หลายหน้า" และสนับสนุนการเล่นและการทดลองอย่างกว้างขวางในหมู่นักเรียนของเขาโดยหวังว่า "ตาจะเปิดขึ้น" เพื่อดูสีตามจริงในโลกแห่งความเป็นจริง (ตรงข้ามกับสีสัญลักษณ์ที่เราจินตนาการ ในใจเรา)

ในปี 1963 Albers ได้ประพันธ์ Interaction of Color ซึ่งเป็นหนังสือเรียนที่ยังคงมีอิทธิพลอย่างมากต่อการศึกษาศิลปะและการออกแบบของโลก เพื่อเป็นการเฉลิมฉลองครบรอบ 50 ปีของการตีพิมพ์หนังสือ มหาวิทยาลัยเยลได้เปิดตัวแอพ iPad แบบโต้ตอบที่มีข้อความเต็ม แต่ยังให้ผู้ใช้เล่นและทดลองกับจานสีของ Albers

แอพโครงร่างสีการออกแบบ UI
หนึ่งในวิธีที่ดีที่สุดในการทำงานกับสีให้ดีขึ้นคือการทดลอง แอพ Interaction of Color เป็นวิธีที่ง่ายและใช้งานง่ายสำหรับนักออกแบบ UI ในการสร้างจานสีที่กำหนดเองและดูว่าสีสัมพันธ์กันอย่างไร

สำหรับนักออกแบบ UI แอพ Interaction of Color เปิดโอกาสให้ได้สัมผัสกับแบบฝึกหัดสีแบบแอนะล็อกในสภาพแวดล้อมดิจิทัล และเห็นโดยตรงว่าสัมพัทธภาพสีส่งผลต่ออินเทอร์เฟซผู้ใช้อย่างไร

แอนดรูว์ ลูมิส

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

สีการออกแบบ UI จากการวาดภาพแบบดั้งเดิม
แม้ว่าในตอนแรกจะเขียนขึ้นสำหรับจิตรกรและนักวาดภาพประกอบ แต่หนังสือ Creative Illustration ของ Andrew Loomis ก็นำเสนอข้อมูลเชิงลึกเกี่ยวกับสีที่ใช้งานได้จริง ซึ่งนักออกแบบ UI สามารถวางใจได้เมื่อออกแบบอินเทอร์เฟซ

ในหนังสือของเขา Creative Illustration และ Eye of the Painter (มีอยู่ใน archive.org) Loomis ได้ทิ้งบรรทัดที่ยืนยงจำนวนหนึ่งซึ่งยังคงเกี่ยวข้องกับการออกแบบ UI สมัยใหม่:

ความผิดพลาดครั้งใหญ่ที่สุดในด้านสี และสิ่งที่ทำให้เกิดการขาดความสามัคคีและความกลมกลืน คือการมีสีบนจานสีมากเกินไป

สองสีใด ๆ จะกลมกลืนกันเมื่อหนึ่งหรือทั้งสองประกอบด้วยสีอื่น

สีให้ยืมตัวเองเพื่อการทดลองมากกว่าองค์ประกอบอื่น ๆ ของความงาม

อินเทอร์เฟซของนักออกแบบอื่น ๆ

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

นี่คือขั้นตอนของการพัฒนานักออกแบบ UI เมื่ออ้างอิงถึงงานของนักออกแบบคนอื่นๆ ได้อย่างไร? เพราะการอ้างอิงจะย้ายจากจุดหมายสู่การเดินทาง จากปลายทางสู่แรงบันดาลใจ

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

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

สีมีความสำคัญเกินกว่าจะละเลย

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

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

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

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

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

  1. บทบาทของสีใน UX
  2. การสร้างคู่มือสไตล์ UI เพื่อ UX . ที่ดีขึ้น
  3. UX และความสำคัญของการเข้าถึงเว็บ
  4. ศิลปะกับการออกแบบ – การอภิปรายที่ไม่มีวันตกยุค
  5. การออกแบบสำหรับสภาพแวดล้อมแบบโต้ตอบและ Smart Spaces