文章分享了作者為應用設計深色主題的心得和經(jīng)驗，希望對您設計深色主題的界面有所幫助。
文章分享了作者為應用設計深色主題的心得和經(jīng)驗，希望對您設計深色主題的界面有所幫助。
深色主題是應用界面設計的最新趨勢。MacOS去年推出了深色主題模式后，Android和iOS也緊隨其后，推出了各自的深色主題模式。
曾經(jīng)罕見的深色主題現(xiàn)已受到大眾的廣泛期待。
如果設計得當，深色主題可以帶來諸多好處，可以緩解視疲勞，弱光下更易讀。而且，根據(jù)屏幕的不同，可以大大減少電池消耗。
然而，想要設計一套出色的深色主題并非易事，不能只是簡單地重復使用顏色或反轉色調(diào)。如果這樣做，效果將適得其反：加重視疲勞，弱光下更難閱讀，甚至可能打破界面的信息層次結構。
這篇文章主要將說明如何設計可讀、均衡和出色的深色主題。
一、深暗淺明
大多數(shù)深色主題的UI設計都遵循這一原則：深層界面更暗，淺層界面略亮。這模擬了從上方投射光線的環(huán)境，帶來熟悉且令人安心的物理效果。
在進行深色主題設計時，很容易就會通過反轉淺色主題來實現(xiàn)效果。然而，這樣做反而會使底層變亮，而表層變暗。這有悖于物理規(guī)律，會讓人感覺不自然。
與以上方法不同，我們應該從淺色主題的主界面取色，反轉此顏色，以獲得深色主題的主界面顏色。然后在近表層調(diào)亮這種顏色，在底層調(diào)暗這種顏色。
在Superhuman，我們的深色主題是由五種灰色陰影構成的。表層界面面使用較淺的灰色;底層的界面使用較深的灰色。
越靠近表層的界面使用較淺的灰色，靠近底層的界面使用較深的灰色。
二、重新審視感知對比度
在通過參考淺色主題來設計深色主題時，很重要的是要重新審視感知對比。也就是說，關鍵是看一個元素表現(xiàn)出來的差異，而不是看數(shù)值究竟是多少。
例如，在我們的淺色主題中，聯(lián)系人信息文字為不透明度為60%的黑色。但是在我們的深色主題中，我們將聯(lián)系方式設置為不透明度為65%的白色。
雖然兩者的對比度都超過AA標準，但是額外的5%卻可以防止視覺疲勞，特別是在弱光條件下。
對于這些補償并沒有嚴格的規(guī)定。相反，我們會根據(jù)文本區(qū)域、字體大小和行寬分別調(diào)整每一個元素，以確保深色主題和淺色主題一樣清晰、易于閱讀。
三、少用大面積亮色
在淺色主題中，我們經(jīng)常使用大面積的亮色，效果通常還不錯，因為我們最重要的元素可能會更亮。但在深色主題中是行不通的，大面積亮色會把我們的注意力吸引過去。
例如，參考“提醒我”界面。在淺色主題中，粉紅色的蒙層不會把用戶的注意力從顏色更亮的對話框上吸引走。但是在深色主題中，同樣的蒙層卻會吸引注意力。所以我們拿掉了這種蒙層，這樣用戶就可以快速、輕易地關注到重要的部分。
少用大面積亮色可以讓重要信息更受關注
四、避免純黑或純白
在Superhuman，我們不會在黑暗主題中使用純黑或純白。
有以下四個理由：
4.1 真實性
真正的黑色并不存在于我們的日常環(huán)境中（世界上最黑的物體，麻省理工學院開發(fā)的一種尚未命名的材料，離真正的黑色還差0.005% ）。因此，我們的視覺已經(jīng)適應了將相對的黑暗視為黑色。
這就是為什么#000000會讓人感覺如此不和諧，尤其是在與較淺的元素對比時，它與我們通常看到的任何東西都不匹配。
4.2 黑色拖影
當較淺的元素被拖動或滾動在純黑色背景上時，就會產(chǎn)生黑色涂抹這種視覺失真。
這種效果出現(xiàn)在OLED屏幕上，這種屏幕越來越普遍。在這些屏幕上，純黑色像素會被關閉（這就是為什么深色主題比淺色主題消耗更少的電量）。
然而，這些像素的開啟和關閉比改變顏色要慢，因此這個變量響應導致了拖影效果。
iOS時鐘應用程序的黑色拖影（必須在OLED屏幕上觀看）
你可以通過使用深灰色來避免黑色拖影，因為那樣的話像素將不會被關閉。這甚至適用于像#010101這樣的深灰色，并且仍然比淺色主題更省電。
4.3 深度
如果在背景中使用純黑色，你就無法去表現(xiàn)深度。
打個比方，假如界面背景是純黑色的，你想在上面畫一個通知界面，通知應該漂浮在背景之上，所以你要使用陰影來傳達深度。但是，這種情況下陰影是難以察覺的，因為沒有什么比純黑更黑。
如果你的背景不是純黑色的，你可以使用不同不透明度的陰影和模糊來表達深度。例如，參考Superhuman的通知:
可以用陰影來表達深度，前提是背景不是純黑色的。
4.4 光暈
純白文本與純黑背景形成最高對比度是21:1。從量化的WCAG（Web內(nèi)容無障礙指南）的使用條件來看，這簡直是最佳輸出對比。
然而，在設計黑暗主題時，一定要注意非常高的對比度，對比度太高會導致眼睛疲勞和光暈。
將非常明亮的文本設置在非常暗的背景下時，文本會顯示為背景出血。對于我們這些散光患者來說，這種影響甚至更強。
杰森·哈里森是感知與互動研究組的博士后研究員，他說:
散光患者（約占總人口的50%）發(fā)現(xiàn)，黑底白字比白底黑字更難閱讀。這在一定程度上與光線有關:在明亮的顯示器（白色背景）下，虹膜閉合得更緊，減少了“變形”鏡片的影響；在黑色的背景下，虹膜會打開以接收更多的光線，而透鏡的變形會使眼睛產(chǎn)生更模糊的焦點。
散光患者（約占總人口的50%）發(fā)現(xiàn)，黑底白字比白底黑字更難閱讀。這在一定程度上與光線有關:在明亮的顯示器（白色背景）下，虹膜閉合得更緊，減少了“變形”鏡片的影響；在黑色的背景下，虹膜會打開以接收更多的光線，而透鏡的變形會使眼睛產(chǎn)生更模糊的焦點。
在Superhuman，我們必須特別注意光暈，因為應用程序的文本太多。我們把白色的文字設置為90%的不透明度，這樣黑暗的背景就會混在一起。這平衡了對比度和亮度，使應用程序很容易在各種光線條件下閱讀。
五、加深顏色
因為為了避免眼睛疲勞和光暈，我們把文本的顏色調(diào)暗了，所以彩色元素和按鈕可能會顯得太亮了。必須調(diào)整這些顏色，以更好地適應深色的主題。
首先，我們降低亮度，使這些顏色不會搶附近文本的視覺焦點。然后，增加飽和度，使他們?nèi)匀槐３衷刑卣鳌?/p>
例如，如果直接使用淺色主題中的紫色，它與附近文本對比顯得太亮了。在實際的深色主題中，我們加深了這種顏色，這樣用戶才可以專注于文本。
為黑暗的主題創(chuàng)造更深的顏色：保持色調(diào)，降低亮度，增加飽和度。
結論
深色主題有很多好處，現(xiàn)在被受到廣泛期待。
然而，想要設計好一款深色主題并非易事。簡單地重復使用顏色和反轉色調(diào)會增加眼睛疲勞，使其在弱光下更難閱讀，甚至可能打破視覺和信息層次。
我們找到了一種系統(tǒng)的方式來設計可讀性強、均衡、出色的深色主題，只需遵循以下步驟:
- 深暗淺明
- 重新審視感知對比度
- 少用大面積亮色
- 避免純黑或純白
- 加深顏色
本文譯自Teresa Man的How to design delightful dark themes，作者是郵件客戶端Superhuman的首席設計師
原文鏈接：https://heydesigner/blog/how-to-design-delightful-dark-themes/
本文由 @海外設計內(nèi)參 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協(xié)議
