暗黑模式設計原則

2 評論 11163 瀏覽 35 收藏 11 分鐘

iOS 13 不出意外地帶來了暗黑模式,預計待到九、十月份系統正式推送的時候,WireframeKit 組件庫要做超大更新了。

近來正好讀到這樣一篇文章,關于暗黑模式設計原則的一些探討,值得一讀;今天便帶來譯文。話說年底要上映的最新一部《終結者》叫做“Terminator:Dark Fate”,黑暗命運,也很妙呢。

暗黑模式設計原則淺談,The future is dark

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

然而,暗黑模式確實不是人機界面領域的新概念了。曾幾何時,綠色字符呈現在漆黑屏幕上的模式就是我們所擁有的全部。如今的顯示技術與那個年代相比不可同日而語,但暗黑模式依然存在,并且大有蓬勃發展之勢,這又是為什么呢?

首先,如今的計算設備無處不在,隨時隨地都有屏幕伴隨著我們的工作與生活;在很多場景下,暗黑模式都有助于我們更輕松地瀏覽內容,譬如長時間在電腦前工作,或是睡前“再玩一會手機”的時候。

另一個原因則是不斷進步的顯示技術。包括蘋果、谷歌、三星、華為在內的大廠商都開始使用無需背光的 OLED 屏。設想屏幕上顯示著一塊黑色矩形,在 OLED 屏中,黑色區域的像素點是處于真正關閉狀態的,而過去的 LCD 屏依然會有背光存在。這就有趣了;顯然,暗黑界面在 OLED 設備中可以帶來更少的能耗,相應地提升設備的續航能力。

暗黑模式下的顏色適配性

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

暗黑模式設計原則淺析

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

只要對比度沒問題,原本配色體系中的主色仍然有可能適用于深色主題,而無需另行調整。我們來看個例子,在下圖的界面當中,底部的藍色按鈕是主行動點。從對比度上來看,該元素在深淺兩個風格的界面中都適用,可以很好地吸引注意力,圖標也清晰易識別。

暗黑模式設計原則淺析

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

暗黑模式設計原則淺析

其他高飽和度的顏色在適配性上也是類似。以紅色元素構成的報錯信息為例,在 Material Design 暗黑模式設計規范當中,谷歌會為常規的報錯紅色疊加一層 40% 的白色。這種方式很值得借鑒,可以幫助你非常便捷地改善暗黑模式下的信息對比度。

暗黑模式設計原則淺析

當然,你也可以通過其他方式來調節配色,只要能夠達到提升對比度的目標即可。有一款名叫“Stark”的 Sketch 插件可以顯示兩個圖層之間的對比度值,讓你快速了解配色關系是否達到了 AA 或 AAA 級可訪問性標準。

關于內容字色

這里有個簡單的規則:純白背景上不要出現純黑字色,反之亦然。白色會反射所有波長的光線,黑色則是吸收所有。如果將純白色的文字置于純黑底色之上,文字便會反光,密集的字符會令人難以辨識區分,極大降低可讀性。

而純白底色的反光效應會過于刺眼,使人的視線難以長時間聚焦于文字。試著“柔化”純白,使用淺灰作為底色;或是在黑色背景里將淺灰作為字色。這兩種方式都可以降低眼壓,令人在閱讀內容時感到更加舒適。

暗黑模式設計原則淺析

暗黑模式的趨勢發展

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

目前可以設想,僅在一種情況下,你可以不必考慮將暗黑模式引入產品,即你的產品 100% 僅會在白天或光照條件充足的環境當中被用到;但可以想象,這種情況在實際當中恐怕少之又少。

除了我們在前文當中聊到的一些基本原則以外,還有一些額外的東西需要我們關注。從可訪問性的角度講,暗黑模式的友好程度并不那么完美,因為界面整體的對比度相對較低,因此對于信息的可讀性并不會有明顯提升。

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

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

暗黑模式設計原則淺析

Twitter 已經提供了這樣的自動切換能力

另外還有一點必須注意:即便在暗黑模式下,一些特定的元素仍然需要維持淺色狀態。

以 macOS 的 Pages 為例,即便界面整體為深色模式,文檔本身依然保持白色;同理,在我們所熟悉的 Sketch 或 Illustrator 等工具當中,畫板仍然會以白色背景作為默認設置。

暗黑模式設計原則淺析

macOS 的 Pages

暗黑模式設計原則淺析

暗黑模式下的 Sketch

無論當前主流的 app 級界面設計趨向于怎樣的主題風格,我們所看到的趨勢是越來越多的系統級設計方案開始將暗黑模式納入原生體系。作為設計師,還是多多準備為好,因為我們的未來將會越發“黑暗”。

 

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

原文作者:Ilke Verrelst

譯者:C7210 | Beforweb,公眾號:Beforweb(ID:Beforweb)

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

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 以后的APP設計中,無論是Android,還是iOS系統,都需要設計一版暗黑模式嗎?

    來自北京 回復
  2. 很有幫助,因為最近看到那個百度網盤,才想到的設計語言

    來自浙江 回復