DarkMode(1)：產品應用深色模式分析

zhoulujun發表於2020-12-11
模式

為什麼Dark Mode變得越來越流行

2018 年的 macOS Mojave 率先支援了深色外觀，緊接著 Windows 10 在 2018 年的 10 月份大版本更新中，也引入了 Dark Mode。

iOS 13 的發推出了深色模式（Dark Mode），不僅可以大幅減少電量的消耗，減弱強光對比，還能提供更好的可視性和沉浸感。

 Android Q 重點推出了Dark Mode

目前主流的作業系統也都在逐步支援 Dark Mode。

像Facebook 、Slack、WhatsApp、Chrome 等等軟體都支援Dark Mode

那麼，增加暗黑模式的目的是什麼呢？

夜間使用時不那麼刺眼

Google 提出了「Digital Wellbeing（數字健康）」的概念，注重在科技裝置與使用者之間，找到一個健康的平衡點。

  • 夜覽模式讓螢幕在晚上減少藍光，幫助我們更好地睡眠；

  • 隱式推送減少了各類通知打擾我們的次數，使手機不會頻繁打斷我們的注意力

雖然有許多 app 已經支援了夜間模式，但還遠遠不夠。首先，每個 app 的支援程度不盡相同，同時由於缺乏系統級的 API 支援，每個 app 的開發適配工作也比較煩瑣。

讓使用者沉浸於內容

將 Dark Mode 翻譯為「夜間模式」，是因為前者的使用場景更廣，因此使用「深色模式」這樣的翻譯更恰當。

黑色更有利於我們沉浸於內容本身，無論是生產內容還是消費內容。如果你細心觀察，你會發現許多專業級的多媒體內容生產軟體，一直以來都是黑色的介面。不管是 Adobe 系列的軟體，還是蘋果的 Final Cut Pro，或者是 Pixelmator、Affinity 系列軟體，都是深色的主介面基調。同樣的道理，你會發現許多視訊網站或者影音播放工具，都是使用深色作為主基調。

OLED 螢幕節電

大多旗艦機的手機螢幕都拋棄了 LCD 材質，轉而使用 OLED 材質的螢幕，例如，從 iPhone X 到 iPhone XS，搭配 Dark Mode，這樣就能更加省電。

  • LCD 螢幕分兩層：畫素層不發光，另外有背光皮膚照亮畫素。

  • OLED 螢幕只有一層，畫素本身是自發光的。這樣，在顯示黑色時，OLED 的螢幕畫素只需要關閉，就是純正的黑色了。

在 macOS 的深色模式中，基底色並不是純黑，而是帶有一定灰度的黑色。

在 iOS 上，蘋果設計 Dark Mode 的基底色就是純黑，這樣一方面來可以省電，另一方面也與「劉海」的銜接更加自然。

Dark Mode 的設計難點在哪？

既然 Dark Mode 有不少吸引人的優點，為什麼 Google 和蘋果，一直等到2019年才正式推出系統級的 Dark Mode

Dark Mode 並不像想像中的那麼簡單。

Dark Mode 並不是簡單的顏色反轉

在介面色彩複雜一些的情況下，直接的顏色反轉就完全沒法用了。以下面的桌面為例，綠色的反轉色是粉色，紅色的反轉色是青藍色，而原本就是黑色的桌面被反轉成了白色，最終得到的效果慘不忍睹。

任意顏色可以由三原色組成，在電子裝置上，一個色彩也可以表示成 RGB 值，即紅綠藍三種顏色的比例。每種顏色的取值範圍是 0-255 之間，例如，白色可以表示為（255，255，255），黑色可以表示為（0，0，0）。那麼，顏色反轉實際上，是把一種顏色（R，G，B），自動變換到它的對立面，成為新的顏色（255-R，255-G，255-B）。

更多相關內容推薦閱讀：《色彩空間RGB/CMYK/HSL/HSB/HSV/Lab/YUV基礎理論及轉換方法:RGB與YUV》、《水煮RGB與CMYK色彩模型—色彩與光學相關物理理論淺敘》、《三色視者與四色視者身後的理論基礎:色彩原理》

所以Android與iOS的開啟顏色反轉，並不能開啟暗黑模式。

要重新考慮色彩對比度

內容與背景之間的色彩對比度問題，兩者之間必須保持才能使內容具有可讀性。要衡量這一點，其實是有一個明確的指標的：

色彩對比率（Color Contrast Ratio），它能夠提供兩種顏色之間，相對亮度的一個衡量關係。

色彩對比率的取值範圍在 1:1 到 21:1 之間，數值越大，表示對比度越強烈，內容的可辨認度越高。

Web 標準制定組織 W3C 在其 Web 內容無障礙指南（WCAG）中建議

  • 對比一般的文字，其對比率應該不小於 4.5:1，

  • 對於影像和介面元素來說，對比率應該不小於 3:1

要如何計算色彩對比率呢？

它的計算相對比較複雜，感興趣的同學可以在這個頁面搜尋「Contrast Ratio」檢視具體的計算方法。一般情況下，你可以使用各種現成的工具，只需要數入兩種顏色的數值，就可以直接看到最終的計算結果了。

介面的層級與明暗關係

除了色彩對比度的關係外，還有一個更深層次的介面層級帶來的問題，是通過顏色反轉無法解決的。

介面的層級與明暗關係.jpg

論是淺色還是深色外觀下，我們都應該在介面層級中，讓離使用者在邏輯關係上更近的顏色更亮一些。

再讓我們看一看實際 iOS 13 版本中 Dark Mode 的效果。你會發現，Dark Mode 的介面配色，並不是簡單的顏色反轉，可操作區域的顏色更淺一些，而背景色才是全黑的。這樣，不管是淺色還是深色外觀下，始終都保持了邏輯上的統一：離使用者邏輯關係上越近的層級，顏色越淺越亮一些。

iOS 13 版本中 Dark Mode 的效果

介面層級與明暗的邏輯關係，本質上是與顏色反轉不相容的。

蘋果是如何為 iOS 設計 Dark Mode 的？

蘋果在今年 WWDC 的「What's New in iOS Design」專題中，花了不少的篇幅專門用來介紹如何升級適配 Dark Mode。

引入語義色彩（semantic color）

在以往的介面設計與開發過程中，需要單獨針對每一個元素，指定一個顏色。既然不能簡單地通過顏色反轉來實現 Dark Mode，那麼最簡單的方式就是：為淺色外觀和深色外觀分別設計兩套配色方案。

light模式與Dark Mode模式設計對白

然而，這樣的做法帶來了一系列問題，尤其是 iOS 作為一個平臺，需要考慮平臺化的統一標準，以及儘可能地方便第三方開發者的適配工作。如果單純地使用兩套配色方案，那麼每改動一處介面，都不能忘了要改動兩個顏色值。同時，介面和介面之間，同樣的頁面元素，需要重複地指定具體的顏色，也造成了不必要的工作。

因此，蘋果引入了語義色彩（Semantic Color）這個概念。如同字面意思一樣，不再通過 RGB 的值來描述一個顏色，而是通過 LabelColor、SeparatorColor 這樣的文字描述，來說明這裡應該使用文字標籤的顏色、分隔線的顏色……例如，在深淺兩種模式下，系統介面的背景色會自動地去對應 SystemBackground，在淺色外觀下 SystemBackground=#FFFFFF（白色），在深色外觀下 SystemBackground=#000000（黑色）。

語義色彩帶來了兩個顯而易見的好處：

語義色彩帶來了兩個顯而易見的好處：

  1. 趨動設計師規劃全域性的配色方案：在 Dark Mode 的設計難點中我們提到了，一套完整而悅目的 Dark  Mode，需要設計師深入地調整明暗關係下色彩的搭配。通過引入語義色彩，設計師可以自上而下地進行框架性設計，首先定義好介面中一共存在哪些元素，然後，為這些元素規劃好相應的配色方案，以確保在深淺外觀中都獲得最佳顯示效果。

  2. 更容易複用：通過語義色彩，無論是對於設計師還是程式設計師，都可以實現「一次宣告，處處使用」。通過語義色彩，設計師可以整理出配色模板，程式設計師可以在不同介面的同型別元素中，直接使用語義色彩，而不用重複地去指定相同的顏色。

蘋果在系統層面整理出了一套配色方案

蘋果在系統層面整理出了一套配色方案，其中包含了背景色、文字標籤色、填充色等等，大多提供了四種不同醒目程度的層級，從應用在標題上的一級，到提示或說明性文字的四級。當然，除了系統內建的這些色彩，開發者也可以根據自己的需要建立和宣告新的語義色彩。

背景色區分基底色（Base）與提亮色（Elevated）

在設計難點中我們提到了，層級上離使用者越近的區域，應該在視覺上更明亮一些。蘋果在設計 Dark Mode 時，也充分考慮到了這一點。

iOS 深色外觀的背景色，是純正的黑色（#000000），蘋果稱之為基底色（Base）。不過，這個背景色會隨著介面層級的變化，而變成提亮色（Elevated）。下圖就是一個例子：在左邊的通訊錄 app    中，背景色就是純正的黑色。而到了右邊的電話 app 中，有些操作會需要彈出浮層供你選擇聯絡人，這時候浮在上方的介面背景色，就變成了亮一些的提亮色。

背景色區分基底色（Base）與提亮色（Elevated）

材質（Material）與系統控制元件的原生支援

蘋果在介紹 Dark Mode 時，還提到了材質（Material）。在我們常見的說法中，就是自 iOS 7    中引入的毛玻璃效果，常用於系統的資料夾、下拉選單、通知、Dock 欄等處。蘋果為這些材質設計了深淺兩套配色方案，並提供了從厚到薄的四種感觀效果。

蘋果為材質設計了深淺兩套配色方案並提供了從厚到薄的四種感觀效果

更重要的是，蘋果還為材質上的內容顏色進行了單獨的鮮活化（Vibrancy）處理。以下圖為例，第一行的文字「Solid    Color」為固定色彩，隨著背景顏色的變更，到最後兩幅圖中幾乎不可辨識了。第二行的「Vibrant」則為經過了鮮活化處理的文字效果，在背景色變亮時，也能保證文字的可讀性。

材質效果

此外，蘋果還更新了 UIKit    中的系統級控制元件，以適配深淺兩種顏色外觀。值得注意的是，在淺色模式下，許多元素是存在投影的，例如開關按鈕、拖動條的拉動點……而到了深色外觀中，這些投影被統統移除了，這也是蘋果設計的細微精緻之處。

空間暗黑模式效果對比

引入字型化圖示

在 iOS 13 中，蘋果還為了 Dark Mode 引入了多達 1500 餘個字型化圖示 SF Symbols。

字型圖表效果

前面我們已經看到了，蘋果通過語義色彩解決了介面與內容的色彩管理，同時通過更新一系列的系統級控制元件確保適應兩種不同的配色方案。然而，介面中還存在著一個重要元素，就是圖示。如果我們希望獲得良好的效果，往往需要針對深淺外觀重新填充圖示的顏色，準備兩套圖示素材。

而字型化圖示徹底解決了這個問題，還帶來了一系列的優勢。什麼是字型化圖示呢？簡而言之，你可以對文字進行的處理，也可以針對圖示做到。所以，字型化圖示可以像文字一樣修改顏色、粗細、大小、對齊。前面提到的語義色彩、鮮活化處理等技術，也一樣可以運用在圖示上。

字型化圖表效果

以上四點，就是蘋果如何為 iOS 設計 Dark Mode 的。你可以在這裡下載蘋果官方提供的    iOS 13設計模板的 Sketch 檔案，其中包含了 iOS 13 的最新正規化、內建語義色彩、材質等元素。

Dark Mode 在 iOS 13    上的呈現感不錯，但距離完美還有一定距離。這其中既有客觀因素，也有系統的主觀原因。例如，iOS 的 Dark Mode 針對影像不會進行特別的處理，如果你的備忘錄中有一張白色的照片，就會變得十分刺眼。而 Instapaper    在深色外觀下，會自動暗化（Dimmed）處理內容中的圖片元素。

自動暗化處理圖表元素

此外，從客觀因素上來說，許多網頁還沒有針對 Dark Mode 進行適配，導致開啟時會一片慘白刺眼。同時，在 Power+ 1.0 中的《深色模式對視疲勞和效率的影響》這篇文章，對 Dark Mode    也提出了許多非常有深度的論述。例如，深色模式其實未必適合文字的閱讀，以及即使開啟了深色模式，在昏暗環境中使用電子裝置對視力的傷害也不容小覷。

但不管怎麼說，Dark Mode 都給我們提供了額外的選擇，數字健康（Digital Wellbeing）不僅僅只體現在硬體的迭代與軟體的更新上，更應該成為每一位使用者與開發者的主動意識，藉此也希望所有的 app 和 web 開發者，儘早適配 Dark    Mode。

 

參考文章：

Dark Mode 的設計要點 https://zhuanlan.zhihu.com/p/141465632

寫給設計師的指南：如何為即將到來的Dark Mode做好準備 https://zhuanlan.zhihu.com/p/67583152

 

 

 

轉載本站文章《DarkMode(1)：產品應用深色模式分析》,
請註明出處：https://www.zhoulujun.cn/html/webfront/style/darkMode/8557.html

相關文章