มีอะไร ๆ อยู่ใน Dark Mode บน iOS 13

@YOWARE

5 years ago

Dark Mode ตามแบบฉบับ iOS 13 ไม่ใช่แค่เปลี่ยนสีขาวเป็นสีดำ ทำที่สว่างให้มืดเท่านั้น แต่หลักการเบื้องหลังของการออกแบบ ทั้งด้านรูปลักษณ์ และ โครงสร้าง มีความซับซ้อนซ่อนเงื่อนเอาไว้

“โหมดมืด” “โหมดกลางคืน” หรือ Dark Mode แบบที่หลาย ๆ คนได้สัมผัสใน iOS 13 อาจกลายเป็นหนึ่งในสิ่งที่เปลี่ยนหน้าตาหน้าจอ iPhone ของคุณไปตลอดกาล ไม่ว่าจะใช้แอปไหนก็แปลกตา ดูเท่ ขรึม มีสไตล์ และที่สำคัญคือ ไม่แสบตา เวลาใช้ในที่มืด (หรือว่าการจำเป็นต้องแอบใช้ด้วยความเกรงใจ ในที่สาธารณะซึ่งสว่างน้อย เช่น โรงหนัง)

แต่วันนี้อยากลองให้มาชวนคิดกันว่า ถ้าอยากจะปรับหน้าตา หน้าร้าน หน้าเว็บ หรือหน้าแอป หรือหน้า iOS ให้เป็น Dark Mode แบบที่เรากำลังได้ใช้กันนี้

คุณคิดว่า Apple ต้องคำนึงถึงเรื่องใดบ้าง ?

เป้าหมายของ Apple ในกระบวนการปรับเปลี่ยนเป็น Dark Mode คือ

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

1. สี Colors

วิศวกร Apple ขึ้นเวทีอธิบายเรื่องนี้ในงาน WWDC19 สัมมนานักพัฒนาประจำปี ซึ่งจัดขึ้นเมื่อต้นเดือนมิถุนายน 2019 หลังการแถลงเปิดตัว iOS 13 เขาบอกว่า Dark Mode ที่ทำให้สวยงามสบายตาในภาวะแสงน้อยนั้น ไม่ใช่แค่การเปลี่ยนสีขาวเป็นดำ อ่อนเป็นเข้ม สว่างเป็นมืดเท่านั้น งานนี้ถึงขั้นว่า Apple ต้องรื้อจัดการระบบสีครั้งใหญ่สำหรับ iOS กันเลยทีเดียว

แน่นอนว่า Apple ต้องเริ่มต้นจากการออกแบบ UX/UI แล้วตัดสินใจมาว่า แนวสี โทนสี ที่ควรจะใช้กับ Dark Mode ต้องมีคุณสมบัติอย่างไรบ้าง ซึ่งผลออกมาว่ามีส่วนหลักที่เกี่ยวข้อง 4 อย่างที่จะต้องปรับเปลี่ยน เป็นอย่างน้อย คือ

สีพื้นหลัง
สีข้อความ
สีสันต่าง ๆ
สีให้มิติ

สีพื้นหลังของ iOS บน Dark Mode ก็จะสอดคล้องกับโหมดปกติ นั่นคือมี 3 ระดับ พื้นหลังสุด พื้นหลังรอง และพื้นหลังชั้นที่สาม

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

ในส่วนของสีสันต่าง ๆ ของตัวอักษรที่เคยอยู่บนหน้าจอ เช่น สีฟ้า ในโหมดปกติ พอปรับมาเป็น สีฟ้า ใน Dark Mode นั้น ก็ต้องเป็นคนละฟ้ากัน

หากใช้สีเดียวกันเป๊ะ ๆ จะพบปัญหาว่า สีที่สวยงาม เห็นชัดบนพื้นขาว กลายเป็นจมดิ่งในพื้นดำ เมื่อเปรียบเทียบ contrast แล้วไม่ได้ค่าสัดส่วนที่เหมาะสม ตัวอย่างเช่น สีส้ม ที่มีค่าสี RGB 255,120,20 ซึ่งชัดเจนบนพื้นสีดำ แต่พอมาวางบนพื้นขาวแล้ว Color Contrast Ratio ไม่ได้มาตรฐาน จึงต้องมีการปรับเป็น 208,70,0

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

ถ้าแค่สีเดียวยังมีรายละเอียดขนาดนี้ แล้วถ้าให้นักพัฒนาแอปไปปรับแต่งสีกันเองก็อาจจะมีความเสี่ยงได้สารพัดแอปบน Dark Mode ที่สีสันหน้าตาไม่ได้มาตรฐานแน่ ๆ

แต่จะทำอย่างไร ที่จะทำให้นักพัฒนาแอป ให้ความร่วมมือ และ ยังได้ผลลัพธ์ที่น่าพอใจด้วย ? สิ่งนั้นมันคงต้องง่าย สะดวก และได้มาตรฐานมาก ๆ

คำตอบจาก Apple คือการสร้างระบบการให้สีขึ้นมาใหม่ เรียกว่า Semantic Color คือ สีที่มีความหมายมากกว่าค่าสี สามารถปรับเปลี่ยนเฉดสีให้เหมาะสมกับพื้นหลังได้เอง

โดย Apple ตั้งชื่อนำหน้าสีด้วยคำว่า System

ในขั้นต้น Apple เตรียมสี Semantic มาให้ 9 สี ได้แก่ SystemRed SystemOrange SystemYellow SystemGreen SystemTeal SystemBlue SystemIndigo SystemPurple และ SystemPink ซึ่งนักพัฒนาสามารถเลือกใช้สีเหล่านี้ในการเขียนโค้ดของตนเองได้ทันที และสีเหล่านี้ก็จะปรับตัวให้เข้ากับพื้นหลังได้เอง โดยไม่ต้องคิดมาก

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

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

เป็นที่มาของสี SystemGrey ที่มี 6 ระดับ ซึ่งจะต้องเลือกวางอยู่บนพื้นหลังที่ปรับเปลี่ยนไปตามสถานะระดับของหน้าจอ

ส่วนพื้นหลังที่กล่าวถึงข้างต้น ก็จะมีชื่อนำหน้าด้วย System เช่นกัน

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

2. วัตถุ Materials

องค์ประกอบของ iOS 13 ไม่ได้มีแค่สีสัน แต่ยังมีสิ่งที่เรียกว่า material หรือการจำลองสร้างภาพให้เหมือนกับมีวัตถุบางอย่างอยู่บนหน้าจอจริง ๆ และวัตถุที่ว่านั้น คือ “กระจก” 4 ระดับความหนา ตั้งแต่หนาสุดจนถึงบางมาก Thick – Regular – Thin – Ultrathin

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

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

3. ปุ่ม สวิตช์ แถบควบคุม Controls and bars

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

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