So Dark! Material Design 的 dark theme 初登場，它可以為設計帶來什麼變化呢？
Google 於 5/7 舉辦一年一度的開發大會：Google I/O，除了帶來許多令人眼睛為之一亮的硬體，還有人工智慧與作業系統上的突破，不過在這場大會中比較吸引我的是其中一個小小的更新，也就是 Material Design 的 dark theme，雖然說相較之下 Dark theme 沒這麼引人注目，不過作為一個還在磨練中的設計師，當然還是會注意跟設計有關的議題。
所謂的 Dark theme，就是大家多少都知道的「夜間模式」、「深色模式」，是本次開發大會中跟著 Andriod Q 一起發佈的更新，原先是部分 APP 或瀏覽器會推出 drak theme 提供使用者不同的選擇，到了 2016年 Apple 推出 macOS Mojave 的深色系統後，才開始有比較多的人注意到這樣的設計。將電腦與手機轉換成夜間模式，除了能保護眼睛不會持續接收螢幕傳來的強光，還可以幫助手機省電。
但要將設計轉換成深色模式，並不是直接把所有顏色轉成反向這麼簡單而已，背後還要考慮到不同元件的對比度、顏色是否能相互搭配，所以 Google 才會推出跟 dark theme 有關的設計原則。另外也有傳聞說，2019 即將推出的 iOS 13 中，也會有將 iPhone 轉換為夜間模式的選項，到時候的 human interface guideline 也會是對設計師來說很重要的看點，不過這篇分享主要會聚焦在 Google 所推出的 guideline，就一起來探究一下如何在深色模式中進行良好的設計與資訊傳達，以及自在的小小觀點，那麼，開始吧 👇。
Material Dark Theme 的四個原則
Google 的 Material Design 將深色模式設計劃分出四個基本原則，這邊要注意的是，guideline 本身是提供設計師參考，不一定要完全遵循其中的標準進行設計，但閱讀各大品牌提供的 guideline，進而仔細理解為什麼他們會這麼做，也是個很棒的學習機會。深色模式的設計原則主要是下列四點：
1. 用灰色營造層次感
Material Design 相較於其他的設計原則，採用了許多物質和深度的概念，使用者看到的平面並不是單一扁平的，而是具有層次的立體空間，而這樣的特點運用在深色模式中，就會運用不同的灰色來表現每個層次的高低深淺 ，而非將所有原色直接轉為黑色。
2. 使用少量的強調色
在深色介面中，盡量不要使用太多的顏色（看起來會顯得太花俏雜亂），將重點放在深色本身，顏色則是用來強調以及點綴，當然我們所加入的顏色必須符合對比度標準，以確保使用者有良好的閱讀體驗。如果有配色上面的煩惱，可以參考 Material Design 提供的色彩工具：
3. 節省電力
在一些需要高能耗的產品上（如搭載 OLED 螢幕的裝置），使用深色模式能減少像數的功率消耗，延長電池的壽命。另外加上 OLED 的發光特性使得黑色可以有較佳的表現，在該類裝置上觀看深色模式會有更好的體驗。更詳細的解說可以參考：
4. 提升可用性
在滿足 W3C 對比度標準的情況下，絕大多數的使用者都能夠正常瀏覽深色介面。而在 guideline 中，Material Design 基於下面幾項標準來訂定深色模式的色彩設計：
- 對比：深色介面和 100％白色文本的對比度至少為 15.8：1
- 深度：透過較淺的顏色來表現不同深度的元件
- 飽和度：降低原色的飽和度，使他們在不同深度時都能符合至少 4.5：1（與正文一起使用時）的網頁內容可用性指南（WCAG）AA 標準
- 有限的顏色：減少顏色使用，決大部分的介面都是以深色進行表現
而關於顏色的對比度，除了深色模式需要注意之外，平常在設計中也需要考量到不同使用者觀看的體驗，對於這個議題感興趣的朋友可以參考以下的 Sletch plugin：
至於其他更詳盡的用色規範及注意事項可以前往 Material Design 中的 Dark Theme 觀看：
深色模式能為設計帶來什麼變化？
雖說深色模式目前仍是作為預設介面（這邊我暫時稱作一般模式）的擴充，並非每個 APP 都需要，也不一定要特意為此多做開發，但在閱讀 guideline 之後，對我來說有幾個滿重要的收穫：
① 深色模式提供另外一種思考方式
過去在製作 APP 介面時，大多都是以白色為背景進行設計，但推出深色模式之後，它提供了我們另外一種思考設計的方式，「這邊要怎麼規劃顏色？」、「這邊的設計要怎麼適應深色模式？」，考量到不同的情況，可以讓自己的設計變得更有趣也更多變化。
② 做出更體貼的設計
Material Design Dark Theme 有一個很重要的元素就是顏色的對比度，符合標準的色彩對比能夠提高介面的易讀性，進而讓不同狀態的使用者都能擁有良好的體驗，提高 accessibility 並不是一件太難的事，卻是每個設計師都要注意到的要素之一。
③ 重新檢視自己的設計
以自己目前的工作來說，有一個持續更新功能的 APP 專案，在推出深色模式之後，是個很適合重新檢視過往設計的時間點，包含要怎麼把切換流程導入現有功能之中、如何在現有顏色規範中修改出深色模式等等（想到這邊突然冒出冷汗），過去沒設想到的東西，現在回頭看看說不定會有新發現 😂。
④ Design system 的重要性提高
深色模式跟一般模式決大部分的元件都是共用的，只有在主要背景與層次上有變化，但如果之前積欠太多債務，沒有把 symbol 規劃好，要改設計就準備改到腕隧道發作吧，這也是提醒大家一定要養成良好的整理習慣，不只是深色模式，遇到品牌主視覺更新這種大幅度影響設計稿的改動，才不會麻煩到自己也拖延工作時間。
最後的最後
深色模式算是近幾年才開始發展出來的設計方法，但在 Google 推出之前，並沒有一個完整的 guideline 可供參考，不過從今年兩大系統（iOS 13 傳聞於 6 月 WWDC 發表）都將推出深色模式的消息看來，它可能就是下一個介面設計中的「基本概念」了。
我想未來設計師在製作 APP 時，不僅要考量到各個裝置的適應性，還得多思考如何生出一套符合 dark theme 標準的介面也說不定 😅（按照蘋果過去的做法搞不好真的會），但對很喜歡深色模式的我來說，倒是滿喜歡所有 APP 都是黑黑灰灰的，Google 已經率先敲響深色模式的鐘聲，至於接下來會怎麼發展，就看 APPLE 今年的 WWDC 會發佈什麼有意思的更新囉 😏。
