在 Superhuman, 我们正在打造世界上最流畅的邮箱体验。
暗色主题现在成为了 App 设计的最新潮流。MacOS 去年引入了深色模式，上个月，安卓发布了深色主题，iOS 前两周也跟进了。
罕见的是，暗色主题这个功能已经被广为期待了。
做的好的话，暗色主题本身有很多好处。它可以减缓视觉疲劳，可以在弱光下更容易阅读。并且，考虑到这一切都在屏幕上运行，它可以大大降低电量消耗。
但是，要做出一套令人感到舒适的深色主题不是那么容易的。我们不能够仅仅重复利用已有的颜色，或者是对投影反色处理。如果这样做的话，我们只会得到相反的效果：加重了视觉疲劳，并且在弱光下难以阅读，我们甚至会打破界面的信息层级。
在这篇文章中，我们会分享怎样做出适合阅读的、和谐的和令人舒适的暗色主题。
1. 加深底层界面颜色
在暗色主题下，UI 元素的背景颜色遵循着这样的原则：离用户越近的图层，这块地方明度就越高。这模拟了光源从顶部照射进来的原理，离一个图层越远，这个图层就会接受到更少的光，最后变成了背景。
设计一套暗色主题时，仅仅只对浅色主题进行反色处理是我们很容易想到的方法。但这样做的话，底层的界面会变亮，上层的界面会变暗。这样会打破一般的物理规则，让人感到不自然。
相反，我们只针对浅色主题模式的主要界面颜色来做修改，把这个颜色修改成深色主题的主要界面颜色。提高浅层界面颜色的明度，并且加深底层界面的颜色。
Superhuman 的深色主题是由 5 种不同灰度构成的。浅层的界面采用的是更高明度的灰色；越深的界面采用的是更暗的灰色。
2. 重新审视感知的对比
当参考一套浅色主题来设计深色主题时，重新审视感知化的对比度是很重要的。这就是说一个元素的对比度看起来有多大， 而不用管这些数字显示什么。
例如，在我们浅色主题上，联系人信息的颜色是 60% 透明度的黑。相反在深色主题上，我们把颜色规定成了 65% 透明度的白。尽管两者的对比度都超过了 AA 标准，但这多出来的5%能够预防视觉疲劳，特别是是在弱光的环境下。
其实对于这些数字差异，没有一个硬性的规定。相反，我们是针对每个元素单独调整 —— 考虑到字号大小、字重和行距 —— 来确保在深色主题上也能和在浅色主题上一样容易阅读。
3. 降低大色块的明度
在浅色主题里，我们经常使用明亮的大色块。这样做通常是可行的，因为我们最重要的信息元素的明度很可能更加的高。但是在深色主题里，这并不起作用，因为大色块的颜色会将我们的注意力从最重要的元素上转移。
比如我们的「提醒我」页面，在浅色模式下，这个粉色遮罩并不会对这个明度更加大的对话框产生干扰。但是在我们的深色模式下，同样的粉色遮罩会转移人们的注意力。为了快速容易的关注到重点元素上，我们完全地去掉了这个粉色遮罩。
4. 避免纯白或者纯黑
在 Sumperhuman 的暗色主题下，我们不使用任何纯白或纯黑的颜色。下面用四点来阐述下理由。
4.1. 现实性
在我们的日常生活中并不存在纯黑的物质（MIT开发出了一个还有待被命名的世界上最黑的物质，这个物质距离纯黑仍然有0.005%的偏差）。我们的视力已经适应了将相对的黑色视为纯黑。这就是为什么 #000000 这个色值会让人感觉到不和谐，特别是当把它和更明亮的元素对比时。它并不匹配我们通常看见的东西。
4.2. 黑色拖影效应
黑色拖影效应是一种视觉干扰，是当明度比较大的内容在纯黑色背景上拖拽滚动时出现的一个现象。
这个拖影现象在 OLED 屏幕上越发常见。因为在这种屏幕上，纯黑色像素是关闭的（这也是为什么暗色主题会比浅色主题消耗更少的电量）。但这也有个不好的地方，这些像素点开和关的的速度会慢于颜色的变化，这个延迟响应造成了拖影效应。
你可以使用灰色替代纯黑，来避免黑色拖影效应，那样的话像素点就不会关闭了。甚至你也可以使用像纯黑的灰色#010101，这样做也会比浅色主题更节省电量。
4.3. 深度
如果你的背景采用纯黑色，这样你会很难在界面里表达出深度的感觉。
例如，想象你的背景是纯黑色，在背景之上有一个通知框。这个通知框应该是漂浮在背景上方，因此要使用投影来表达出深度。但是这个投影是看不出来的，因为没有东西是比纯黑还要黑的。
如果你的背景不是纯黑，那你就可以使用不同透明度和模糊度的投影来表达出深度。比如可以看看出现在 Superhuman 里的通知模块：
4.4. 光晕
纯白的文字和纯黑的背景会产生最高的对比度：21:1. 在 WCAG 无障碍条款的定量规定下，这种对比度是个理想的效果。
然而在设计暗色主题时，要留意对比度很高的情况。太高的对比度会像光晕一样造成眼睛疲劳。
在很暗的界面上放上高明度的文字，文字会看起来融入到了背景中，这个效应对于那些眼睛散光的人来说更强烈。根据 Jason Harrison 的研究：散光的人（几乎占人口50%）在黑底白字上比在白底黑字上更难阅读。
在 Superhuman 里， 我们不得不特别注意光晕的影响，因为我们的 App 里有大量的文字信息。我们将白色文字设置成 90% 透明度，这样可以透过黑色的背景。这样的处理方式平衡了对比度和明度，让 App 里的界面能够在更加多样的光照条件下易于阅读。
5. 加深颜色
为了避免视觉疲劳和光晕的影响，我们淡化了文字的颜色。但这样的话，我们的强调色和按钮会显得太亮。我们现在要调整这些颜色来更好地适应暗色主题。首先，我们降低这些颜色的明度，和旁边的文字比起来不至于过分抢眼。其次，我们增加了饱和度，保有其该有的特点。
例如，如果我们直接拿浅色主题的紫色用在深色主题上，感官上会比旁边的文字更加亮。在我们实际的暗色主题中，我们加深了按钮颜色，这样用户会把注意力集中在文字上。
结论
暗色主题有很多被好处，但是，如果要很完美地做好一套暗色主题是不容易的。简单的重复使用颜色和反转投影颜色会加重视觉疲劳，让人很难在弱光下阅读，甚至可能会打破视觉和信息的层级。
我们发现了一个用系统的方法来打造一个具有阅读性、平衡性和愉悦性的暗色主题。只需要遵循以下规则：
- 加深底层界面颜色
- 重新审视感知的对比
- 降低大色块的明度
- 避免纯白或纯黑
- 加深颜色
我希望这篇文章会对你设计暗色主题带来帮助。如果你有任何想法或者疑问，随时联系我 @ifbirdsfly, teresa@superhuman.com
作者：Teresa Man
原文链接：https://blog.superhuman.com/how-to-design-delightful-dark-themes-7b3da644ff1f
