ไม่มีทางหลีกเลี่ยง: สีเป็นองค์ประกอบสร้างสรรค์ที่มีผลกระทบมากที่สุดใน การออกแบบภาพ . ตั้งแต่ฉากหลังที่สวยงามน่าหลงใหลของการออกแบบฉากไปจนถึงการจัดองค์ประกอบภาพที่ซับซ้อนของงานศิลปะพิกเซลความเข้าใจสีอย่างชัดเจนคือกุญแจสำคัญในการสื่อสารที่น่าสนใจ ต้องการหลักฐาน?
เมื่อผู้เข้าร่วมในการศึกษาเกี่ยวกับแบรนด์เมื่อเร็ว ๆ นี้ถูกท้าทายให้วาดโลโก้ของ บริษัท สัญลักษณ์ 10 แห่งมีเพียง 16% เท่านั้นที่จำรูปทรงและคุณสมบัติการออกแบบที่ถูกต้องได้ อย่างไรก็ตามเมื่อถูกขอให้ระบุจานสีของแบรนด์จำนวนการตอบกลับที่ถูกต้อง ยิงได้ถึง 80% .
สียังเล่นไฟล์ บทบาทที่มีอิทธิพล ในโลกของการออกแบบส่วนต่อประสานผู้ใช้ ผลิตภัณฑ์ดิจิทัลที่เราโต้ตอบกันในแต่ละวันต้องอาศัยการใช้สีอย่างมีกลยุทธ์เพื่อสื่อสารข้อมูลสำคัญดังนั้นจึงเป็นเรื่องสำคัญ นักออกแบบ UX และ UI เข้าใจวิธีการใช้สีอย่างชาญฉลาด
ในคู่มือนี้เราจะ:
เป้าหมายของคู่มือนี้คือความสามารถด้านสีตามด้วยความมั่นใจในสีทั้งหมดนี้เพื่อประโยชน์ในการใช้สีที่น่าทึ่งในอินเทอร์เฟซผู้ใช้ที่เราพบอยู่ทุกวัน
ทฤษฎีสีเป็นสาขาการศึกษาที่กว้างขวางโดยมีคำศัพท์วิธีการและรากฐานทางวิทยาศาสตร์ของตัวเอง อาจเป็นเรื่องซับซ้อน แต่นั่นไม่ใช่สิ่งที่เราต้องการ สิ่งที่เราต้องการคือความเข้าใจในสีที่สามารถใช้กับความแม่นยำที่รวดเร็วปานสายฟ้า เราต้องการใช้สีในแบบที่เราใช้รูปทรงอย่างง่ายดายกล้าหาญและมีประสิทธิภาพ
ในการใช้สีด้วยวิธีนี้นักออกแบบ UI ต้องมีความเข้าใจอย่างมั่นคงเกี่ยวกับแนวคิดทฤษฎีสีหลักเหล่านี้:
มาดูกัน
สีไม่เคยโดดเด่น เมื่อตาและสมองของมนุษย์ทำงานร่วมกันเพื่อดูสีพวกเขามักจะได้รับอิทธิพลจาก:
ลองดูตัวอย่างนี้จากธรรมชาติ:
ถึง: สมองและตาทำงานร่วมกันเพื่อช่วยให้เราเข้าใจว่าดอกไม้โดยรวมมีสีแดงสดจริงๆ
B & C: สีน้ำตาลเข้มของเงาของดอกไม้ (B) ทำให้ไฮไลต์บนสันของกลีบดอกไม้ (C) ดูสว่างกว่าสีแดงเข้มที่เป็นจริงมาก โดยพื้นฐานแล้วแสงที่ส่องบนสันกลีบดอกไม้และสีของเงาจะทำงานควบคู่กันไปเพื่อหลอกตาและทำให้ไฮไลต์เข้มขึ้น
นี่คืออีกตัวอย่างหนึ่งที่แสดงให้เห็นว่าสีที่หลอกลวงมีได้อย่างไร:
ในการออกแบบ UI สัมพัทธภาพของสีไม่ได้ชัดเจนเสมอไปดังนั้นควรใช้สีภายในโครงร่าง ทดสอบกันเอง . ทำไม? เพราะการเลือกสีที่จัดไว้อย่างสวยงามใน คู่มือสไตล์ อาจกลายเป็นปัญหาเมื่อใช้กับอินเทอร์เฟซ
Takeaway ใหญ่? อย่าเข้ารหัสแนวคิดสีของคุณ หากแถบสีเหลืองที่เน้นเสียงดูเขียวชอุ่มเมื่อล้อมรอบด้วยช่องว่างใน Sketch แต่ขัดแย้งกับโทนสีที่โดดเด่นของ UI ให้หาวิธีแก้ปัญหาอื่น
ความอิ่มตัวของสีมีส่วนสำคัญต่อความสั่นสะเทือนของสี อย่างไรก็ตามรูปแบบที่ประกอบขึ้นโดยไม่มีอะไรเลยนอกจากสีที่อิ่มตัวสูงจะครอบงำดวงตาและความสั่นสะเทือนจะลดลง ด้วยสีน้อยมาก สีที่อิ่มตัวสูงจะสดใสเมื่อใช้ควบคู่กับสีที่อิ่มตัวน้อยลง
คอนทราสต์พร้อมกันเกิดขึ้นเมื่อการเติมสีของค่าเดียวกันทั้งหมดถูกวางไว้ติดกัน เอฟเฟกต์รุนแรงมากจนทำให้จุดที่ทั้งสองสีมาบรรจบกันสั่นหรือชีพจร
สำหรับนักออกแบบ UI คอนทราสต์พร้อมกันอาจมีผลลัพธ์ในเชิงบวกและเชิงลบดังนั้นจึงเป็นเรื่องสำคัญที่จะต้องเข้าใจวิธีควบคุมความแรงของปรากฏการณ์ภาพนี้
ตัวอย่างเช่นในอินเทอร์เฟซที่ออกแบบมาสำหรับบลูส์หลากหลายรูปแบบการใช้สีส้มเสริมที่มีค่าเดียวกับสีสมอสีน้ำเงินจะเป็นวิธีที่ดีในการดึงดูดความสนใจไปที่ไอคอนการแจ้งเตือน
อย่างไรก็ตามคำสั่งผสมสีส้มและสีน้ำเงินเดียวกันนั้นจะทำให้เกิดอาการไมเกรนหากใช้สำหรับข้อความและพื้นหลังของเมนูแบบเลื่อนลง
สายรุ้งมีความสวยงามตามธรรมชาติ ในการออกแบบ UI จะต้องใช้สีอย่างเลือกมากขึ้นไม่เช่นนั้นจะทำให้ประสบการณ์นั้นท่วมท้น แม้ว่าแบรนด์ต่างๆจะมีจานสีที่ให้ผลกระทบสูงพร้อมตัวเลือกมากมาย แต่คุณควรแสดงความยับยั้งชั่งใจและสร้างอินเทอร์เฟซผู้ใช้ด้วยโทนสีที่เรียบง่าย
แผนป้องกันการเข้าใจผิดสองแผนสำหรับการสร้างโครงร่างสี UI พื้นฐาน:
1. โครงร่างสี UI แบบอะนาล็อก
2. โครงร่างสี UI เสริม
อาจฟังดูแปลก แต่สีมีค่าสีเทาที่สอดคล้องกัน นี่คือหลักฐาน:
ในภาพด้านบนเรามีช่วงของเฉดสีที่ความสว่างและความอิ่มตัว 100% แต่ดูว่าจะเกิดอะไรขึ้นเมื่อสีเหล่านี้ถูกแปลงเป็นโทนสีเทา:
ตูม! ค่าสีเทาทั้งหมดจะถูกเปิดเผย เหตุใดสิ่งนี้จึงสำคัญสำหรับนักออกแบบ UI คำเดียว: ความคมชัด .
เปลี่ยนความคิดของคุณเป็นโทนสีเทาสักครู่ หากคุณต้องการสร้างคอนทราสต์คุณเคยใช้ค่าสีเทา 40% กับ 50% หรือไม่ ไม่แน่นอน แต่นี่คือสิ่งที่เสี่ยงเมื่อสีไม่อยู่ในสมการความคมชัดของสี
อย่าลืมว่าสีสันส่งผลต่อมูลค่าเสมอ
ตอนนี้เราได้ทำให้ทฤษฎีสีง่ายขึ้นและเชื่อมโยงแนวคิดหลักกับการออกแบบ UI แล้วก็ถึงเวลาพิจารณาสีของบทบาทในอินเทอร์เฟซดิจิทัลที่เน้นมากขึ้น นี่คือหลักการสี่สีที่ต้องพิจารณาตั้งแต่ความพยายามแรกสุดของทุกโครงการออกแบบ UI
สีมีผลต่อความสามารถในการอ่าน โดยหลักการแล้วนักออกแบบ UI ส่วนใหญ่เข้าใจสิ่งนี้ซึ่งเป็นสาเหตุที่เราไม่เห็นอินเทอร์เฟซมากมายที่มีข้อความเนื้อหาสีเขียวบนพื้นหลังสีแดง แต่ความตึงเครียดระหว่างข้อความและสีจะเกิดขึ้นอย่างละเอียดโดยกำลังคืบคลานเข้ามาในส่วนประกอบ UI ทั่วไปเช่นแบบฟอร์มปุ่มส่วนหัวและไอคอน
รักษาความสัมพันธ์ของข้อความ / สีให้ดีโดยปฏิบัติตามคำแนะนำง่ายๆเหล่านี้:
สีเป็นสิ่งที่สื่อความหมายได้ แต่ไม่สามารถเป็นองค์ประกอบการออกแบบเพียงอย่างเดียวที่ใช้เพื่อถ่ายทอดข้อมูลใน UI ได้ ทำไมจะไม่ล่ะ? เนื่องจากผู้ใช้เว็บบางคนมองว่าสีแตกต่างกัน (หรือไม่ได้เลย) จากประชากรส่วนใหญ่
ตัวอย่างเช่นผู้ที่มีอาการตาบอดสีอาจไม่สามารถบอกได้ว่าเมื่อใดที่ไอคอนผลิตภัณฑ์อยู่ในสถานะ 'กด' หากความแตกต่างเพียงอย่างเดียวในไอคอนคือการเปลี่ยนสี
นอกจากนี้บางคนมีปัญหาในการมองเห็นส่วนประกอบ UI ที่สำคัญซึ่งมีสีตัดกับพื้นหลังของอินเทอร์เฟซต่ำ เว็บไซต์เช่น มีสีสัน และ อัตราส่วนความคมชัด ช่วยให้นักออกแบบสามารถทดสอบช่วงของการจับคู่สีสำหรับคอนทราสต์ได้อย่างรวดเร็ว การเข้าถึง .
กวดวิชา powerpivot ทีละขั้นตอน
ใช่ความคมชัดของสีในการออกแบบ UI เป็นสิ่งสำคัญ วางแผนดำเนินการและได้รับประโยชน์จากมัน แต่อย่าคาดหวังว่าจะโบกมือให้เหมือนไม้กายสิทธิ์และแก้ไขการออกแบบที่ไม่ดี
ต้องไม่ละเลยรูปร่างพื้นที่ขนาดและองค์ประกอบการออกแบบอื่น ๆ ความคมชัดของสีสามารถทำให้ UI ที่น่ากลัวดูน่าสนใจ แต่จะไม่ช่วยแก้ไขประสบการณ์ของผู้ใช้ที่ไม่ดี
ลองนึกภาพแอปข่าวที่มีการตั้งค่าข้อความทุกรายการในตัวพิมพ์ใหญ่หรือไฟล์ เว็บไซต์อีคอมเมิร์ซ ออกแบบบนตารางภาพขนาด 9x9 ทั้งคู่คงจะแย่มาก!
นักออกแบบ UI ที่มีความเชี่ยวชาญใช้องค์ประกอบการออกแบบเช่นตัวอักษรและการทำซ้ำตามสัดส่วนเพื่อปรับปรุงลำดับชั้นของการออกแบบ สีสมควรได้รับการพิจารณาอย่างรอบคอบเช่นเดียวกัน ในการออกแบบ UI การใช้สีมากเกินไปจะทำให้การรับรู้ข้อมูลสับสน
นี่คือความจริงที่ไม่สะดวก: การออกแบบด้วยสีเป็นทักษะและต้องพัฒนาทักษะ นักออกแบบ UI ส่วนใหญ่มีความรู้สึกโดยกำเนิดว่าสีใดดูเข้ากันได้ดี (aka color taste) แต่สิ่งนี้ไม่ได้แปลเป็นแอปพลิเคชันเสมอไป
เพื่อให้เชี่ยวชาญสีอย่างแท้จริงและเห็นผลกระทบอย่างเต็มที่ต่อการออกแบบ UI นักออกแบบต้องฝึกฝน โชคดีที่มีแหล่งข้อมูลมากมายที่จะช่วยในการเรียนรู้สีและสร้างทักษะอย่างต่อเนื่อง
หากคุณเป็นนักออกแบบ UI ที่ต้องการเพิ่มความมั่นใจในสีทันทีให้เริ่มต้นด้วย ctrlpaint.com เว็บไซต์เฉพาะสำหรับการเรียนการสอนการวาดภาพดิจิทัล ภาพวาดดิจิตอล? จริงๆ?
อย่างแน่นอน Matt Kohr ศิลปินแนวความคิดมืออาชีพสอนการใช้สีดิจิทัลผ่านวิดีโอแนะนำสั้น ๆ และแบบฝึกหัดลงมือปฏิบัติ หลักสูตรนี้เรียบง่ายอย่างน่าอัศจรรย์และเน้นที่ 'การวาดภาพสิ่งที่คุณเห็น' ทั้งในโลกทางกายภาพและจินตนาการ
เริ่มต้นด้วย ห้องสมุดวิดีโอฟรี (ส่วนที่ 11) ก่อนที่จะย้ายไปยังแบบฝึกหัดที่เข้มข้นขึ้นใน ชุดเริ่มต้นสี .
ความเข้าใจร่วมสมัยเกี่ยวกับสัมพัทธภาพสีได้รับการสำรวจอย่างหนักและก้าวหน้าโดย การปฏิบัติ - ก่อน -ทฤษฎี แนวทางของศิลปิน / นักการศึกษา Josef Albers
Albers เสนอว่าสีเดียวสามารถมี 'หลายใบหน้า' และสนับสนุนการเล่นและการทดลองอย่างกว้างขวางในหมู่นักเรียนของเขาโดยหวังว่า 'ดวงตาจะถูกเปิด' เพื่อให้เห็นสีตามที่มีพฤติกรรมอย่างแท้จริงในโลกแห่งความเป็นจริง (ซึ่งตรงข้ามกับสีสัญลักษณ์ที่เราจินตนาการไว้ ในจิตใจของเรา).
ในปี 1963 Albers ประพันธ์ ปฏิสัมพันธ์ของสี หนังสือเรียนที่ยังคงมีอิทธิพลอย่างสูงต่อการศึกษาด้านศิลปะและการออกแบบของโลก เพื่อเป็นการเฉลิมฉลองครบรอบ 50 ปีของการตีพิมพ์หนังสือมหาวิทยาลัยเยลได้เปิดตัว แอพ iPad แบบโต้ตอบ ที่มีข้อความเต็ม แต่ยังช่วยให้ผู้ใช้สามารถเล่นและทดลองกับจานสีของ Albers ได้
สำหรับนักออกแบบ UI ไฟล์ ปฏิสัมพันธ์ของสี แอปให้โอกาสในการสัมผัสกับแบบฝึกหัดสีอะนาล็อกในสภาพแวดล้อมดิจิทัลและดูโดยตรงว่าสัมพัทธภาพสีมีผลต่ออินเทอร์เฟซผู้ใช้อย่างไร
ในช่วงครึ่งแรกของศตวรรษที่ 20 Andrew Loomis มีความโดดเด่น นักวาดภาพประกอบ และเป็นอาจารย์สอนที่ American Academy of Art ในชิคาโก แต่มรดกที่ยั่งยืนของเขาคือของผู้เขียน Loomis เขียนหนังสือ 6 เล่มเกี่ยวกับศิลปะเชิงพาณิชย์และการออกแบบและครอบคลุมหัวข้อต่างๆตั้งแต่การวาดรูปไปจนถึงการจัดวางผลิตภัณฑ์
ในหนังสือของเขา ภาพประกอบสร้างสรรค์ และ ตาของจิตรกร (ใช้ได้ทั้งบน archive.org ) Loomis ทิ้งไลน์ที่คงทนซึ่งยังคงเกี่ยวข้องกับการออกแบบ UI ยุคใหม่:
ความผิดพลาดที่ยิ่งใหญ่ที่สุดในเรื่องสีและสิ่งที่ทำให้ขาดความสามัคคีและความสามัคคีคือการมีสีมากเกินไปในจานสี
สองสีใด ๆ จะกลมกลืนกันเมื่อสีหนึ่งหรือทั้งสองสีมีสีอื่น ๆ
สียืมตัวเองไปทดลองมากกว่าองค์ประกอบอื่น ๆ ของความงาม
เมื่อบรรลุความสามารถด้านสีในระดับพื้นฐานแล้วการสร้างโทนสีจะเบ่งบานกลายเป็นสิ่งที่น่าหลงใหล ทุกอินเทอร์เฟซที่พบจะกลายเป็นโอกาสสำหรับการเรียนรู้และการวิพากษ์วิจารณ์และการสังเกตมีมากมาย
นี่เป็นขั้นตอนของการพัฒนาของนักออกแบบ UI เมื่อการอ้างอิงผลงานของนักออกแบบคนอื่น ๆ กลายเป็นการเพิ่มขีดความสามารถ ยังไง? เนื่องจากการอ้างอิงจะเปลี่ยนจากปลายทางไปสู่การเดินทางจากจุดสิ้นสุดไปจนถึงแรงบันดาลใจ
นักออกแบบ UI ทุกระดับความสามารถจะได้รับประโยชน์จากการเก็บบันทึกรูปแบบสี UI ที่พบอย่างต่อเนื่อง ถ่ายภาพหน้าจอเก็บบันทึกสีที่จับต้องได้เริ่มต้นกระดานอารมณ์ไม่ว่าจะทำอะไรก็ตามในการพิมพ์ช่วงเวลาแห่งการส่องสว่างสีเพื่อนำไปใช้ในอนาคต
เมื่อพูดถึงการออกแบบอินเทอร์เฟซดิจิทัลสีไม่ใช่สิ่งที่ต้องพิจารณาเพิ่มเติม แม้แต่ใน UI ที่ใช้สีน้อยที่สุด (หรือที่เป็นขาวดำทั้งหมด) นักออกแบบ UI จึงจำเป็นต้องเข้าใจ ทำไม สีเป็นหรือไม่ได้ใช้และ อย่างไร สิ่งนี้มีผลต่อประสบการณ์ของผู้ใช้
สิ่งสำคัญคือนักออกแบบ UI ต้องมีความสามารถในการสร้างและใช้โทนสีดั้งเดิม การอ้างอิงผลงานของนักออกแบบและผลิตภัณฑ์ดิจิทัลคนอื่น ๆ ถือเป็นแนวทางปฏิบัติที่คุ้มค่า แต่จะมีข้อ จำกัด เมื่อเป็นวิธีเดียวในการสำรวจสีที่ดำเนินการระหว่างขั้นตอนการออกแบบ มีคุณค่ามหาศาลในการจับคู่สีที่เห็นในโลกแห่งความจริงหรือสายตาของจิตใจ
หากคุณเป็นนักออกแบบที่มีปัญหาในการใช้สีอย่างชำนาญหรือเคยคิดว่า“ ฉันไม่มีความสามารถด้านสีจริงๆ” อย่าท้อแท้ การออกแบบด้วยสีไม่ใช่รูปแบบของเวทมนตร์ที่สร้างสรรค์หรือการให้ของขวัญแบบพิเศษ เป็นวินัยในทางปฏิบัติที่เกิดจากเทคนิคง่ายๆที่สามารถทำซ้ำและปรับปรุงได้
อย่าลืมว่าสีเป็นกุญแจสำคัญในการสื่อสารการออกแบบที่ชัดเจนและน่าสนใจ ไม่ว่าจะนำไปใช้ด้วยความระมัดระวังหรือละทิ้งโดยประมาทก็ส่งผลต่อ Conversion การรับรู้ถึงแบรนด์และประสบการณ์ของผู้ใช้ สำหรับนักออกแบบ UI สีเป็นเครื่องมือที่มีประสิทธิภาพที่ไม่อาจละเลยได้
•••
อ่านเพิ่มเติมในบล็อกการออกแบบ ApeeScape:
ในการออกแบบดิจิทัลจานสีคือช่วงของสีที่มีให้สำหรับนักออกแบบ อย่างไรก็ตามสีเหล่านี้ไม่จำเป็นต้องกลมกลืนกัน
โทนสีคือการเลือกสีที่จับคู่โดยเจตนาซึ่งมีความกลมกลืนกัน โดยทั่วไปโครงร่างสีจะประกอบขึ้นตามความสัมพันธ์เชิงตรรกะที่แนะนำโดยวงล้อสี
อินเทอร์เฟซผู้ใช้ช่วยให้มนุษย์สามารถโต้ตอบกับคอมพิวเตอร์ได้ การโต้ตอบซึ่งมักจะเป็นภาพสามารถเกิดขึ้นได้ผ่านอุปกรณ์หลายประเภทเช่นหน้าจอสัมผัสมือถือแป้นพิมพ์หรือแผงควบคุม