จัดการ Sketch Project เตรียมรับมือกับ Dark Mode #EP1
ถ้าเราเข้าใจความมืด เราจะไม่กลัวความมืด
หลังจากที่ Apple เปิดตัว macOS Mojave มาพร้อมกับ Dark Mode ที่ช่วยให้เรา Focus กับกิจกรรมบนหน้าจอได้มากขึ้น แอปพื้นฐานต่างๆ ของ macOS ก็เริ่มรองรับ Dark Mode ได้แล้วเหมือนกัน ส่วน iOS 13 กับ Android Q ก็คิดว่าไม่น่ารอดจาก Dark Mode เพราะบางแอปเริ่มทยอยออกฟีเจอร์ Dark Mode มาให้เห็นบ้างแล้ว เดาได้เลยว่าเลเวลถัดไปของคนทำ UI จึงหนีไม่พ้นของการออกแบบเพื่อรองรับเจ้า Dark Mode ที่ว่านี้แน่นอน ดังนั้น เพื่อไม่ให้ตกเทรนด์ แต่ละแอปพลิเคชันควรมี Dark Mode ที่ออกแบบเองตามดีไซน์ของแอปนั้นๆ เพื่อให้การแสดงผลออกมาดีและถูกต้อง รวมไปถึงสีที่ออกมาดูสวยงามตามรูปแบบของแอปตนเอง
ในบทความนี้เราจะมาดูกันว่าคนทำ UI ต้องรับมือกับมันยังไงบ้าง? ก่อนอื่นเรามาทำความเข้าใจกับมันก่อนดีกว่า
Dark Mode คืออะไร?
Dark Mode คือลุคใหม่ของแอปพลิเคชัน ที่จะเน้นโทนมืด ๆ ดำ ๆ เพื่อช่วยลดความสว่างหน้าจอขณะใช้งานในเวลากลางคืนหรือที่แสงน้อย ทำให้เราจดจ่อกับงานได้มากขึ้น ลดภาระสายตาที่โดนทำร้ายจากแสงหน้าจอ อาจจะมีชื่อเรียกต่างกันออกไป Night Mode บ้าง Dark Theme บ้าง แล้วแต่ Platform
แต่ถ้าใครคิดว่า “Dark Mode ก็แค่ Invert สีไง ง่ายๆ” ก็เตรียมรับมือกับ CI ที่พังทลายลงไปได้เลย ถ้าไม่เชื่อลองกด Color Invert ในแอปของคุณดูก็ได้ อาจจะไม่มีใครจำได้อีกเลยว่า แอปนี้คือแอปอะไร
จริงๆ แล้ว Dark Mode มันลึกซึ้งกว่านั้น ส่วนใหญ่แล้วจะเป็นเรื่องของ สี และตำแหน่งที่มัน “วาง” อยู่ รวมไปถึงระดับความสำคัญของมัน
1 สี แต่ 2 คุณสมบัติ
สีหนึ่งสีที่เราเคยรู้จักนั้นมีแค่คุณสมบัติเดียว เช่น สี Gold ในแอปจะมีโค้ดสีเดียวเท่านั้น แต่พอมี Dark Mode เข้ามาสี Gold เราจะมี 2 สถานะทันที นั่นก็คือ Gold ใน Light Mode และ Gold ใน Dark Mode ซึ่ง…โค้ดสีใน Light Mode และ Dark Mode จะต่างกัน (หรือเหมือนกันก็ได้)
- Gold ใน Light Mode → #FFD400
- Gold ใน Dark Mode → #FFDF58
ส่วนใหญ่แล้วสีที่อยู่บน Dark Mode จะสว่างกว่าสีบน Light Mode เพราะว่าจะได้ผ่านตามหลัก WCAG (Web Content Accessibility Guidelines) AA-Level Contrast Standard
ชื่อสีไม่สำคัญเท่าตำแหน่งที่มันวางอยู่
เมื่อก่อน สีที่เรารู้จักมีแค่สีเดียว การตั้งชื่อสีจึงง้ายง่าย ตั้งตามสีของมันเลยก็ได้ เช่น Black, White, Gold, Mint, Indigo ทั้งหมดเป็นการตั้งชื่อโดยให้ความสำคัญกับสีที่มองเห็นเป็นหลัก แต่พอมี Dark Mode สี 1 สีไม่ได้มีแค่คุณสมบัติเดียวแล้ว ตามที่อธิบายไปด้านบน (ถ้าอ่านข้ามมา เลื่อนกลับไปอ่านเดี๋ยวนี้!) ถ้ายังเรียกชื่อสีโดยให้ความสำคัญกับสีที่มองเห็นอยู่ ก็จะเกิดความสับสนกันได้ง่าย
สีอื่นๆ อาจจะไม่ได้มีผลกระทบอะไรมาก ยกตัวอย่าง สีชมพู บน Light Mode กับ Dark Mode อาจจะชื่อเดียวกัน เพราะสีชมพูใน Dark Mode มันก็อาจจะยังรู้สึกว่ามันชมพูอยู่ดี แต่ลองมานึกถึงสีพื้นฐานที่ใช้ทุกวัน ๆ อย่าง สีขาวกับสีดำ ที่ใช้กับพวก Icon หรือข้อความต่างๆ สิครับ
อะ สงสัยไม่เห็นภาพ…ลองนึกดูเมื่อเราเรียกสีดำใน Light Mode ว่าสี “Black” ตรงตัว ไม่ว่าจะอยู่ที่ไหนของ UI ก็คือสีดำ แต่…พอมันอยู่ใน Dark Mode แล้ว มันกลับกลายเป็นสีขาว?!?!! อ่าว…
ถ้าเราจะเรียกมันว่า “Black” อยู่ คงรู้สึกพิลึกใจในพอสมควรใช่มั้ยล่ะ แล้วอย่างนี้เมื่อมี Dark Mode เข้ามา เราต้องตั้งชื่อสีจากอะไร? 🤔
คำตอบก็คือ — ตั้งชื่อสีโดยให้ความสำคัญกับตำแหน่งที่มันวางอยู่เป็นหลัก
จากภาพจะเห็นว่า Icon ก็สีเดียวกัน ทำไมต้องแยกชื่อ Style ด้วย เพราะว่าพอเปลี่ยนเป็น Dark Mode แล้ว สี Icon เปลี่ยนไปไม่เหมือนกันยังไงล่ะ เราเลยต้องให้ความสำคัญของตำแหน่งที่วางอยู่เป็นหลัก โดยใช้คำว่า “On…” นำหน้า เช่น
จากรูปคือ
- Icon สี On Primary — สีที่วางอยู่บนสี Primary
- Icon สี On Background — สีที่วางอยู่บน Background
เห็นมั้ย…ไม่ว่าใน Dark Mode จะเปลี่ยนเป็นสีอะไร ตำแหน่งที่มันวางอยู่ก็ยังคงเหมือนเดิม ถ้าเราตั้งชื่อตามนี้จะช่วยลดความสับสนจากการเรียกชื่อสีไปได้เยอะ
ความแตกต่างบน iOS และ Android
ถึงแม้เราจะบอกว่าแอปเรามี CI ของตัวเองอยู่แล้ว แต่ก็หนีไม่ได้หรอกที่จะต้องออกแบบแอปตาม Guideline ของแต่ละ Platform (ยกเว้นแอปเฉพาะทางจริงๆ) เพราะ User แต่ละ Platform มีพฤติกรรมการใช้งานที่ต่างกัน ความเข้าใจต่างกัน …Dark Mode ก็เช่นกัน
ที่เราต้องทำความเข้าใจ Dark Mode ในแต่ละ Platfrom ด้วย เพราะมันช่วยให้การออกแบบแอปเป็นไปตาม Guideline ของ Platform นั้น ๆ ทำให้ User ไม่ต้องเรียนรู้อะไรใหม่ ๆ มากเกินความจำเป็น
ในส่วนของ Human Interface Guidelines สำหรับ iOS ที่ Apple เขียนไว้ มีข้อนึงที่พูดถึง “Clarity” หรือ ความชัดเจน ในเรื่องของ สี (Color) ไอคอน (Icon) และช่องว่าง (Padding) ต่างๆ ดังนั้น Dark Mode ของ iOS เลยเน้นไปทางสีดำสนิท เพื่อเน้นเนื้อหาให้โดดเด่น และ UI ที่แสดงอยู่รอบ ๆ มีความสำคัญลดลง คำว่า “ดำสนิท” ในที่นี้หมายถึง #000000 เลยนะ
อ่านเพิ่มเติมได้ที่ — https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/
ส่วน Android จะมี Material Design เป็น Guideline ของตัวเอง ที่ชัดเจนเรื่องยกระดับชั้น (Elevation) ของแต่ละ Card มีพื้นผิว (Surface) และเน้นแสงเงาเป็นหลัก Dark Mode(ใน Android เรียกว่า Dark Theme) ของ Android จึงไม่ใช้สีที่ดำสนิทเหมือน iOS และนอกจากจะไม่ได้ดำสนิทแล้ว สีดำในแต่ละการยกระดับชั้นก็มีสีที่สว่างขึ้นเรื่อยๆ ตามความสูง ตามมาตรฐานของ Material Design แล้วสีพื้นที่ดำที่สุดคือสี #121212
อ่านเพิ่มเติมได้ที่ — https://material.io/design/color/dark-theme.html
ใน EP. หน้าเราจะมาพูดถึงการจัดการกับ Sketch Project ของเรายังไงให้เป็นไปตามความเข้าใจข้างต้นที่ได้อ่านมา เพื่อความสงบสุขระหว่างทีม จะได้ไม่ต้องกลัวความมืดเหมือนดิว เดอะสตาร์
อ่านต่อตรงนี้ → จัดการ Sketch Project เตรียมรับมือกับ Dark Mode #EP2
