深色系UI一直給人的感覺就是酷炫的，突出內容的一種設計風格，隨著蘋果iOS13和sketch深色模式的推出，已經有越來越多的產品和用戶，運用和注意到這種風格的設計。
而作為設計師的我們，更應該掌握好這種風格的設計，我本人也是深色系UI的忠實粉絲，所以我計劃給大家挖掘一系列國外深色系UI的設計技巧文章，和大家一起，學習好這種風格的設計。
來自apple ios13官網截圖
來自sketch深色模式官網截圖
譯文：
深色主題是過去幾年中最受歡迎的風格之一，蘋果和谷歌都將深色主題作為UI的重要組成部分。深色主題通過把亮度降低，創造了一個在黑暗條件下使用產品的舒適環境，減少了眼部疲勞。
為了能做好深色UI設計，我這裡總結了8個實用技巧，希望大家有些幫助。
1. 避免純黑
不要在一張純黑的介面上使用純白的文字。實際上，這種非常高的對比度，會讓眼睛不舒服。
相比於完全純黑的顏色（#000000），使用深灰色作為主要介面的配色會更安全。由於在深灰色介面上文字的對比度相對於純黑色介面上文字的對比度會更小，對人眼的壓力也就小很多。另外，深灰色的介面也能有更多的顏色選擇，投影也更好做（純黑色是不好做黑色投影的）。
谷歌設計規範推薦使用#121212作為深色主題的主要配色
2. 避免使用太高飽和度的顏色
飽和度高的顏色在淺色介面上看起來很棒，但在深色介面上卻會讓用戶產生視覺抖動，使得內容難以閱讀。
使用較淺的顏色（顏色在200-50之間）會使得內容有更好的可讀性。飽和度降低不會降低UI的表現力，但可以幫助產品在不引起眼部疲勞的前提下保證適當的對比度。
飽和度較低的顏色可以提高可讀性，減少視覺抖動
避免在深色主題中使用飽和度太高的顏色
3. 符合無障礙顏色對比度標準
確保內容在深色模式下依然清晰易讀，內容與背景之間的對比度要合適。谷歌設計規範推薦在文本內容與背景之間的對比度至少要達到15.8：1的比例。
使用對比度測試工具（http://uxpro.cc/toolbox/accessibility/color-accessibility/）來檢測是否符合這個標準。
4. 對文字使用不同透明度來強調不同層級
文字在深色主題下默認會被設置為純白色（#FFFFFF），但#FFFFFF是一種很明亮的顏色。它會在黑暗的背景下產生視覺「抖動」，這就是為什麼谷歌設計規範推薦使用稍微暗一些的白色：
- 最需要強調的文本不透明度為87%
- 中等強調的文本不透明度為60%
- 禁用文本使用38%的不透明度
小提示：淺色文本在深色背景上會比深色文本在淺色背景上顯得更粗，這就是為什麼在深色模式下要使用更細的字體。
選擇一個稍微暗一點的白色，這樣可以防止畫面形成太強的對比。
5. 考慮介面傳達的情緒
如果接到需求是為應用做一個深色主題改版，你可能覺得只是改一下配色就萬事大吉了，但介面所傳達出來的情緒經常容易被忽略。
不同的背景顏色所帶來的感知是不同的。
這意味著深色主題和淺色主題在傳達信息上是有區別的，深色和淺色的主題風格總是會讓用戶產生不同的情緒。要善用這種區別，重新思考產品的特性，並及時優化自己設計。
暗色模式並不是總是必須從現有的淺色中直接得來。
圖片來源： Sergey Zolotnikov
6.善用灰色營造空間感
與淺色主題設計時一樣，在做深色主題設計時，同樣要達到清晰的層次結構並需要突出介面中的重要元素。
空間感是我們用來傳達元素層次結構的工具。
在淺色模式下，我們使用陰影來突出空間感。介面空間感越強，投影就越寬。同樣的方法在暗色模式下就行不通了，在暗色的背景下很難看到陰影。最好是使用不同的亮度來表達元素的空間感。
在谷歌設計規範中，深色主題的空間感使用不同的明度來設計。
更高的明度，更輕的介面。
層級越高，顏色就越明亮
Music Player UI by Martin Mroč
7. 允許用戶從普通模式切換到暗色模式
很容易讓系統決定何時開啟或關閉深色主題。然而，這種設計決策可能會導致糟糕的用戶體驗。這相當於從用戶那邊搶奪了控制權，並讓系統為他們做出決定。
所以最好不要使用自動切換模式，而應該允許用戶使用UI控制項打開（或關閉）深色主題。用戶應該能夠根據自己的實際需要來手動選擇不同的模式。
深色主題控制開關
8. 測試淺色和深色的主題
最後，需要查看UI在這兩種情況下的外觀細節，並根據需要調整設計以適應不同情況。可以考慮在天黑以後，在開燈的環境下，測試自己的產品。
原文：http://uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6
作者：Nick Babich
譯者: 彩雲Sky
本文翻譯已獲得作者的正式授權