近一年，隨著iOS和安卓陸續(xù)支持了深色模式，各個團(tuán)隊的一通操作，也的確為用戶帶來“眼前一黑”的體驗。深色模式也成為了前陣子業(yè)界最火的話題之一。只是當(dāng)設(shè)計師看了無數(shù)的關(guān)于深色模式的討論；當(dāng)無數(shù)產(chǎn)品跟進(jìn)上線了深色模式；再當(dāng)無數(shù)App的深色模式被罵的改了又改，回頭來看看，你說的黑，到底是什么黑。

Chapter 1

1，我所經(jīng)歷過的深色模式

雖然說，我真正開始做UI設(shè)計是近年，但是曾經(jīng)還是體驗過很多深色模式的界面的。甚至有很多產(chǎn)品，天生就是深色模式。可以發(fā)現(xiàn)，史前的深色模式，要么是因為技術(shù)原因，要么就一些對注意力和對比度需求比較特殊的場景，還有可能是因為...微軟的Geek們一些對深色的一些蜜汁執(zhí)著吧...

2，故事的開始其實都是深色模式：命令行界面

啥？這也算深色模式？你說的對。要說深色模式是個近年來才進(jìn)入我們視野的話，其實深色模式真的是一個古老的東西，甚至比現(xiàn)在大行其道的“淺色模式”歷史更悠久，所以，這個深色模式，要追溯到什么時候呢？大概就是這個時候吧。畢竟那個時候，CRT顯示器要不就是黑屏，要不就只顯示白點，那只能這樣了。

但是等到GUI出現(xiàn)之后，界面就變成了白色。除了視覺上的變化，在交互上，其實GUI和命令行最大的設(shè)計上的區(qū)別，是產(chǎn)生了“容器”和“空間層級”的概念。

不得不說，GUI真是一個偉大的發(fā)明呀?？墒墙缑鎸蛹壍膯栴}，在白色界面下得到了很好的解決，這個也恰好是今天在做深色模式的時候，界面上最大程度被削弱的信息部分。

既然有一個“容器”，那必須得有個底，而且大家都習(xí)慣于白紙黑字，所有的界面都變成了白色了，好像白色會給人一種更加被“包裝好”的感覺。從此以后黑色界面的時代就過去了，只存在于黑客電影中。

而電腦，也逐漸成為了“白色家電”，和GUI設(shè)計的風(fēng)格融為一體。

3，移動深色模式的先驅(qū)：夜間手機閱讀器

2G時代，當(dāng)PC正在白色UI上一去不復(fù)回時，移動端似乎在深色模式上找到了屬于自己的場景：夜間閱讀。UC瀏覽器 / Opera / Zaker / 各類信息流閱讀器。因為在低光照下需要保持低對比度來護(hù)眼，所以陸續(xù)推出了深色閱讀模式。這也是深色模式在GUI時代第一次走進(jìn)了大眾的視野中。

4，讓人無法接受的深色模式：Windows高對比度模式

在Windows推出了相當(dāng)長的一段時間里，黑色界面就不再出現(xiàn)了。但是準(zhǔn)確的說，實際上保留了一個主題功能。這個主題可以讓用戶設(shè)計用戶界面的配色，從比較早期的Windows開始（忘了具體是哪個版本）。Windows保留了高對比度的主題。

（雖然這個效果真的...沒辦法接受）

可能也是因為沒怎么走心吧...也可能它只是一個高對比度模式，微軟對于容器和控件層級的解決辦法，就是通過白線來分割...雖然看起來非常沒有質(zhì)感，不夠優(yōu)雅，但是的確能解決問題。

它從來沒有真正流行過。但是可以看到，微軟的設(shè)計師心中，也許還是為黑色主題留了一塊位置的。結(jié)果過了一段時間，他們果然找到了方向，在一款不入流的MP3上線實驗了。

5，深色中的曙光：Zune UI

在10多年前，iPod以及其夸張的流行度橫掃全球的時候，曾經(jīng)冒出來各種“iPod殺手”，但是這些大多數(shù)都是噱頭而已，并沒有真正的對iPod造成影響。

但是有一款同樣不入流的MP3，它雖然依然沒有對iPod市場造成影響，但是設(shè)計品質(zhì)卻尤其的高，并且極大的影響了后代的UI設(shè)計。并且就是Zune。

Zune是2006年發(fā)布的。它從來沒有流行過。自身系統(tǒng)生態(tài)不行，還碰上了iPod這種魔鬼對手。但是你很難想象這樣的UI是在08年的時候出現(xiàn)的。如此扁平、現(xiàn)代、簡潔又優(yōu)雅。

(這里展示一下我家收藏的Zune HD

那時候的Dark Mode，非常直白的用3D來表達(dá)了界面層級，甚至還有景深，視差滾動等十分大膽的界面效果。靜態(tài)視覺上看起來非常扁平，但是加上動效后就很好的凸顯了界面層級。背景的黑色，就好像無盡的太空，而所有的組件都是在空中漂浮的，給人科幻的想象，加上動效和冷酷的線條，整體看起來非?？?。

6，究極版的Zune UI：Windows Phone

是一個不入流的操作系統(tǒng)...但是這段歷史一定是軟粉很熟悉的了。Windows Phone首發(fā)的時候，我入手了臺諾基亞的Lumia 800。

先不說這個和主流操作系統(tǒng)極度差異化的UI設(shè)計，這個暗色主題是真的很優(yōu)秀。

來，聊聊暗色主題。Lumia 800作為WP的首發(fā)機型，使用的是AMOLED屏幕。這個帶來了什么結(jié)果呢？就是屏幕的邊界感幾乎沒有了。當(dāng)年還沒有全面屏，手機邊框還可以停航母，但是這樣的UI設(shè)計的確讓邊界感變得很低了，看起來屏幕內(nèi)容和機身更加整體。

另外，它的動效也更流暢了，雖然沒有容器，但是依然可以通過酷炫的動效、視差滾動等極度有創(chuàng)意的方式來區(qū)分界面層級，真的是...（默默豎起大拇指

可惜，這些視覺效果極佳的界面，可能還是比較浪費空間吧，后期在Windows Phone 10中也沒有保留下來，也隨著Windows Phone的淡出退出了歷史舞臺。

在那個時候，還是白色UI的天下，無論是Windows，iPod優(yōu)雅的All-white設(shè)計，大家都在忙著給界面做上實體的質(zhì)感，這樣的設(shè)計必然是過于超前的。超前一步是先鋒，超前兩步是先烈...微軟在深色模式上的執(zhí)著，就這樣成為了歷史的先烈，一直沒有進(jìn)入主流的視野。

但是這樣超前的設(shè)計理念，一直保留到了今天，并且后繼有人了。

Chapter 2                  

1，今天進(jìn)入我們視野的深色模式

很神奇的是，對于深色模式，iOS和Android給出的規(guī)范確實是不同的方向的。我想當(dāng)年早早的做了深色/黑夜模式的廠商，也沒想到今天竟然會發(fā)展成這樣吧。

深色模式是如何進(jìn)入我們的視野的？我們可以看到在過去的2年中，曾經(jīng)出現(xiàn)過2個高峰。第一個高峰是去年WWDC，蘋果第一次發(fā)布了iOS13的測試版，并且最大的特性就是支持了深色模式。第二個高峰就是隨著iOS 13隨著iPhone 11系列正式發(fā)布，大量的App開始為深色模式適配。

2，深色模式到底有啥好的？

為啥要做深色模式？大概就4點：

專注內(nèi)容：深色和淺色在空間關(guān)系的感知上，的確是有很大差距的?？梢哉f，之所以深色UI帶來最體驗上的差別，就是讓屏幕看起來更無界，更專注于內(nèi)容?；谶@樣的需求，有些產(chǎn)品天生需要更多的專注力，一開始就是黑的。例如視頻播放器，開發(fā)工具，游戲平臺，股票平臺之類的產(chǎn)品。

另外，蘋果應(yīng)該還是非常希望弱化跑馬邊框和劉海的存在感的。在淺色模式下，會加劇跑馬邊框和劉海的存在感，但是在深色模式下，界面UI就會立馬和機身融為一體。這也是為何蘋果也十分樂意擁抱深色模式的原因。

體驗刷新：目前有很多手機系統(tǒng)或者App提供了換膚的功能。但是這個換膚大多都帶有很強的個性和主題性，每個主題能命中的用戶其實并不是很多。相比之下，直接把整個系統(tǒng)變黑，新鮮感滿滿，接受度也很高。

降低界面刺激：在OLED的屏幕下，深色UI會使得像素點完全不發(fā)光，只保留有內(nèi)容的成分，大大降低了屏幕的亮度，也降低的對眼睛的刺激。很多車用的界面一直是深色UI，就是為了防止夜間屏幕亮度對于駕駛員過于刺激了。

持久續(xù)航：最后，這個僅僅是在OLED屏幕上，深色模式的確能降低每個像素的發(fā)光量，從而達(dá)到節(jié)約功耗，提升續(xù)航的效果。

2，太難了...一上深色模式馬上就被罵

深色模式雖然好處多多，iOS 13正式上線也1年時間了，但是剛開始這段時間的好多App，每上線了深色模式，卻被輿論推上了風(fēng)口浪尖。

我認(rèn)為由于不同的用戶對于深色模式的預(yù)期不一樣。有些用戶的預(yù)期是一個低對比度的黑夜模式，有些用戶只是想換個主題而已。導(dǎo)致設(shè)計師兩邊不討好，有些產(chǎn)品的深色模式也是被罵的改了又改。

3，暗黑模式 or 黑夜模式？

隨著iOS和Android系統(tǒng)級支持，正式把深色模式帶進(jìn)了尋常百姓家。不同的產(chǎn)品大面積的開始適配深色模式。

現(xiàn)在的深色模式。和以往不同的是，這是近年來第一次深色GUI進(jìn)入了主流視線，而今天的各種容器變得更加多變，層級更加豐富。iOS使用不同的灰色和動效來表達(dá)界面層級，而Android主要通過陰影來表達(dá)，所以底色不能做成純黑，不然陰影就體現(xiàn)不出來了。

所以這個真的是不同人的期待都是不一樣的。

Chapter 3

1，微云的深色模式落地

眾所周知，微云為用戶提供了非常強大的照片和文件的備份功能，用戶有非常大的機會在夜間或者系統(tǒng)的深色模式下，查看文件和各種媒體。

所以，不管是僅僅刷個深色主題，還是降低視覺刺激，這兩邊的用戶需求都是合理的，其實并不沖突。因此在真正設(shè)計深色模式的。深色模式并不是簡單的把整個界面反色了那么簡單，還是要考慮到所有用戶的需求，在設(shè)計啟動前期就定義了適配原則。

體驗一致

1. 操作系統(tǒng)內(nèi)體驗一致：參照iOS其他原生App體驗建立設(shè)計原則，

2. App內(nèi)體驗一致：從控件層面入手刷新體驗。

內(nèi)容聚焦

1. 降低邊框存在感：純黑底色，充分發(fā)揮OLED屏幕的無邊界的感受，

2. 降低異形屏對內(nèi)容容器邊框的破壞：降低iPhone劉海存在感。

視覺柔和

1. 采用純黑大標(biāo)題底色，上劃時漸變出深色毛玻璃效果，并且降低標(biāo)題欄的透明度

2. 適用非純白字色，防止頁面對比度過高導(dǎo)致夜間對眼睛的刺激太強

3. 重新審視分割線的運用，對于分割容器用的分割線做了重新設(shè)計，改用色塊來分割

項目落地時，像微云這樣的大型項目，有著幾百個頁面，直接一個一個頁面刷一定會出一些問題，所以需要從抽象到具體，逐漸落地成型。

1. 色板更新，注意Check對比度

在更新色板時，需要特別注意的就是對比度。

對比度這個東西，在黑暗模式下變得尤其為妙。如果品牌主色是一個相對比較深的顏色，即使可能飽和度比較高，在深色模式下依然會導(dǎo)致對比度不足。

如何Check對比度是否符合要求呢？這里推薦一個網(wǎng)站可以參考：

http://www.msfw.com/Services/ContrastRatioCalculator 

當(dāng)你輸入兩個色值后，會有個對比度的數(shù)值出來。推薦值是7:1是比較推薦的對比度，大于4.5:1是可用，但是基于視覺柔和的原則，3:1算是一個最小極限值。但是如果大面積的對比度過高，也不適用我們視覺柔和的原則。

2. 刷組件，輸出范例頁面，此時開發(fā)可以并行開發(fā)

由于在深色模式下，為了使界面看起來更渾然一體，各個容器之間的層級差異，深色模式加強了深色毛玻璃的運用。毛玻璃蓋在內(nèi)容上會展示出迷人的背景模糊效果。在一級界面中的導(dǎo)航欄都采用了這樣的設(shè)計。

定義各個容器的高度，并將各個高度的容器賦予統(tǒng)一的底色。

在定義了大規(guī)則后，就可以輸出給開發(fā)正式動工了。

3. 梳理所需的模塊，并輸出所有的一級頁面

由于不是所有的規(guī)則都是統(tǒng)一的，因此還是需要同步的輸出很多典型的頁面。這個輸出頁面量大概是50+多個。但是由于在前期刷了組件，因此在這步并不太需要單獨去考慮每單個界面，大概拼湊一下組件，遇到問題單獨處理就OK。

4. 通過持續(xù)的交付體驗，補充需要的資源

由于深色模式涉及的頁面眾多，狀況也比較多。有些比較深的頁面，可能沒有走查到，因此可以建立一份騰訊文檔，日常體驗過程中遇到的任何問題，可以在文檔中記錄，并且由開發(fā)哥實時更新優(yōu)化情況。

Chapter 4

工程師視角的深色模式

深色模式中，為了深色模式的落地，開發(fā)哥給了非常大的支持。我們采訪了騰訊高級工程師Gemi，聊聊開發(fā)視角的深色模式的適配。

Q1：深色模式的適配中，希望得到設(shè)計師的輸出順序是怎么樣的？

A1：在這個項目中，首先希望還是能得到一些最大的規(guī)則性的東西，例如導(dǎo)航欄是怎么變的，哪些控件是怎么變的，顏色都是怎么變的。這樣我們可以先開始工作。這樣可以完成大部分的頁面，等設(shè)計師給出了然后再去對照一個個頁面，再對一些特殊情況做特殊處理。

Q2：開發(fā)層面，有什么前期的好習(xí)慣，會更加有利于后期做深色模式的適配呢？

A2：首先，希望在設(shè)計上盡量使用統(tǒng)一的規(guī)范。因為在前期設(shè)計師給到適配規(guī)范的時候，開始刷界面是比較快的，但是會發(fā)現(xiàn)有很多界面覆蓋不到。這是由于前期設(shè)計用了太復(fù)雜的邏輯，或者做了特殊邏輯。這種情況就需要個頁面單獨處理，這個過程比較費時。

另外，因為微云在前期用了很多iOS的原生控件，這類控件在適配的時候可以直接適配，不需要做其他額外的工作。使用原生控件的好處就是，蘋果會替你思考很多問題，節(jié)約很多后期的工作量。如果前期有定義色板，并且這個規(guī)則比較科學(xué)的話，那僅僅靠修改色板就可以解決很多問題。

Q3：為了使開發(fā)者快速兼容深色模式，蘋果有做什么方便開發(fā)者的事情？

A3：我感受到的最直觀的2件事情。

第一件事情是，圖片資源的支持了深色模式。Xcode支持在原有的圖片資源基礎(chǔ)上，附加一個深色模式的圖片資源，就好像2倍圖和3倍圖，只要直接把深色模式圖片的資源拖入就行，并沒有額外的工作量。

第二件事情是顏色。比如說白色，你可以指定這個白色在深色模式下直接變成黑色。如果產(chǎn)品體量不大可以考慮這個快速適配的能力，不過這個功能在比較復(fù)雜的產(chǎn)品中不太好用，因為白色可能在深色模式下對應(yīng)著不同的黑，這個時候還是色板最穩(wěn)妥。

Chapter 5

結(jié)語

本文主要分4個部分：

第一章：聊了聊深色模式的歷史；

第二章：討論了今天不同的用戶對深色模式不同的期待，以及世界上OS大廠的站隊；

第三章：介紹了微云App在10月份的更新，適配深色模式的心路歷程；

第四章：談了一下開發(fā)視角的深色模式適配。

在蘋果等操作系統(tǒng)大廠的推動下，加上業(yè)界對深色模式一通操作和討論之后，眾多App兼容了深色模式。本文從深色模式的歷史，規(guī)范，設(shè)計以及實現(xiàn)的角度淺淺的聊了一下深色模式，也歡迎大家各抒己見。

深色模式素材：

原文來自微信公眾號：騰訊ISUX