ในประเด็นที่น่าสนใจ: หลักการออกแบบ UI ที่มืด

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

นักฟิสิกส์กล่าวว่าสีดำไม่ใช่สีจริงๆ มันคือการขาดแสง ในการทดลองของเขาที่ส่องแสงแสงแดดผ่านปริซึม เซอร์ไอแซก นิวตันไม่ได้รวมมันไว้ในสเปกตรัมของสี

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

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

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

Dark UI กับ Light UI

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

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

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

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

ที่กล่าวว่ามีเหตุผลที่ดีหลายประการสำหรับการใช้ UI ที่มืด:

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

และมีบางสถานการณ์ที่ไม่แนะนำ:

• เมื่อมีข้อความจำนวนมาก (อ่านบนพื้นหลังสีเข้มยาก)
• เมื่อมีเนื้อหาผสมจำนวนมาก
• เมื่อการออกแบบต้องการสีสันที่หลากหลาย

ความคมชัดในการออกแบบ UI ที่มืด

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

ธีมสีเข้มของ Material Design ของ Google แนะนำให้ใช้ สีเทาเข้ม (#121212) เป็นสีพื้นผิวของธีมสีเข้ม “เพื่อแสดงระดับความสูงและพื้นที่ในสภาพแวดล้อมที่มีช่วงความลึกที่กว้างกว่า” นอกจากนี้ นักออกแบบหลายคนแนะนำให้เพิ่มโทนสีน้ำเงินเข้มที่ละเอียดอ่อนลงในสีเทาเข้มเมื่อกำหนดชุดสี มีแนวโน้มที่จะสร้างโทนสีเข้มที่ดีขึ้นสำหรับหน้าจอดิจิทัลและจานสี UI สีเข้มที่น่าพึงพอใจยิ่งขึ้น

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

ต้องให้ความสนใจเป็นพิเศษกับคอนทราสต์ของข้อความใน UI ที่มืด

แนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) เรียกร้องให้ "การนำเสนอข้อความด้วยภาพให้มีอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 " ยกเว้นข้อความขนาดใหญ่ ซึ่งควรมีอัตราส่วนคอนทราสต์อย่างน้อย 3:1 ดังนั้น นักออกแบบจึงต้องตรวจสอบให้แน่ใจว่าเนื้อหายังคงอ่านง่ายในโหมดมืด

ยังเป็นความคิดที่ดีที่จะทดสอบความเปรียบต่างที่เหมาะสมระหว่างองค์ประกอบ UI อื่นๆ เช่น การ์ด ปุ่ม ช่อง และไอคอนบนจอแสดงผลและอุปกรณ์ต่างๆ หากมีการแยกระหว่างองค์ประกอบ UI ที่มองไม่เห็น การออกแบบจะผสมผสานกันมากเกินไปและความเสี่ยงกลายเป็นเรื่องน่าเบื่อ

เน้นความสนใจ: สี

สีโดดเด่นใน UI ที่มืด เป็นการดีที่สุดที่จะใช้ชุดรูปแบบที่มีสีเน้นที่เบากว่าและไม่อิ่มตัว หลีกเลี่ยงการใช้สีที่อิ่มตัวใน UI ที่มืด เนื่องจากอาจทำให้มองเห็นได้สั่นสะเทือนบนพื้นผิวที่มืด ยิ่งไปกว่านั้น ตามแนวทางปฏิบัติที่ดีที่สุด สีจะต้องผ่านมาตรฐาน AA ของ WCAG อย่างน้อย 4.5:1 เมื่อใช้กับข้อความ

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

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

ข้อความและองค์ประกอบที่จำเป็น เช่น ปุ่มและไอคอน ควรเป็นไปตามมาตรฐานความชัดเจนเมื่อปรากฏบนพื้นหลังสีเข้ม ตามที่เห็นในแอพ Jabra Sound+ ด้านบน สีอื่นที่ไม่ใช่สีขาวสามารถใช้กับข้อความและไอคอนได้

ไซต์ดีไซน์ Material ของ Google มีโปรแกรมสร้างจานสีที่มีประโยชน์ (ใน "เครื่องมือสำหรับการเลือกสี") ซึ่งนักออกแบบสามารถสร้างและใช้จานสีกับ UI ได้ ระดับการช่วยสำหรับการเข้าถึงของการผสมสีสามารถวัดได้ด้วยเครื่องมือสีที่แสดงร่วม

“ใช้สีที่ตัดกันอย่างมากเพื่อปรับปรุงความสามารถในการอ่าน มีหลายปัจจัยที่ส่งผลต่อการรับรู้สี รวมถึงขนาดและน้ำหนักของแบบอักษร ความสว่างของสี ความละเอียดหน้าจอ และสภาพแสง” หลักเกณฑ์เกี่ยวกับอินเทอร์เฟซสำหรับมนุษย์ของ Apple

Less is More: ใช้ประโยชน์จากพื้นที่เชิงลบ

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

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

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

จัดแต่งทรงผมคำ: วิชาการพิมพ์

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

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

คำแนะนำ W3C AAA สำหรับข้อความขนาดปกติ (น้อยกว่า 18 จุดหากไม่เป็นตัวหนา) คือให้มีอัตราส่วนคอนทราสต์ อย่างน้อย 7:1 นอกจากนี้ยังนำไปใช้กับองค์ประกอบ UI อื่นๆ: ไอคอน รูปภาพของข้อความ และป้ายข้อความ เช่น ป้ายปุ่ม เป็นหน้าที่ของนักออกแบบที่จะต้องตรวจสอบให้แน่ใจว่าทุกคนสามารถเข้าถึงผลิตภัณฑ์ดิจิทัลทั้งหมดได้ ไม่เพียงแต่ปรับปรุงความสามารถในการใช้งาน ดังนั้น UX จึง เป็นกฎหมาย ในประเทศส่วนใหญ่

มีตัวเลือกมากมายสำหรับนักออกแบบในการจัดหาแบบอักษรที่ยอดเยี่ยมซึ่งทำงานได้ดีใน UI ที่มืด Google Fonts, Font Library และ Adobe Typekit เป็นผลิตภัณฑ์บางส่วนที่นำเสนอแอปหรือไซต์ที่ผสานรวมได้ง่าย และมีตัวเลือกมากมาย

ความลึกในการสื่อสาร: ระดับความสูง

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

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

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

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

แรงบันดาลใจในการออกแบบ UI ที่มืด

เมื่อพิจารณาถึงหลักการที่ร่างไว้ข้างต้น ต่อไปนี้คือตัวอย่างที่ยอดเยี่ยมของการออกแบบ UI ที่มืด:

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

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

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

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

สรุป

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

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

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

แจ้งให้เราทราบสิ่งที่คุณคิด! โปรดแสดงความคิดเห็น ความคิดเห็น และข้อเสนอแนะของคุณด้านล่าง

• • •

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

• UI ที่มืด ความดีและความชั่ว สิ่งที่ควรทำและไม่ควรทำ
• หลักการออกแบบและความสำคัญ
• สำรวจหลักการออกแบบของเกสตัลต์
• น่าสนใจและเคลื่อนไหว – A Guide to Motion Design Principles
• เพิ่ม UX ของคุณด้วยหลักการออกแบบการโต้ตอบที่ประสบความสำเร็จเหล่านี้