bv1946伟德体育-体育betvictro伟德

bv1946伟德体育视点
bv1946伟德体育>bv1946伟德体育视点>顶级大厂如何做好暗黑模式策划?来看 Ant Design 的规范文档
顶级大厂如何做好暗黑模式策划?来看 Ant Design 的规范文档
发表时间:2020-07-13

目上来暗黑模式的策划趋势开始一点点明显,Ant Design 在这次 4.0 的升级中也对这类暗黑场景化的策划开始进行初步的探索,

接下来就让吾们一起来看下 Ant Design 这一针对集团级的策划体系是如何策划暗黑模式的。



什么噬系黑模式


暗黑模式是指把一切 UI 换成黑色或者深色的一个模式。

需要说明的是,暗黑模式不只夜间模式:

暗黑模式更好优质的鹄的是瞩望使用者更好专注自己的操作任务,以是对于信息始末的表达会更注重视觉性;

而夜间模式则更好优质是出于在夜间或暗光环境使用下的康泰角度揣摩,避免在黑暗环境中长时间注视高亮光源带来的视觉刺激,

以是在保证可读性的上提下,

会采取应用更弱的对比来减少屏幕光对眼睛的刺激。

再是,从使用场景上来说,暗黑模式既可以在黑暗环境,也可以在亮光环境下使用,

可以理解为是对浅色性状的一种场景化补充,而夜间模式只倡议在黑暗环境下使用,

在亮光环境使用时很可能并不保证信息可读性。


为什么 Ant Design 要做暗黑模式


1. 更好专注始末


试想一下,吾们在电影院看电影时,为什么要全场关灯?甚至有些 APP,在影片的下方也会又一个模拟关灯成果的操作,

来让整个手机屏幕变黑,只剩下视屏画面的部分,这都扶掖吾们可以更专注、更沉浸在当上的始末下。

色彩具有层级关系,深色会在视觉器官感受上自动下退,浅色部分则会向上延展,

这样对比强烈的层次关系可以让用户更注重被凸显出来的始末和交互操作;

尤其在信息负责界面内层级关系的合理拉开对操作效率都有明显的促进感化。



2. 在暗光环境下更好适用


方另祖国吾们身处黑乙子 褂檬只⒌缒浴Pad等设备的次数越来越多,环境光与屏幕亮度的明暗差距在夜间会被放大 ,

亮度对比带来视觉刺激也更好明显,使用暗色模式可以缩小屏幕显示始末与环境光强度的差距,再是也可以为设备的续航带来积极影响,

可以保证使用者在暗光环境下使用 OLED 设备的舒适度。


3. 大众喜爱


黑色一直以来就可以给人以高等级、神秘的语义象征,相比于浅色模式,暗色模式藏着更好优质可能性。


策划原则


在这次暗黑模式的策划中主要遵循以下两大策划原则


1. 始末的舒适性


不论是颜色灰子 俏淖只蚴亲榧旧恚诎瞪肪诚碌氖褂酶惺苡Φ笔鞘媸实模皇鞘址蚜Φ模

如果一个颜色在浅色下使用正常,在暗色下却亮的刺眼或根本看不见,

那必然不够舒适也不可读;以是在颜色的处理上不倡议直接使用,这样会让界面变得到处都是「亮点」,

让眼睛不适的再是,也会带来许多误操作。


2. 信息的一致性


暗黑模式下的信息始末需要和浅色模式保持一致性,不应该打破原有的层级关系。

举个例子,在浅色模式下越深的颜色,与界面背下色对比度越大,

也就越匆子 侄帽蝗薱are,视觉层级越高,譬喻 tooltip;在暗黑模式下吾们同样需要遵循这一规律,

以是对应所使用的颜色也就越浅, 反则 则会越深。



如何策划


1. 界面层级

在大量的集团级产品界面中,吾们一贯用只用一个白色背下结合分割线就可以搞定一切界面的板块层级,因为在浅色模式下有投影可以借助,

然则暗黑模式中投影将不足以起到如此功效,吾们需要通过颜色来区分层级关系。


在经过对蚂蚁集团级页面的典型计划结构评估下,吾们在中性色中增加了三个梯度,将中性色扩展至 13 个



并定义出通用环境下页面中的框架层次,主要分为三大块:


  • 应用框架:也就是吾们平时定义的导航栏,也是在大结构中最上层的一部分
  • 始末组件:指页面中的具体始末,一贯环境下以区块的形式存在,作为第二层级
  • 页面容器:顾名思义,指页面级其余容器盒子,可容纳页面中的一切始末,可以理解为是一个背下板,也就是最末层


在目上的暗黑体系下,吾们分别为这三大块从浅到深定义了#1F1F1F、#141414、#000000 三个颜色,

在实际应用中,您也可以按照自身业务的需求,

从中性色板中直接选用或噬洗照透明度的思路自定义出合适的中性色彩。当定义出较为明确的框架层次和颜色下,

也对下续系统中组件的颜色配置有着要紧的指导意义。

吾们需要揣摩组件出Now不同颜色背下下的可能性及其表现,尽量保持一致性。



2. 色彩

尽人皆知,暗黑模式与浅色模式较小的不同就在色彩的处理上,在暗黑模式中,

吾们并不想打破浅色模式下底子色板的配置规律及色值,当一个应用或站点深浅模式并存时,

瞩望在色彩上有一定延续和关联,而不是毫不相关的两套色板,这样一是避免开发及下续的维护底,

二是实际切换和使用时,可以保证一致性,这意味着需要借助一定规则。


这里分享一下吾们的处理思路:


基于 Ant Design 自然的策划价值观,吾们先从自然界中寻找灵感,如果说浅色模式如同初升时的朝阳,

纳系黑模式就是落日下的晚霞,各有各的韵味,

同一片天,唯一不同的是,受光度亮度的影响,晚霞整体会暗一些。



以是吾们大体的策划思路也是基于浅色的底子色板,通过结合透明度的转换,去得到一套暗黑模式下的色彩。

这样的好处是,深浅模式下的色彩根基是同一个,

在这样的底子上经过透明度的变换得到的结果也会相对和谐,再是也符合吾们一致性的原则。


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


对比度极性


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

  • 对比度正极性:指在电子文本中文本为深色,背下色为浅色
  • 对比度负极性:指在电子文本中文本为浅色,背下色为深色


这里可以给众家分享对比度查阅的一个工具:WebAIM,只要输入色值就可以看到具体的值,十分方便。


正负极性差值


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


按照一致性原则,吾们尝试通过对比一套颜色的正负极性改动趋势来找到转换规律。


起首可以看下,如果一个颜色在不做尽数修改的上提下直接使用,它的正负极性趋势以及差值趋势的走势和关系是怎么样的,

吾们尝试描绘出这样的曲线,他们的改动规律也将作为吾们规则转换的参考准则。



经过对比,可以发现一些改动规律:


起首来说下「差值趋势」,横向对比可以发现,不同颜色的正负极性走势是很不一样的,

可以看到在黄Green段差值曲线达到一个改动峰值,

这是由于黄Green本身由于明度、饱和度值相比其他颜色偏高,

以是总是有种刺眼的感觉,生活中也会用它来作为警示、提醒的感化,

以是在深浅背下下的对比度有一个比较大的异议,应该道这个改动是正常的。


这点也可以从「正负对比度极性趋势」两者间的相对关系反应出来,从Red到洋红,绿线一开始从逐渐在蓝线的上方一点,

开始逐渐上移,末了在峰值处开始慢慢下移,在「极客蓝」这个色相中接近重叠,在洋红处又慢慢下移,

说明浅色下越深的颜色,在深色中越亮, 反则 则越暗。


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



有了这个大的改动规律,吾们便可做到心中有数。起首以 Ant Design 的直营色「破晓蓝」为例,经过在多个业务、

场景中不断尝试与调整,吾们得到一个透明度转换规则:





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



末了,吾们将经过规则转换的实色与通例颜色的改动趋势做对比:


对比度负极性和差值相对于右侧未经处理的值明显兼有下降。这是由于透明度的处理让暗色下的颜色在明度、饱和度上兼有下降导致。


再仔细观察可以发现,在左侧的通例颜色中,从破晓蓝-洋红这段偏冷色系几个颜色中,差值趋势改动最平缓的是「极客蓝」这颜色,

这说明该颜色在深浅背下下的表现较为稳定,起伏不大,当基于一个统一的透明度规则上提下,会让它在暗色下的对比度减弱,

以是反而会导致差值趋势变大,

以是吾们会发现差值趋势改动较小的颜色转移到了「破晓蓝」、「洋红」中,也是一个正常现象。


末了可以看到颜色在调整过下实际应用的成果




在官网中点击「切换」即可预览:




如果如该 12 个色板不满足您的业务需求,您也可以在官网上自己决定颜色,吾们会按照规则帮您生成一个暗色色板。



其余,如果在实际应用过程中,您选了色相在 225~325 间的深冷色系作为主色或强调色使用,倡议适当提高透明度的值,

避免在暗色界面上引起阅读障碍。


3. 文字

暗黑模式中,文字的使用与浅色模式基本一致,依旧从 85百分比-65百分比-45百分比,唯一不同的区域在 disable 的状态,

其透明度值提升为 30百分比,避免颜色过淡真的「不可见」。

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



4. 阴影

暗黑模式中的阴影规则与浅色模式基本保持一致,但由于本身的界面背下较深,在阴影色值上也兼有加深,

扶掖层次更好的体现,整体将色值扩大到原先的 4 倍,

但在阴影的位移、扩展上均保持不变。




5. 分割线

分割线在暗黑模式中倡议按照界面中常用的背下色,通过透明度换算成实色使用,Ant Design 中分割线主要有 #434343 和 #303030 两种颜色,

分别对应浅色模式下的 #D9D9D 和 #F0F0F0,这样做的鹄的主要是为了避免带来额外的交错叠加,

尤其对于表格类以及很多带有 border 属性的组件,实色会更为稳妥便于记忆。




适应性


适应性关键,Ant Design 的暗黑模式可以与海兔及可视化资产进行无间隙衔接,使用时可以任意组合拖拽,

您可以下载 Kitchen 插件,获取海量资产。





结语


暗黑模式最近越来越受到人们的关注,与某一特定产品的暗黑策划不同,Ant Design 的暗黑模式更好优质以策划体系的角度

揣摩集团级这个大场景下的始末,

在易用性、扩展度、复用度等关键还有许多需要完竣和继续研究探索的区域,吾们会在明朝的迭代中逐步进行,先完成再完竣。

瞩望如该 始末能对众家在暗黑模式的策划上兼有扶掖。



   

                                                                                       









XML 地图 | Sitemap 地图