2019 年優酷經歷了一次體驗設計公升級，在前期的設計探索中，優酷設計團隊嘗試了各種方向，其中包括全深色的介面。而隨著 android q 與 ios13 先後發布深色模式，之前隨公眾理解的深色氛圍一躍而上成為系統平台級能力。這不禁讓我們重新認真思考深色模式對於文娛類產品有什麼樣的價值與機會。
體驗設計公升級期間嘗試的全深色方案。
1、深色介面在專注環境下與內容有更高的契合度，且緩解視覺疲勞
2、深色介面更易營造品質感與沉浸感
在我們視覺公升級的初期方案探索中，全深色方案是第一時間吸引到大家的。大家包括非設計的同學能清楚的講出對深色介面的感受，包括」專業「「高階」「沉浸感「「很特別」。大家為什麼會有這樣的感受，我嘗試找到了一些線索，我們對深色介面的認識來自於專業軟體、遊戲、科幻電影給我們留下的印象。
3、深色介面更易建立填充感
白色背景的心理認知對映至日常生活的白紙和筆，白色在日常認知中是代表「空」，所有白色上的細微色彩變化都被理解為「新增」。而深色本身被理解為一種填充背景色，其認知屬性與其他頁面元素跟接近，從而讓頁面的填充感更強。這在一些資訊匱乏的頁面會更明顯。
同時需要注意的一些點。
1、文字的資訊佔比，決定了是否將深色介面作為預設主題
2、使用者和平台都需要乙個低成本開關
乙個有趣的資訊是「絕大多數的娛樂活動都發生在晚上」，優酷的資料也顯示使用者在夜間的分時活躍度和使用時長高於白天。而深色模式無疑能給使用者帶來更好的夜間使用體驗，而文字在優酷中占有相當一部分比重，所以我們同樣要考慮到白天文字的可讀性。考慮到平台的技術實現成本和使用者的開啟成本，深色介面需要乙個低成本的開關。對於深色模式價值的判斷，幫助我們在優酷此次深色模式設計上獲得更清晰的設計策略及方向。
android q 與 ios13 先後發布深色模式後，我們等來了深色介面的「低成本開關」，優酷也迎來新一輪的設計公升級。在著手之前我們首先制定了體驗的目標和方向，以便在關鍵點上快速地決策並達成共識。
1、設計目標：全域性印象一致、降低實現成本、建立靈活可控機制
(1）全域性印象一致
一些體現產品獨特性的視覺特徵值得花費精力產出第二份設計做適配，讓它們在深色模式下也看上去和諧，而有些低優先順序的但成本較高的適配可以降級處理或不做處理。深色模式不需要建立一套新的色彩層級關係，而是延續原有的色彩層級關係，只是使用了深色調的配色。但過程中如果發現原有的層級有可優化的空間，也不必大動干戈，因為深色模式之後，對於色彩的調整變得更加全域性、徹底、簡單。
(2）降低實現成本、建立靈活可控機制。
深色模式涉及的場景與團隊非常多，按照常規做法會耗費巨大的開發成本。我們利用視覺產品化能力，將視覺屬性與框架布局分離並與開發邏輯相互對應，通過 sdk 的方式統一管理，一處替換全端生效，遍於未來控制並快速定義產品風格。同時，我們遵循了 ios hig 中的語義命令方式，這對於設計師和開發都非常友好，並且我們與系統的融合度會更高，避免未來因為相容性照成的各種問題。
2、設計方法
(1）產品印象：盡量保留產品的核心視覺特徵
深色模式的切換就像拉上了家中的窗簾，光線暗下來但不會改變桌布和家具的固有色。我們主要對優酷五大欄目頭部氛圍和底欄圖示進行了深色的第二套設計，讓他們在深色上看起來和諧。
(2）主背景色選擇：保證與內容的相容度
a) 基於對內容相容度的考慮，我們選擇了足夠深的深色但比黑色淺一些。這樣能夠與包含黑色的媒資拉開空間層次，同時與前景色有足夠大的對比度，保證在弱光和強光環境下的識別度。
b) 深色模式的主背景色應該保持安靜不搶戲，給定製主題場景包括運營場、垂類頻道、會員場，保留發聲的空間。所以選擇相對中性的顏色。
3、色調協調，要考與主場景的氛圍融合，優酷主要涉及到五大欄目導航欄和首焦吸色
（3）色彩框架：包容且一致
我們將現有色彩進行歸類，並歸納出每個型別的用途，從而建立色彩框架。這樣可以幫助我們確保同一用途的色彩包含的深色模式和淺色模式兩個色彩組合的唯一性，而不是單個色彩的唯一性。例如：白色會同時使用在背景和有些按鈕文字上，我們不能在深色模式中規定白色變成深色，因為在按鈕上不適用。我們應該規定背景色的淺色模式是白色，深色模式是深色，這樣按鈕文字就不會受到影響。
值得注意的是要先抓住一般型別，再看特殊個例。類如：我們將文字、圖示歸納為資訊層並劃分三個層級，而不是歸納為主標題、副標題、按鈕文字、底欄圖示、頂導航圖示。
用一般型別歸納色彩的用途可以涵蓋絕大部分的色彩型別，而特殊型別可以用場景、狀態、元件等維度來劃分，例如：「少兒一級背景色」、「可以隱藏的分割線」「黑色導航欄」。
主要型別：
a) 對比度的階梯：清晰降噪
我們在背景的對比度上設定均勻的階梯變化，這種均勻的變化有利於建立背景層級的秩序感。值得注意的是與淺色模式不同在深色模式下背景的視覺感受是逐步被抬高的層，海拔越高明度高。
文字的對比度階梯則不同於背景，在深色和淺色模式下文字的對比度階梯是趨同的。原因是我們希望主標題和副標題要有足夠大的反差使主標題足夠醒目，而副標題與置灰文字的反差則不需要那麼大。值得注意的是需要適度提公升次要層級文字的對比度。
更好的對比度階梯有利於在複雜資訊密度介面的視覺降噪。
b) 可讀性：跨場景測試
深色的外觀很可能受到使用者的喜歡，要考慮到使用者在深夜弱光的環境中使用深色模式的同時也不能排除白天強光的使用場景。手機螢幕的自動亮度調節會給實際的比度帶來影響。我們觀察到 ios 深色模式的設計提公升了幾乎所有元素的對比度，這值得我們有所考慮。所以盡可能在這兩種極端環境中測試我們的最終設計，保證資訊的可讀性。
c) 規範化：建立深色模式色板
基於色彩框架以層級劃分色彩為主，特殊型別作補充，在對應的淺色模式的層級下新增深色模式的色彩。
同時我們需要在產品的真實場景中反覆的對比嘗試確保實際效果是滿足要求的。
另外，一些細節上的處理仍然值得我們的關注：
（1）圖示：面型圖示在深色下識別性更優
深色模式下線條型的圖示有時會顯得過於單薄缺少份量感導致關注度降低，為改善這種情況我們可以替換為塊面型的圖示。此外有研究表明多數情況下塊面型的圖示會比線條型的圖示有更好的易用性，他們會被更快速的識別。
（2）分割線和陰影：轉換為填充色來區分
深色模式多數情況下對於層級的區隔來說，使用填充色會比分割線和陰影更有效。
深色模式不是簡單的顏色的明暗變化的處理，它是一套全新的設計風格，涉及的場景與團隊非常多，按照常規做法會耗費巨大的開發成本，如何快速實現優酷雙端的深色模式適配是當前面臨的主要問題。
優酷去年設計主導與開發共同搭建視覺產品化能力，設計側針對優酷業務屬性把視覺進行不同顆粒度的拆解抽象，把影響視覺風格調性的最基礎屬性（顏色、字型大小、間距、圓角、尺寸）進行了統一 design token 命名，設計與開發團隊共同維護一套可擴充套件的視覺屬性。視覺屬性與框架布局分離並與開發邏輯相互對應，通過 sdk 的方式統一管理，一處替換全端生效，遍於控制並快速定義產品風格。
1、色彩：使用語義命名交付設計
整個優酷系統顏色體系分：靜態色（在淺色模式下與深色模式下不需要變化的）、動態色（在深色模式下需要變化）。
動態色根據不同的層級進行重新語意化工程命名，底層還是保留靜態色 design token 。整個顏色會由乙個 sdk 進行統一控制，也保證了整體的一致性。
同時，我們遵循了 ios hig 中的語義命令方式，這對於設計師和開發都非常友好。語義命名實際上是為深色模式的動態色建立乙個令牌，例如，命名乙個叫「主背景色」的動態色，它實際包含了深色模式的主背景色和淺色模式的主背景色。設計師把「主背景色」標註在介面中相應的元素上，開發就可以實現這個元素兩種模式的色彩切換。當然我們還要為開發同學準備乙份動態色的對照表。
2、復用與濾鏡
（1）設計側盡可能一套適配兩個模式, 例如，使用不透明度設定這類淡彩色可以同時適配淺色和深色模式，這是一種取巧的做法；
（2）開發側可以選擇**濾鏡；
（3）對於一些無法復用的重要，需根據深色介面增加一套新的切圖資源。
3、工具化：設計的輸出與維繫
通常設計完成後與開發之間的協作是通過 sketch measure 直接一鍵匯出標註即可。
那我們對基礎屬性進行統一 design token 命名後，後續的標註設計要如何標註？需要對照**手動標註麼？開發怎麼看 design token？
蓋亞是優酷設計主要在用的乙個提效工具，不同於 sketch measure 匯出 rgb 色值，蓋亞匯出標註會對屬性的值進行符號化處理，顯示屬性對應的值的同時會顯示對應的 design token。從而解決了設計輸出與開發實現的效率問題。
深色模式在使用者體驗中的價值體現還需要我們進一步的觀察和思考，相信實現這一設計僅僅是乙個開端，深色模式怎樣跟文娛產品更緊密的配合，怎樣結合內容和使用者做出更多的洞察與創新是我們接下來的目標。
翻譯 網頁CSS切換暗黑模式
現在手機系統都有乙個暗黑模式和乙個普通的明亮模式，會根據你裝置的設定來展示對應模式。這種即時變換的外觀是靠以下css來實現的，支援的瀏覽器有 firefox safari和chrome。media prefers color scheme dark a img 最重要的模組是重寫文字和背景的顏色。b...
如何在Safari Mac中啟用暗黑模式？
在macos上啟用深色外觀 在macos上啟用深色模式外觀也會將safari瀏覽器變成深色。您訪問的任何支援深色模式的 都將使用深色 但是，不支援夜間模式的 將不會處於黑暗主題。以下是在safari mac瀏覽器中啟用深色主題模式的步驟 1.單擊以開啟蘋果選單，選擇系統偏好設定。2.在 系統偏好設定...
設計模式 三 裝飾模式
動態地給乙個物件新增一些額外的職責 不重要的功能，只是偶然一次要執行 就增加功能來說，裝飾模式比生成子類更為靈活。建造過程不穩定，按正確的順序串聯起來進行控制。good 當你向舊的類中新增新 時，一般是為了新增核心職責或主要行為。而當需要加入的僅僅是一些特定情況下才會執行的特定的功能時 簡單點就是不...