文章分享了作者為應(yīng)用設(shè)計(jì)深色主題的心得和經(jīng)驗(yàn)，希望對(duì)您設(shè)計(jì)深色主題的界面有所幫助。

深色主題是應(yīng)用界面設(shè)計(jì)的最新趨勢。MacOS去年推出了深色主題模式后，Android和iOS也緊隨其后，推出了各自的深色主題模式。

曾經(jīng)罕見的深色主題現(xiàn)已受到大眾的廣泛期待。

如果設(shè)計(jì)得當(dāng)，深色主題可以帶來諸多好處，可以緩解視疲勞，弱光下更易讀。而且，根據(jù)屏幕的不同，可以大大減少電池消耗。

然而，想要設(shè)計(jì)一套出色的深色主題并非易事，不能只是簡單地重復(fù)使用顏色或反轉(zhuǎn)色調(diào)。如果這樣做，效果將適得其反：加重視疲勞，弱光下更難閱讀，甚至可能打破界面的信息層次結(jié)構(gòu)。

這篇文章主要將說明如何設(shè)計(jì)可讀、均衡和出色的深色主題。

一、深暗淺明

大多數(shù)深色主題的UI設(shè)計(jì)都遵循這一原則：深層界面更暗，淺層界面略亮。這模擬了從上方投射光線的環(huán)境，帶來熟悉且令人安心的物理效果。

在進(jìn)行深色主題設(shè)計(jì)時(shí)，很容易就會(huì)通過反轉(zhuǎn)淺色主題來實(shí)現(xiàn)效果。然而，這樣做反而會(huì)使底層變亮，而表層變暗。這有悖于物理規(guī)律，會(huì)讓人感覺不自然。

與以上方法不同，我們應(yīng)該從淺色主題的主界面取色，反轉(zhuǎn)此顏色，以獲得深色主題的主界面顏色。然后在近表層調(diào)亮這種顏色，在底層調(diào)暗這種顏色。

在Superhuman，我們的深色主題是由五種灰色陰影構(gòu)成的。表層界面面使用較淺的灰色;底層的界面使用較深的灰色。

越靠近表層的界面使用較淺的灰色，靠近底層的界面使用較深的灰色。

二、重新審視感知對(duì)比度

在通過參考淺色主題來設(shè)計(jì)深色主題時(shí)，很重要的是要重新審視感知對(duì)比。也就是說，關(guān)鍵是看一個(gè)元素表現(xiàn)出來的差異，而不是看數(shù)值究竟是多少。

例如，在我們的淺色主題中，聯(lián)系人信息文字為不透明度為60%的黑色。但是在我們的深色主題中，我們將聯(lián)系方式設(shè)置為不透明度為65%的白色。

雖然兩者的對(duì)比度都超過AA標(biāo)準(zhǔn)，但是額外的5%卻可以防止視覺疲勞，特別是在弱光條件下。

對(duì)于這些補(bǔ)償并沒有嚴(yán)格的規(guī)定。相反，我們會(huì)根據(jù)文本區(qū)域、字體大小和行寬分別調(diào)整每一個(gè)元素，以確保深色主題和淺色主題一樣清晰、易于閱讀。

三、少用大面積亮色

在淺色主題中，我們經(jīng)常使用大面積的亮色，效果通常還不錯(cuò)，因?yàn)槲覀冏钪匾脑乜赡軙?huì)更亮。但在深色主題中是行不通的，大面積亮色會(huì)把我們的注意力吸引過去。

例如，參考“提醒我”界面。在淺色主題中，粉紅色的蒙層不會(huì)把用戶的注意力從顏色更亮的對(duì)話框上吸引走。但是在深色主題中，同樣的蒙層卻會(huì)吸引注意力。所以我們拿掉了這種蒙層，這樣用戶就可以快速、輕易地關(guān)注到重要的部分。

少用大面積亮色可以讓重要信息更受關(guān)注

四、避免純黑或純白

在Superhuman，我們不會(huì)在黑暗主題中使用純黑或純白。

有以下四個(gè)理由：

4.1 真實(shí)性

真正的黑色并不存在于我們的日常環(huán)境中（世界上最黑的物體，麻省理工學(xué)院開發(fā)的一種尚未命名的材料，離真正的黑色還差0.005% ）。因此，我們的視覺已經(jīng)適應(yīng)了將相對(duì)的黑暗視為黑色。

這就是為什么#000000會(huì)讓人感覺如此不和諧，尤其是在與較淺的元素對(duì)比時(shí)，它與我們通?？吹降娜魏螙|西都不匹配。

4.2 黑色拖影

當(dāng)較淺的元素被拖動(dòng)或滾動(dòng)在純黑色背景上時(shí)，就會(huì)產(chǎn)生黑色涂抹這種視覺失真。

這種效果出現(xiàn)在OLED屏幕上，這種屏幕越來越普遍。在這些屏幕上，純黑色像素會(huì)被關(guān)閉（這就是為什么深色主題比淺色主題消耗更少的電量）。

然而，這些像素的開啟和關(guān)閉比改變顏色要慢，因此這個(gè)變量響應(yīng)導(dǎo)致了拖影效果。

iOS時(shí)鐘應(yīng)用程序的黑色拖影（必須在OLED屏幕上觀看）

你可以通過使用深灰色來避免黑色拖影，因?yàn)槟菢拥脑捪袼貙⒉粫?huì)被關(guān)閉。這甚至適用于像#010101這樣的深灰色，并且仍然比淺色主題更省電。

4.3 深度

如果在背景中使用純黑色，你就無法去表現(xiàn)深度。

打個(gè)比方，假如界面背景是純黑色的，你想在上面畫一個(gè)通知界面，通知應(yīng)該漂浮在背景之上，所以你要使用陰影來傳達(dá)深度。但是，這種情況下陰影是難以察覺的，因?yàn)闆]有什么比純黑更黑。

如果你的背景不是純黑色的，你可以使用不同不透明度的陰影和模糊來表達(dá)深度。例如，參考Superhuman的通知:

可以用陰影來表達(dá)深度，前提是背景不是純黑色的。

4.4 光暈

純白文本與純黑背景形成最高對(duì)比度是21:1。從量化的WCAG（Web內(nèi)容無障礙指南）的使用條件來看，這簡直是最佳輸出對(duì)比。

然而，在設(shè)計(jì)黑暗主題時(shí)，一定要注意非常高的對(duì)比度，對(duì)比度太高會(huì)導(dǎo)致眼睛疲勞和光暈。

將非常明亮的文本設(shè)置在非常暗的背景下時(shí)，文本會(huì)顯示為背景出血。對(duì)于我們這些散光患者來說，這種影響甚至更強(qiáng)。

杰森·哈里森是感知與互動(dòng)研究組的博士后研究員，他說:

散光患者（約占總?cè)丝诘?0%）發(fā)現(xiàn)，黑底白字比白底黑字更難閱讀。這在一定程度上與光線有關(guān):在明亮的顯示器（白色背景）下，虹膜閉合得更緊，減少了“變形”鏡片的影響；在黑色的背景下，虹膜會(huì)打開以接收更多的光線，而透鏡的變形會(huì)使眼睛產(chǎn)生更模糊的焦點(diǎn)。

在Superhuman，我們必須特別注意光暈，因?yàn)閼?yīng)用程序的文本太多。我們把白色的文字設(shè)置為90%的不透明度，這樣黑暗的背景就會(huì)混在一起。這平衡了對(duì)比度和亮度，使應(yīng)用程序很容易在各種光線條件下閱讀。

五、加深顏色

因?yàn)闉榱吮苊庋劬ζ诤凸鈺?，我們把文本的顏色調(diào)暗了，所以彩色元素和按鈕可能會(huì)顯得太亮了。必須調(diào)整這些顏色，以更好地適應(yīng)深色的主題。

首先，我們降低亮度，使這些顏色不會(huì)搶附近文本的視覺焦點(diǎn)。然后，增加飽和度，使他們?nèi)匀槐３衷刑卣鳌?/p>

例如，如果直接使用淺色主題中的紫色，它與附近文本對(duì)比顯得太亮了。在實(shí)際的深色主題中，我們加深了這種顏色，這樣用戶才可以專注于文本。

為黑暗的主題創(chuàng)造更深的顏色：保持色調(diào)，降低亮度，增加飽和度。

結(jié)論

深色主題有很多好處，現(xiàn)在被受到廣泛期待。

然而，想要設(shè)計(jì)好一款深色主題并非易事。簡單地重復(fù)使用顏色和反轉(zhuǎn)色調(diào)會(huì)增加眼睛疲勞，使其在弱光下更難閱讀，甚至可能打破視覺和信息層次。

我們找到了一種系統(tǒng)的方式來設(shè)計(jì)可讀性強(qiáng)、均衡、出色的深色主題，只需遵循以下步驟:

1. 深暗淺明
2. 重新審視感知對(duì)比度
3. 少用大面積亮色
4. 避免純黑或純白
5. 加深顏色

本文譯自Teresa Man的How to design delightful dark themes，作者是郵件客戶端Superhuman的首席設(shè)計(jì)師

原文鏈接：https://heydesigner.com/blog/how-to-design-delightful-dark-themes/

本文由 @海外設(shè)計(jì)參考 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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