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