黑暗模式有什么用(黑暗模式设计分析)

现在深色图案设计越来越普遍了。不仅在夜间模式下，在黑暗模式下也是如此，设计目的是让产品用户更专注于自己的运营业务，注重信息内容的表达。在这篇文章中，作者对黑暗模式背后的逻辑和设计方法做了相应的分析，大家来看看吧。

(相关资料图)

近年来，暗模式的设计趋势已经有点明显了。蚂蚁设计在这次4.0升级中也对这种暗场设计做了初步探索。接下来，我们来看看企业级设计系统蚂蚁设计是如何设计黑暗模式的。

一、什么是黑暗模式？

黑暗模式是指所有ui都变为黑色或黑暗的模式。

需要注意的是，黑暗模式不仅仅是夜间模式。

黑暗模式更多的是旨在希望用户能够更加专注于自己的操作任务，所以信息内容的表达会更加注重视觉；夜间模式更多是为了在夜间或黑暗环境下使用时的健康考虑，避免在黑暗环境下长时间盯着明亮的光源造成的视觉 *** 。所以在保证可读性的前提下，会采用较弱的对比度，减少屏幕光线对眼睛的 *** 。

同时，从使用场景来看，黑暗模式在黑暗和明亮环境下均可使用，可以理解为对浅色主题的场景补充；但夜间模式只建议在黑暗环境下使用，在明亮环境下使用可能无法保证信息的可读性。

二、蚂蚁设计为什么要做黑暗模式？

1.更加关注内容

试想一下，我们在电影院看电影，为什么一定要关灯？甚至有些app，在片子的底部，会有另外一个操作，模拟关灯的效果，让整个手机屏幕变成黑色，只留下视频屏幕的部分。

这些都有助于我们更加专注和沉浸在当前的内容中。

颜色有层次关系，深色会在视觉上自动后退，浅色会向前延伸，这样对比鲜明的层次关系可以让用户更加关注突出显示的内容和交互操作；特别是在信息责任界面中，层次关系的合理开放可以明显提升运行效率。

2.更适合在黑暗的环境下。

现在我们越来越多的在晚上使用手机、电脑、ipad等设备。晚上屏幕亮度和环境光的差异会被放大，亮度对比带来的视觉 *** 会更明显。

使用黑暗模式可以缩小屏幕显示内容与环境光强度之间的差距，同时可以对设备的续航能力带来积极的影响，可以保证用户在黑暗环境下使用有机发光二极管设备时的舒适性。

3.大众爱

黑色一直是一种高级而神秘的语义符号。与浅色图案相比，深色图案隐藏了更多的可能性。

三。设计原则

这个暗黑模式的设计主要遵循以下两个设计原则。

1.满足感

无论是颜色、文字还是部件本身，在黑暗环境中的使用感觉都应该是舒适的，而不是费力的。

如果一种颜色在浅色中正常使用，但在深色中却明亮刺眼或看不见，那一定是不舒服，不可读的。所以不建议直接用在色彩处理上，这样会让界面处处成为“亮点”，让眼睛不舒服，同时也会带来很多误操作。

2.信息的一致性

暗模式下的信息内容要和亮模式一致，不能打破原有的层级关系。

比如在灯光模式下，颜色越深，与界面背景色的反差越大，越容易被注意到，视觉层次越高，比如tooltip;在暗模式下，我们也需要遵循这个规律，所以用的颜色要浅一些，反之亦然。

第四，如何设计

1.界面水平

在大量的企业级产品界面中，我们通常只用一个白色的背景结合分割线来固定所有界面的板块层次，因为浅色模式下有一个投影，而深色模式下的投影就不足以起到这样的作用。我们需要用颜色来区分等级关系。

在评估了蚂蚁企业页面的典型布局结构后，我们在中性色上添加了三种渐变，并将中性色扩展为13。

并定义了通用页面中的框架级别，主要分为三个块:

应用框架:也就是我们通常定义的导航栏，也是大结构的顶层部分；

内容:指页面中的具体内容，通常以块的形式出现，作为第二层次；

页面容器:顾名思义，是指页面级的容器盒，可以容纳一个页面中的所有内容。可以理解为背景板，也就是最后一层。

在目前的暗系统下，我们从亮到暗为这三个区块定义了#1F1F1F、#141414、#000000三种颜色。在实际应用中，也可以直接从中性色盘中选择合适的中性色，或者按照透明的思路进行定制。

当定义了一个清晰的框架层次和颜色，对于后续系统中组件的颜色配置也有重要的指导意义。我们需要考虑不同颜色背景下组件的可能性和性能，并尽量保持一致性。

2.颜色

众所周知，暗模式和亮模式更大的区别在于颜色的处理。

在暗模式下，我们不想打破亮模式下基本色板的配置规则和颜色值。当一个应用程序或站点的亮暗模式并存时，我们希望在颜色上有一些连续性和相关性，而不是两组不相关的色板。一是可以避免开发和后续维护成本；二是可以保证实际切换和使用中的一致性，也就是说需要一定的规则。

这里分享一下我们的想法。

基于蚂蚁设计的自然设计价值观，我们首先从自然中寻找灵感。如果说浅色的花纹就像刚开始升起的太阳，深色的花纹就是日落时的夕阳，各有各的韵味。同一天，唯一不同的是，由于光线亮度的影响，日落整体会更暗。

所以我们总的设计思路也是以浅色的基础色板为主。结合透明度的转换，我们可以得到一组暗模式下的颜色。这样做的好处是明暗模式下的色彩基础是一样的，在此基础上通过透明度变换得到的结果会相对和谐，这也符合我们的一致性原则。

在这个尤优资源 *** 中，我们使用以下两个概念来转换透明度。

1)对比极性

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

正对比:电子文本中，文字为深色，背景颜色为浅色。

负对比:在电子文本中，文本是浅色的，背景是深色的。

2)正负极性之间的差异

顾名思义就是正负之差，这里取绝对值。

根据一致性原理，通过比较一组颜色的正负极性趋势，试图找到转换规律。

首先，如果一种颜色不加任何修饰直接使用，其正负极性趋势和差异趋势的走向和关系是怎样的？我们尝试画出这样一条曲线，它们的变化规律也会作为我们规则转换的参考标准。

经过比较，可以发现一些变化:

首先说一下差异趋势。

横向对比，不同颜色的正负极性趋势差别很大。

可以看出，黄绿色段中的差异曲线达到变化的峰值。这是因为黄绿色本身的亮度和饱和度就比其他颜色高，所以总感觉很刺眼。在生活中也会起到警示和提醒的作用，所以明暗背景的对比度差别很大。可以说这种变化是正常的。

这也可以从“正负对比的极性趋势”的相对关系中反映出来。从红色到品红色，绿线一开始从蓝线上方一点点开始逐渐上移，最后在峰值处开始慢慢下移，在“极客蓝”的色相上接近重叠，然后在品红色处慢慢下移。说明浅色越深，深色越亮，反之越暗。

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

有了这个大的变化规律，我们就可以心中有数了。首先，以蚂蚁设计的品牌色“黎明蓝”为例，在众多业务和场景中不断尝试和调整后，我们得到一个透明度转换规则:

将该规则应用于其他11套色板，验证其可用性。这个过程真的没有捷径。唯一的办法就是不断尝试。

最后，我们比较了常规转换纯色和常规色的变化趋势:

可以看出，左右图在大趋势上基本相同，也就是说两个色板的变化规律几乎相同，基本证明了规律的合理性。不同的是，负极性和对比度差较右侧未处理值明显降低。这是因为透明处理使得深色的明度和饱和度降低。

仔细观察可以发现，左边的常规色中，“极客蓝”是黎明蓝-品红的冷色中差异趋势变化最平缓的颜色，表示颜色在明暗背景中比较稳定，波动不大。在透明度规则一致的前提下，深色的对比度会减弱，因此差异趋势反而会增加。所以差异趋势变化不大的颜色会转移到“黎明蓝”和“洋红”也是正常现象。

最后，您可以看到调整后颜色的实际效果:

另外，如果在实际应用过程中，你选择了一个色相为225 ~ 325的深冷色作为主色或强调色，建议适当增加透明度值，避免在深 *** 面上造成阅读障碍。

3)文本

在黑暗模式下，字符的使用和光明模式下基本相同，仍然是从85%-65%-45%。唯一不同的是，在禁用状态下，透明度值增加到30%，以免太亮，真的“看不见”。

另外，对于#FFFFFF的纯白文字，尽量避免大规模使用，尤其是表格、列表等部分阅读浏览场景。必要的话，做一个小范围的强调。

4)阴影

暗模式下的阴影规则与亮模式下的基本一致，但由于其界面背景较深，其阴影色值也加深，有助于更好地体现层次感。整体色值扩大到原来的4倍，但阴影的位移和膨胀保持不变。

5)分界线

在深色模式下，建议根据界面常用的背景色，通过透明将分割线转换为纯色。蚂蚁设计中，分割线主要有#434343和#303030两种颜色，分别对应光线模式下的#D9D9D和#F0F0F0。这样做的目的是为了避免额外的重叠，特别是对于表格类和许多具有边框属性的组件，纯色会更安全也更容易记住。

动词 （verb的缩写）结论。

最近人们对暗黑模式的关注度越来越高，暗黑模式不同于某个具体产品的暗黑设计。蚂蚁设计的暗黑模式主要从设计系统的角度考虑企业级场景的内容，在可用性、扩展性、复用性等方面还有很多需要改进和进一步研究探索的地方。我们会在以后的迭代中逐步进行，先完成再完善。

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

关键词： 模式