深色界面的價值與機會

2019 年優酷經歷了一次體驗設計升級，在前期的設計探索中，優酷設計團隊嘗試了各種方向，其中包括全深色的界面。而隨着 Android Q 與 iOS13 先後發布深色模式，之前隨公眾理解的深色氛圍一躍而上成為系統平台級能力。這不禁讓我們重新認真思考深色界面模式對於文娛類產品有什麼樣的價值與機會：

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

1. 深色界面在專註環境下與內容有更高的契合度 ， 更凸顯內容、緩解視覺疲勞

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

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

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

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

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

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

同時需要注意的一些點：

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

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

用戶和平台都需要一個低成本開關

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

設計目標與方法

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

1. 設計目標

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

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

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

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

2. 設計方法

產品印象：盡量保留產品的核心視覺特徵

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

主背景色選擇：保證與內容的兼容度

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

色彩框架：包容且一致

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

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

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

色彩框架：

主要類型：

對比度的階梯：清晰降噪

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

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

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

可讀性：跨場景測試

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

規範化：建立深色模式色板

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

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

另外，一些細節上的處理仍然值得我們的關注：

圖標：面型圖標在深色下識別性更優

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

分割線和陰影：轉換為填充色來區分

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

執行策略

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

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

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

色彩：使用語義命名交付設計

整個優酷系統顏色體系分：靜態色（在淺色模式下與深色模式下不需要變化的）、動態色（在深色模式下需要變化）。

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

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

復用與濾鏡

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

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

開發側可以選擇代碼濾鏡

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

工具化：設計的輸出與維繫

通常設計完成后與開發之間的協作是通過 sketch Measure 直接一鍵導出標註即可。

那我們對基礎屬性進行統一 design token 命名后，後續的標註設計要如何標註？需要對照表格手動標註么？開發怎麼看design token？

蓋亞是優酷設計主要在用的一個提效工具，不同於 sketch Measure 導出 RGB 色值，蓋亞導出標註會對屬性的值進行符號化處理，显示屬性對應的值的同時會显示對應的 design token。從而解決了設計輸出與開發實現的效率問題。

結語

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

深色模式設計指南 ️ https://www.uisdc.com/zt/dark-mode

歡迎關注「AlibabaDesign」的微信公眾號：

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五註冊開戶_深色模式設計實戰！優酷 App 的“黑”化之路