設計暗黑模式，掌握這幾個方法就簡單了！
知乎變成黑色頁面了怎麼調回白色
本文內容大綱
本文內容大綱
1.為什麼要為應用設計 Dark Mode
2.如何選擇合適的 Dark Mode 設計思路
3.Dark Mode的視覺設計需要注意什麼
4.如何協同不同業務的設計師快速適配Dark Mode
Dark Mode 的開發和設計不是一個小工程，開始後可能會耗費團隊內部比較大的資源，如何說服團隊的決策者開發Dark Mode ，下面是一些比較客觀的參考理由：
為什麼要做 Dark Mode
隨著OLED螢幕的逐漸普及，為使用OLED的裝置開啟 Dark Mode 可以有效降低裝置的功耗。因為在OLED螢幕下，黑色的區域是完全關閉了畫素單元的使用。
引用：AnandTech和NotebookCheck的OLED分析顯示了功耗如何取決於OLED螢幕的亮度水平。我們可以看到，當有一個全黑的螢幕時，OLED顯示屏在任何亮度下的功耗都保持恆定，對於白色的螢幕，曲線會逐漸變陡。但是大約5％的白色螢幕和<1％的明亮螢幕的曲線幾乎相同，只是在較高的亮度範圍內變化很小。
注意：在OLED下使用純黑色背景會暴露的問題是，因為黑色是完全關閉畫素，所以在純黑色背景上展示內容，在滑動的時候因為開啟關閉畫素點的延遲會產生拖尾的模糊效果，部分應用的解決方案是不使用純黑色的背景，使用深灰的背景色，我們設計的時候特意和Apple的人諮詢過該問題，對方給的答覆是：這個是他們已知的問題，後期應該會有相應技術上的最佳化。
為什麼要做 Dark Mode
就像我們為什麼在設定彈窗的時候都要用黑色的遮罩作為彈窗的背景，釋出會都會用黑色的背景來突出演示的內容，
OLED的省電特性
。在辦公場景下，專注是一件非常重要的事，提升使用者對使用內容的專注度才能提升使用者的工作效率。
你一眼就看見了幕布上的內容，和庫克的膚色
專注
引用Mac OS HIG裡的一句話：
給予使用者多一種美學的選擇，給予使用者使用介面的新鮮感和驚喜感，會增加使用者使用應用的愉悅度和粘性。
專注
黑色的背景能讓使用者更加專注於核心的內容
市面上有好多版本的Dark Mode，
美學選擇
，每個方法有各自的優勢和缺點：
可以看到，在介面上，文字和背景對比在兩種設計思路上的差異
釘釘作為一個有眾多人使用的工具型應用，不需要使用者過於沉浸式的閱讀，所以即使在深色下，仍然要追求資訊的高效傳達，保障使用者使用時資訊的對比度和可讀性。
但是注意，Dark Mode 不是夜間模式，使用者可以在任何時間任何環境下使用它。
在釘釘的 Dark Mode 設計中，並不是在設計一個夜間使用的釘釘，使用者有可能在白天，在戶外陽光下使用 Dark Mode 的釘釘，為了滿足這些極端場景，介面的UI視覺需要注意以下幾點：
選擇合適的 Dark Mode 設計思路
前面說到深色模式不是夜間模式，所以
選擇合適的 Dark Mode 設計思路
根據WCAG2。0 對比度的標準，介面元素和背景的對比度至少要滿足 AA 級標準，即最低 4。5：1 的對比度。在iOS的規範中，建議對比度至少滿足7：1；在谷歌的規範中，因為涉及到不同背景層級的概念，甚至要求主要文字和最深色背景的對比度達到15。8：1。釘釘在設計的時候，主要考慮優先適配iOS平臺，所以整體的顏色設計對比上，
有iOS和安卓系統的「可用性優先」設計，還有知乎等大部分閱讀類軟體為領頭的「護眼式」設計
使用軟體在設計時實時測試顏色的對比是否符合標準
關於如何測試該顏色是否符合該對比度標準，有很多線上網站或者工具都可以測試，
Dark Mode 的視覺設計要點
Dark Mode 的視覺設計要點
在深色模式下突然出現的大面積鮮豔彩色因為會有較高的明度和飽和度，會和深色背景形成強烈的對比，從而讓使用者不適。所以
1、足夠的顏色對比：保障可用性
如果一定要出現，建議適當降低彩色的飽和度和明度儘可能減少對視覺的衝擊。
介面的元素一定要讓使用者能清晰的識別，閱讀，使用。
某些在白色背景下符合對比度標準的彩色，在深色背景下不一定符合對比度標準或者看著舒適，所以
對於主要的文字資訊要求滿足7:1的對比標準，而彩色資訊至少滿足4.5:1的對比度標準。
為了適配深色模式，釘釘的彩色均做了不同程度的調整
我們使用了Contrast這款工具，可以在Mac app store付費下載。
如果應用中不可避免的要出現一些白色背景的介面，可以使用遮罩或者降低白色明度的方式來處理，避免在介面切換時對眼睛的刺激。
2、避免大面積的鮮豔彩色使用：
確定了視覺設計的方案之後，如何協同更多設計師快速適配，針對大的設計團隊是很大的難題。
在 Dark Mode 的設計中，儘量避免出現大面積和鮮豔彩色和深色背景的介面。
，因為主題切換涉及到業務線內大量的設計師協同工作，對於一個幾十個人的設計團隊，如何讓不同設計師更快的協同起來，降低設計師重複工作的成本，適配自己所在業務的介面，是工作中不得不思考的一個問題。釘釘這套顏色管理方案在 Dark Mode 的設計，多業務協同中發揮了巨大的作用。
在釘釘早期的版本中，設計顏色庫的管理十分換亂，命名也是沒有任何含義的簡單程式碼，當開發遇到沒有顏色字典中沒有的對應顏色或者是字典中已經有這個顏色但是開發找不到的時候，久而久之，顏色字典就會變成如下的局面：
描述：同樣的顏色對應了多個無序的顏色程式碼，設計師和開發也不知道這個顏色用在了什麼地方。
如果用這樣的方案做多主題適配，每個設計師要熟知不通主題下的配色，十分複雜。
這就是我們這套顏色方案的核心思路：
3、適當調整某些彩色的展示效果
下面帶大家一步步開始瞭解釘釘如何建立全新的顏色庫：
在深色背景下，要適當調整這些色彩的飽和度和明度。
為了解決上述問題，
4、弱化白色介面
。設計師使用這些顏色的時候，不應該是記憶16進位制的程式碼，應該是記憶這個顏色的「代號」，也就是顏色的key。接下來我們以釘釘的新顏色庫作為案例說明：
在這套顏色中，我們賦予每個顏色一個key來代表他們的名字，方便設計師更好的記憶顏色：
基礎的UI顏色用「Common。使用場景。color」命名，比如背景色，我們命名為common_bg_color，連結的顏色，命名為：common_link_color；
而彩色用「Common。什麼顏色。color」來命名，比如藍色，命名為：common_blue1_color；
那麼為什麼要把基礎UI和彩色區分開呢？
如何協同不同業務的設計師快速適配 Dark Mode
而按鈕和圖示等元素用的藍色，紅色，橙色等等的彩色，並不會隨著主題的切換變成其他的顏色，或者他們還是藍色，紅色，橙色，只是為了配合深淺色調的變化會有對應的色值微調。
注意：一旦確定一個key，對應的色值可以方便的調整，但是謹慎更換key的名稱，因為一旦更換名稱，程式碼中呼叫過這個key的地方都會產生問題。
如何協同不同業務的設計師快速適配 Dark Mode
基礎UI顏色就像設計中的點線面，是組成我們介面中的基本元素。
拋開彩色的場景，
釘釘早期還沒遇到 Dark Mode 的時候就有考慮過未來多主題設計的需求，並根據這樣的需求思考了一套特殊的顏色管理方案
我們建議給予文字色4個等級，前景色2個等級，背景色2個等級，和2個等級的分割線顏色，即可滿足基礎UI的大部分場景：
讓每位設計師簡單記住一套顏色，即可適配多套主題
根據業務和品牌的需求，繼續為顏色庫新增UI中會遇到的彩色，並適當新增多個等級滿足不同場景。彩色會用在諸如按鈕的背景，行動點，圖示，標籤等等地方。
比如按鈕的背景是藍色，我們就使用common。blue1。color，那為什麼不把按鈕顏色命名為common。botton。bg。color呢？因為這個藍色不僅會用在按鈕上，也可能用在藍色標籤上，藍色的icon上，如果以「使用場景」命名，就會增加好多的顏色名稱，但是其實他們在深淺模式下都是使用藍色，所以用顏色命名，一個key就能覆蓋好幾個key能解決的問題。
1、為顏色建立命名系統
首先我們要賦予每個顏色特定的含義，也就是這個顏色在程式碼中對應的「代號」應該是能讓後續使用的人知道這個顏色會被用在什麼地方的
那Common開頭的方式是為什麼呢？以Common開頭的key代表著顏色是通用到不同業務中的基礎釘釘色值，而一旦某個業務需要增加配合業務使用的特殊顏色，則可以用「業務。使用場景」來新增一個key，這樣即使有更多的顏色，也能追溯到這個顏色被使用在了什麼地方，方便管理。
因為像文字、分割線、背景這些基礎UI的顏色會隨著深淺模式的變化而從灰色變成淺色，或者從淺色變成灰色，所以我們需要用使用場景去命名他們。
2、構建基礎UI顏色
透過這套key作為中介，
基礎UI的使用場景其實只有文字、前景、背景和分割線，這幾個元素組成了大部分的介面場景。
，開發在程式碼中用key寫入顏色，即可快速適應多主題並保證方案可行，不必去記憶多套主題的具體色值。而對於適配後的驗收，也可以根據出問題的顏色場景快速定位問題顏色來調整；
3、增加彩色
相比記憶一個16進位制的顏色色值或者是RGB顏色，
注意的是色值表中還給了通用的黑色，白色和灰色，因為在某些場景下，深淺的切換不會影響這些中性色，即使他們不是「彩色」。
諸如此類，對於設計師的記憶和與開發間的溝通都是極大的提效。同時因為設計師和開發溝通必須使用已有的key的名稱，而不是傳統的色值，也能在一定程度更加規範顏色的使用不超出規範的界限。
4、特殊的業務用色處理
這樣的一套key會有什麼優勢？
一旦在拿到實際Demo後，某個元素的顏色使用起來有問題，也可以快速透過對字典的調整調整線上所有使用該key的顏色的效果。而遇到真的規範無法滿足的顏色，也可以靈活新增，並且透過命名這一環節讓顏色的追溯更有跡可循。
這樣的一套key會有什麼優勢？
1、更快適應多主題
而在開發側，真正將顏色匯入開發的庫中的時候，通用也就是Common開頭的key只能由專門的開發有新增和編輯的許可權，這些key的管理會更加嚴格，因為被用在大量的業務中；業務單獨增加的key在已經由設計側負責人錄入設計側的表格後，可以讓自己業務對應的開發自由新增。
核心設計師確定key值對應的顏色並確定在多主題下可行之後，設計團隊的其他設計師只要在一種模式下用key來標註顏色
2、更方便的管理記憶
對於相機，音影片等注重沉浸體驗的介面，這些介面在深淺模式下都會保持同樣的配色，對於這種介面，建議能使用彩色key則使用彩色key，如果彩色key無法滿足，可以允許在程式碼中不使用key，
對於設計師來說，如果是一級文字，在開發詢問的時候快速告訴他是Lv1，如果是主題藍色，快速告訴開發是Blue1，
3、更快速的迭代和開發管理
規則建立好了，但是顏色難免會涉及到修改和迭代，如何及時的同步到大家使用方式和更新維護，這事釘釘團隊內使用的方法：
在程式碼中，所有的顏色都有了名稱，不論是對當下的調整還是未來的版本迭代，都能更清晰的追溯和管理。
建立顏色表格，並使用同步盤實時同步給設計團隊和開發負責人，保證大家手裡使用的規範是最新的。
如何使用和管理這套顏色？
將設計顏色庫的思路同步給團隊內所有小夥伴，幫助大家快速熟悉和記憶顏色key，用key來標註和與開發溝通。
如何使用和管理這套顏色？
在團隊的Sketch設計元件中錄入規範的顏色和樣式，方便大家直接使用規範顏色，也可以在一定程度上規避非規範顏色的使用。
色值分別在元件的色板和樣式中呼叫的效果
在設計團隊內，由專門的設計師管理增加key的許可權，避免不同業務設計師隨意新增規範外的顏色而使顏色混亂。
透過合適的顏色管理方式，找到正確的視覺設計方向，可以最大程度的減少設計和開發資源的損耗，
特殊場景的處
，以及各端開發不到一個月的時間完成了適配，整體的順序是大概是這樣的：
1。在淺色模式下定義好規範的顏色，以及對應key的表格，開發錄入顏色字典，根據表格將舊的顏色均替換成新的顏色key；
2。主設計師透過視覺設計定義好 Dark Mode 的顏色，並對應key表格填入；
3。小部分核心設計師根據配色設計出幾個核心頁面，確認配色沒有問題；
4。將 Dark Mode 的配色上線，所有業務的設計師用線上demo驗證配色沒有問題（有問題的介面大多是沒有把舊的顏色用key色值覆蓋，讓開發替換對應顏色為key值就好）；
5。修改所有問題後上線。
總的來說，Dark Mode 的適配是一項費時費力的巨大工程，但又是在當下所有設計師不得不面臨的挑戰之一。畢竟因為iOS和Android這些系統級別的功能調整，沒有適配 Dark Mode 的應用很有可能被貼上「落伍」的標籤。
理
希望釘釘的設計經驗能對各位在設計 Dark Mode 的流程和介面上有所幫助。
因為這些頁面沒有適配多主題的需求。
AnandTech：分析AMOLED功率效率
https：//www。anandtech。com/show/9394/analysing-amoled-power-efficiency
關於WCGA2。0標準：
Web Content Accessibility Guidelines （WCAG） Overview | Web Accessibility Initiative （WAI） | W3C
iOS HIG中Dark Mode 設計指導的章節：
Dark Mode - Visual Design - iOS - Human Interface Guidelines - Developer
Material Design中Dark Mode 設計指導的章節：
https：//material。io/design/color/dark-theme。html#properties