為了給公司同事闡述這兩個(gè)問(wèn)題，作者搜集了大量資料，翻閱了相關(guān)產(chǎn)品系統(tǒng)所給出的設(shè)計(jì)文檔，重點(diǎn)圍繞“什么是暗黑模式”展開(kāi)，逐步推敲其中的理論原理，總結(jié)出便于理解的文字內(nèi)容。這樣做的目的簡(jiǎn)單有二，一是與產(chǎn)品、開(kāi)發(fā)、測(cè)試方面的同事能夠達(dá)成向暗黑模式優(yōu)化升級(jí)的共識(shí)；二是能夠讓我們的各個(gè)產(chǎn)品線更從容地去擁抱暗黑模式的到來(lái)。

/“由理有劇”系列篇01：我們?cè)鯓永斫獍岛谀Ｊ?

文章大綱

1、是什么？

2、為什么？

一、是什么？

隨著 iOS 13 和 Android 10 的正式發(fā)布，“暗黑模式 (Dark Mode)”一詞逐漸走入了我們的視野，“暗黑模式是什么？”這個(gè)問(wèn)題也一度霸占了Google搜索榜首。想要深入了解暗黑模式，也許我們可以換一個(gè)角度，從用戶界面的演進(jìn)歷史中尋找線索，從而幫助我們更好地理解暗黑模式。

作者自從拜讀了《蘋(píng)果三劍客》，對(duì)于用戶界面的前世今生才有了更深的了解，蘋(píng)果的產(chǎn)品發(fā)展史，某種程度上也可以稱為用戶界面的演進(jìn)史。廢話不說(shuō)，下面讓我們一起簡(jiǎn)單聊聊。

1、原來(lái)，“Dark Mode”是用戶界面的起源

計(jì)算機(jī)誕生的早期，其顯示器一直以“暗黑模式”面向操作者，其緣由是早期的顯示技術(shù)一直被CRT主導(dǎo)，CRT釋義為“陰極射線顯像管”，在19世紀(jì)末被研制出來(lái)，因?yàn)橹圃煸硐鄬?duì)簡(jiǎn)單，所以CRT一直是早期電腦顯示的主力，但在上世紀(jì)80年代之前僅支持單色顯示。

下面兩圖分別為蘋(píng)果公司于1977至1980年間生產(chǎn)發(fā)售的 Apple II 及 Apple III 型計(jì)算機(jī)

圖中顯而易見(jiàn)，兩款計(jì)算機(jī)的顯示方式均為單調(diào)的黑底白字或綠字，呈現(xiàn)出一種“暗黑模式”的視覺(jué)效果。蘋(píng)果公司的 Apple II 和 Apple III 兩支產(chǎn)品線一直以這種“暗黑模式”面向用戶。這也反映了早期的計(jì)算機(jī)以輸入代碼執(zhí)行數(shù)字運(yùn)算作為主要功能，但是這從另一方面反應(yīng)出：未來(lái)計(jì)算機(jī)會(huì)借助不斷成長(zhǎng)、成熟的電子技術(shù)，必將掀起一場(chǎng)接一場(chǎng)的變革，用戶界面也隨之不斷地革新。

2、Apple Lisa（麗薩）奠定了計(jì)算機(jī)向“圖形用戶界面”演進(jìn)的基礎(chǔ)

上個(gè)世紀(jì)80年代之后，CRT彩色顯示技術(shù)成熟，逐漸流行普及到各個(gè)電子行業(yè)，但當(dāng)時(shí)主流的計(jì)算機(jī)操作系統(tǒng)并沒(méi)有“圖形界面”這個(gè)概念，所以大部分計(jì)算機(jī)產(chǎn)品依舊延續(xù)了先前黑色背景的顯示方式。

直到1983年1月9日，在年度股東大會(huì)上，蘋(píng)果宣布了兩款將在未來(lái)的計(jì)算機(jī)行業(yè)中占據(jù)關(guān)鍵地位的產(chǎn)品：一款叫 Apple Lisa （麗薩，老喬的第一個(gè)女兒），蘋(píng)果第一臺(tái)（也是全球第一款）基于圖形用戶界面（GUI）的計(jì)算機(jī)，也就是 Macintosh 的前身；另一臺(tái)叫 Apple IIe ，是已獲高度成功的 Apple II 系列的新一代進(jìn)階產(chǎn)品。

Apple Lisa 向主流個(gè)人電腦行業(yè)介紹了一種全新的鼠標(biāo)控制的圖形用戶界面，宣布向單調(diào)的黑白用戶界面告別。

運(yùn)用形象的圖標(biāo)、方便的下拉菜單和重疊的窗口，替代了此前一貫使用的輸入文字命令，Lisa的圖形用戶界面開(kāi)啟了消費(fèi)者與個(gè)人電腦交互方式的革新之路。盡管Lisa存在諸多缺點(diǎn)，如定價(jià)過(guò)高，功能缺失、運(yùn)行緩慢等，但它的圖形用戶界面依然給它贏得一陣喝彩。

Lisa的GUI影響如此深遠(yuǎn)，以至于諸多電腦制造商紛紛加入鼠標(biāo)控制的GUI領(lǐng)域，爭(zhēng)相模仿。就在Lisa首次亮相十個(gè)月后，微軟于1983年11月推出了Windows操作環(huán)境。（對(duì)于此事，老喬總是公開(kāi)譴責(zé)微軟的蓋茨抄襲他的產(chǎn)品創(chuàng)意，甚至想讓蓋茨吃官司，兩位大佬一直不合也是業(yè)界皆知，跑題了...）

///一個(gè)有意思的事兒：今年7月份，一位外國(guó)的蘋(píng)果粉在Twitter上發(fā)布了一條關(guān)于 Apple IIe 型計(jì)算機(jī)的動(dòng)態(tài)，內(nèi)容展示了自己使用 Apple IIe 型計(jì)算機(jī)進(jìn)行智能化任務(wù)的過(guò)程，如發(fā)送推文、在Evernote中寫(xiě)作、發(fā)送電子郵件，甚至控制智能家居（如下圖）。要知道，這臺(tái)計(jì)算機(jī)生產(chǎn)發(fā)售至今已有37年的時(shí)間。由此感嘆，不得不說(shuō)蘋(píng)果對(duì)于產(chǎn)品的品控做到了那個(gè)時(shí)代的。

3、Macintosh（麥金塔）推動(dòng)了“暗黑模式”向“淺色模式”的邁進(jìn)

1984年，蘋(píng)果發(fā)布了個(gè)人計(jì)算機(jī) Macintosh（麥金塔），Macintosh 延續(xù)了 Lisa 的圖形界面語(yǔ)言，并向世界普及了圖形用戶界面（Graphic User Interface）的概念，從而開(kāi)啟了以白色為底色的圖形交互時(shí)代。

Lisa獲得的一些成就在 Macintosh 上體現(xiàn)的淋漓盡致，包括靈活的鼠標(biāo)、點(diǎn)陣影像圖、桌面的布局、形象的圖標(biāo)、相稱的字體、屏幕上方的下拉菜單和重疊的窗口，這些也得益于日益成熟的顯示技術(shù)和不斷進(jìn)步的計(jì)算處理技術(shù)。形象生動(dòng)的圖形設(shè)計(jì)和界面交互一直是老喬最引以為傲的杰作，不得不說(shuō)，老喬對(duì)于計(jì)算機(jī)行業(yè)甚至是設(shè)計(jì)行業(yè)都有著極高的敏感度和先于旁人的前瞻性。（當(dāng)然，這里的主語(yǔ)應(yīng)該是蘋(píng)果）

Macintosh 產(chǎn)品的成功，不是蘋(píng)果一味地迎合計(jì)算機(jī)消費(fèi)市場(chǎng)，而是利用創(chuàng)新的方式引導(dǎo)市場(chǎng)，引領(lǐng)計(jì)算機(jī)行業(yè)向人性化的用戶界面發(fā)展、邁進(jìn)。

至此，我們也徹底地向“暗黑模式”說(shuō)了再見(jiàn)，全面擁抱“淺色模式”的到來(lái)。

4、“淺色模式”成為用戶界面的主流

麥金塔搭載的 System 1 打破了字符終端的模式，淺色的界面風(fēng)格一直持續(xù)到 System 6 都沒(méi)有顯著的改變。直到1991 年的 System 7 開(kāi)始引入彩色，圖標(biāo)也增加了隱約的灰色，藍(lán)色和黃色陰影。System 7 系列中的 7.6 版本正式被蘋(píng)果公司改名為 Mac OS ，而這一年是1997年。

與此同時(shí)，微軟的 Windows 從黑屏的 DOS 發(fā)展到全屏幕的 Windows 1，再到較為成熟的 Windows 3，最后演變到奠定當(dāng)今 Windows 界面基礎(chǔ)的炫麗多彩的 Windows 95。用那個(gè)時(shí)代的眼光來(lái)看，微軟的變化是相當(dāng)驚人的，微軟儼然成為了一匹計(jì)算機(jī)行業(yè)的黑馬，一路趕超蘋(píng)果成為行業(yè)霸主，而蘋(píng)果因?yàn)橐蜓嘏f，在界面設(shè)計(jì)上從領(lǐng)先掉到了最后。

此后，從 Mac OS 8 到 Mac OS X Server 1.0 ，蘋(píng)果一直專注于改善操作系統(tǒng)和優(yōu)化界面表現(xiàn)，直到2001 年 3 月，經(jīng)歷了四個(gè)開(kāi)發(fā)者預(yù)覽版和一個(gè)公共測(cè)試版之后的 Aqua 界面終于跟隨 10.0 正式發(fā)布，發(fā)布后改變了人們對(duì)計(jì)算機(jī)界面的印象，在隨后的10年里蘋(píng)果一直沿用這套界面風(fēng)格。

OS X 系列用戶界面較大的更新來(lái)自于2007年10月發(fā)布的 10.5 Leopard 豹，雖然基本的界面仍為 Aqua 和其糖果滾動(dòng)條，但新加入了一些鉑灰色和藍(lán)色，另外重新設(shè)計(jì)的 3D Dock和更多的動(dòng)畫(huà)交互使得新界面看上去 3D效果更強(qiáng)，此外還改進(jìn)了 Finder、半透明菜單條并新增了最初只用于 iTunes 的 Cover Flow界面。

整體來(lái)說(shuō)，Mac OS X 10.5 Leopard 豹 這一版本的用戶界面相比之前有了翻天覆地的變化，靈活生動(dòng)的圖形語(yǔ)言和交互體驗(yàn)重新得到了用戶青睞，蘋(píng)果也以此，再一次走上了引領(lǐng)潮流之路，使得多彩的“淺色模式”成為用戶交互界面的主流。

蘋(píng)果開(kāi)創(chuàng)性的界面圖形語(yǔ)言也延續(xù)到了移動(dòng)設(shè)備領(lǐng)域。

2007年的初代iPhone作為蘋(píng)果公司第一個(gè)移動(dòng)設(shè)備產(chǎn)品（iPhone1代）首次亮相市場(chǎng)，驚艷了整個(gè)行業(yè)，iPhone搭載的 iPhone OS 和后來(lái)更名為 iOS 的系統(tǒng)，延續(xù)了 Mac OS 用戶界面的設(shè)計(jì)語(yǔ)言。在歷代iPhone上可以看到?jīng)]有物理鍵盤(pán)侵占空間的屏幕，精美的的方塊圖案整齊的排列開(kāi)來(lái)，顏色豐富且耐看。

依稀記得當(dāng)時(shí)的我們，還玩著黑白屏幕上的俄羅斯方塊，還敲打著物理鍵盤(pán)上的九宮格，挪雞鴨也表示永不為奴。

2010年堪稱iPhone史上最重要的一年，蘋(píng)果推出了“改變一切”的iPhone 4，并對(duì)其用戶界面進(jìn)行了革新。

生動(dòng)的擬物化設(shè)計(jì)風(fēng)格正式成為業(yè)界潮流，這也使得UI行業(yè)逐漸熱了起來(lái)，蘋(píng)果的界面設(shè)計(jì)規(guī)范也順勢(shì)成為了主流的移動(dòng)端設(shè)計(jì)規(guī)范。

蘋(píng)果以此作為移動(dòng)端界面設(shè)計(jì)的基礎(chǔ)，沿用到之后的iPhone系列中，期間iOS系統(tǒng)的風(fēng)格保持依舊，只有 iPhone 5S 搭載的 iOS 7 做出了圖標(biāo)由擬物化向扁平化的改變，但整體都以“淺色模式”作為主流的用戶界面視覺(jué)模式。

5、“暗黑模式”的正式登場(chǎng)

在 Mac OS 的系統(tǒng)上，用戶可以通過(guò)“通用設(shè)置-外觀”來(lái)對(duì)整體界面進(jìn)行淺色、深色的切換，可以看出，蘋(píng)果早已把“暗黑模式”納入到他們的開(kāi)發(fā)隊(duì)列中，也就是說(shuō)，“暗黑模式”的概念主要來(lái)源于蘋(píng)果的 Mac OS，這也為“暗黑模式”的正式登場(chǎng)埋下了伏筆。

自從有了這個(gè)概念之后，很多網(wǎng)站都為用戶提供了“淺色”和“深色”兩套界面，便于用戶根據(jù)自己的習(xí)慣或愛(ài)好進(jìn)行切換。在 Mac OS 之后，很多 App 和 Android 定制 ROM 也加入了所謂“深色模式”的支持，其中也不乏 Web 端的網(wǎng)站、系統(tǒng)等。

北京時(shí)間2019年6月4日，果粉期待已久的蘋(píng)果WWDC19如期而至。

發(fā)布會(huì)上，庫(kù)克一如既往地優(yōu)先調(diào)侃了Andriod系統(tǒng)一番….（蘋(píng)果一直喜歡用數(shù)據(jù)說(shuō)話，想了解的同學(xué)可以回顧一下發(fā)布會(huì)的視頻）

言歸正傳，在發(fā)布了一系列硬件之后，庫(kù)克終于介紹了大家期待已久的 iOS 13。新發(fā)布的 iOS 13，除了提升系統(tǒng)流暢度和增加系統(tǒng)穩(wěn)定性外，還介紹了其他提升用戶體驗(yàn)的優(yōu)化。

其中，最為引人注目的“暗黑模式”即將亮相于新系統(tǒng)。

發(fā)布會(huì)表示，暗黑模式可以“改善電池壽命，改善視力不佳和強(qiáng)光下的人的可視性，以及在弱光環(huán)境中更好地使用設(shè)備”。

“Wow，beautiful！”、“That’s beautiful！”、“That’s so beautiful！”發(fā)布會(huì)的主持人一邊演示使用在暗黑模式下的App應(yīng)用，一邊不由自主地發(fā)出贊美。這也許也受到了老喬的影響，猶如在劇場(chǎng)舞臺(tái)中心的話劇演員，有著一種無(wú)可比擬的自信和氣場(chǎng)。

但有意思的一點(diǎn)是，主持人展示了 iOS 13 暗黑模式的開(kāi)發(fā)團(tuán)隊(duì)合照，從極客穿著到賽博朋克式的暗黑搖滾裝扮，這一戲劇性的變化似乎在告訴大家：“玩，我們也是認(rèn)真的?！?

發(fā)布會(huì)上簡(jiǎn)單演示了暗黑模式下的漂亮界面，雖然沒(méi)有過(guò)多地闡述暗黑模式的開(kāi)發(fā)細(xì)節(jié)，但是這標(biāo)志著暗黑模式“重新”登上歷史舞臺(tái)。

6、小結(jié)

我們從蘋(píng)果產(chǎn)品發(fā)展史中，不難發(fā)現(xiàn)蘋(píng)果對(duì)于用戶體驗(yàn)的理解是具有創(chuàng)造性的，總是能先于用戶發(fā)現(xiàn)用戶的潛在需求。蘋(píng)果產(chǎn)品的發(fā)展史也可以稱之為用戶界面的演進(jìn)史，從早期黑色背景的計(jì)算機(jī)桌面發(fā)展到以淺色為主的用戶界面，再到 iOS 13 正式發(fā)布的“暗黑模式”，這一過(guò)程貌似是在“返祖”，但這些始終是圍繞以用戶體驗(yàn)為中心的改變和突破。

“暗黑模式”是什么？拋開(kāi)技術(shù)理論，簡(jiǎn)單理解就是降低用戶界面在設(shè)備上的亮度，以深色的背景、較低的對(duì)比度、灰階的色彩來(lái)呈現(xiàn)用戶界面，提升用戶使用產(chǎn)品的體驗(yàn)。

二、為什么？

上面我們提到了，根據(jù) Apple 官方的說(shuō)法，暗黑模式可以“改善電池壽命，改善視力不佳和強(qiáng)光下的人的可視性，以及在弱光環(huán)境中更好地使用設(shè)備”。

我們可以圍繞這個(gè)說(shuō)法，結(jié)合我們與設(shè)備、環(huán)境的關(guān)系進(jìn)行探討。

1、更好地適應(yīng)弱光環(huán)境

隨著人們對(duì)智能設(shè)備的依賴性越來(lái)越強(qiáng)，設(shè)備使用的時(shí)間也高頻覆蓋了白天到黑夜，夜晚使用的頻率更是與日俱增，所以暗光環(huán)境的使用需求被實(shí)實(shí)在在地?cái)[到了臺(tái)面上。以設(shè)計(jì)職業(yè)為例，在阿里巴巴 UCAN 2019 設(shè)計(jì)大會(huì)上分享的數(shù)據(jù)結(jié)果顯示：設(shè)計(jì)師群體夜晚的工作時(shí)間通常在5-6個(gè)小時(shí)…

不是在加班就是在加班路上的我們更習(xí)慣于在夜間工作，夜間安靜的環(huán)境更能讓我們專注設(shè)計(jì)、靈感爆棚。但這也在另一方面表達(dá)了我們需要設(shè)備更加符合我們?cè)谌豕猸h(huán)境下的視聽(tīng)需求。

Dark Mode 由此應(yīng)運(yùn)而生，使用暗色模式可以縮小屏幕顯示內(nèi)容與環(huán)境光強(qiáng)度的差距，可以保證使用者在暗光環(huán)境下使用設(shè)備的舒適度。也就是說(shuō) Dark Mode 可以降低屏幕的整體視覺(jué)亮度，降低對(duì)眼睛的視覺(jué)壓力，再也不用怕夜晚的設(shè)備屏幕刺瞎我們的雙眼了。

但這里我們要理解一個(gè)概念，“降低對(duì)眼睛的視覺(jué)壓力”并不等同于所謂的“護(hù)眼”，夜晚使用暗黑模式的設(shè)備，實(shí)際上并沒(méi)有改變屏幕的“頻閃”問(wèn)題，所以說(shuō)用戶看屏幕的時(shí)候依舊會(huì)有視覺(jué)疲勞的癥狀，所以各位大佬還是晚上少看屏幕，多愛(ài)護(hù)眼睛吧。

2、更好地專注顯示內(nèi)容

想象一下，我們?cè)陔娪霸嚎措娪皶r(shí)，為什么要全場(chǎng)關(guān)燈？

甚至有些APP， 在影片的下方也會(huì)有一個(gè)模擬關(guān)燈效果的按鈕，來(lái)讓整個(gè)手機(jī)屏幕變黑， 只剩下視頻畫(huà)面的部分，這都幫助我們可以更專注、更沉浸在當(dāng)前的內(nèi)容下，也就是所謂的“沉浸感”。

這其中的原理就是色彩本身是具有層級(jí)關(guān)系的，深色會(huì)在視覺(jué)感官上自動(dòng)后退，淺色部分則會(huì)向前延展，這樣對(duì)比強(qiáng)烈的層次關(guān)系可以讓用戶更注重被凸顯出來(lái)的內(nèi)容和交互操作；尤其在信息負(fù)責(zé)界面內(nèi)層級(jí)關(guān)系的合理拉開(kāi)對(duì)操作效率都有明顯的促進(jìn)作用。

這一點(diǎn)在股票交易軟件上就是最好的驗(yàn)證，目前來(lái)看全世界絕大多數(shù)的股票軟件采用的都是負(fù)極性，也就是暗色底的設(shè)計(jì)方式。紅色和綠色代表的漲或跌（不同國(guó)家顏色表示可能不一樣）在這樣的深色背景下就會(huì)特別顯眼，還有一些顏色比如藍(lán)色用于某些數(shù)據(jù)的走勢(shì)圖。這樣的顯示幫助用戶更好地集中精力在數(shù)據(jù)獲取上，更快地做出決策。

3、更好地迎合消費(fèi)品味

這里所提到的消費(fèi)品味是來(lái)自用戶層面的潛在心理需求。

從心理學(xué)角度而言，顏色可以影響觀者的感受和情緒，這直接影響到用戶對(duì)于一個(gè)事物的判斷和選擇，這就像我們消費(fèi)購(gòu)物一般，有時(shí)候我們的消費(fèi)不完全是為功能、實(shí)用性買單，而更加看重的是一個(gè)產(chǎn)品的外觀屬性，當(dāng)產(chǎn)品的外觀符合我們的消費(fèi)審美甚至超越預(yù)期時(shí)，我們往往會(huì)更快地做出消費(fèi)選擇。

而黑色在積極層面的外在直觀表現(xiàn)為高貴、莊嚴(yán)、鎮(zhèn)定、神秘，這代表著黑色相比其他顏色存在著更多的可能性，這也造就了黑色成為百搭色，可以作為其他顏色的底色、陪襯色進(jìn)行使用。暗黑模式也存在同樣的心理暗示，沉穩(wěn)、神秘的黑色會(huì)讓用戶聯(lián)想到產(chǎn)品的穩(wěn)定和高級(jí)，提升用戶的心理信任度，迎合用戶的消費(fèi)品味。

4、更好地改善電池壽命

最后才探討耗電功效方面的問(wèn)題，算是一個(gè)壓軸問(wèn)題了，在某種程度上說(shuō)，智能移動(dòng)設(shè)備目前最大的矛盾是性能與電池功效的博弈。如果去微博等社交網(wǎng)站進(jìn)行搜索可以發(fā)現(xiàn)，為了省電而使用深色主題或者說(shuō)黑暗模式的用戶大有人在，尤其是一些中高端采用 OLED 屏幕的手機(jī)。這是為什么？

暗黑模式省電的作用來(lái)源于 OLED 這種材質(zhì)的特性，這種屏幕經(jīng)過(guò)多年發(fā)展如今已經(jīng)取代了 LCD 在中高端手機(jī)上的地位。和 LCD 依賴于背光不同，OLED 自發(fā)光的特性使得屏幕能夠獨(dú)立控制單個(gè)像素是否發(fā)光，也就是說(shuō)畫(huà)面越黑，采用 OLED 屏幕的手機(jī)就越省電。下圖做了一個(gè)簡(jiǎn)單的理解示例，每一列的格子代表亮度，在不同亮度下有相對(duì)應(yīng)的耗電量顯示，閃電的亮度代表耗電量的多少。

理解了簡(jiǎn)單含義，我們?cè)賮?lái)看一下Notebookcheck上對(duì)于OLED功耗的專業(yè)研究數(shù)據(jù)。在使用 OLED 屏幕時(shí)，屏幕上顯示的內(nèi)容決定了功耗。當(dāng)屏幕基本全黑時(shí)（OLED <1% White），OLED 屏在任何亮度下的功耗都保持恒定。顯示了白色內(nèi)容的屏幕，功耗曲線會(huì)隨著亮度提高而逐漸變陡。

上面的可視化圖表相對(duì)來(lái)說(shuō)可能需要一定的理解時(shí)間，讓我們翻譯簡(jiǎn)化一下。

上圖顯而易見(jiàn)，OLED屏幕的耗電量不僅受到亮度高低的影響，關(guān)鍵在于在OLED屏幕顯示了什么，有多少區(qū)域是淺色甚至是白色的，有多少區(qū)域是深色甚至黑色的，深色區(qū)域占比越高，相比較之下OLED屏幕也就越省電。這也就證明：OLED屏幕在使用以深色為主的顯示模式時(shí)，能夠降低耗電量，提升供電效率，也就是改善電池壽命。

藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)