Ant Design暗黑模式设计规范：从原则到实现的全面解析

Ant Design暗黑模式设计规范：从原则到实现的全面解析

近年来，暗黑模式的设计趋势开始逐渐流行。Ant Design在4.0版本的升级中，对暗黑模式进行了初步探索。本文将详细介绍Ant Design这一企业级设计体系是如何设计暗黑模式的，包括设计原则、界面层级、色彩处理、文字、阴影、分割线等方面的规范。

什么是暗黑模式？

暗黑模式是指将所有UI元素换成黑色或深色的一种模式。需要说明的是，暗黑模式不等同于夜间模式：

• 暗黑模式的主要目的是帮助用户更加专注于操作任务，因此在信息表达上更注重视觉性；
• 而夜间模式则更多是从健康角度考虑，在夜间或暗光环境下使用，以减少屏幕光对眼睛的刺激。

从使用场景来看，暗黑模式既可以在黑暗环境中使用，也可以在亮光环境下使用，是对浅色主题的一种场景化补充；而夜间模式则建议在黑暗环境下使用，在亮光环境下使用可能会影响信息的可读性。

暗黑模式的优势

1. 更加专注内容：深色背景会让用户的注意力更集中于内容本身。例如，在电影院看电影时，关灯可以帮助观众更专注地观看影片。在设计中，深色会在视觉感官上自动后退，浅色部分则会向前延展，这种对比强烈的层次关系可以让用户更注重被凸显出来的内容和交互操作。

2. 在暗光环境下更加适用：如今人们在夜间使用手机、电脑等设备的频率越来越高。暗色模式可以缩小屏幕显示内容与环境光强度的差距，同时也能为设备的续航带来积极影响，提高OLED设备在暗光环境下的使用舒适度。

3. 大众喜爱：黑色一直给人以高级、神秘的语义象征，相比于浅色模式，暗色模式有着更多的可能性。

设计原则

在设计暗黑模式时，主要遵循以下两大原则：

1. 内容的舒适性：不论是颜色、文字还是组件本身，在暗色环境下的使用感受都应该是舒适的。如果一个颜色在浅色模式下使用正常，但在暗色模式下却显得刺眼或难以辨认，那么这种设计就是不够舒适的。

2. 信息的一致性：暗黑模式下的信息内容需要和浅色模式保持一致性，不应该打破原有的层级关系。例如，在浅色模式下越深的颜色，与界面背景色对比度越大，也就越容易被人注意，视觉层级越高；在暗黑模式下同样需要遵循这一规律。

具体实现

界面层级

在企业级产品界面中，通常使用白色背景结合分割线来区分界面的板块层级。但在暗黑模式中，由于失去了投影的效果，需要通过颜色来区分层级关系。Ant Design在评估了蚂蚁企业级页面的典型布局结构后，将中性色扩展至13个梯度，并定义出通用情况下页面中的框架层次，主要分为三大块：

• 应用框架：即导航栏，是大结构中最上层的一部分
• 内容组件：指页面中的具体内容，通常以区块形式存在，作为第二层级
• 页面容器：指页面级别的容器盒子，容纳所有内容，可以理解为背景板，是最末层

在目前的暗黑体系下，这三大块分别被赋予了#1F1F1F、#141414、#000000三个颜色。在实际应用中，可以根据业务需求从中性色板中直接选用，或依据透明度的思路自定义合适的中性色彩。

色彩处理

暗黑模式与浅色模式最大的不同在于色彩的处理。Ant Design的设计思路是基于浅色的基础色板，通过结合透明度的转换，得到一套暗黑模式下的色彩。这样做的好处是，深浅模式下的色彩根基是同一个，转换结果也会相对和谐，同时符合一致性原则。

这里引入了两个概念：对比度极性和正负极性差值。

• 对比度极性：分为正极性和负极性。对比度正极性指电子文本中文本为深色、背景色为浅色；对比度负极性指电子文本中文本为浅色、背景色为深色。
• 正负极性差值：即正负两者的差值，取绝对值。

通过对比一套颜色的正负极性变化趋势，可以找到转换规律。经过对比发现，不同颜色的正负极性走势差异很大，特别是在黄绿色段，由于明度和饱和度较高，差值曲线会出现变化峰值。

基于这些发现，Ant Design制定了一个透明度转换规则，并在其他11套色板中验证其可用性。最终，经过规则转换的实色与常规颜色的变化趋势基本一致，证明了规则的合理性。

文字

暗黑模式中的文字使用与浅色模式基本一致，从85%到65%再到45%。唯一不同的是disable状态的文字，其透明度值提升为30%，以避免颜色过淡导致的“不可见”问题。对于#FFFFFF的纯白色文字，建议避免大面积使用，特别是在表格、列表等阅读浏览场景中，如有需要，仅做小范围强调即可。

阴影

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

分割线

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

适应性与扩展性

Ant Design的暗黑模式可以与海兔及可视化资产进行无缝衔接，使用时可以任意组合拖拽。用户可以通过下载Kitchen插件获取海量资产。

总结

Ant Design的暗黑模式设计更多是从企业级场景的角度考虑，虽然已经取得了一定的成果，但在易用性、扩展度、复用度等方面还有许多需要完善和继续研究探索的地方。希望上述内容能对大家在暗黑模式的设计上有所帮助。