Entrar Agora 暗色主题在应用设计里早就不是什么新鲜事了。从 macOS 率先推出暗色模式，到 Android 和 iOS 陆续跟上，曾经只在小圈子里流行的深色界面，如今几乎成了每个应用都会认真考虑的标配。大家对它的期待，也不再是“有就行”，而是希望它做得足够舒服、自然。
好的暗色主题确实有不少实打实的好处：缓解眼疲劳，在光线暗的地方更容易阅读，对 OLED 屏幕还能明显省电。但真要把它做对，远比想象中复杂。如果只是简单地把亮色主题的颜色搬过来，或者把阴影关系直接反转，结果往往适得其反——不仅更累眼睛，弱光下更难读，原本清晰的信息层级和空间感也很容易被破坏掉。
在这篇文章里，我想和你分享 Superhuman 邮件应用在打磨暗色主题时，一步步摸索出来的一套思路。希望这些经验能帮你做出一个读起来清晰、视觉上平衡，用着又让人愉悦的深色主题。
第一个关键点，是让远处的表面更暗。在暗色主题里，UI 表面的颜色大致遵循这样一个原则：离用户越近的层，颜色越浅；越靠后、越底层的界面，颜色越深。这就像头顶有一束光打下来，深处接收到更少的光，自然就暗了下去。如果沿用亮色主题的逻辑，把颜色倒过来，近处反而变暗、远处反而变亮，整个空间关系就会变得别扭，看着也不自然。我们的做法是，用亮色主题的主表面色反转，得到暗色主题的基础色，然后让靠近用户的表面（比如弹窗、浮层）用浅一些的灰色，远处的背景用更深的灰色。在 Superhuman 里，我们通过五个灰色层级来区分远近，让界面在视觉上始终保持清晰的空间感。
接下来，重新审视感知对比度同样重要。从亮色主题迁移到暗色主题时，不能只盯着数字上的对比度，更要关注实际感知到的对比度。比如，在亮色主题下，某段联系信息用黑色文字，不透明度 60%，看起来没问题；到了暗色主题，我们把文字改成白色，不透明度就可能得调到 65%。虽然两者都符合 WCAG 的 AA 标准，但那多出来的 5%，在弱光环境下能显著减轻阅读时的疲劳感。这类调整没有固定公式，需要根据文本大小、字重、行宽等逐一微调，目的只有一个：让暗色下的文字，读起来和亮色主题一样清晰、不费力。
大面积亮色的使用也得格外小心。亮色主题中，我们经常用大块明亮的颜色来吸引注意力，这通常没什么问题。但到了暗色背景下，同样的大面积亮色会变得过于抢眼，反而把用户的视线从真正重要的内容上拽走。比如 Superhuman 的“提醒我”弹窗，在亮色主题里，粉色半透明覆盖层并不会干扰对话框本身；可一放到暗色主题下，那块粉色就变得格外突兀，让人很难集中精力。于是，我们在暗色主题里干脆去掉了这层覆盖，让用户一眼就能聚焦到关键信息上。
在 Superhuman 的暗色主题中，我们还刻意避开了纯黑（#000000）和纯白（#FFFFFF）。这么做主要基于四个原因。
第一个是真实感。日常环境中几乎不存在纯黑的东西，就算是实验室里最黑的人造材料，距真正的纯黑也还差 0.005%。我们的眼睛早已习惯把相对黑暗感知为黑色，所以界面上突然出现 #000000 时，会显得很生硬，尤其和亮色元素相邻时，那种空洞感更明显。
第二个是黑色拖影。在 OLED 屏幕上，纯黑像素会被完全关闭，虽然省电，但像素从关闭到点亮的速度比切换颜色要慢。滚动或拖动时，这种响应差异就会带来明显的拖影，苹果的时钟应用在 OLED 屏幕上就能看到这种现象。改用深灰色（比如 #010101）就能避免，因为像素不会彻底关闭，而且依然比亮色主题省电。
第三个是深度表达。如果背景用了纯黑，阴影就很难再派上用场——因为没有什么比纯黑更暗，阴影投上去根本看不出来，界面会失去层次感。而如果背景是深灰色，你就能借助不同透明度的阴影和模糊效果，让通知、卡片等元素轻盈地浮起来，空间关系一目了然。
最后是光晕问题。纯黑背景上的纯白文字，对比度高达 21:1，乍看之下似乎很符合无障碍标准，但过高的对比度反而容易导致眼疲劳和眩晕，文字边缘会像渗进背景一样。对散光人群来说，这种情况更明显。有研究指出，约一半人口患有不同程度的散光，他们在黑底白字下阅读会更吃力，因为暗色背景会让瞳孔开得更大，晶状体变形造成的模糊感进一步加重。Superhuman 是一款文本非常密集的应用，我们尤其留意这一点，所以把白色文字的不透明度设定为 90%，让它和深色背景柔和地融合在一起，既保证了对比度，又不会刺眼。
既然为了降低疲劳感，我们主动调暗了文字，那么原有的彩色按钮和强调色就可能显得过亮、过于跳跃。这时候就需要对这些颜色做一次适应性调整。基本思路是：保持色相不变，压低亮度，同时提高饱和度，让颜色依然有辨识度，但不会压过周围的文字。比如，直接把亮色主题中的紫色用到暗色界面上，对相邻的文字来说就太抢眼了；我们会把它加深，让阅读重心重新回到文字内容上。
暗色主题的好处显而易见，但要想把它做好，确实需要一套系统的方法，而不是简单地把颜色反转一下就完事。通过让远层更暗、重新校准感知对比度、减少大面积亮色、避开纯黑纯白、适当加深色彩，我们才逐步打磨出一个可读、平衡且用起来愉悦的暗色主题。希望这些设计思路，也能帮你做出让眼睛更舒服的暗色界面。