暗黑模式有什么用|暗黑模式设计解析( 二 ) 暗黑模式的设计如今越来越常

2. 信息的一致性暗黑模式下的信息内容需要和浅色模式保持一致性，不应该打破原有的层级关系。
举个例子，在浅色模式下越深的颜色，与界面背景色对比度越大，也就越容易被人注意，视觉层级越高，比如 tooltip；在暗黑模式下我们同样需要遵循这一规律，所以对应所使用的颜色也就越浅，反之则会越深。
四、如何设计1. 界面层级在大量的企业级产品界面中，我们通常用只用一个白色背景结合分割线就可以搞定所有界面的板块层级，因为在浅色模式下有投影可以借助，然而暗黑模式中投影将不足以起到如此功效，我们需要通过颜色来区分层级关系。
在经过对蚂蚁企业级页面的典型布局结构评估后，我们在中性色中增加了三个梯度，将中性色扩展至 13 个。

文章图片

并定义出通用情况下页面中的框架层次，主要分为三大块：

应用框架：也就是我们平时定义的导航栏，也是在大结构中最上层的一部分；
内容组件：指页面中的具体内容，通常情况下以区块的形式存在，作为第二层级；
页面容器：顾名思义，指页面级别的容器盒子，可容纳页面中的所有内容，可以理解为是一个背景板，也就是最末层。

在目前的暗黑体系下，我们分别为这三大块从浅到深定义了#1F1F1F、#141414、#000000 三个颜色，在实际应用中，你也可以根据自身业务的需求，从中性色板中直接选用或是依据透明度的思路自定义出合适的中性色彩。
当定义出较为明确的框架层次和颜色后，也对后续系统中组件的颜色配置有着重要的指导意义。我们需要考虑组件出现在不同颜色背景下的可能性及其表现，尽量保持一致性。

文章图片

2. 色彩众所周知，暗黑模式与浅色模式最大的不同就在色彩的处理上。
在暗黑模式中，我们并不想打破浅色模式下基础色板的配置规律及色值，当一个应用或站点深浅模式并存时，希望在色彩上有一定延续和关联，而不是毫不相关的两套色板。这样一是避免开发及后续的维护成本，二是实际切换和使用时，可以保证一致性，这意味着需要借助一定规则。
这里分享一下我们的处理思路。
基于 Ant Design 自然的设计价值观，我们先从自然界中寻找灵感，如果说浅色模式如同初升时的朝阳，那暗黑模式就是落日下的晚霞，各有各的韵味。同一片天，唯一不同的是，受光线亮度的影响，晚霞整体会暗一些。