หรือสิ่งที่ควรคำนึงถึงเมื่อพัฒนาโหมดมืดสำหรับแอปพลิเคชันหรือเว็บไซต์
2018 แสดงให้เห็นว่าโหมดมืดกำลังมา ตอนนี้เรามาถึงครึ่งทางของปี 2019 แล้ว เราสามารถพูดได้อย่างมั่นใจว่า พวกเขาอยู่ที่นี่ และพวกเขาก็อยู่ทุกหนทุกแห่ง
เริ่มจากความจริงที่ว่าโหมดมืดไม่ใช่แนวคิดใหม่เลย มันถูกใช้มาเป็นเวลานานแล้ว และจริงๆ แล้ว กาลครั้งหนึ่งนานมาแล้ว นี่เป็นสิ่งเดียวที่พวกเขาใช้: จอภาพมีความหลากหลาย "สีเขียวบนพื้นดำ" แต่เพียงเพราะสารเคลือบเรืองแสงที่อยู่ภายในเปล่งแสงสีเขียวเมื่อสัมผัสกับรังสี .
แต่ถึงแม้หลังจากเปิดตัวจอภาพสีแล้ว โหมดมืดก็ยังคงมีอยู่ ทำไมจึงเป็นเช่นนี้?
มีสองแรงจูงใจหลักที่อธิบายว่าทำไมวันนี้ทุก ๆ วินาทีจึงรีบเพิ่มธีมสีเข้มให้กับแอปพลิเคชันของพวกเขา ประการแรก: คอมพิวเตอร์มีอยู่ทั่วไปทุกหนทุกแห่ง ทุกที่ที่เรามองมีหน้าจอบางประเภท เราใช้อุปกรณ์มือถือของเราตั้งแต่เช้าจนถึงดึก การมีอยู่ของโหมดมืดจะช่วยลดอาการปวดตาเมื่อคุณอยู่บนเตียงก่อนเข้านอนเป็น "ครั้งสุดท้าย" เพื่อเลื่อนดูฟีดโซเชียลของคุณ เครือข่าย (ถ้าคุณเหมือนฉัน "ครั้งสุดท้าย" อาจหมายถึงการเลื่อน 3 ชั่วโมง . โหมดมืด? ใช่ ได้โปรด! )
อีกเหตุผลหนึ่งคือเทคโนโลยีการผลิตจอแสดงผลใหม่ รุ่นเรือธงของบริษัทขนาดใหญ่ เช่น Apple, Google, Samsung, Huawei ล้วนมาพร้อมกับหน้าจอ OLED ซึ่งแตกต่างจากจอ LCD ตรงที่ไม่ต้องใช้ไฟแบ็คไลท์ และนั่นเป็นข่าวดีสำหรับแบตเตอรี่ของคุณ ลองนึกภาพคุณกำลังดูภาพสี่เหลี่ยมสีดำบนโทรศัพท์ของคุณ ด้วยจอ LCD ไฟแบ็คไลท์จะส่องสว่างทั้งหน้าจอแม้ว่าส่วนใหญ่จะเป็นสีดำก็ตาม แต่เมื่อดูภาพเดียวกันบนจอแสดงผล OLED พิกเซลที่ประกอบเป็นสี่เหลี่ยมสีดำจะถูกปิดไป ซึ่งหมายความว่าพวกเขาไม่ใช้พลังงานเลย
จอแสดงผลประเภทนี้ทำให้โหมดมืดน่าสนใจยิ่งขึ้น ด้วยการใช้อินเทอร์เฟซที่มืด คุณสามารถยืดอายุแบตเตอรี่ของอุปกรณ์ของคุณได้อย่างมาก . แน่นอนว่าโหมดมืดนั้นควบคู่ไปกับการเปลี่ยนแปลง UI ดังนั้นเรามาทบทวนความรู้ของเรากันดีกว่า!
โหมดมืด 101
ประการแรก: "ความมืด" ไม่เหมือนกับ "สีดำ" อย่าพยายามเปลี่ยนพื้นหลังสีขาวเป็นสีดำ เพราะจะทำให้ใช้เงาไม่ได้ การออกแบบแบบนี้จะแบนมาก (ในทางที่ไม่ดี)
สิ่งสำคัญคือต้องคำนึงถึงหลักการพื้นฐานของการแรเงา/การจัดแสง วัตถุที่อยู่สูงขึ้นควรมีน้ำหนักเบากว่าในเงามืด ซึ่งเป็นการจำลองแสงและเงาในชีวิตจริง ซึ่งทำให้แยกแยะความแตกต่างระหว่างส่วนประกอบต่างๆ และลำดับชั้นได้ง่ายขึ้น
สี่เหลี่ยมสีเทาที่เหมือนกันสองอันพร้อมเงา อันหนึ่งอยู่บนพื้นหลังสีดำ 100% และอีกอันบน #121212 เมื่อวัตถุลอยขึ้น จะกลายเป็นสีเทาจางลง
ในธีมสีเข้ม คุณยังคงสามารถใช้สีพื้นฐานปกติได้ตราบใดที่คอนทราสต์ยังดีอยู่ ลองอธิบายด้วยตัวอย่าง
ในอินเทอร์เฟซนี้ การดำเนินการหลักคือปุ่มสีน้ำเงินขนาดใหญ่ในแถบด้านล่าง ไม่มีปัญหาเรื่องคอนทราสต์เมื่อสลับระหว่างโหมดสว่างหรือมืด ปุ่มยังสวยสะดุดตา ไอคอนชัดเจน โดยรวมทุกอย่างดี
เมื่อใช้สีเดียวกันในลักษณะที่แตกต่างกัน เช่น ในข้อความก็จะเกิดปัญหา ลองใช้เฉดสีหลักที่มีความอิ่มตัวน้อยลง (มาก) หรือมองหาวิธีอื่นในการรวมสีของแบรนด์เข้ากับอินเทอร์เฟซ
ซ้าย: แดงบนพื้นดำดูไม่ดี ขวา: ลดความอิ่มตัวลงแล้วทุกอย่างก็ดูดี — ประมาณ การแปล
เช่นเดียวกับสีที่เข้มอื่นๆ ที่คุณอาจใช้ เช่น สีคำเตือนหรือข้อผิดพลาด Google ใช้การซ้อนทับเลเยอร์สีขาว 40% ที่ด้านบนของสีข้อผิดพลาดเริ่มต้นในนั้น เมื่อเปลี่ยนเป็นโหมดมืด นี่เป็นจุดเริ่มต้นที่ดีทีเดียว เนื่องจากจะปรับปรุงระดับคอนทราสต์ให้ตรงตามมาตรฐาน AA แน่นอนว่าคุณสามารถเปลี่ยนการตั้งค่าได้ตลอดเวลาตามที่เห็นสมควร แต่อย่าลืมตรวจสอบระดับคอนทราสต์ด้วย อย่างไรก็ตามเครื่องมือที่มีประโยชน์สำหรับจุดประสงค์นี้คือปลั๊กอิน Sketch - ซึ่งแสดงให้เห็นอย่างชัดเจนถึงความแตกต่างระหว่าง 2 เลเยอร์
แล้วข้อความล่ะ?
ทุกอย่างเรียบง่ายที่นี่ ไม่มีอะไรควรเป็นสีดำ 100% และสีขาว 100% และในทางกลับกัน สีขาวสะท้อนคลื่นแสงทุกความยาวคลื่น สีดำดูดซับ หากคุณวางข้อความสีขาว 100% บนพื้นหลังสีดำ 100% ตัวอักษรจะสะท้อนแสง มีรอยเปื้อน และอ่านได้น้อยลง ซึ่งจะส่งผลเสียต่อความสามารถในการอ่าน
เช่นเดียวกับพื้นหลังสีขาว 100% ซึ่งสะท้อนแสงมากเกินไปที่จะเน้นไปที่คำทั้งหมด ลองปรับสีขาวให้อ่อนลงเล็กน้อย ใช้สีเทาอ่อนสำหรับพื้นหลังและข้อความบนพื้นหลังสีดำ ซึ่งจะช่วยลดอาการปวดตาป้องกันได้
โหมดมืดมาถึงแล้วและจะไม่หายไป
ระยะเวลาที่เราใช้อยู่หน้าจอมีเพิ่มขึ้นอย่างต่อเนื่อง และทุกๆ วันใหม่ๆ หน้าจอใหม่ก็ปรากฏขึ้นในชีวิตของเรา ตั้งแต่วินาทีที่เราตื่นนอนจนกระทั่งเราหลับไป นี่เป็นปรากฏการณ์ที่ค่อนข้างใหม่ ดวงตาของเรายังไม่คุ้นเคยกับการเพิ่มขึ้นของเวลาหน้าจอในตอนเย็น นี่คือจุดที่โหมดมืดเข้ามามีบทบาท ด้วยการเปิดตัวฟีเจอร์นี้ใน macOS และดีไซน์ Material (และมีแนวโน้มมากที่สุดใน iOS) เราเชื่อว่าไม่ช้าก็เร็ว คุณสมบัตินี้จะกลายเป็นค่าเริ่มต้นในทุกแอปพลิเคชัน ทั้งบนมือถือและเดสก์ท็อป และเตรียมตัวให้พร้อมกว่านี้!
เหตุผลเดียวที่จะไม่ใช้โหมดมืดคือเมื่อคุณมั่นใจ 100% ว่าแอปพลิเคชันของคุณถูกใช้เฉพาะในเวลากลางวันที่สว่างจ้าเท่านั้น อย่างไรก็ตาม สิ่งนี้ไม่ได้เกิดขึ้นบ่อยนัก
เป็นเรื่องที่ควรค่าแก่การกล่าวถึงบางสิ่งที่ต้องได้รับการดูแลเป็นพิเศษเมื่อใช้โหมดมืด นอกเหนือจากหลักการพื้นฐานที่สรุปไว้ก่อนหน้านี้
ในแง่ของการเข้าถึง โหมดมืดนั้นไม่สะดวกที่สุด เนื่องจากโดยทั่วไปแล้วคอนทราสต์จะต่ำกว่า ซึ่งไม่ได้ปรับปรุงความสามารถในการอ่านเลย
แต่ลองนึกภาพว่าคุณกำลังเตรียมตัวเข้านอน และอยากนอนจริงๆ แต่ก่อนที่คุณจะหลับไป คุณจำได้ว่าคุณต้องส่งข้อความสำคัญถึงใครบางคนที่ไม่สามารถรอได้แม้แต่คืนเดียว คุณหยิบโทรศัพท์ขึ้นมา เปิดเครื่อง แล้ว AAAAAAH... พื้นหลังสีอ่อนของ iMessage ของคุณจะทำให้คุณตื่นขึ้นอีก 3 ชั่วโมง แม้ว่าข้อความสีอ่อนบนพื้นหลังสีเข้มจะไม่ถือว่าเข้าถึงได้มากที่สุด แต่การมีโหมดมืดในวินาทีนี้จะ เพิ่มความสะดวกสบายเป็นล้าน ทุกอย่างขึ้นอยู่กับสถานการณ์ที่ผู้ใช้อยู่ในขณะนี้
นั่นเป็นเหตุผลที่เราคิด โหมดมืดอัตโนมัติ ช่างเป็นความคิดที่ยอดเยี่ยม มันจะเปิดในตอนเย็นและปิดในตอนเช้า ผู้ใช้ไม่จำเป็นต้องคิดเลยซึ่งสะดวกมาก Twitter ทำงานได้ดีมากด้วยการตั้งค่าโหมดมืด นอกจากนี้ พวกเขายังมีทั้งโหมดมืดและโหมดมืดยิ่งขึ้นสำหรับหน้าจอ OLED ทั้งหมดเหล่านี้ ซึ่งช่วยประหยัดแบตเตอรี่และทุกอย่างที่เกี่ยวข้อง สิ่งสำคัญที่ควรทราบที่นี่: ให้โอกาสผู้ใช้เปลี่ยนด้วยตนเองเมื่อใดก็ตามที่เขาต้องการ: ไม่มีอะไรจะเลวร้ายไปกว่าการเปลี่ยนอินเทอร์เฟซโดยอัตโนมัติโดยไม่มีความสามารถในการเปลี่ยนกลับ
Twitter มีโหมดมืดอัตโนมัติที่เปิดในตอนเย็นและปิดในตอนเช้า
นอกจากนี้ เมื่อพัฒนาธีม ควรจำไว้ว่าบางสิ่งไม่สามารถทำให้มืดได้
ใช้โปรแกรมแก้ไขข้อความเช่น Pages คุณสามารถทำให้อินเทอร์เฟซมืดได้ แต่ตัวกระดาษเองจะเป็นสีขาวเสมอเพื่อจำลองกระดาษจริง
เพจที่เปิดใช้งานโหมดมืด
เช่นเดียวกับเครื่องมือแก้ไขการสร้างเนื้อหาทุกประเภท เช่น Sketch หรือ Illustrator แม้ว่าอินเทอร์เฟซสามารถทำให้มืดได้ แต่อาร์ตบอร์ดที่คุณใช้งานจะเป็นสีขาวตามค่าเริ่มต้นเสมอ
วาดภาพในโหมดมืดและยังมีอาร์ตบอร์ดสีขาวสว่างอยู่
ดังนั้นไม่ว่าแอปจะเป็นอย่างไรก็ตาม เราเชื่อว่าโหมดมืดจะมาพร้อมกับระบบปฏิบัติการที่คุณใช้ ซึ่งหมายความว่าเป็นการดีที่สุดที่จะเตรียมพร้อมสำหรับอนาคต มันจะมืด
หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนา UI สีเข้ม โปรดอ่านหลักเกณฑ์ดังกล่าว นี่คือแหล่งข้อมูลหลักของเราสำหรับบทความนี้
ที่มา: will.com