教你巧用UI設計中的暗黑模式– Dark Mode

今天給大家分享一些實用的小貼士和技巧給大家！

我們每天都會看一些APP和網站。有時候一些設備的亮白色屏幕可能會使我們眼睛感覺到不舒服。這就是爲什麼越來越多的設計師開始注重創作兩種主題模式——明亮和黑暗。

黑暗模式有一些我們應當遵守的特定規範，使其對用戶使用來說會更加合理。本文會講述這些內容，使你可以創造一個能帶來積極作用的主題。

爲什麼選擇暗黑模式？

黑暗主題的主要優勢是在於弱光環境下具有更高的可讀性。黑暗模式降低了設備屏幕的亮度。它改善了視覺工程學，並能在特定的光照條件下得到更好的調節。正因如此，在夜晚及深夜使用數碼設備會更加舒適。

使用深色模式可以：

減輕眼睛疲勞
構造視覺層次
使界面更神祕
營造高端感
提高在夜間提高可讀性
確保夜晚使用環境（比如在晚上使用娛樂的app）

在以下情況下，請避免使用暗黑模式

該解決方案在戶外白天使用。
有很多文字可供閱讀

這些是深色模式的優缺點。讓我們轉到可以在項目中使用的實用技巧：

儘量不要用100％的純黑色

當您想開始設計暗黑模式時，你想到的第一件事可能是“直接創建一個黑色背景！”。

這應該是我們常犯的錯誤。

Google的Material Design建議使用深灰色，而不是純黑色。Material Design建議的深色主題界面顏色爲＃121212。

考慮把顏色飽和度降低

黑暗模式應避免使用飽和色。首要原因便是可訪問性——飽和色不符合WCAG (注：Web內容無障礙指南 ) 的標準：即深色背景下的正文文本至少爲4.5:1(注：即界面主色與文字信息的對比度 )。

飽和色在深色背景下會產生光學振動(optical vibrations)，從而可能會導致眼部疲勞。

做兩個調色板–用於暗黑模式和明亮模式

在上面的技巧中，我提到過飽和的顏色更適合深色主題。另一方面，我們都喜歡輕便的用戶界面中充滿活力的色調。

如何匹配這兩個？接下來的答案是- 給這兩種主題創建互補的色板是最佳選擇。

記住深色模式下的可訪問性

如果你想使解決方案更易於使用，則有適用於深色主題的特定準則。最重要的是以下內容：正文和背景之間的對比度應至少爲15.8：1。正因這點，即便是更高、顏色更淺的層級，可讀性也很不錯（參見Material Design）

你可以使用這些工具來檢查對比度：

- Contrast（mac版）

- Accessible Brand Colors（web端）

- Stark（XD、Sketch、Figma插件）

避免使用陰影

在一些明亮的界面中，我們往往使用輕微的陰影來表現深度。正因如此，現在的界面使用起來會更加自然合理(注：可能是界面設計借鑑和引用了自然的光影效果，所以感覺會比較自然合理 )。然而，陰影在大多數黑暗模式的元素中，並不是那麼明顯。這就是爲什麼不要頻繁地使用它們。畢竟還有另外的表現層次的方法。

海拔高度構建層級結構

如你所知，陰影在黑暗主題中顯示效果不好。表達層級結構的更好的方法是使用海拔的亮暗。

背景層應該是最暗的。放置在其頂部的元素應稍亮一些。正因如此，界面能夠更合理的被用戶感知。

遵循平臺準則

設計一套流暢合理的界面是所有平臺的使命。所有主流平臺都有制定規範，可以幫助你來實現黑暗主題（或模式）。

iOS人機界面指南的主要規範：

專注於內容。

在淺色和深色外觀中測試你的設計。
當你調整對比度和透明度等輔助功能設置(注：accessibility settings，或稱爲可訪問性設置 )時，確保在黑暗模式下的內容清晰易讀（上面講到的技巧將做到這一點）

顏色

使用適應當前外觀的顏色（使用動態顏色——兩個色板）(注：iOS13官方新增動態顏色dynamic color ，同樣的顏色在dark mode和light mode模式下的色值不一樣 )
確保所有外觀都有足夠的色彩對比
柔化白色背景的顏色（白色背景–深色調，深色背景–淺色調）。

圖標和圖像

儘量使用SF符號(SF Symbols)（可輕鬆調整爲黑暗和明亮模式）
必要時爲明亮和黑暗模式單獨設計符號
確保彩色圖標和單色圖標清晰易讀

文本

使用系統提供的標籤色(label colors)
使用系統視圖繪製文本字段和文本視圖

Material Design的主要原則

用灰色變暗（使用深灰色代替純黑色）
帶有重音的顏色（應用有限的重音）
節省能源（較深的顏色可節省使用OLED顯示器的設備的功率）
增強可訪問性（使用上一節中提到的原則）

在明暗的環境下進行測試

你對界面的看法可能會因主題而異。需要進行測試來驗證該主題結構是否合理。

你應在夜間的弱光條件下來測試黑暗模式。同時，你也可以白天在戶外檢查黑暗主題的基本元素是否具有足夠的可讀性。這樣你才能確保用戶將得到一款高質量的產品。

可以自由切換

允許用戶在需要時能夠從明亮模式切換到黑暗模式。你也可以根據日照條件使其能夠在模式之間自動切換，但它仍應可以手動設置。切換UI主題在用戶眼中是一個重大的變化，應該始終能由他們自己來控制。

總結

深色主題（或模式）如今非常流行。所有主流平臺都開始支持此模式，同時用戶也會要求應用界面存在這一功能。這可是學習其規範並開始在項目中創建黑暗主題的最佳時機。

本文譯自UXMISFIT.com

作者：THALION

翻譯：Tzw_n。