騰訊設計師：超全面的深色模式小結

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

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

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

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

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

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

不得不說，GUI真是一個偉大的發(fā)明呀。可是界面層級的問題，在白色界面下得到了很好的解決，這個也恰好是今天在做深色模式的時候，界面上最大程度被削弱的信息部分。

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

而電腦，也逐漸成為了“白色家電”，和GUI設計的風格融為一體。

2. 移動深色模式的先驅：夜間手機閱讀器

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

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

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

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

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

4. 深色中的曙光：Zune UI

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

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

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

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

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

5. 究極版的Zune UI：Windows Phone

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

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

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

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

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

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

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

今天進入我們視野的深色模式

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

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

1. 深色模式到底有啥好的？

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

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

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

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

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

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

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

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

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

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

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

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

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

微云的深色模式落地

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

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

1. 體驗一致

• 操作系統(tǒng)內(nèi)體驗一致：參照iOS其他原生App體驗建立設計原則，
• App內(nèi)體驗一致：從控件層面入手刷新體驗。

2. 內(nèi)容聚焦

• 降低邊框存在感：純黑底色，充分發(fā)揮OLED屏幕的無邊界的感受，
• 降低異形屏對內(nèi)容容器邊框的破壞：降低iPhone劉海存在感。

3. 視覺柔和

• 采用純黑大標題底色，上劃時漸變出深色毛玻璃效果，并且降低標題欄的透明度
• 適用非純白字色，防止頁面對比度過高導致夜間對眼睛的刺激太強
• 重新審視分割線的運用，對于分割容器用的分割線做了重新設計，改用色塊來分割

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

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

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

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

如何Check對比度是否符合要求呢？這里推薦一個網(wǎng)站可以參考：
http://www.msfw.com/Services/ContrastRatioCalculator

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

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

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

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

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

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

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

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

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

工程師視角的深色模式

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

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

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

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

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

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

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

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

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

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

結語

本文主要分4個部分：

• 第一章：聊了聊深色模式的歷史；
• 第二章：討論了今天不同的用戶對深色模式不同的期待，以及世界上OS大廠的站隊；
• 第三章：介紹了微云App在10月份的更新，適配深色模式的心路歷程；
• 第四章：談了一下開發(fā)視角的深色模式適配。

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

歡迎關注作者微信公眾號：「騰訊ISUX」