隨著Android Q 與 iOS13 先后發(fā)布深色模式，深色氛圍一躍而上成為系統(tǒng)平臺級能力，這不禁讓我們重新認(rèn)真思考深色模式對于文娛類產(chǎn)品有什么樣的價(jià)值與機(jī)會？

深色界面的價(jià)值與機(jī)會

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

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

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

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

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

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

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

深色界面更易建立填充感

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

同時(shí)需要注意的一些點(diǎn)：

（1）文字的信息占比決定了是否將深色界面作為默認(rèn)主題

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

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

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

設(shè)計(jì)目標(biāo)與方法

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

1. 設(shè)計(jì)目標(biāo)

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

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

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

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

2. 設(shè)計(jì)方法

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

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

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

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

色彩框架：包容且一致

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

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

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

色彩框架：

主要類型：

對比度的階梯：清晰降噪

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

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

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

可讀性：跨場景測試

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

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

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

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

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

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

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

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

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

執(zhí)行策略

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

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

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

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

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

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

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

復(fù)用與濾鏡

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

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

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

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

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

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

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

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

結(jié)語

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

作者：文娛設(shè)計(jì)中心，公眾號：AlibabaDesign（ID：AlibabaDesign）

來源：https://mp.weixin.qq.com/s/gj98pkA1uO-ckMwWgdkgRw

本文由 @AlibabaDesign 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議