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

/ 0评 / 0

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

暗模式的设计现在越来越普遍了。无论是夜间模式,还是黑暗模式,技术资源网的设计目标都是让产品用户更加专注于自己的操作,关注信息内容的表达。在本文中,作者对暗黑模式背后的逻辑和设计方法做了相应的分析,让我们来看看。

近年来,暗模式的设计趋势开始有点明显。蚂蚁设计也在这次4.0的升级中,对这类暗景的设计启动做了初步的探索。接下来,我们来看看企业级设计系统Ant Design是如何设计黑暗模式的。

一、什么是黑暗模式?

暗模式是指所有用户界面变为黑色或深色的模式。

需要说明的是,黑暗模式不仅仅是夜间模式。

暗黑模式更客观的是希望用户更加关注自己的运营义务,所以会更加关注信息内容的可视化。而夜间模式更关注夜间或黑暗环境应用下的健康,避免了黑暗环境下长时间关注明亮光源带来的视觉刺激。因此,在保证可读性的前提下,会采用较弱的对比,减少屏幕光线对眼睛的刺激。

同时,从应用场景来看,黑暗模式既可以应用于黑暗环境,也可以应用于明亮环境,可以理解为对浅色主题的场景补偿;但夜间模式只建议在黑暗环境下使用,在明亮环境下使用可能无法保证信息的可读性。

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

1.更加注重内容

想象一下,当我们在电影院看电影时,为什么要关掉整个房间的灯?甚至有些应用,在电影的底部,还会有另一个操作,模仿关灯的后果,让所有的手机屏幕都变黑,只留下视频屏幕的部分。

这一切都鼓励我们更加专注和沉浸在当前的内容中。

颜色有层次关系,深色在视觉上主动后退,浅色向前延伸,让用户更加关注层次关系强的高亮内容和交互操作;特别是信息责任界面中层次关系的合理开放,可以显著提高操作有效性。

2.在黑暗环境下更实用。

如今,在社会上,我们晚上使用手机、电脑、ipad等设备的次数越来越多。晚上环境光和屏幕亮度的差距会加大,亮度对比带来的视觉刺激会更显著。

暗模式的应用可以缩小屏幕显示内容与环境光强度的差距,也可以认为对设备的电池寿命有积极的影响,可以保证用户在黑暗环境下应用有机发光二极管设备的舒适性。

3.人们的爱好

黑色一直能够给人一种高级而神秘的语义符号。相比光模式,暗模式隐藏了更多的可能性。

三.设计原则

在这种暗模式设计中,遵守以下两个设计原则非常重要。

1.内容舒适

无论是颜色、文字还是组件本身,黑暗环境下的应用体验都要舒适,不要很费力。

如果一种颜色在浅色中正常应用,但在深色中明亮耀眼或基本不可见,那它一定是不舒服和不可读的。所以不建议直接套用颜色,这样会让界面处处成为“亮点”,会让眼睛不舒服,带来很多误操作。

2.信息的一致性

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

比如在浅色模式下,颜色越深,与界面背景景物的对比度越大,越容易被注意到,视觉层次越高,比如工具提示;;在黑暗模式下,我们也要遵守这个规则,所以对应的颜色越浅,反之越暗。

第四,如何设计?

1.界面层

在大量的企业级产品界面中,我们通常只用一条白色背景联合分割线来固定所有界面的板块层次,因为在亮模式下有一个投影,但是在暗模式下的投影将不足以起到这样的作用,我们需要通过颜色来区分层次关系。

在评估了蚂蚁企业页面的典型布局结构后,我们将中性颜色增加了三个渐变,并将中性颜色扩展到了13。

并在一般页面中定义框架层次结构,一般页面分为三大块:

应用框架:即我们通常定义的导航栏也是大结构的顶部;

组件:指页面中的特定内容,通常以块的形式作为第二层存在;

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

在目前的深色系下,我们从浅到深分别为这三个区块定义了三种颜色#1F1F1F、#141414、#000000。在实际应用中,也可以直接从中性色样中进行选择,或者根据透明的思想定制合适的中性颜色。

当框架层次和颜色明确定义后,对后续系统中组件的颜色配置也会有重要的指导意义。我们需要考虑组件在不同颜色背景下出现的可能性和代表性,并尽量坚持一致性。

2.颜色

众所周知,暗模式和亮模式最大的区别在于色彩的处理。

在暗模式下,我们不想破坏光模式下基本色板的配置规则和颜色值。当一个应用程序或技术资源网站的明暗模式共存时,这种愿望必须继续,并且在颜色上是相关的,而不是两个不相关的样本。一是为了避免开发和后续的保护成本,二是为了保证实际切换和应用中的一致性,这意味着我们需要使用具有一定规则的技术资源网络。

在这里,让我们分享一下我们的处置思路。

基于蚂蚁设计的自然设计价值观,我们首先从自然中寻找灵感。如果说浅色的图案像初升的太阳,那么深色的图案就是夕阳下的晚霞,各有各的魅力。同一天,唯一不同的是,受光线亮度的影响,晚霞更暗。

所以我们一般的设计思路也是以浅色的基础色板为基础,通过联合透明度转换,可以得到一套深色模式下的颜色。这样做的好处是明暗模式下的颜色基础是一样的,通过透明度变换得到的结果会相对和谐,同时也符合我们的一致性原则。

这里,我们使用以下两个概念来转换透明度。

1)对比程度的极性

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

相对正面:表示在电子文本中,文字为深色,背景景物为浅色。

比较负极性:指电子文本中文本的浅色和背景景物的深色。

2)正负极性的差异

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

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

首先,如果直接应用一种颜色,不做任何修正,那么它的正负极性趋势和差异趋势是什么趋势和关系?我们试图描述这样一条曲线,它们的变化规律也将作为我们规则转换的参考尺度。

经过比较,我们可以发明一些改变规则:

让我们从“差异趋势”开始。

横向对比发现,不同颜色的正负极性趋势差异很大。

可以看到黄绿段的差异曲线达到了一个变化峰值,这是因为黄绿本身因为明度和饱和度值都比其他颜色高,所以总是有一种刺眼的感觉,在生活中也会作为一种警示和提示,所以在明暗背景下对比的程度有很大的差异,可以说这种变化是正常的。

这也可以从“正负比较度的极性趋势”之间的相对关系来体现。从红色到洋红色,绿线从蓝线上方一点开始,逐渐向上移动,最后在峰值开始慢慢向下移动,在“极客蓝”的色调上接近重叠,在洋红色慢慢向下移动。说明浅色越暗,深色越亮,反之越暗。

与单个样本垂直比较,可以发现其斜率的变化主要受颜色的明度和饱和度的影响,可以反映一种颜色在黑白背景下不同梯度的变化规律。

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

将此规则应用于其他11种色板,以验证其可用性。这个过程绝对没有捷径,唯一的办法就是不断尝试。

最后,我们比较了规则转换后真实颜色与常规颜色的变化趋势:

可以看出,左右图在大趋势上基本一致,这意味着两个样本的变化规律接近一致,可以证明规律的合理性。不同的是负极性和比较程度的差异与右侧的未处理值相比明显减小。这是由于透明度的处理,降低了深色的亮度和饱和度。

仔细查看可以发现,在左边的惯用颜色中,在较冷的黎明蓝-洋红颜色中,极客蓝的颜色差异趋势变化最为平缓,这说明颜色在明暗背景下相对稳定,波动不大。在统一透明度规则的前提下,会削弱其在深色中的对比度,因此会导致较大的差异趋势。因此,我们会发现差异趋势较小的颜色会转移到“黎明蓝”和“洋红色”,这也是正常现象。

最后,我们可以看到调整后颜色实际应用的后果:

另外,如果在实际应用过程中,选择色相在225-325之间的深冷色系作为主色调或强调色应用,建议适当提高透明度值,避免在深色界面造成浏览障碍。

3)文本

在暗模式下,字符的应用与亮模式下基本相同,仍然从85%-65%-45%不等。唯一的区别在于禁用状态,其透明度值提升到30%,避免颜色太淡,真的“看不见”。

另外,对于#FFFFFF的纯白文本,尽量避免大规模应用,尤其是表格、列表等部分浏览阅读的场景。如有必要,做小范围的强调。

4)阴影

深色模式下的阴影规则与浅色模式基本一致,但由于其界面背景较深,阴影色值也加深了,赞助水平得到了更好的体现。整体色值扩展到原来的4倍,但阴影的位移和扩展保持不变。

5)分界线

在深色模式下,建议根据界面中常用的背景景物,通过透明度将分割线转换成真实的颜色。在Ant Design中,分割线主要有#434343和#303030两种颜色,对应灯光模式下的#D9D9D和# # F0F0F0是分开的。这样做的重要目标是避免额外的重叠,尤其是对于表类和许多带有边框属性的组件,真实的颜色会更安全,更容易记住。

动词 (verb的缩写)结论

最近,人们越来越关注暗黑破坏神模型。与特定产品的暗黑设计不同,蚂蚁设计的暗黑模型从设计系统的角度考虑企业级大场景中的内容。在易用性、扩展性、可重用性等方面还有很多地方需要不断完善和探索。我们会在以后的迭代中一步一步的执行,然后完善。

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