iOS 13 不出意外地帶來了暗黑模式，預(yù)計(jì)待到九、十月份系統(tǒng)正式推送的時(shí)候，WireframeKit 組件庫(kù)要做超大更新了。

近來正好讀到這樣一篇文章，關(guān)于暗黑模式設(shè)計(jì)原則的一些探討，值得一讀；今天便帶來譯文。話說年底要上映的最新一部《終結(jié)者》叫做“Terminator：Dark Fate”，黑暗命運(yùn)，也很妙呢。

暗黑模式設(shè)計(jì)原則淺談，The future is dark

暗黑模式在2018年便已開始顯露出普及的趨勢(shì)。而在2019年即將過半的時(shí)候，我們可以斷定，接下來的日子里“黑暗”將無處不在。

然而，暗黑模式確實(shí)不是人機(jī)界面領(lǐng)域的新概念了。曾幾何時(shí)，綠色字符呈現(xiàn)在漆黑屏幕上的模式就是我們所擁有的全部。如今的顯示技術(shù)與那個(gè)年代相比不可同日而語，但暗黑模式依然存在，并且大有蓬勃發(fā)展之勢(shì)，這又是為什么呢？

首先，如今的計(jì)算設(shè)備無處不在，隨時(shí)隨地都有屏幕伴隨著我們的工作與生活；在很多場(chǎng)景下，暗黑模式都有助于我們更輕松地瀏覽內(nèi)容，譬如長(zhǎng)時(shí)間在電腦前工作，或是睡前“再玩一會(huì)手機(jī)”的時(shí)候。

另一個(gè)原因則是不斷進(jìn)步的顯示技術(shù)。包括蘋果、谷歌、三星、華為在內(nèi)的大廠商都開始使用無需背光的 OLED 屏。設(shè)想屏幕上顯示著一塊黑色矩形，在 OLED 屏中，黑色區(qū)域的像素點(diǎn)是處于真正關(guān)閉狀態(tài)的，而過去的 LCD 屏依然會(huì)有背光存在。這就有趣了；顯然，暗黑界面在 OLED 設(shè)備中可以帶來更少的能耗，相應(yīng)地提升設(shè)備的續(xù)航能力。

暗黑模式下的顏色適配性

首先，“暗黑”并非“全黑”。不要簡(jiǎn)單地將白色界面底色改為黑色，否則你將無法通過陰影等效果構(gòu)建視覺層次。

灰色矩形在純黑底色與#121212底色上的對(duì)比效果

只要對(duì)比度沒問題，原本配色體系中的主色仍然有可能適用于深色主題，而無需另行調(diào)整。我們來看個(gè)例子，在下圖的界面當(dāng)中，底部的藍(lán)色按鈕是主行動(dòng)點(diǎn)。從對(duì)比度上來看，該元素在深淺兩個(gè)風(fēng)格的界面中都適用，可以很好地吸引注意力，圖標(biāo)也清晰易識(shí)別。

然而將同樣的顏色直接用于字色或圖標(biāo)填充色時(shí)，問題便出現(xiàn)了。對(duì)于這些元素來說，必須降低主色的飽和度，才能確保最基本的信息對(duì)比度。這種情況下，你可能需要考慮通過其他方式將品牌色（主色）融入到產(chǎn)品界面當(dāng)中。

其他高飽和度的顏色在適配性上也是類似。以紅色元素構(gòu)成的報(bào)錯(cuò)信息為例，在 Material Design 暗黑模式設(shè)計(jì)規(guī)范當(dāng)中，谷歌會(huì)為常規(guī)的報(bào)錯(cuò)紅色疊加一層 40% 的白色。這種方式很值得借鑒，可以幫助你非常便捷地改善暗黑模式下的信息對(duì)比度。

當(dāng)然，你也可以通過其他方式來調(diào)節(jié)配色，只要能夠達(dá)到提升對(duì)比度的目標(biāo)即可。有一款名叫“Stark”的 Sketch 插件可以顯示兩個(gè)圖層之間的對(duì)比度值，讓你快速了解配色關(guān)系是否達(dá)到了 AA 或 AAA 級(jí)可訪問性標(biāo)準(zhǔn)。

關(guān)于內(nèi)容字色

這里有個(gè)簡(jiǎn)單的規(guī)則：純白背景上不要出現(xiàn)純黑字色，反之亦然。白色會(huì)反射所有波長(zhǎng)的光線，黑色則是吸收所有。如果將純白色的文字置于純黑底色之上，文字便會(huì)反光，密集的字符會(huì)令人難以辨識(shí)區(qū)分，極大降低可讀性。

而純白底色的反光效應(yīng)會(huì)過于刺眼，使人的視線難以長(zhǎng)時(shí)間聚焦于文字。試著“柔化”純白，使用淺灰作為底色；或是在黑色背景里將淺灰作為字色。這兩種方式都可以降低眼壓，令人在閱讀內(nèi)容時(shí)感到更加舒適。

暗黑模式的趨勢(shì)發(fā)展

我們的日均屏幕使用時(shí)間正在日益增長(zhǎng)；從早上醒來，到夜間入睡，日常行為路徑中的屏幕數(shù)量也在漸漸增多。這種狀況在近幾年里才形成常態(tài)，我們的雙眼還無法在這么短的時(shí)間里適應(yīng)如此之高的屏幕使用量，特別是在晚間。因此，暗黑模式的再次興起著實(shí)不會(huì)令人感到意外。隨著 Material Design、macOS 和 iOS 的相繼加入，我們有理由相信，未來是無論桌面軟件還是移動(dòng)端 app，深色模式都會(huì)成為界面設(shè)計(jì)的標(biāo)準(zhǔn)模式之一；作為設(shè)計(jì)師，必須為此做好準(zhǔn)備。

目前可以設(shè)想，僅在一種情況下，你可以不必考慮將暗黑模式引入產(chǎn)品，即你的產(chǎn)品 100% 僅會(huì)在白天或光照條件充足的環(huán)境當(dāng)中被用到；但可以想象，這種情況在實(shí)際當(dāng)中恐怕少之又少。

除了我們?cè)谇拔漠?dāng)中聊到的一些基本原則以外，還有一些額外的東西需要我們關(guān)注。從可訪問性的角度講，暗黑模式的友好程度并不那么完美，因?yàn)榻缑嬲w的對(duì)比度相對(duì)較低，因此對(duì)于信息的可讀性并不會(huì)有明顯提升。

但是設(shè)想，你正困倦地躺在床上準(zhǔn)備入睡，這時(shí)你想到必須立刻給某人發(fā)送一條重要的消息。你拿起手機(jī)，點(diǎn)亮屏幕……iMessage 的界面亮到足以讓你失眠三個(gè)小時(shí)。這種場(chǎng)景下，即便我們知道深灰色背景上的淺灰色字體在可讀性上可能并非最佳，但暗黑模式在此時(shí)此刻的綜合體驗(yàn)卻不知要高到哪里去了- 這一切與用戶所處的情境息息相關(guān)。

因此，我們或許可以認(rèn)為，“自動(dòng)深色模式”可能是一個(gè)不錯(cuò)的功能，譬如你的 app 會(huì)在晚間自動(dòng)進(jìn)入暗黑模式，而到了早上則會(huì)自動(dòng)回到淺色模式（類似現(xiàn)在 macOS 和 iOS 當(dāng)中“夜覽”模式的自動(dòng)切換機(jī)制）。用戶無需考慮和操作，一切交給系統(tǒng)來完成。Twitter 在這方面已經(jīng)有了不錯(cuò)的實(shí)現(xiàn)，并且他們還更進(jìn)一步地提供了“更深”的模式，專門用于 OLED 設(shè)備的徹底節(jié)能。不過有一點(diǎn)要注意：記得為用戶提供“自動(dòng)/手動(dòng)”的切換功能，畢竟界面整體反色切換對(duì)于很多人來說并不那么易于接受，不要強(qiáng)行替用戶做主。

Twitter 已經(jīng)提供了這樣的自動(dòng)切換能力

另外還有一點(diǎn)必須注意：即便在暗黑模式下，一些特定的元素仍然需要維持淺色狀態(tài)。

以 macOS 的 Pages 為例，即便界面整體為深色模式，文檔本身依然保持白色；同理，在我們所熟悉的 Sketch 或 Illustrator 等工具當(dāng)中，畫板仍然會(huì)以白色背景作為默認(rèn)設(shè)置。

macOS 的 Pages

暗黑模式下的 Sketch

無論當(dāng)前主流的 app 級(jí)界面設(shè)計(jì)趨向于怎樣的主題風(fēng)格，我們所看到的趨勢(shì)是越來越多的系統(tǒng)級(jí)設(shè)計(jì)方案開始將暗黑模式納入原生體系。作為設(shè)計(jì)師，還是多多準(zhǔn)備為好，因?yàn)槲覀兊奈磥韺?huì)越發(fā)“黑暗”。

英文原文：https://medium.com/by-digiti/the-future-is-dark-8c3bdadf9fdc?sk=22e43184d9f5b095c0971d9f6add473f&ref=webdesignernews.com

原文作者：Ilke Verrelst

譯者：C7210 | Beforweb，公眾號(hào)：Beforweb（ID：Beforweb）

來源：https://mp.weixin.qq.com/s/qJtgW60wO_3zzT8xyRwQPw

題圖來自Unsplash，基于CC0協(xié)議