深色主題成為趨勢(shì)，相應(yīng)設(shè)計(jì)也需要做出合適的改變。

深色模式成為2020年的新趨勢(shì)，Android推出了兩種深色模式，分別叫Force Dark Mode和System Dark Mode。

隨著蘋(píng)果和谷歌主題更新的發(fā)布，蘋(píng)果和谷歌都將深色主題作為UI的重要部分。許多設(shè)計(jì)師將會(huì)選擇在他們的設(shè)計(jì)中使用這一模式，所以預(yù)計(jì)在未來(lái)會(huì)看到越來(lái)越多的深色模式。

ios13已經(jīng)推出深色ui模式，作為設(shè)計(jì)師，是不是給自己的產(chǎn)品設(shè)計(jì)一套深色系UI。深色系UI雖然酷炫，但是對(duì)于深色配色方案的選擇，我們不得不從多方面去考慮。

今天的文章主要介紹下深色主題下的8個(gè)小技巧，希望可以對(duì)你的設(shè)計(jì)有幫助，下面我們來(lái)看看：

目錄：

1. 避免使用純黑色
2. 避免使用飽和色
3. 符合無(wú)障礙顏色對(duì)比標(biāo)準(zhǔn)
4. 顏色深度
5. 允許亮色/深色主題切換
6. 圖片區(qū)域低對(duì)比度灰色的使用
7. 文字的不透明度
8. 避免使用陰影

一、避免使用純黑色

深色主題不必是純黑色背景上的純白色文本。

實(shí)際上，這種高對(duì)比度會(huì)看起來(lái)很痛苦，在深色主題中，用戶(hù)會(huì)很難適應(yīng)這兩種色彩亮度。

二、避免使用飽和度

使用較淺的色調(diào)（200–50范圍內(nèi)的顏色），在深色主題上具有更好的可讀性。

較淺的顏色不會(huì)降低UI的視覺(jué)表現(xiàn)力，但可以幫助你保持適當(dāng)?shù)膶?duì)比度而不會(huì)引起眼睛疲勞。飽和度低的色彩能提高可讀性，減少用戶(hù)視覺(jué)震動(dòng)。

三、符合無(wú)障礙顏色對(duì)比標(biāo)準(zhǔn)

確保你的內(nèi)容在深色主題下保持更好的可讀性，深色主題背景必須足夠暗才能夠保證顯示你的白色文本。谷

歌的設(shè)計(jì)指南中，建議文本和背景之間至少使用15.8:1的對(duì)比度，可以使用顏色對(duì)比工具測(cè)試對(duì)比度。

四、顏色深度

創(chuàng)建深色主題時(shí)，需要呈現(xiàn)層次結(jié)構(gòu)并強(qiáng)調(diào)布局中的重要元素。當(dāng)元素處于較高色階位置時(shí)候，通過(guò)較淺的表面顏色來(lái)呈現(xiàn)這種縱深上的差異。

五、允許亮色/深色主題切換

設(shè)計(jì)的時(shí)候不要使用自動(dòng)啟用深色主題，應(yīng)該讓用戶(hù)根據(jù)自己的需求手動(dòng)去選擇打開(kāi)或關(guān)閉顏色模式。同時(shí)，應(yīng)當(dāng)注意，從亮色轉(zhuǎn)換為深色主題時(shí)，不要只是簡(jiǎn)單的替換局部暗色部分，要注意考慮全局性。

六、圖片區(qū)域低對(duì)比度灰色的使用

不同背景模式下，顏色的視覺(jué)感受是不一樣的。使用低對(duì)比度的深灰色會(huì)比黑色更好，因?yàn)槠滹柡投扰c明亮區(qū)域形成對(duì)比，這樣能更好地呈現(xiàn)彩色照片。

七、文字的不透明度

深色主題上一般默認(rèn)字體顏色是白色，但是純白色在深色背景上會(huì)存在視差。所以，建議最重要的內(nèi)容，白色文本的不透明度設(shè)置為87%；中等重要的內(nèi)容，白色文本不透明度設(shè)置為60%；被禁用的內(nèi)容，白色文本不透明度設(shè)置為38%。

八、避免使用陰影

默認(rèn)的淺色背景主題下，我們使用陰影來(lái)表達(dá)高度，而在深色主題下則通過(guò)調(diào)整組件表面顏色來(lái)表達(dá)高度，深色背景下陰影的使用就沒(méi)有意義。

最后

綜上所述，相信大家對(duì)深色主題背景下配色方案有了比較全面的認(rèn)知了。

無(wú)論是什么樣的配色方案，都要注意界面的可讀性和易讀性，合適的顏色對(duì)比度是建立可讀性和易讀性的基礎(chǔ)，而對(duì)比度的選擇要符合無(wú)障礙顏色對(duì)比度標(biāo)準(zhǔn)，谷歌設(shè)計(jì)規(guī)范推薦在文本內(nèi)容與背景之間的對(duì)比度達(dá)到15.8:1的比例。如大家有興趣測(cè)試對(duì)比度是否符合標(biāo)準(zhǔn)，可以試試對(duì)比度測(cè)試工具 。

希望文章有幫到你，給你啟發(fā)一些思路。

原文作者：NickBabich；原文地址：https://uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6

譯者：未知_Jerry；公眾號(hào)：未知像素UX，專(zhuān)注UI、視覺(jué)、交互、產(chǎn)品研究。

本文由 @未知_Jerry 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議