[译] 如何设计一款讨人喜欢的暗色主题

• 原文地址：How to design delightful dark themes
• 原文做者：Teresa Man
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Jessica
• 校对者：药王, HytonightYX

如何设计一款讨人喜欢的暗色主题

在 Superhuman，咱们正在打造世界上最快的电子邮件体验。您能够体验到以两倍于之前的速度浏览您的收件箱，而且保持收件箱为零！

暗色主题是应用程序设计的最新趋势。macOS 去年推出了黑暗模式。Android 上月也推出了黑暗主题。在过去的两周中，iOS 也紧跟而上。

曾经不多见的暗色主题已成为人们广泛指望的主题。

若是作得好，暗色主题是有不少好处的。它能够减小眼睛疲劳，在弱光下也更容易阅读。并且，对于 OLED 屏幕来讲，暗色主题能够大大下降电量消耗。

然而，创造一个讨人喜欢的暗色主题可不容易。咱们不能简单地重用咱们的颜色或颠倒咱们的色调。若是咱们这样作，每每会拔苗助长：咱们将增长眼睛的疲劳，使其在弱光下更难阅读。咱们甚至有可能打破咱们软件的信息层次结构。

在这篇文章中，咱们将会分享如何设计通俗易懂、和谐且讨人喜欢的暗色主题

1. 越远的区域越暗

大多数深色主题的 UI 设计都遵循这一原则：越远的区域越暗。这模拟了一个光源从上方投射的场景，并传达了熟悉且使人安心的实体感。

当设计一个暗色主题时，咱们很容易想固然地将咱们的浅色主题直接反转。然而，这样的话，远处的区域会变亮，而近处的区域会变暗。这将破坏真实感，使人感到不天然。

与此相反，您应该只取您的浅色主题的主要表面颜色。反转此颜色以产生暗色主题的主要颜色。对较近的表面调亮这种颜色，对较远的表面调暗这种颜色。

在 Superhuman 中，咱们的暗色主题是由五种灰色色调构成的。较近的区域使用较浅的灰色，较远的区域使用较深的灰色。

2. 从新肯定感知对比度

经过原先的浅色主题来设计暗色主题时，很重要的一点是要从新肯定感知对比度。注意，是这个元素看起来的对比度，而别被所谓的建议或标准所限制。

例如，在咱们的浅色主题中，联系人信息是黑色的，不透明度为 60%。可是在咱们的暗色主题中，咱们将联系方式设置为白色，不透明度为65%。虽然这两种的对比度超过了 AA 标准，但额外的 5% 能够防止视觉疲劳，特别是在光线不足的状况下。

对于这些颜色的补偿并无严格的规定。咱们能够根据文本大小、字体大小和行宽分别调整每一个项目，以确保暗色主题与浅色主题同样清晰、易于阅读。

3. 减小大块明亮的色彩

在浅色主题中，咱们常用大块明亮的颜色。这通常来讲都是对的：咱们最重要的元素可能会更亮。但在暗色主题中，这是行不通的：用户会将焦点集中于大块的颜色反而忽视了咱们最重要的元素。

例如，这是咱们的 Remind me 界面。在咱们的浅色主题中，粉红色的遮罩层不会分散在更明亮的对话框上的焦点。可是在咱们的暗色主题中，一样的遮罩层将咱们的注意力分散。咱们彻底去掉了遮罩层，这样咱们就能够快速、方便地聚焦于重要的内容。

4. 避免纯黑色或纯白色

在 Superhuman 中，咱们没有使用任何纯黑色或纯白色在咱们的暗色主题。这样作有四个缘由。

4.1. 真实感

在咱们的平常环境中并不存在纯黑色（世界上最黑的物体，麻省理工学院开发的一种还没有命名的材料，它离真正的纯黑色还差 0.005%）所以，咱们的视觉已经适应了将相对的黑色视为真正的黑色。这就是为何 #000000 会让咱们感受如此不和谐的缘由，尤为是在与较亮的元素对比时。由于它不存在于与咱们一般看到的任何东西的颜色上。

4.2. 黑色拖影

黑色拖影是一种视觉失真，出现于当较亮的内容被拖动或滚动在纯黑色背景时。

这种效果出如今愈来愈多人使用的 OLED 屏幕上。在这种屏幕上，纯黑色像素被关闭（这就是暗色主题比浅色主题使用更少电量的缘由）。然而，这些像素的开启和关闭的速度比颜色改变的速度要慢。这个不一样速度的结果形成了拖影效果。

你能够经过使用深灰色来避免黑色拖影，由于这样像素就不会被关闭。甚至可使用像 #010101 这样的深灰色，而且还会比浅色主题使用更少的电量！

4.3. 层次感

若是您在背景元素中使用了纯黑色，您会失去一些表现层次深度的技巧。

例如，想象您的背景是纯黑色的。在此之上，显示一个通知。通知应该浮在背景之上，因此您用阴影来表达深度。只是这样的阴影难以察觉，由于没有什么比纯黑色更暗。

若是您的背景不是纯黑色的，您可使用不一样不透明度的阴影和模糊来表达深度。例如，考虑 Superhuman 中的通知：

4.4. 眩晕

纯白色文本在纯黑色背景下可能产生的最高对比度为：21:1。在 WCAG（Web Content Accessibility Guidelines Web 内容无障碍指南） 中的无障碍说法中，这是理想输出。

然而，在设计暗色主题时，必定要当心太高的对比度。对比度过高会致使眼睛疲劳和眩晕。

当将很是明亮的文本放置在很是暗的背景下时，文本会看起来渗透在背景之中。这对于咱们这些散光的人来讲，影响甚至更强。感受感知与互动研究小组的博士后研究员 Jason Harrison 表示：

散光患者（约占总人口的 50% ）在阅读黑底白字内容时比阅读白底黑字内容更困难。这在必定程度上与光线有关：在明亮的显示背景（白色背景）下，虹膜闭合得更紧，减小了角膜（能够理解为能够变形的“镜片”）的影响；在黑色的背景下，虹膜会打开以接收更多的光线，而角膜的变形会使眼睛产生更模糊的焦点。

在 Superhuman 中，因为咱们的软件文字不少，因此咱们必须特别当心眩晕问题。咱们把白色的文字设置为 90% 的不透明度，从而使文字与深色背景融为一体。这就平衡了对比度和亮度，使软件很容易在各类光线条件下阅读。

5. 加深颜色

因为咱们调低了文本的色彩来避免眼睛疲劳和晕眩，所以咱们的彩色强调内容和按钮可能显得太亮。如今，咱们必须调整这些颜色以在暗色主题中更好地工做。首先，咱们下降亮度，使这些颜色不会压制附近的文本。其次，咱们增长饱和度，使它们仍然具备颜色特征。

例如，若是咱们直接使用浅色主题中的紫色，对于附近的文本而言，它显得太亮了。因此，在咱们实际的暗色主题中，咱们加深了紫色，以便用户能够专一于文本内容。

---

结论

暗色主题有不少好处，如今正在被普遍期待。然而，作好一个暗色主题可不容易。简单地重用咱们的颜色或颠倒咱们的色调，将增长眼睛的疲劳，使其在弱光下更难阅读，甚至还有可能打破咱们软件的信息层次结构。

咱们找到了一种系统的方式来构建通俗易懂的，和谐且讨人喜欢的暗色主题。只需遵循如下步骤：

1. 越远的区域越暗
2. 从新肯定感知对比度
3. 减小大块明亮的色彩
4. 避免纯黑色或纯白色
5. 加深颜色

我但愿以上这些有助于您设计讨人喜欢的暗色主题。若是您有任何想法或疑问，能够和我聊聊！@ifbirdsfly，teresa@superhuman.com 👩‍🎨

— Teresa Man，Superhuman 的首席设计师

---

在 Superhuman，咱们正在重建针对 web 和移动设备的电子邮件体验。试想一下电子邮箱界的 Vim 或者 Sublime：惊人快速，视觉华丽。

若是您崇尚用优雅的方式解决有趣的问题 —— 请加入咱们！了解更多信息或者给我发电子邮件.

很是感谢 Jared Erondu，Dave Klein，Jayson Hobby，Tim Boucher，Tamas Sari 以及 Jiho Lim 的付出和审查！

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。