前言

暗黑模式在这几年越发普及，越来越多的应用开发出了属于自己的暗黑模式。开发暗黑模式的理由有很多，比如：提高夜间环境的阅读舒适性、降低视觉疲劳、降低设备的能耗、紧跟趋势等等。我认为不管暗黑模式的设计是出于何种理由，对于用户来说，暗黑模式提供了更多选择，让用户能够在不同场景下选择更舒适的色彩模式。

本文通过对行业内较为完整的暗黑体系设计进行分析，进而应用在TDesign暗黑模式的设计探索中，希望过程中产生的思考与结论能够抛砖引玉，促进一些交流和启发。

设计背景

TDesign是腾讯的公司级产品，旨在打造满足企业级产品的设计体系。本次暗黑模式的设计是基于TDesign浅色色板已经确定的情况下，进行暗黑模式的适配设计。

业内参考

这里对比研究了行业内的几种暗黑模式适配原则。研究主要关注文字中性色转换、彩色色板转换两个方面。

在色彩分析过程中我使用HSB色彩模型机型分析比对，相比RGB来说，HSB模型能更好区分色相、饱和度、亮度的数值关系，从而能清晰的理解深浅转换过程中的数值变化。

在内容识别度方面，可以参考业内标准的WCAG（Web内容无障碍指南）来确保内容的可读性。WCAG是业内比较认可的对比度判定标准，基于内容与背景颜色计算出WebAIM对比度数值，对比度越高代表可读性越强。这一计算方法把可读性量化，从而更理性的衡量可读性是否达标，为阅读无障碍设计提供指导依据。

附WCAG计算工具：https://webaim.org/resources/contrastchecker/

一、Apple Design

二、Material Design

三、Ant Design

Tips：Ant Design暗黑模式的设计分析和部分图片来自知乎@瑞含的文章，原文链接：
https://zhuanlan.zhihu.com/p/112470365

四、共性与差异

通过这几种暗黑模式的设计原则与转换方式可以发现一些共性与差异

共性：

1、内容优先：暗黑模式优先保证内容识别度
2、去饱和度：为了避免暗黑模式下的视觉不适感，色彩转换中都降低了饱和度
3、WCAG标准：针对文字对比度都采用了WCAG标准

差异：

这些共性体现在设计暗黑模式的标准依据以及基础准则，而差异是因为他们的暗黑模式侧重范围不同。AppleDesign和Material Design是以操作系统为出发点设计的暗黑模式。而TDesign和Ant design是为了企业级页面服务的设计体系，所以个人认为在暗黑模式下TDesign的色板应该在保证识别的基础上更关注使用时的舒适度，避免长时间使用所带来的视觉疲劳感。

人体生理特性

除了业内参考之外，回归人体生理本源。人类视力是由光线进入角膜，角膜屈光后进入瞳孔，经过瞳孔的调节之后进入水晶体，然后集中在视网膜上再传导至大脑，如此转化为我们看到的影像。在这一过程中，有一些独特的生理现象对我们的视觉造成微妙的影响。而这些微妙的生理特性，也可以为暗黑模式的设计提供思路与依据。

一、侧抑制

（侧抑制效应图：一样的颜色但是左侧方块会看起来更深）

侧抑制是指相邻的感受器之间能够互相抑制的现象，即在某个神经元受到刺激而产生兴奋时，再刺激相近的神经元，则后者所发生的兴奋会对前者产生抑制作用。当一个感受器受到刺激时，由此产生的神经冲动将对邻近部位的输入信号产生抑制性的影响。

（马赫带效应也是因为侧抑制，人们在明暗变化的边界上，常常在亮区看到一条更亮的光带，在暗区看到一条更暗的线条，这个更亮和更暗的区域就是马赫带效应）

总体来说，侧抑制网络在信息预处理中的主要功能有以下几个方面：

① 可以突出边缘，增加反差。

② 将很大的输入变化范围压缩到网络本身的动态范围之内，具有明显的亮度适应作用；

③ 可以对图像的细微间断处进行拟合，具有明显的聚类作用。

影响：在阅读文字信息时，盯住的字会最清楚，这个字周边的其他字就会被视觉中枢弱化。侧抑制也是造成人类多种视觉错觉的原因之一。

二、视觉适应

（锥形细胞和杆状感光细胞）

视觉适应是视觉器官的感觉随外界亮度的持续刺激而变化的过程。视网膜中包含锥状细胞和杆状感光细胞，锥状细胞负责在光线之下使视力清晰，并且感知颜色；杆状感光细胞让我们能在黑暗的环境感知弱光。视觉适应的机制就是这些细胞和神经活动的重新调整，可以分为暗适应和明适应。

① 暗适应：照明停止或者由明亮环境进入黑暗环境的时候，眼睛会暂时看不见事物，这个时候杆状感光细胞开始工作，提升对弱光的敏感度，使人类逐渐适应黑暗环境。（杆状感光细胞有障碍的人就是“夜盲症”啦，并且杆状感光细胞不能辨别颜色，所以黑暗中看什么都是一个颜色！）

② 明适应：照明开始或者由黑暗环境进入明亮环境，人眼感受性下降，眼睛过渡到明视觉状态。比如走出电影院，开始觉得阳光刺眼，但很快就能恢复正常状态。

影响：暗适应和明适应是人类眼睛应对环境光线刺激的反应能力，但是频繁的视觉适应会导致视觉迅速疲劳。

三、视觉后像

（盯住白色区域看30秒，再看别处会看到白色区域的影像）

光刺激对视觉器官的作用停止后，细胞的兴奋并不随着刺激的终止而停止，感觉现象能保留一个短暂的时间，这种现象叫做视觉后像。比如盯着灯泡看数秒，再看别处，会看到发光灯泡的影像。

影响：强烈刺激会引起视觉器官兴奋，产生视觉后像，同时会加速视觉疲劳。

四、生理特性影响小结

① 因为侧抑制的视觉现象，不论是白底黑字还是黑底白字，人类的眼睛都可以增加反差，让黑色字体更黑，白色字体更亮，从而清晰的识别文字。

② 因为视觉适应的原理，我们在光线充足的时候阅读黑底白字的信息，视觉聚焦于白色文字，黑色背景也会更暗，眼睛需要进行暗适应，所以会加速视觉疲劳。而在黑暗环境则相反，眼睛已经是暗适应的状态，阅读黑底白字的信息，不需要进行视觉适应，疲劳感不会增加。所以在黑暗环境使用深色底浅色字的夜间模式会减少刺激，使眼睛更舒服。

③ 阅读黑底白字的信息时，因为侧抑制会使白色字体更加炫目，黑色背景更加沉重，长时间浏览白色字体，会产生强烈的光刺激从而产生视觉后像，造成视觉疲劳。所以即便在使用黑底白字的时候，也要通过降低对比度的方式，减弱这种光刺激，从而减轻视觉的疲劳感。而阅读白底黑字的信息时，聚焦的文字为黑色，不会产生光刺激，视觉后像的情况基本不会出现。

明确暗黑模式设计原则

通过行业与生理特性的分析，在TDesign的暗黑模式中，明确了以下设计原则

1、内容优先：暗黑模式优先保证内容识别度
2、阅读舒适度：克制高饱和度彩色的使用，减少疲劳感，保证阅读舒适性。
3、信息层级一致性：浅色模式和深色模式下的信息层级应该保持一致。
4、WCAG标准：在文字与色彩的调试中，可以以WCAG标准为参考依据。

设计过程

一、明确界面层级

页面根据功能性分为1-导航层、2-内容层、3-容器层。
其中大部分信息都在内容层上呈现，所以作深浅色转换的时候，建议以内容层的背景颜色为基准。即保证深浅模式转换后的色彩在内容层上的视觉一致性。

二、文字中性色转换

在上诉的竞品中可以看到，文字的识别度至关重要。所以不论是Apple design 还是Material Design，都限定了正文识别度需要达到AAA或AA级标准。
在Tencent design中，除了保证文字识别度之外，我希望不同梯度的文字在深浅模式切换后的视觉感知也能趋于一致。所以针对转换后的透明度进行了微调。

以内容层背景色为基准：透明度无调整的情况下，WebAIM的差值相对较大。所以针对不同梯度的透明度进行以下修正：

    1、Title 处于83%-100%的区间，深色WebAIM低于浅色，但是完全满足AAA级标准，并且考虑侧抑制效
应，避免对比度过高导致的视觉疲劳，所以透明度保持不变。

    2、Title 处于17%-83%的区间，深色WebAIM值高于浅色，适当降低透明度，使对比度趋近一致。

通过上图可以看出，修正后的WebAIM值曲线更趋于一致，差值更小，更平均。

深浅模式文字色彩（中性色）最终效果

三、彩色色板转换

通过上诉竞品分析的小结，可以看到apple design和Material Design使用降低饱和度，提升明度的方式。Ant design则是通过透明度进行调整，实际是降低饱和度同时明度也降低。设计落地中我针对这两种方向进行了对比测试

应用在页面的效果来看，降低饱和度，降低明度的版本与浅色模式的视觉感知更加趋于一致。并且由于侧抑制的现象，降低明度有助于减少视觉刺激，避免产生视觉后相，进而减缓视觉疲劳感的产生。

基于以上对比，决定采用透明度转换的方式，降低饱和度和明度，调试出相关彩色色板。

红色色板推导图

以红色色板为例，首先确定Normal颜色在暗色模式下的透明度，再从Normal颜色向上下两极进行梯度推导。这个过程需要不断尝试梯度效果，以及对比WebAIM值差异，最终得到全部梯度的颜色。

最终色板效果

整体色板如上图，调试颜色是一个比较耗时费力的过程，需要不断地验证，即便调试出一份暂时确定的色板也需要反复代入界面场景，测试不同状态的实际效果，另外个人也建议将暗色的多个界面进行长时间的阅读测试，感受自身的阅读疲劳度变化，以确保暗黑模式色板真的可以做到足够舒适。

写在最后

  

暗黑模式的探索是一个持续的过程，这个过程中需要将色彩理论与实际视觉感知相互结合。在调试过程中也会发现理论与视觉感受相悖的情况，这时候可以尝试从人体生理上寻找答案或者依据。以上内容是个人从行业标准到生理特性以及实际落地的过程中沉淀下的少少思考，后续TDesign的暗黑模式也会有特定的小伙伴继续跟进，希望这些思考能够抛砖引玉，让暗黑模式进展的更加顺利，体验更加舒适。欢迎大家多多交流~

附参考网站与相关工具

AppleDesign：https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/
Material Design：https://material.io/design/color/dark-theme.html#usage
Ant Design：https://ant.design/docs/spec/dark-cn
Ant Design思路分析:https://zhuanlan.zhihu.com/p/112470365
WCAG计算工具：https://webaim.org/resources/contrastchecker/