深色界面的價值與機會

2019 年優(yōu)酷經(jīng)歷了一次體驗設(shè)計升級，在前期的設(shè)計探索中，優(yōu)酷設(shè)計團隊嘗試了各種方向，其中包括全深色的界面。而隨著 Android Q 與 iOS13 先后發(fā)布深色模式，之前隨公眾理解的深色氛圍一躍而上成為系統(tǒng)平臺級能力。這不禁讓我們重新認真思考深色界面模式對于文娛類產(chǎn)品有什么樣的價值與機會：

體驗設(shè)計升級期間嘗試的全深色方案：

1. 深色界面在專注環(huán)境下與內(nèi)容有更高的契合度 ， 更凸顯內(nèi)容、緩解視覺疲勞

深色的背景降低了內(nèi)容周圍元素的存在感，同時內(nèi)容被凸顯出來，尤其是視頻和圖片會變的更加清晰，這樣會讓瀏覽者更加專注于內(nèi)容。這讓深色界面與內(nèi)容平臺更加契合。

由于深色消除了白光對人眼的刺激，這樣大大降低了用戶在長時間的視頻和圖片消費中產(chǎn)生視覺疲勞。

2. 深色界面更易營造品質(zhì)感與沉浸感

在我們視覺升級的初期方案探索中，全深色方案是第一時間吸引到大家的。包括非設(shè)計的同學也能清楚的講出對深色界面的感受，包括「專業(yè)」「高級」「沉浸感」「很特別」。為什么大家會有這樣的感受，我嘗試找到了一些線索，我們對深色界面的認識來自于專業(yè)軟件、游戲、科幻電影給我們留下的印象。

3. 深色界面更易建立填充感

白色背景的心理認知映射至日常生活就是白紙和筆，白色在日常認知中是代表「空」，所有白色上的細微色彩變化都被理解為「添加」。而深色本身被理解為一種填充背景色，其認知屬性與其他頁面元素更接近，從而讓頁面的填充感更強。這在一些信息匱乏的頁面會更明顯。

同時需要注意的一些點：

文字的信息占比決定了是否將深色界面作為默認主題

幾乎所有的圖片編輯和視頻剪輯類以及部分視頻娛樂產(chǎn)品都使用了默認的深色界面，像抖音、Netflix。同樣我們也注意到這些產(chǎn)品的共同點是文字在產(chǎn)品中占極小的比重。原因是光線充足的環(huán)境下，白底黑字提供了最佳的可讀性，而黑底白字不僅降低了可讀性，研究表明也更容易產(chǎn)生視覺疲勞。所以要謹慎考慮文字在產(chǎn)品中所占的比重，來決定是否將深色界面作為默認主題。

用戶和平臺都需要一個低成本開關(guān)

一個有趣的信息是「絕大多數(shù)的娛樂活動都發(fā)生在晚上」，優(yōu)酷的數(shù)據(jù)也顯示用戶在夜間活躍度和使用時長高于白天。而深色模式無疑能給用戶帶來更好的夜間使用體驗，而文字在優(yōu)酷中占有相當一部分比重，所以我們同樣要考慮到白天文字的可讀性?？紤]到平臺的技術(shù)實現(xiàn)成本和用戶的開啟成本，深色界面需要一個低成本的開關(guān)。對于深色模式價值的判斷，幫助我們在優(yōu)酷此次深色模式設(shè)計上獲得更清晰的設(shè)計策略及方向。

設(shè)計目標與方法

Android Q 與 iOS13 先后發(fā)布深色模式后，我們等來了深色界面的「低成本開關(guān)」，優(yōu)酷也迎來新一輪的設(shè)計升級。在著手之前我們首先制定了體驗的目標和方向，以便在關(guān)鍵點上快速地決策并達成共識。

1. 設(shè)計目標

全局印象一致、降低實現(xiàn)成本、建立靈活可控機制

全局印象一致：一些體現(xiàn)產(chǎn)品獨特性的視覺特征值得花費精力產(chǎn)出第二份設(shè)計做適配，讓它們在深色模式下看上去更和諧，而有些低優(yōu)先級的但成本較高的適配可以降級處理或不做處理。深色模式不需要建立一套新的色彩層級關(guān)系，而是延續(xù)原有的色彩層級關(guān)系，只是使用了深色調(diào)的配色。但過程中如果發(fā)現(xiàn)原有的層級有可優(yōu)化的空間，也不必大動干戈，因為深色模式之后，對于色彩的調(diào)整變得更加全局、徹底、簡單。

原有的深色定制的主題場景保持不變，不受深色模式的影響。例如高清頻道、會員首頁、導看場景、沉浸播放頁、運營場，這些場景使用特殊的主題體現(xiàn)特定的產(chǎn)品目的和視覺感受，應(yīng)該保持固定心智，不需要有模式的切換。少兒場景可以定制特殊的深色模式，原因是深色會給兒童帶來負面的心理影響。

降低實現(xiàn)成本、建立靈活可控機制：深色模式涉及的場景與團隊非常多，按照常規(guī)做法會耗費巨大的開發(fā)成本。我們利用視覺產(chǎn)品化能力，將視覺屬性與框架布局分離并與開發(fā)邏輯相互對應(yīng)，通過 SDK? 的方式統(tǒng)一管理，一處替換全端生效，遍于未來控制并快速定義產(chǎn)品風格。同時，我們遵循了 iOS HIG 中的語義命令方式，這對于設(shè)計師和開發(fā)都非常友好，并且我們與系統(tǒng)的融合度會更高，避免未來因為兼容性照成的各種問題。

2. 設(shè)計方法

產(chǎn)品印象：盡量保留產(chǎn)品的核心視覺特征

深色模式的切換就像拉上了家中的窗簾，光線暗下來但不會改變壁紙和家具的固有色。我們主要對優(yōu)酷五大欄目頭部氛圍和底欄圖標進行了深色的第二套設(shè)計，讓他們在深色上看起來和諧。

主背景色選擇：保證與內(nèi)容的兼容度

• 基于對內(nèi)容兼容度的考慮，我們選擇了足夠深的深色但比黑色淺一些。這樣能夠與包含黑色的媒資圖片拉開空間層次，同時與前景色有足夠大的對比度，保證在弱光和強光環(huán)境下的識別度。
• 深色模式的主背景色應(yīng)該保持安靜不搶戲，給定制主題場景包括運營場、垂類頻道、會員場，保留發(fā)聲的空間。所以選擇相對中性的顏色。
• 色調(diào)協(xié)調(diào)，要考慮與主場景的氛圍融合，優(yōu)酷主要涉及到五大欄目導航欄和首焦吸色。

色彩框架：包容且一致

我們將現(xiàn)有色彩進行歸類，并歸納出每個類型的用途，從而建立色彩框架。這樣可以幫助我們確保同一用途的色彩包含的深色模式和淺色模式兩個色彩組合的唯一性，而不是單個色彩的唯一性。例如：白色會同時使用在背景和有些按鈕文字上，我們不能在深色模式中規(guī)定白色變成深色，因為在按鈕上不適用。我們應(yīng)該規(guī)定背景色的淺色模式是白色，深色模式是深色，這樣按鈕文字就不會受到影響。

值得注意的是要先抓住一般類型，再看特殊個例。類如：我們將文字、圖標歸納為信息層并劃分三個層級，而不是歸納為主標題、副標題、按鈕文字、底欄圖標、頂導航圖標。

用一般類型歸納色彩的用途可以涵蓋絕大部分的色彩類型，而特殊類型可以用場景、狀態(tài)、組件等維度來劃分，例如：「少兒一級背景色」、「可以隱藏的分割線」「黑色導航欄」。

色彩框架：

主要類型：

對比度的階梯：清晰降噪

我們在背景的對比度上設(shè)置均勻的階梯變化，這種均勻的變化有利于建立背景層級的秩序感。值得注意的是與淺色模式不同在深色模式下背景的視覺感受是逐步被抬高的層，海拔越高明度高。

文字的對比度階梯則不同于背景，在深色和淺色模式下文字的對比度階梯是趨同的。原因是我們希望主標題和副標題要有足夠大的反差使主標題足夠醒目，而副標題與置灰文字的反差則不需要那么大。值得注意的是需要適度提升次要層級文字的對比度。

更好的對比度階梯有利于在復雜信息密度界面的視覺降噪。

可讀性：跨場景測試

深色的外觀很可能受到用戶的喜歡，要考慮到用戶在深夜弱光的環(huán)境中使用深色模式的同時也不能排除白天強光的使用場景。手機屏幕的自動亮度調(diào)節(jié)會給實際的比度帶來影響。我們觀察到 iOS 深色模式的設(shè)計提升了幾乎所有元素的對比度，這值得我們有所考慮。所以盡可能在這兩種極端環(huán)境中測試我們的最終設(shè)計，保證信息的可讀性。

規(guī)范化：建立深色模式色板

基于色彩框架以層級劃分色彩為主，特殊類型作補充，在對應(yīng)的淺色模式的層級下添加深色模式的色彩。

同時我們需要在產(chǎn)品的真實場景中反復的對比嘗試確保實際效果是滿足要求的。

另外，一些細節(jié)上的處理仍然值得我們的關(guān)注：

圖標：面型圖標在深色下識別性更優(yōu)

深色模式下線條型的圖標有時會顯得過于單薄缺少份量感導致關(guān)注度降低，為改善這種情況我們可以替換為塊面型的圖標。此外有研究表明多數(shù)情況下塊面型的圖標會比線條型的圖標有更好的易用性，他們會被更快速的識別。

分割線和陰影：轉(zhuǎn)換為填充色來區(qū)分

深色模式多數(shù)情況下對于層級的區(qū)隔來說，使用填充色會比分割線和陰影更有效。

執(zhí)行策略

深色模式不是簡單的顏色的明暗變化的處理，它是一套全新的設(shè)計風格，涉及的場景與團隊非常多，按照常規(guī)做法會耗費巨大的開發(fā)成本，如何快速實現(xiàn)優(yōu)酷雙端的深色模式適配是當前面臨的主要問題。

優(yōu)酷去年設(shè)計主導與開發(fā)共同搭建視覺產(chǎn)品化能力，設(shè)計側(cè)針對優(yōu)酷業(yè)務(wù)屬性把視覺進行不同顆粒度的拆解抽象，把影響視覺風格調(diào)性的最基礎(chǔ)屬性（顏色、字號、間距、圓角、尺寸）進行了統(tǒng)一 design token 命名，設(shè)計與開發(fā)團隊共同維護一套可擴展的視覺屬性。視覺屬性與框架布局分離并與開發(fā)邏輯相互對應(yīng)，通過 SDK 的方式統(tǒng)一管理，一處替換全端生效，遍于控制并快速定義產(chǎn)品風格。

在視覺產(chǎn)品化能力下進行深色模式的適配與落地相對來說比較容易。在兩個風格的轉(zhuǎn)化中主要需要適配：色彩、圖片。

色彩：使用語義命名交付設(shè)計

整個優(yōu)酷系統(tǒng)顏色體系分：靜態(tài)色（在淺色模式下與深色模式下不需要變化的）、動態(tài)色（在深色模式下需要變化）。

動態(tài)色根據(jù)不同的層級進行重新語意化工程命名，底層還是保留靜態(tài)色 design token 。整個顏色會由一個 sdk 進行統(tǒng)一控制，也保證了整體的一致性。

同時，我們遵循了 iOS HIG 中的語義命令方式，這對于設(shè)計師和開發(fā)都非常友好。語義命名實際上是為深色模式的動態(tài)色建立一個令牌，例如，命名一個叫「主背景色」的動態(tài)色，它實際包含了深色模式的主背景色和淺色模式的主背景色。設(shè)計師把「主背景色」標注在界面中相應(yīng)的元素上，開發(fā)就可以實現(xiàn)這個元素兩種模式的色彩切換。當然我們還要為開發(fā)同學準備一份動態(tài)色的對照表。

復用與濾鏡

對于深色模式的圖片處理，我們給出以下建議：

設(shè)計側(cè)盡可能一套圖片適配兩個模式，例如，使用不透明度設(shè)置這類淡彩色可以同時適配淺色和深色模式，這是一種取巧的做法。

開發(fā)側(cè)可以選擇代碼濾鏡

對于一些無法復用的重要圖片，需根據(jù)深色界面增加一套新的切圖資源。

工具化：設(shè)計的輸出與維系

通常設(shè)計完成后與開發(fā)之間的協(xié)作是通過 sketch Measure 直接一鍵導出標注即可。

那我們對基礎(chǔ)屬性進行統(tǒng)一 design token 命名后，后續(xù)的標注設(shè)計要如何標注？需要對照表格手動標注么？開發(fā)怎么看design token？

蓋亞是優(yōu)酷設(shè)計主要在用的一個提效工具，不同于 sketch Measure 導出 RGB 色值，蓋亞導出標注會對屬性的值進行符號化處理，顯示屬性對應(yīng)的值的同時會顯示對應(yīng)的 design token。從而解決了設(shè)計輸出與開發(fā)實現(xiàn)的效率問題。

結(jié)語

深色模式在用戶體驗中的價值體現(xiàn)還需要我們進一步的觀察和思考，相信實現(xiàn)這一設(shè)計僅僅是一個開端，深色模式怎樣跟文娛產(chǎn)品更緊密的配合，怎樣結(jié)合內(nèi)容和用戶做出更多的洞察與創(chuàng)新是我們接下來的目標。

深色模式設(shè)計指南 ???http://m.hx168888.com/zt/dark-mode

歡迎關(guān)注「AlibabaDesign」的微信公眾號：