暗黑模式设计解析

基于 ant DesIGn 自然的设计价值观，我们先从自然界中寻找灵感，如果说浅色模式如同初升时的朝阳，那暗黑模式就是落日下的晚霞，各有各的韵味。同一片天，唯一不同的是，受光线亮度的影响，晚霞整体会暗一些。

所以我们大体的设计思路也是基于浅色的基础色板，通过结合透明度的转换，去得到一套暗黑模式下的色彩。这样的好处是，深浅模式下的色彩根基是同一个，在这样的基础上经过透明度的变换得到的结果也会相对和谐，同时也符合我们一致性的原则。

这里我们借助下面这两个概念对透明度进行转换。

1）对比度极性

对比度极性分为正极性和负极性。

2）正负极性差值

顾名思义便是正负两者的差值，这里取的是绝对值。

根据一致性原则，我们尝试通过对比一套颜色的正负极性变化趋势来找到转换规律。

首先可以看下，如果一个颜色在不做任何修改的前提下直接使用，它的正负极性趋势以及差值趋势的走势和关系是怎么样的，我们尝试描绘出这样的曲线，他们的变化规律也将作为我们规则转换的参考标准。

经过对比，可以发现一些变化规律：

首先来说下「差值趋势」。

横向对比可以发现，不同颜色的正负极性走势是很不一样的。

可以看到在黄绿色段差值曲线达到一个变化峰值，这是由于黄绿色本身由于明度、饱和度值相比其他颜色偏高，所以总是有种刺眼的感觉，生活中也会用它来作为警示、提醒的作用，所以在深浅背景下的对比度有一个比较大的差异，可以说这个变化是正常的。

这点也可以从「正负对比度极性趋势」两者间的相对关系反应出来，从红色到洋红，绿线一开始从逐渐在蓝线的上方一点，开始逐渐上移，最后在峰值处开始慢慢下移，在「极客蓝」这个色相中接近重叠，在洋红处又慢慢下移；说明浅色下越深的颜色，在深色中越亮，反之则越暗。

纵向比对单个色板，可以发现，其斜率变化主要受颜色的明度、饱和度影响，可以反应一个颜色的不同梯度在黑白背景下的变化规律。

有了这个大的变化规律，我们便可做到心中有数。首先以 ant DesIGn 的品牌色「破晓蓝」为例，经过在多个业务、场景中不断尝试与调整，我们得到一个透明度转换规则：

并将这个规则应用在其他 11 套色板中，验证其可用性。这个过程确实没有什么快捷通道，唯一的办法就是不断尝试。

最后，我们将经过规则转换的实色与常规颜色的变化趋势做对比：

可以看到在大趋势走向上左右两侧图基本一致，这代表两个色板在变化规律接近一致，基本可以证明规则的合理性。区别在于，对比度负极性和差值相对于右侧未经处理的值明显有所下降。这是由于透明度的处理让暗色下的颜色在明度、饱和度上有所下降导致。

再仔细观察可以发现，在左侧的常规颜色中，从破晓蓝-洋红这段偏冷色系几个颜色中，差值趋势变化最平缓的是「极客蓝」这颜色，这说明该颜色在深浅背景下的表现较为稳定，起伏不大。当基于一个统一的透明度规则前提下，会让它在暗色下的对比度减弱，所以反而会导致差值趋势变大，所以我们会发现差值趋势变化较小的颜色转移到了「破晓蓝」、「洋红」中，也是一个正常现象。

最后可以看到颜色在调整过后实际应用的效果：

另外，如果在实际应用过程中，你选了色相在 225～325 间的深冷色系作为主色或强调色使用，建议适当提高透明度的值，避免在暗色界面上引起阅读障碍。

3）文字

暗黑模式中，文字的使用与浅色模式基本一致，依旧从 85%-65%-45%，唯一不同的地方在 disable 的状态，其透明度值提升为 30%，避免颜色过淡真的“不可见”。

另外，对于 #FFFFFF 的纯白色文字，尽量避免大面积使用，尤其对于表格、列表这类偏阅读浏览的场景，如有需要，做小范围强调即可。

4）阴影

暗黑模式中的阴影规则与浅色模式基本保持一致，但由于本身的界面背景较深，在的阴影色值上也有所加深，帮助层次更好地体现，整体将色值扩大到原先的 4 倍，但在阴影的位移、扩展上均保持不变。

5）分割线

分割线在暗黑模式中建议根据界面中常用的背景色，通过透明度换算成实色使用，ant DesIGn 中分割线主要有 #434343 和 #303030 两种颜色，分别对应浅色模式下的 #D9D9D 和 #F0F0F0，这样做的目的主要是为了避免带来额外的交错叠加，尤其对于表格类以及很多带有 boRdeR 属性的组件，实色会更为稳妥便于记忆。

五、结语

暗黑模式最近越来越受到人们的关注，与某一特定产品的暗黑设计不同，ant DesIGn 的暗黑模式更多以设计体系的角度考虑企业级这个大场景下的内容，在易用性、扩展度、复用度等方面还有许多需要完善和继续研究探索的地方，我们会在未来的迭代中逐步进行，先完成再完善。

希望上述内容能对大家在暗黑模式的设计上有所帮助。