Se Connecter Maintenant 深色主题这几年几乎成了系统级更新的标配，从 macOS 到 Android、iOS，再到各种应用，一夜之间大家都开始“黑”了。其实用户对深色模式的期待，远不只是换个皮肤那么简单——在弱光下它确实能让眼睛舒服不少，OLED 屏幕上还能省下可观的电量。但说实话，深色主题设计起来比看上去要棘手得多。简单地把浅色界面反转一下，或者随便换个深色背景，很容易适得其反：眼睛反而更累，信息层级被打乱，甚至让人在暗光下阅读更吃力。
在 Superhuman 设计深色主题时，我和团队摸索出了一套比较系统的方法，核心就围绕五个心得。它们不是那种拍脑袋的规则，而是在反复调整中踩过坑后沉淀下来的经验，希望能给你一些启发。
先从最根本的光影感说起。我们日常看到的物体，受光面总是更亮，背光面更暗，这是刻在脑子里的物理直觉。所以深色主题不应该简单粗暴地反转浅色主题，比如把白色背景变黑、黑色文字变白。如果反转，原来浅色界面中靠下的、较暗的部分会变成较亮的，而顶部反而变暗，这完全违背了“光线从上方照下来”的自然感受，人会下意识觉得不舒服。更好的做法是，从浅色主题里提取主界面的颜色，取它的反色作为深色主题的基础色，然后在这个基础上，让靠近用户视觉层级更高的表面更亮一些，底层背景更暗一些。在 Superhuman 的深色主题里，我们用了五种灰色来构建这种层次——浮在最上层的卡片、对话框，用较浅的灰；底层的背景就用更深的灰。越贴近“表面”越亮，越往“底层”越暗，界面就有了自然的深度，眼睛扫过去也更容易理解信息结构。
有了层次，还得重新校准对比度。很多人会拿着 WCAG 的对比度标准去检查深色主题，觉得数值达标就万事大吉。但实际体验中，同样的对比度，白底黑字和黑底白字给人的感觉并不一样。白色文字在深色背景上会显得更“冲”，容易产生光晕，所以需要适当往回拉一点。举个例子，在浅色主题里，联系人信息可能用 60% 不透明度的黑色，放到深色主题下，我们改成了 65% 不透明度的白色。虽然两者的对比度都超过了 AA 标准，但深色这边多加了 5% 的“灰”，正是为了抵消白色文字在暗背景上的那种刺眼感，让阅读更柔和，尤其在晚上关灯后。没有严格的公式，更多是依据文本尺寸、字重、行宽来逐个调整，确保深色主题读起来和浅色主题一样清晰，甚至更舒服。
接着要留意大面积亮色的使用。在浅色界面里，鲜艳的色块、蒙层往往不会出问题，因为页面里最亮的部分通常是核心内容，比如白色卡片或对话框，鲜艳色块只是陪衬。可一旦切换到深色背景，情况就反过来了。暗色环境里，大片亮色就像黑夜里的路灯，会死死抓住用户的注意力，哪怕它本身并不重要。当初设计“提醒我”这个功能时，浅色主题下有一个粉色半透明蒙层，叠在对话框后面，完全不会干扰注意力。但在深色主题里，同样的粉色蒙层变得异常抢眼，视线总是不自觉地被它拽走。最后我们干脆去掉了这个蒙层，让最重要的对话框直接浮在深色背景上，信息焦点一下子就清晰了。所以，在深色主题里，让亮色尽可能收敛，才能确保重要内容真正被看见。
还有一个很重要的选择：刻意避开纯黑和纯白。我们不用 #000000 和 #FFFFFF，原因有四个，每一个都跟实际体验密切相关。首先，真实世界里几乎没有纯黑，人眼早就适应了把“很深的颜色”当作黑色。屏幕上刷出纯黑，再配上浅色元素，大脑会本能地觉得违和。其次，OLED 屏幕上纯黑背景有一个物理缺陷叫“黑色拖影”。纯黑像素会直接关闭，但从关闭再点亮的速度，比单纯改变颜色要慢。快速滚动页面时，浅色元素在纯黑背景上会拖出深色残影。换成深灰，哪怕只是 #010101，像素就不会完全关闭，既避免了拖影，又比浅色背景省电得多。第三，纯黑背景无法表达深度。如果底面是纯黑，想在上面放一个浮动的通知卡片，靠阴影来表现它悬浮起来，几乎不可能——因为没什么比纯黑更暗了，阴影根本不可见。而用深灰背景，叠加不同不透明度的阴影和模糊，就能让卡片“浮”起来，层级关系一目了然。第四，极端的对比度会引发光晕，尤其对散光人群很不友好。纯白文字在纯黑背景上对比度高达 21:1，数值很漂亮，但实际阅读时，高亮度的文字会像渗进背景里一样，边缘发虚。这有生理基础：散光患者（差不多占人口一半）在黑底白字下，虹膜会开得更大，让更多光线进入，变形的晶状体导致焦点更模糊，文字更容易“化开”。在 Superhuman 这种以文字为主的邮件客户端里，我们特别重视这一点，所以把白色文字设置成 90% 不透明度，让背景的深灰微微透出来，平衡了对比和亮度，各种光照条件下读起来都更沉稳。
最后，还得专门处理彩色元素。前面为了缓解光晕，我们把文字亮度调暗了，这样一来，原本鲜艳的按钮、图标或标签色，在深色背景上就可能显得过于刺眼，压过周围文字。为了让它们和谐融入，需要对这些颜色做专门优化。做法是降低颜色的亮度，同时适当提高饱和度。只降亮度会让颜色变灰变脏，而提高饱和度能保留它原本的色彩特征，让它看起来仍是那个颜色，只是更沉稳、不抢戏。比如浅色主题里的紫色按钮，如果直接搬到深色主题，会像一颗高亮灯泡悬在文字旁边。我们把它加深、加饱和之后，它依然能一眼认出是紫色，但视觉重心重新回到了文字本身。
深色主题远不止是“换个暗色背景”那么简单，它牵扯到生理感知、物理直觉和界面层级一堆细节。如果能把握好这几个原则——让光影层次自然、重新校准对比度、克制大面积亮色、放弃纯黑纯白、对彩色做加深处理——你设计出来的深色模式就会更平衡，也更耐看。希望这些从 Superhuman 设计过程中积累的经验，能让你少走一点弯路，做出让人真正愿意在夜间打开的深色主题。