在 Superhuman, 我們正在打造世界上最流暢的郵箱體驗。
暗色主題現(xiàn)在成為了 App 設(shè)計的最新潮流。MacOS 去年引入了深色模式，上個月，安卓發(fā)布了深色主題，iOS 前兩周也跟進了。
罕見的是，暗色主題這個功能已經(jīng)被廣為期待了。
做的好的話，暗色主題本身有很多好處。它可以減緩視覺疲勞，可以在弱光下更容易閱讀。并且，考慮到這一切都在屏幕上運行，它可以大大降低電量消耗。
但是，要做出一套令人感到舒適的深色主題不是那么容易的。我們不能夠僅僅重復利用已有的顏色，或者是對投影反色處理。如果這樣做的話，我們只會得到相反的效果：加重了視覺疲勞，并且在弱光下難以閱讀，我們甚至會打破界面的信息層級。
在這篇文章中，我們會分享怎樣做出適合閱讀的、和諧的和令人舒適的暗色主題。
1. 加深底層界面顏色
在暗色主題下，UI 元素的背景顏色遵循著這樣的原則：離用戶越近的圖層，這塊地方明度就越高。這模擬了光源從頂部照射進來的原理，離一個圖層越遠，這個圖層就會接受到更少的光，最后變成了背景。
設(shè)計一套暗色主題時，僅僅只對淺色主題進行反色處理是我們很容易想到的方法。但這樣做的話，底層的界面會變亮，上層的界面會變暗。這樣會打破一般的物理規(guī)則，讓人感到不自然。
相反，我們只針對淺色主題模式的主要界面顏色來做修改，把這個顏色修改成深色主題的主要界面顏色。提高淺層界面顏色的明度，并且加深底層界面的顏色。
Superhuman 的深色主題是由 5 種不同灰度構(gòu)成的。淺層的界面采用的是更高明度的灰色；越深的界面采用的是更暗的灰色。
2. 重新審視感知的對比
當參考一套淺色主題來設(shè)計深色主題時，重新審視感知化的對比度是很重要的。這就是說一個元素的對比度看起來有多大， 而不用管這些數(shù)字顯示什么。
例如，在我們淺色主題上，聯(lián)系人信息的顏色是 60% 透明度的黑。相反在深色主題上，我們把顏色規(guī)定成了 65% 透明度的白。盡管兩者的對比度都超過了 AA 標準，但這多出來的5%能夠預(yù)防視覺疲勞，特別是是在弱光的環(huán)境下。
其實對于這些數(shù)字差異，沒有一個硬性的規(guī)定。相反，我們是針對每個元素單獨調(diào)整 —— 考慮到字號大小、字重和行距 —— 來確保在深色主題上也能和在淺色主題上一樣容易閱讀。
3. 降低大色塊的明度
在淺色主題里，我們經(jīng)常使用明亮的大色塊。這樣做通常是可行的，因為我們最重要的信息元素的明度很可能更加的高。但是在深色主題里，這并不起作用，因為大色塊的顏色會將我們的注意力從最重要的元素上轉(zhuǎn)移。
比如我們的「提醒我」頁面，在淺色模式下，這個粉色遮罩并不會對這個明度更加大的對話框產(chǎn)生干擾。但是在我們的深色模式下，同樣的粉色遮罩會轉(zhuǎn)移人們的注意力。為了快速容易的關(guān)注到重點元素上，我們完全地去掉了這個粉色遮罩。
4. 避免純白或者純黑
在 Sumperhuman 的暗色主題下，我們不使用任何純白或純黑的顏色。下面用四點來闡述下理由。
4.1. 現(xiàn)實性
在我們的日常生活中并不存在純黑的物質(zhì)（MIT開發(fā)出了一個還有待被命名的世界上最黑的物質(zhì)，這個物質(zhì)距離純黑仍然有0.005%的偏差）。我們的視力已經(jīng)適應(yīng)了將相對的黑色視為純黑。這就是為什么 #000000 這個色值會讓人感覺到不和諧，特別是當把它和更明亮的元素對比時。它并不匹配我們通?？匆姷臇|西。
4.2. 黑色拖影效應(yīng)
黑色拖影效應(yīng)是一種視覺干擾，是當明度比較大的內(nèi)容在純黑色背景上拖拽滾動時出現(xiàn)的一個現(xiàn)象。
這個拖影現(xiàn)象在 OLED 屏幕上越發(fā)常見。因為在這種屏幕上，純黑色像素是關(guān)閉的（這也是為什么暗色主題會比淺色主題消耗更少的電量）。但這也有個不好的地方，這些像素點開和關(guān)的的速度會慢于顏色的變化，這個延遲響應(yīng)造成了拖影效應(yīng)。
你可以使用灰色替代純黑，來避免黑色拖影效應(yīng)，那樣的話像素點就不會關(guān)閉了。甚至你也可以使用像純黑的灰色#010101，這樣做也會比淺色主題更節(jié)省電量。
4.3. 深度
如果你的背景采用純黑色，這樣你會很難在界面里表達出深度的感覺。
例如，想象你的背景是純黑色，在背景之上有一個通知框。這個通知框應(yīng)該是漂浮在背景上方，因此要使用投影來表達出深度。但是這個投影是看不出來的，因為沒有東西是比純黑還要黑的。
如果你的背景不是純黑，那你就可以使用不同透明度和模糊度的投影來表達出深度。比如可以看看出現(xiàn)在 Superhuman 里的通知模塊：
4.4. 光暈
純白的文字和純黑的背景會產(chǎn)生最高的對比度：21:1. 在 WCAG 無障礙條款的定量規(guī)定下，這種對比度是個理想的效果。
然而在設(shè)計暗色主題時，要留意對比度很高的情況。太高的對比度會像光暈一樣造成眼睛疲勞。
在很暗的界面上放上高明度的文字，文字會看起來融入到了背景中，這個效應(yīng)對于那些眼睛散光的人來說更強烈。根據(jù) Jason Harrison 的研究：散光的人（幾乎占人口50%）在黑底白字上比在白底黑字上更難閱讀。
在 Superhuman 里， 我們不得不特別注意光暈的影響，因為我們的 App 里有大量的文字信息。我們將白色文字設(shè)置成 90% 透明度，這樣可以透過黑色的背景。這樣的處理方式平衡了對比度和明度，讓 App 里的界面能夠在更加多樣的光照條件下易于閱讀。
5. 加深顏色
為了避免視覺疲勞和光暈的影響，我們淡化了文字的顏色。但這樣的話，我們的強調(diào)色和按鈕會顯得太亮。我們現(xiàn)在要調(diào)整這些顏色來更好地適應(yīng)暗色主題。首先，我們降低這些顏色的明度，和旁邊的文字比起來不至于過分搶眼。其次，我們增加了飽和度，保有其該有的特點。
例如，如果我們直接拿淺色主題的紫色用在深色主題上，感官上會比旁邊的文字更加亮。在我們實際的暗色主題中，我們加深了按鈕顏色，這樣用戶會把注意力集中在文字上。
結(jié)論
暗色主題有很多被好處，但是，如果要很完美地做好一套暗色主題是不容易的。簡單的重復使用顏色和反轉(zhuǎn)投影顏色會加重視覺疲勞，讓人很難在弱光下閱讀，甚至可能會打破視覺和信息的層級。
我們發(fā)現(xiàn)了一個用系統(tǒng)的方法來打造一個具有閱讀性、平衡性和愉悅性的暗色主題。只需要遵循以下規(guī)則：
- 加深底層界面顏色
- 重新審視感知的對比
- 降低大色塊的明度
- 避免純白或純黑
- 加深顏色
我希望這篇文章會對你設(shè)計暗色主題帶來幫助。如果你有任何想法或者疑問，隨時聯(lián)系我 @ifbirdsfly, teresa@superhuman.com
作者：Teresa Man
原文鏈接：https://blog.superhuman.com/how-to-design-delightful-dark-themes-7b3da644ff1f
