起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識關于深色主題設計的8個小技巧
深色主題成為趨勢，相應設計也需要做出合適的改變。
深色模式成為2020年的新趨勢，Android推出了兩種深色模式，分別叫Force Dark Mode和System Dark Mode。
隨著蘋果和谷歌主題更新的發布，蘋果和谷歌都將深色主題作為UI的重要部分。許多設計師將會選擇在他們的設計中使用這一模式，所以預計在未來會看到越來越多的深色模式。
ios13已經推出深色ui模式，作為設計師，是不是給自己的產品設計一套深色系UI。深色系UI雖然酷炫，但是對于深色配色方案的選擇，我們不得不從多方面去考慮。
今天的文章主要介紹下深色主題下的8個小技巧，希望可以對你的設計有幫助，下面我們來看看：
目錄：
- 避免使用純黑色
- 避免使用飽和色
- 符合無障礙顏色對比標準
- 顏色深度
- 允許亮色/深色主題切換
- 圖片區域低對比度灰色的使用
- 文字的不透明度
- 避免使用陰影
一、避免使用純黑色
深色主題不必是純黑色背景上的純白色文本。
實際上，這種高對比度會看起來很痛苦，在深色主題中，用戶會很難適應這兩種色彩亮度。
二、避免使用飽和度
使用較淺的色調（200–50范圍內的顏色），在深色主題上具有更好的可讀性。
較淺的顏色不會降低UI的視覺表現力，但可以幫助你保持適當的對比度而不會引起眼睛疲勞。飽和度低的色彩能提高可讀性，減少用戶視覺震動。
三、符合無障礙顏色對比標準
確保你的內容在深色主題下保持更好的可讀性，深色主題背景必須足夠暗才能夠保證顯示你的白色文本。谷
歌的設計指南中，建議文本和背景之間至少使用15.8:1的對比度，可以使用顏色對比工具測試對比度。
四、顏色深度
創建深色主題時，需要呈現層次結構并強調布局中的重要元素。當元素處于較高色階位置時候，通過較淺的表面顏色來呈現這種縱深上的差異。
五、允許亮色/深色主題切換
設計的時候不要使用自動啟用深色主題，應該讓用戶根據自己的需求手動去選擇打開或關閉顏色模式。同時，應當注意，從亮色轉換為深色主題時，不要只是簡單的替換局部暗色部分，要注意考慮全局性。
六、圖片區域低對比度灰色的使用
不同背景模式下，顏色的視覺感受是不一樣的。使用低對比度的深灰色會比黑色更好，因為其飽和度與明亮區域形成對比，這樣能更好地呈現彩色照片。
七、文字的不透明度
深色主題上一般默認字體顏色是白色，但是純白色在深色背景上會存在視差。所以，建議最重要的內容，白色文本的不透明度設置為87%；中等重要的內容，白色文本不透明度設置為60%；被禁用的內容，白色文本不透明度設置為38%。
八、避免使用陰影
默認的淺色背景主題下，我們使用陰影來表達高度，而在深色主題下則通過調整組件表面顏色來表達高度，深色背景下陰影的使用就沒有意義。
最后
綜上所述，相信大家對深色主題背景下配色方案有了比較全面的認知了。
無論是什么樣的配色方案，都要注意界面的可讀性和易讀性，合適的顏色對比度是建立可讀性和易讀性的基礎，而對比度的選擇要符合無障礙顏色對比度標準，谷歌設計規范推薦在文本內容與背景之間的對比度達到15.8:1的比例。如大家有興趣測試對比度是否符合標準，可以試試對比度測試工具 。
希望文章有幫到你，給你啟發一些思路。
原文作者：NickBabich；原文地址：https://uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6
譯者：未知_Jerry；公眾號：未知像素UX，專注UI、視覺、交互、產品研究。
本文由 @未知_Jerry 翻譯發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
- 目前還沒評論，等你發揮！
