2020-12-30 資深UI設計者
“由理有劇”系列以”我們怎樣理解暗黑模式“為開篇，緣由作者正在任職的工作是 TO B 產(chǎn)品交互及界面設計，入職時正值公司整體產(chǎn)品線升級迭代，用戶界面從淺色模式向暗黑模式探索的階段。這個探索階段面臨的本質(zhì)問題便是“到底什么是暗黑模式”，同時“我們?yōu)槭裁匆冒岛谀Ｊ?/strong>”的問題也隨之而來。
為了給公司同事闡述這兩個問題，作者搜集了大量資料，翻閱了相關產(chǎn)品系統(tǒng)所給出的設計文檔，重點圍繞“什么是暗黑模式”展開，逐步推敲其中的理論原理，總結(jié)出便于理解的文字內(nèi)容。這樣做的目的簡單有二，一是與產(chǎn)品、開發(fā)、測試方面的同事能夠達成向暗黑模式優(yōu)化升級的共識；二是能夠讓我們的各個產(chǎn)品線更從容地去擁抱暗黑模式的到來。
文章大綱
1、是什么？
2、為什么？
隨著 iOS 13 和 Android 10 的正式發(fā)布，“暗黑模式 (Dark Mode)”一詞逐漸走入了我們的視野，“暗黑模式是什么？”這個問題也一度霸占了Google搜索榜首。想要深入了解暗黑模式，也許我們可以換一個角度，從用戶界面的演進歷史中尋找線索，從而幫助我們更好地理解暗黑模式。
作者自從拜讀了《蘋果三劍客》，對于用戶界面的前世今生才有了更深的了解，蘋果的產(chǎn)品發(fā)展史，某種程度上也可以稱為用戶界面的演進史。廢話不說，下面讓我們一起簡單聊聊。
計算機誕生的早期，其顯示器一直以“暗黑模式”面向操作者，其緣由是早期的顯示技術一直被CRT主導，CRT釋義為“陰極射線顯像管”，在19世紀末被研制出來，因為制造原理相對簡單，所以CRT一直是早期電腦顯示的主力，但在上世紀80年代之前僅支持單色顯示。
下面兩圖分別為蘋果公司于1977至1980年間生產(chǎn)發(fā)售的 Apple II 及 Apple III 型計算機
圖中顯而易見，兩款計算機的顯示方式均為單調(diào)的黑底白字或綠字，呈現(xiàn)出一種“暗黑模式”的視覺效果。蘋果公司的 Apple II 和 Apple III 兩支產(chǎn)品線一直以這種“暗黑模式”面向用戶。這也反映了早期的計算機以輸入代碼執(zhí)行數(shù)字運算作為主要功能，但是這從另一方面反應出：未來計算機會借助不斷成長、成熟的電子技術，必將掀起一場接一場的變革，用戶界面也隨之不斷地革新。
上個世紀80年代之后，CRT彩色顯示技術成熟，逐漸流行普及到各個電子行業(yè)，但當時主流的計算機操作系統(tǒng)并沒有“圖形界面”這個概念，所以大部分計算機產(chǎn)品依舊延續(xù)了先前黑色背景的顯示方式。
直到1983年1月9日，在年度股東大會上，蘋果宣布了兩款將在未來的計算機行業(yè)中占據(jù)關鍵地位的產(chǎn)品：一款叫 Apple Lisa （麗薩，老喬的第一個女兒），蘋果第一臺（也是全球第一款）基于圖形用戶界面（GUI）的計算機，也就是 Macintosh 的前身；另一臺叫 Apple IIe ，是已獲高度成功的 Apple II 系列的新一代進階產(chǎn)品。
Apple Lisa 向主流個人電腦行業(yè)介紹了一種全新的鼠標控制的圖形用戶界面，宣布向單調(diào)的黑白用戶界面告別。
運用形象的圖標、方便的下拉菜單和重疊的窗口，替代了此前一貫使用的輸入文字命令，Lisa的圖形用戶界面開啟了消費者與個人電腦交互方式的革新之路。盡管Lisa存在諸多缺點，如定價過高，功能缺失、運行緩慢等，但它的圖形用戶界面依然給它贏得一陣喝彩。
Lisa的GUI影響如此深遠，以至于諸多電腦制造商紛紛加入鼠標控制的GUI領域，爭相模仿。就在Lisa首次亮相十個月后，微軟于1983年11月推出了Windows操作環(huán)境。（對于此事，老喬總是公開譴責微軟的蓋茨抄襲他的產(chǎn)品創(chuàng)意，甚至想讓蓋茨吃官司，兩位大佬一直不合也是業(yè)界皆知，跑題了...）
///一個有意思的事兒：今年7月份，一位外國的蘋果粉在Twitter上發(fā)布了一條關于 Apple IIe 型計算機的動態(tài)，內(nèi)容展示了自己使用 Apple IIe 型計算機進行智能化任務的過程，如發(fā)送推文、在Evernote中寫作、發(fā)送電子郵件，甚至控制智能家居（如下圖）。要知道，這臺計算機生產(chǎn)發(fā)售至今已有37年的時間。由此感嘆，不得不說蘋果對于產(chǎn)品的品控做到了那個時代的。
1984年，蘋果發(fā)布了個人計算機 Macintosh（麥金塔），Macintosh 延續(xù)了 Lisa 的圖形界面語言，并向世界普及了圖形用戶界面（Graphic User Interface）的概念，從而開啟了以白色為底色的圖形交互時代。
Lisa獲得的一些成就在 Macintosh 上體現(xiàn)的淋漓盡致，包括靈活的鼠標、點陣影像圖、桌面的布局、形象的圖標、相稱的字體、屏幕上方的下拉菜單和重疊的窗口，這些也得益于日益成熟的顯示技術和不斷進步的計算處理技術。形象生動的圖形設計和界面交互一直是老喬最引以為傲的杰作，不得不說，老喬對于計算機行業(yè)甚至是設計行業(yè)都有著極高的敏感度和先于旁人的前瞻性。（當然，這里的主語應該是蘋果）
Macintosh 產(chǎn)品的成功，不是蘋果一味地迎合計算機消費市場，而是利用創(chuàng)新的方式引導市場，引領計算機行業(yè)向人性化的用戶界面發(fā)展、邁進。
至此，我們也徹底地向“暗黑模式”說了再見，全面擁抱“淺色模式”的到來。
麥金塔搭載的 System 1 打破了字符終端的模式，淺色的界面風格一直持續(xù)到 System 6 都沒有顯著的改變。直到1991 年的 System 7 開始引入彩色，圖標也增加了隱約的灰色，藍色和黃色陰影。System 7 系列中的 7.6 版本正式被蘋果公司改名為 Mac OS ，而這一年是1997年。
與此同時，微軟的 Windows 從黑屏的 DOS 發(fā)展到全屏幕的 Windows 1，再到較為成熟的 Windows 3，最后演變到奠定當今 Windows 界面基礎的炫麗多彩的 Windows 95。用那個時代的眼光來看，微軟的變化是相當驚人的，微軟儼然成為了一匹計算機行業(yè)的黑馬，一路趕超蘋果成為行業(yè)霸主，而蘋果因為因循守舊，在界面設計上從領先掉到了最后。
此后，從 Mac OS 8 到 Mac OS X Server 1.0 ，蘋果一直專注于改善操作系統(tǒng)和優(yōu)化界面表現(xiàn)，直到2001 年 3 月，經(jīng)歷了四個開發(fā)者預覽版和一個公共測試版之后的 Aqua 界面終于跟隨 10.0 正式發(fā)布，發(fā)布后改變了人們對計算機界面的印象，在隨后的10年里蘋果一直沿用這套界面風格。
OS X 系列用戶界面較大的更新來自于2007年10月發(fā)布的 10.5 Leopard 豹，雖然基本的界面仍為 Aqua 和其糖果滾動條，但新加入了一些鉑灰色和藍色，另外重新設計的 3D Dock和更多的動畫交互使得新界面看上去 3D效果更強，此外還改進了 Finder、半透明菜單條并新增了最初只用于 iTunes 的 Cover Flow界面。
整體來說，Mac OS X 10.5 Leopard 豹 這一版本的用戶界面相比之前有了翻天覆地的變化，靈活生動的圖形語言和交互體驗重新得到了用戶青睞，蘋果也以此，再一次走上了引領潮流之路，使得多彩的“淺色模式”成為用戶交互界面的主流。
蘋果開創(chuàng)性的界面圖形語言也延續(xù)到了移動設備領域。
2007年的初代iPhone作為蘋果公司第一個移動設備產(chǎn)品（iPhone1代）首次亮相市場，驚艷了整個行業(yè)，iPhone搭載的 iPhone OS 和后來更名為 iOS 的系統(tǒng)，延續(xù)了 Mac OS 用戶界面的設計語言。在歷代iPhone上可以看到?jīng)]有物理鍵盤侵占空間的屏幕，精美的的方塊圖案整齊的排列開來，顏色豐富且耐看。
依稀記得當時的我們，還玩著黑白屏幕上的俄羅斯方塊，還敲打著物理鍵盤上的九宮格，挪雞鴨也表示永不為奴。
2010年堪稱iPhone史上最重要的一年，蘋果推出了“改變一切”的iPhone 4，并對其用戶界面進行了革新。
生動的擬物化設計風格正式成為業(yè)界潮流，這也使得UI行業(yè)逐漸熱了起來，蘋果的界面設計規(guī)范也順勢成為了主流的移動端設計規(guī)范。
蘋果以此作為移動端界面設計的基礎，沿用到之后的iPhone系列中，期間iOS系統(tǒng)的風格保持依舊，只有 iPhone 5S 搭載的 iOS 7 做出了圖標由擬物化向扁平化的改變，但整體都以“淺色模式”作為主流的用戶界面視覺模式。
在 Mac OS 的系統(tǒng)上，用戶可以通過“通用設置-外觀”來對整體界面進行淺色、深色的切換，可以看出，蘋果早已把“暗黑模式”納入到他們的開發(fā)隊列中，也就是說，“暗黑模式”的概念主要來源于蘋果的 Mac OS，這也為“暗黑模式”的正式登場埋下了伏筆。
自從有了這個概念之后，很多網(wǎng)站都為用戶提供了“淺色”和“深色”兩套界面，便于用戶根據(jù)自己的習慣或愛好進行切換。在 Mac OS 之后，很多 App 和 Android 定制 ROM 也加入了所謂“深色模式”的支持，其中也不乏 Web 端的網(wǎng)站、系統(tǒng)等。
北京時間2019年6月4日，果粉期待已久的蘋果WWDC19如期而至。
發(fā)布會上，庫克一如既往地優(yōu)先調(diào)侃了Andriod系統(tǒng)一番….（蘋果一直喜歡用數(shù)據(jù)說話，想了解的同學可以回顧一下發(fā)布會的視頻）
言歸正傳，在發(fā)布了一系列硬件之后，庫克終于介紹了大家期待已久的 iOS 13。新發(fā)布的 iOS 13，除了提升系統(tǒng)流暢度和增加系統(tǒng)穩(wěn)定性外，還介紹了其他提升用戶體驗的優(yōu)化。
其中，最為引人注目的“暗黑模式”即將亮相于新系統(tǒng)。
發(fā)布會表示，暗黑模式可以“改善電池壽命，改善視力不佳和強光下的人的可視性，以及在弱光環(huán)境中更好地使用設備”。
“Wow，beautiful！”、“That’s beautiful！”、“That’s so beautiful！”發(fā)布會的主持人一邊演示使用在暗黑模式下的App應用，一邊不由自主地發(fā)出贊美。這也許也受到了老喬的影響，猶如在劇場舞臺中心的話劇演員，有著一種無可比擬的自信和氣場。
但有意思的一點是，主持人展示了 iOS 13 暗黑模式的開發(fā)團隊合照，從極客穿著到賽博朋克式的暗黑搖滾裝扮，這一戲劇性的變化似乎在告訴大家：“玩，我們也是認真的?！?
發(fā)布會上簡單演示了暗黑模式下的漂亮界面，雖然沒有過多地闡述暗黑模式的開發(fā)細節(jié)，但是這標志著暗黑模式“重新”登上歷史舞臺。
我們從蘋果產(chǎn)品發(fā)展史中，不難發(fā)現(xiàn)蘋果對于用戶體驗的理解是具有創(chuàng)造性的，總是能先于用戶發(fā)現(xiàn)用戶的潛在需求。蘋果產(chǎn)品的發(fā)展史也可以稱之為用戶界面的演進史，從早期黑色背景的計算機桌面發(fā)展到以淺色為主的用戶界面，再到 iOS 13 正式發(fā)布的“暗黑模式”，這一過程貌似是在“返祖”，但這些始終是圍繞以用戶體驗為中心的改變和突破。
“暗黑模式”是什么？拋開技術理論，簡單理解就是降低用戶界面在設備上的亮度，以深色的背景、較低的對比度、灰階的色彩來呈現(xiàn)用戶界面，提升用戶使用產(chǎn)品的體驗。
上面我們提到了，根據(jù) Apple 官方的說法，暗黑模式可以“改善電池壽命，改善視力不佳和強光下的人的可視性，以及在弱光環(huán)境中更好地使用設備”。
我們可以圍繞這個說法，結(jié)合我們與設備、環(huán)境的關系進行探討。
隨著人們對智能設備的依賴性越來越強，設備使用的時間也高頻覆蓋了白天到黑夜，夜晚使用的頻率更是與日俱增，所以暗光環(huán)境的使用需求被實實在在地擺到了臺面上。以設計職業(yè)為例，在阿里巴巴 UCAN 2019 設計大會上分享的數(shù)據(jù)結(jié)果顯示：設計師群體夜晚的工作時間通常在5-6個小時…
不是在加班就是在加班路上的我們更習慣于在夜間工作，夜間安靜的環(huán)境更能讓我們專注設計、靈感爆棚。但這也在另一方面表達了我們需要設備更加符合我們在弱光環(huán)境下的視聽需求。
Dark Mode 由此應運而生，使用暗色模式可以縮小屏幕顯示內(nèi)容與環(huán)境光強度的差距，可以保證使用者在暗光環(huán)境下使用設備的舒適度。也就是說 Dark Mode 可以降低屏幕的整體視覺亮度，降低對眼睛的視覺壓力，再也不用怕夜晚的設備屏幕刺瞎我們的雙眼了。
但這里我們要理解一個概念，“降低對眼睛的視覺壓力”并不等同于所謂的“護眼”，夜晚使用暗黑模式的設備，實際上并沒有改變屏幕的“頻閃”問題，所以說用戶看屏幕的時候依舊會有視覺疲勞的癥狀，所以各位大佬還是晚上少看屏幕，多愛護眼睛吧。
想象一下，我們在電影院看電影時，為什么要全場關燈？
甚至有些APP， 在影片的下方也會有一個模擬關燈效果的按鈕，來讓整個手機屏幕變黑， 只剩下視頻畫面的部分，這都幫助我們可以更專注、更沉浸在當前的內(nèi)容下，也就是所謂的“沉浸感”。
這其中的原理就是色彩本身是具有層級關系的，深色會在視覺感官上自動后退，淺色部分則會向前延展，這樣對比強烈的層次關系可以讓用戶更注重被凸顯出來的內(nèi)容和交互操作；尤其在信息負責界面內(nèi)層級關系的合理拉開對操作效率都有明顯的促進作用。
這一點在股票交易軟件上就是最好的驗證，目前來看全世界絕大多數(shù)的股票軟件采用的都是負極性，也就是暗色底的設計方式。紅色和綠色代表的漲或跌（不同國家顏色表示可能不一樣）在這樣的深色背景下就會特別顯眼，還有一些顏色比如藍色用于某些數(shù)據(jù)的走勢圖。這樣的顯示幫助用戶更好地集中精力在數(shù)據(jù)獲取上，更快地做出決策。
這里所提到的消費品味是來自用戶層面的潛在心理需求。
從心理學角度而言，顏色可以影響觀者的感受和情緒，這直接影響到用戶對于一個事物的判斷和選擇，這就像我們消費購物一般，有時候我們的消費不完全是為功能、實用性買單，而更加看重的是一個產(chǎn)品的外觀屬性，當產(chǎn)品的外觀符合我們的消費審美甚至超越預期時，我們往往會更快地做出消費選擇。
而黑色在積極層面的外在直觀表現(xiàn)為高貴、莊嚴、鎮(zhèn)定、神秘，這代表著黑色相比其他顏色存在著更多的可能性，這也造就了黑色成為百搭色，可以作為其他顏色的底色、陪襯色進行使用。暗黑模式也存在同樣的心理暗示，沉穩(wěn)、神秘的黑色會讓用戶聯(lián)想到產(chǎn)品的穩(wěn)定和高級，提升用戶的心理信任度，迎合用戶的消費品味。
最后才探討耗電功效方面的問題，算是一個壓軸問題了，在某種程度上說，智能移動設備目前最大的矛盾是性能與電池功效的博弈。如果去微博等社交網(wǎng)站進行搜索可以發(fā)現(xiàn)，為了省電而使用深色主題或者說黑暗模式的用戶大有人在，尤其是一些中高端采用 OLED 屏幕的手機。這是為什么？
暗黑模式省電的作用來源于 OLED 這種材質(zhì)的特性，這種屏幕經(jīng)過多年發(fā)展如今已經(jīng)取代了 LCD 在中高端手機上的地位。和 LCD 依賴于背光不同，OLED 自發(fā)光的特性使得屏幕能夠獨立控制單個像素是否發(fā)光，也就是說畫面越黑，采用 OLED 屏幕的手機就越省電。下圖做了一個簡單的理解示例，每一列的格子代表亮度，在不同亮度下有相對應的耗電量顯示，閃電的亮度代表耗電量的多少。
理解了簡單含義，我們再來看一下Notebookcheck上對于OLED功耗的專業(yè)研究數(shù)據(jù)。在使用 OLED 屏幕時，屏幕上顯示的內(nèi)容決定了功耗。當屏幕基本全黑時（OLED <1% White），OLED 屏在任何亮度下的功耗都保持恒定。顯示了白色內(nèi)容的屏幕，功耗曲線會隨著亮度提高而逐漸變陡。
上面的可視化圖表相對來說可能需要一定的理解時間，讓我們翻譯簡化一下。
上圖顯而易見，OLED屏幕的耗電量不僅受到亮度高低的影響，關鍵在于在OLED屏幕顯示了什么，有多少區(qū)域是淺色甚至是白色的，有多少區(qū)域是深色甚至黑色的，深色區(qū)域占比越高，相比較之下OLED屏幕也就越省電。這也就證明：OLED屏幕在使用以深色為主的顯示模式時，能夠降低耗電量，提升供電效率，也就是改善電池壽命。
藍藍設計( m.sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務