如何在安卓Android應(yīng)用上設(shè)計(jì)深色模式？

以一個(gè) app 改版案例，深入淺出地告訴大家如何適配深色模式，同時(shí)給出了正確和錯(cuò)誤的示范，相信對于目前流行的深色設(shè)計(jì)趨勢來說，是非常的實(shí)用了。



Google 在 2019 年度 I/O開發(fā)者大會(huì)上宣布，安卓將會(huì)從系統(tǒng)底層支持深色模式。同時(shí)，我們也會(huì)看到更多支持深色 UI 的應(yīng)用正在推出。

深色 UI 很快將成為一種常見的模式，其他應(yīng)用也很快會(huì)遵循這一模式。

在這篇文章中，我將會(huì)以我們的應(yīng)用 Shutter Points 為例，解釋如何從淺色 UI 適配深色 UI。


優(yōu)化顏色

1. 調(diào)色板

Shutter Points UI 的主要顏色是單色為主，目的是為了突出圖片內(nèi)容。主色調(diào)用于主導(dǎo)航欄，標(biāo)簽中使用 5 種輔色將圖片注釋與對應(yīng)的類別聯(lián)系起來。

△ Shutter Points 中的主色和輔色以及在界面中的應(yīng)用截圖


當(dāng)應(yīng)用深色模式時(shí)，亮色和低飽和度的顏色相比于飽和度高的顏色會(huì)更受歡迎。使用亮色的時(shí)候要確保元素易于閱讀，并配合一個(gè)對比度適中的暗色背景。

使用谷歌提供的顏色編輯器（https://material.io/resources/theme-editor/）可以為每個(gè)品牌顏色創(chuàng)建一個(gè)自定義色板，然后從中選擇合適的顏色。

根據(jù)谷歌設(shè)計(jì)規(guī)范（https://material.io/design/color/dark-theme.html#ui-application）建議，在使用深色模式時(shí)，一個(gè)好的經(jīng)驗(yàn)法則是將調(diào)色板的色值范圍保持在 200 左右。


任何一個(gè)深色界面都需要有一個(gè)合適的對比度，按 WCAG 的 AA 級標(biāo)準(zhǔn)來說，界面中的文字與背景的對比度至少要達(dá)到 4.5 : 1。


△ 品牌顏色中的一個(gè)淺色被選為深色模式配色


2. 界面顏色

有了新的配色方案在手，是時(shí)候改變界面的顏色了。深色主題中的所有界面都是以默認(rèn)的深灰色 #121212 作為基準(zhǔn)的。

在 UI 組件上添加不同透明度的白色，根據(jù)不同的層級搭配不同的透明度。

△ 疊加的層次范圍從0%到16%


為了表示不同的層級高度，我們需要在組件的樣式中調(diào)整 2 個(gè)值：

  • 投影屬性

  • 疊加的透明度

無論使用哪種主題，應(yīng)用正確的高度將確保元素保持在一個(gè)一致的視覺層次。想知道應(yīng)用中透明度該用多少？這里有一個(gè)表：


組件中通過使用不同透明度的白色覆蓋來保持它們在深色主題中的高度一致。


3. 避免大面積顏色

在某些情況下，僅僅將顏色由亮變暗并不會(huì)得到一個(gè)好的結(jié)果。

例如在我們 app 的引導(dǎo)頁中，淺色模式下使用次要顏色能突出內(nèi)容，但在深色模式下，整個(gè)背景都是高飽和度的顏色，卻會(huì)讓界面顯得非常的刺眼。

對于這些情況，最好是選擇一個(gè)深色背景，然后保留次級顏色用于標(biāo)題等小面積元素。

大面積的高飽和度顏色不適合用于深色模式。


文本優(yōu)化

1. 文字顏色

谷歌設(shè)計(jì)規(guī)范主要強(qiáng)調(diào)了 3 種文本顏色。

這里主要是通過修改白色或黑色的不透明度作為顏色值。

  • 強(qiáng)調(diào)文本 -> #FFFFFF（87% opacity）

  • 中等文本 -> #FFFFFF（60% opacity）

  • 次級文本 -> #FFFFFF（38% opacity）

△ 不同重要級和不同大小的文本在整個(gè)UI中傳遞出了層次結(jié)構(gòu)，這個(gè)原理也適用于深色主題。


2. 注意對比度

所有的文本內(nèi)容應(yīng)該易于閱讀并符合標(biāo)準(zhǔn)規(guī)范。網(wǎng)頁標(biāo)準(zhǔn) WCAG 2.0 中規(guī)范 AA 級別的文本，普通文本與背景之間的對比度為 4.5 : 1，大標(biāo)題文本這個(gè)比例為 3 : 1。

在我們的 App 中，直接把淺色背景下的標(biāo)簽顏色帶到深色模式中，文本開始變得很難閱讀。為了得到一個(gè)好的對比度，所有的標(biāo)簽文本需要修改到深色，識別度會(huì)更高。

△ 彩色元素上的文本需要改變顏色以保證易讀。


谷歌做了一款測試工具，幫助確定在哪個(gè)顏色值時(shí)需要將白色文本改為黑色文本，工具的地址在（https://material.io/design/color/the-color-system.html#tools-for-picking-colors）



小建議：推薦一款在 sketch 和 Adobe XD 中使用的小插件叫 Stark，可以方便的測試出你設(shè)計(jì)的界面可用性。


插畫和動(dòng)效

如果應(yīng)用包含插畫和圖形元素，這些也需要做好深色適配工作。

如果插畫有「背景」和「主題」，最好是將背景的飽和度降低，以保證對于主題的關(guān)注。

Lottie 動(dòng)畫可以通過在 AE 中的源文件來重新導(dǎo)出 json 文件，來調(diào)整動(dòng)畫的明暗適配，很方便。

△ 深色主題插畫同樣讓用戶關(guān)注到插畫的主題內(nèi)容。


總結(jié)

隨著深色主題被引入操作系統(tǒng)級別，應(yīng)用將需要在不破壞任何原有體驗(yàn)的情況下做出適配優(yōu)化。

深色主題并不是僅僅做簡單的反色。

設(shè)計(jì)師和開發(fā)者必須明確以下幾點(diǎn)：

  • 所有的 UI 元素必須符合標(biāo)準(zhǔn)的可用性原則；

  • 組件的可視層次結(jié)構(gòu)在不同的顏色主題內(nèi)應(yīng)該是保持一致的；

  • 品牌識別不應(yīng)該受到主題顏色變化的影響。




原文：https://medium.com/snapp-mobile/design-for-the-dark-theme-9a2185bbb1d5

譯者微信公眾號「彩云譯設(shè)計(jì)」

每天更新，
全站高品質(zhì)素材免費(fèi)下載！