UIs สีเข้มนั้นน่าทึ่งมีสไตล์และสง่างาม อย่างไรก็ตามนักออกแบบควรระมัดระวังหากเลือกเดินบน“ ด้านมืด”

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

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

การศึกษาส่วนใหญ่แสดงให้เห็นว่าข้อความสีเข้มบนพื้นหลังสีอ่อนนั้นดีกว่าข้อความสีอ่อนบนพื้นหลังสีเข้มนั่นคืออ่านง่ายกว่า ในการศึกษาที่มีชื่อเสียงชิ้นหนึ่ง 'ความเมื่อยล้าของภาพ' มีมากกว่าอย่างมีนัยสำคัญเมื่อวัตถุอ่านอักขระสีอ่อนบนพื้นหลังสีเข้มเทียบกับอักขระสีเข้มบนพื้นหลังสีอ่อน ( Bauer, D. , Bonacker, M. , และ Cavonius, C. R. 1983 ).

นอกจากนี้ยังมีไฟล์ ความคาดหวัง : ผู้คนคุ้นเคยกับการดูเนื้อหาต่างๆที่แสดงด้วยหมึกสีเข้มบนพื้นหลังสีขาวที่นำเสนอพร้อมกับรูปภาพ ลองนึกถึงหนังสือพิมพ์และนิตยสารซึ่งมีมานานกว่า 350 ปี ย้อนกลับไปไกลกว่านั้น - สามสิบห้า พัน หลายปีถึงยุค Paleolithic (สมัยมนุษย์ถ้ำ) เราพบภาพวาดสิงโตและช้างแมมมอ ธ ในถ้ำโดยทั่วไปวางอยู่บนพื้นสีอ่อนที่มีถ่านหรือกระดูกที่ถูกเผาซึ่งใช้ในการวาดภาพ

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

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

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

มีแม้กระทั่งสิ่งต่างๆเช่น Computer Vision Syndrome (CVS) และ“ อาการไม่สบายตา” จากการศึกษาพบว่าชาวอเมริกันกว่า 83 เปอร์เซ็นต์ใช้อุปกรณ์ดิจิทัลเป็นเวลานานกว่าสองชั่วโมงต่อวันโดย 60.5 เปอร์เซ็นต์รายงานว่าพวกเขามีอาการปวดตาดิจิทัล ( ดวงตาเปิดรับแสงมากเกินไป: ภาวะที่กลืนไม่เข้าคายไม่ออกของอุปกรณ์ดิจิทัล .)

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

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

นักพัฒนา ApeeScape อามินชาห์กิลานี | กล่าวเสริม:“ โดยส่วนตัวแล้วฉันใช้ธีมมืดแบบแสงอาทิตย์สำหรับโปรแกรมแก้ไขโค้ดของฉัน ฉันชอบธีมสีเข้มเพราะพื้นหลังสีเข้มจะรู้สึกสบายตาโดยเฉพาะอย่างยิ่งเมื่อฉันชอบให้แสงไฟสลัว ๆ หรือทำงานตอนกลางคืน”

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

เมื่อ Dark UIs ทำงานได้ดี

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

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

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

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

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

เมื่อ Dark UIs ทำงานได้ไม่ดี

ตามที่ระบุไว้ก่อนหน้านี้ในบทความ UI ที่มีธีมสีเข้มเป็นตัวเลือกที่ไม่ดีสำหรับเนื้อหาที่มีข้อความมากและมีข้อมูลมากหรือเมื่อใช้เนื้อหาประเภทต่างๆ (ข้อความรูปภาพวิดีโอตารางข้อมูลดรอปดาวน์ฟิลด์ ฯลฯ ). ฉันทามติทั่วไปในชุมชนการออกแบบคือ UI ที่มืดเป็นความท้าทายอย่างมากในการออกแบบเว้นแต่คุณจะจัดการกับเนื้อหาที่เรียบง่ายและมีเพียงแค่การโปรยข้อความที่นี่และที่นั่น

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

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

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

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

สิ่งที่ต้องทำและไม่ควรใช้ Dark UIs

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

เมื่อสามารถใช้ UI ที่มืดได้:

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

เมื่อควรอยู่ห่างจาก UI ที่มืดที่สุด:

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

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

•••

node js ต้องการเว็บเซิร์ฟเวอร์หรือไม่?

อ่านเพิ่มเติมในบล็อกการออกแบบ ApeeScape:

• eCommerce UX - ภาพรวมของแนวทางปฏิบัติที่ดีที่สุด (พร้อม Infographic)
• ความสำคัญของการออกแบบที่เน้นมนุษย์เป็นศูนย์กลางในการออกแบบผลิตภัณฑ์
• ผลงานนักออกแบบ UX ที่ดีที่สุด - กรณีศึกษาและตัวอย่างที่สร้างแรงบันดาลใจ
• หลักการฮิวริสติกสำหรับอินเทอร์เฟซมือถือ
• การออกแบบที่คาดหวัง: วิธีสร้างประสบการณ์ผู้ใช้ที่มีมนต์ขลัง