【譯】黑暗模式的過去、如今和將來

原文： https://uxdesign.cc/the-past-...
做者：Olivier Berni
譯者：Chor

2019 年的一大新聞，當屬安卓和蘋果分別在 I/O（谷歌 I/O 開發者大會）和 WWDC（蘋果全球開發者大會）相繼推出的黑暗模式。

蘋果公司在談到黑暗模式時說，它是一種「有助於你專一工做的吸引人的新外觀」，同時也是一種「全方位對眼睛友好的無干擾環境」。谷歌則從實用角度回答，聲稱黑暗模式能夠「顯著下降用電量」，」提升低視力用戶和對強光敏感用戶的能見度「，而且能夠「讓任何人在低光環境下輕鬆地使用設備」。

值得注意的是，咱們天天平均花費 3 小時 15 分鐘在手機上。假如黑暗模式真的能夠提升專一力、加強可讀性、緩解眼睛疲勞以及延長電池壽命，能夠想見它將會對咱們的技術使用和身體健康產生多麼巨大的影響。

起源：明亮模式破殼而出

單色計算機的 CRT 顯示器

受限於陰極射線管的容量大小，計算機屏幕最初就是採用咱們今天所說的」黑暗模式「的。後來，愈來愈多的非程序員開始接觸計算機，且各個公司都有處理文字的需求，人們迫切須要一個接近紙張書寫效果的工做環境。正極性在這時候發揮了擬物的做用，它使得計算機界面呈現相似紙張的效果。

早期的蘋果計算機 Apple Lisa

人類向來是白天勞做、晚上睡覺。咱們在室外逐步進化，眼睛最終變得習慣於觀察明亮背景（陽光普照的天空等）前的黑暗物體（人、山等）。

這是咱們的大腦固有的。丹尼米勒和斯蒂芬斯在 1988 年發表的一篇研究論文代表，3 個月大的嬰兒更容易被明亮背景的暗色內容所吸引。

現在：黑暗模式捲土重來...這是怎麼回事？

在使用明亮模式這麼長時間後，改用黑暗模式就彷彿是久旱逢甘霖。它爲用戶提供了更多的定製設備和數字環境的機會。它具備必定的科技感和設計感，即便沒有全盤從新設計，看上去也足夠新奇。黑暗模式的推廣還得益於它解決了咱們使用電子設備時遇到的各類問題（如眼睛疲勞、低光環境下觀看屏幕，或者是減小長期觀看屏幕引發的頭痛）。

它真的比明亮模式更好嗎？

黑暗模式也許符合的是我的口味，而不是大衆口味：有些人在使用黑暗模式的時候以爲更舒服、沒有那麼疲勞，而且可以更專一；有些人則認爲，因爲顏色變顯眼了，他們很容易分心。

研究代表，人眼更習慣於明亮背景的暗色內容（正極性）

人眼的工做原理很像攝像機的鏡頭：當咱們看到正極性的東西時，瞳孔收縮：咱們看到的物體會更加銳利和細緻。相反，當咱們看到負極性的東西時，進入眼睛的光線會減小，這致使咱們的瞳孔擴張：物體看上去會更加模糊。黑色背景上的白色文字顯得更大，而且有一種光暈，這是由於單個字母發出的光被其它字母反射。這在必定程度上使負極性的東西難以觀察。相反，正極不會產生這種現象。多項測試代表，對正極性的文本進行校對、速讀等會更好（詳見 TidBits 以及 Wired 上的相關文章）。此外，負極性的閱讀更加困難，意味着咱們的眼睛和大腦必須更專一，這致使咱們更容易感到眼睛疲勞和頭痛。

不過，最後仍是取決於我的

儘管須要花費更多時間去閱讀和分析內容，一些用戶可能會發現，在黑暗模式下不容易被無關內容分心。當咱們快速掃描屏幕尋找某個視覺/着色元素時，黑暗模式一樣沒有讓咱們失望。

2018 年，SalesForce 的設計師們在設計圖表時，想知道哪種模式是最好的。爲此，他們採訪了不少用戶，結果發現，用戶的決策速度既快又準 —— 他們選擇了黑色主題中的圖表。

來源： salesforce.com

這對於開發者來講也是同樣的：你在開發的時候，必定更想要看到有語法高亮的代碼結構，而不是一字一句地去解讀和分析。

Atom

甚至彭博社的 app 也是如此：交易員在負極性下能夠更快捕獲信息。同理，iOS 的 Stock app 和 Activity app 也是這樣，這兩款 app 早在黑暗模式推出以前就使用暗色 UI 了。

彭博社

蘋果的 Activity App

甚至在黑暗模式還沒有成型的時候，一些產品就開始使用暗色 UI 了，好比奢侈品牌、流媒體服務等...或者是爲了傳達一種精英主義感，或者是爲了讓內容脫穎而出，又或者是爲了適應使用服務的場景（你最有可能在夜晚或者光線昏暗的地方使用流媒體服務，暗色 UI 在這些場景下看起來更加舒服）。不過，那時幾乎沒有提供切換模式的選項，由於暗色 UI 在設計的時候就敲定了。

來源： Breitling 的早期設計

不得不認可，有些人受疾病影響，只能放棄使用明亮模式。黑暗模式對視力受損或患有畏光症的人來講是福音。使用黑暗模式還能夠減小藍光的發射，提升咱們的睡眠質量。

那麼電池壽命呢？

黑暗模式獲得推廣後，不少人都據說它能夠節省電量，這在某種程度上來講並不全對：除非你的手機配備了 OLED 屏幕，不然你不會從中受益。一般的 LED 屏幕須要背光才能顯示顏色，甚至黑色也是如此。使用 OLED 屏幕時，只有彩色 LED 會亮起，而黑色的則不會亮起。並且看起來，亮起深灰色（黑暗模式中使用的）的 LED 仍然能夠節省一些電量。

(PhoneBuff 比對明亮模式和黑暗模式下電量使用狀況的視頻： Dark Mode vs. Light Mode Battery Test)

那麼，我須要在本身的 app 中實現黑暗模式嗎？

忽視黑暗模式將會讓你的 app 變得很」獨特「，由於你在用戶啓用了黑暗模式的手機上用各類顯眼的顏色「亮瞎了」他的眼睛。用戶開始期待黑暗模式，你確定不想作出最後一個仍然採用明亮模式的 app。

使用 Xcode，Android Studio...的話，其實是很容易實現的。它們經過簡單的方式提供了一套明亮模式和黑暗模式的預設。從技術上來講，這讓黑暗模式的實現變得很簡單。

此外，在安卓上還有一個很是有用的功能， « Force Dark Allowed »。簡而言之，這是安卓自帶的自動黑暗模式，而且與如今流行的黑暗模式是相兼容的。它並不完美，但也不會差到哪裏去 (若是打算使用這個模式，你可能須要花費時間進行設計，防止給用戶帶來困擾)。

帶有黑暗模式的 app 的將來

已經有不少文章談到這個話題了，咱們這裏作一下總結（文章末尾有相關文章的連接）。不能否認，爲 app 建立黑暗模式的時候必須遵循一些規則，不然就會大幅度地破壞用戶體驗。

咱們分別來看一些成功以及失敗的實踐。

app 的黑暗模式必須遵循的規則

遵循平臺的指南

這是第一條規則，而且多是最重要的規則。針對產品黑暗模式的實現，谷歌已經提供了很是完全和完整的指南，你在設計的時候能夠多加參考。

避免 100% 純黑色

Material Design 建議使用 #121212 做爲黑暗主題的背景顏色，由於純黑色對眼睛很不友好。同理，文本顏色也要避免使用純白色，而是下降透明度（Material Design 建議主要文本內容的透明度應爲 87%），從而減小強烈的對比度。

使用 Elevation Brightness

在明亮模式下，你極可能會使用陰影來表現視覺層次。這在黑暗模式中是不可行的，由於你根本看不到它們。相反，你應該使用灰色遮罩區份內容的不一樣層次。

Material Design 的亮度原則

Ji-Hern Baek 設計的 Evernote design

（請注意，陰影在背景變亮時是可見的。因此在避免過分依賴陰影的前提下，不要徹底放棄使用它們。另外，不要使用彩色或淺色陰影：它們對眼睛來講是不天然的，並且也不會帶來與普通陰影相同的深度效果）

考慮改變主色調

在黑暗模式中不宜採用過於飽和的顏色：它們太過明亮了，而且/或者會下降可讀性。

谷歌的 Material Design 建議在明亮模式中採用 200 號顏色，在黑暗模式中採用 500 號顏色。你能夠在 WGAG 中檢查對比度。

使用黑暗模式後改變主色調 (Material Design)

來源： Material Design

改變調色板

因爲改變了主色調以及亮度的展現方式，你應該建立一個新的調色板。注意，有些內容在明亮模式中共用一種顏色，但在黑暗模式中可能不是這樣。

來源： Kat Angeles from TripIt

你還能夠在黑暗模式中直接使用主色調：

來源： UX Misfits

小範圍地使用顏色

顏色在黑暗模式中會產生更大的對比度：能夠利用這一點讓一些小塊的內容更加突出，但不要大範圍地使用。

來源： Apple using sparse colors

不要忘記啓動界面

這是很容易忽略的部分，也是很重要的部分。啓動界面是用戶打開你的 app 時第一眼看到的界面，你可不但願用戶在使用 app 以前就被亮瞎雙眼。

確保有足夠的對比度

若是你的屏幕沒有足夠的對比度，那麼將很難區分不一樣的活動狀態（啓用、懸停、禁用等）

來源： Google Chrome

若是你使用 Instagram，你可能對這個問題很眼熟。連接與普通文本幾乎沒有區別，這使得查找連接變得很困難。

Marvel’s Instagram bio

在真實場景中測試黑暗模式

開啓自動亮度、加強對比度等設置測試你的 app，在低光環境中測試你的 app...用戶可能會在不一樣場景在使用 app，你須要爲每種狀況作好準備，防止出現任何不良體驗。

將來喜聞樂見的是...?

從黑暗模式的採用率來看，iOS 14 和 Android 11 推出新功能能夠說是板上釘釘了。

主屏幕的其中一個變化就是：

明亮模式和黑暗模式下，iPhone 的主屏幕

圖標不會隨着模式的切換而改變，若是開發者能夠針對兩種模式提供不一樣的 app 圖標、用戶能夠針對兩種模式設置不一樣的壁紙，那就再好不過了。