4000-888-103

资讯动态一篇吃透 Dark Mode ,搞定“暗黑/深色”适配资讯详情

一篇吃透 Dark Mode ,搞定“暗黑/深色”适配

2019-11-05 10:48:10

本文脱胎于我在公司内时长60分钟的分享,为免文章过长,对内容做了提炼。目前网上有关Dark Mode的科普文章有很多,这里不再赘述。只讲和具体工作有关的内容。下面会着重讲述APP中各组件适配 Dark Mode(暗黑模式 或 深色模式)的方式和注意事项,以及一些细节的处理建议。但更重要的,是让大家掌握适配暗黑模式的工作量。避免轻易开工,导致进退两难… 

下面分四块讲述:

1.两大平台做法:层级、颜色2.技术实现范围3.Dark细节4.Dark难点文字如有思虑不周、描述不清之处,还望各位大佬指正。

 

一、两大平台做法

今年Android Q 和 iOS 13 都开始支持暗黑模式。下面我将从“层级”、“颜色”两方面讲述两大平台的做法。

 

1.1 层级

通过背景、投影,表达层级关系是设计常用的手法。如下图:

 

列表在背景上方,所以背景颜色比列表暗。同理,搜索框颜色比背景色暗,可以理解为搜索框在背景的下层(凹槽)。可是在黑暗模式下,颜色明暗关系发生了变化:

 

iOS 13中的搜索框却比背景色要亮,二者的层级关系随之发生变化。PS:iOS 13中Sheet弹窗也会改变页面的层级关系。再看Android Q的设置页:

 

在浅色模式下,页面背景为白色,搜索框也是白色,但通过投影表示,悬浮在背景上方。而两个提示卡片则采用灰色,表达的层级高低依次是:搜索框、背景、提示卡片

 

在暗黑模式下,搜索框、背景、提示卡片 三者的明暗强弱依次是:搜索框、背景、提示卡片。透露出的层级关系与浅色模式下一致。

 

诚然iOS 13的暗黑适配效果,看起来比Android Q优秀。毕竟苹果每个元素都经过精心设计:

 

但层级变化上,缺少统一的“标尺”,这无疑会增加多人协作的适配成本。而安卓则有一套层级体系可以借鉴。

无论是浅色模式,还是暗黑模式,只要固定好各层级,再确定不同层级的配色方案,就能大大降低适配难度。

 

1.2 颜色

说完“层级”再来看下“颜色”。这里先说与“层级”关联度较大的“黑白灰”,再说“彩色”。

 

① 灰色iOS 13这边,以新版的健康APP为例:

 

左图是健康APP的首页,右图是点击“编辑”后调起的弹窗。在这两个看起来很简单的页面中,排除蓝色、红色和所有文字颜色,还用到8种颜色,如下图:

 

而苹果官方给出的配色建议,则更加“丰富”:

 

不仅明暗不同,且一部分是透明色。另外,这些颜色的色值变化也没有明显的“规律”可循。如果按照iOS 13的规范进行操作的话,不仅执行成本高的吓人,统一性也很难得到保障。相比之下,安卓所采用叠加“不透明度”不同的白色,来区分层级的方式执行起来就简单很多。在Android Q中,安卓官方的建议是:在浅色模式下,页面的层级可以靠投影进行区分,底层元素投影面积较小、而上层元素投影面积较大。如下图左侧:

 

而在暗黑模式下投影变得不明显。因此改用“明暗”区分层级,如上图右侧。Android Q把页面分层了8个层级:

 

其中最底层的”代号”为00dp*,最高层为24dp。PS:这里的dp,无需和逻辑像素单位dp、pt关联。不同层级的实现方式,是在同一个背景色上,叠加“不透明度”不同的白色。

比如:背景色为#121212, 那么最底层的00dp就是#121212叠加不透明度为0%的白色;而最上层的24dp,则是#121212,叠加不透明度为16%的白色。这样一来不同层级只要调整所叠加的白色不透明度即可,操作起来也比较方便。

 

② 彩色下面再看彩色,先说iOS 13中的彩色方案

 

如图所示,两种模式下的颜色变化很小。RGB的色值不太方便看差异,下面我将RGB配色改为HSB配色。如下图:

 

可以看到在HSB模式下,参数只有2~5的细微差别。作为凡人的我,只得感叹苹果配色的微妙和不易琢磨…..相比iOS“微妙精致”配色,安卓的彩色适配方案则要简单粗暴很多。过去安卓的配色规范中,一直有一块彩色梯度渐变。

 

通常浅色模式的配色会选取500左右的配色为主色,如下:

 

而这个配色方案在暗黑模式下,与背景色的对比度太小,

 

所以官方不建议在暗黑模式下使用与浅色模式相同的主色。对此,安卓官方给的建议是,在渐变梯度上,选用200左右的颜色作为暗黑模式下的主色。

 

更改的页面如下:

小结:安卓彩色适配看起来虽没有iOS精致,但终归是有迹可循,值得借鉴。

 

二、标注的变化

近期更新的爱奇艺 iOS V10.8.5新增了暗黑模式适配

 

根据前端开发工程师描述,目前Native、Html 5 均支持暗黑模式适配(跟随系统切换)

如此同时,对于拥有浅色深色两种模式的项目(抖音APP只有深色),今后设计师在提供颜色标注时,也需要提供两套色值。以按钮色值标注为例:

 

假如一个按钮浅色模式模式下使用APP主色#10C30B,在暗黑模式下,主色为#0FD852。那过去我们只需要在对应文字旁,标注#333333即可,如下图

 

而新版的标注,不仅要标注#333333,还要标注#CCCCCC,如下图

 

日常需求,可以不输出暗黑模式下的设计图,仅提供两种模式下的标注即可。但切图就需要提供双份:

一份浅色模式下的@2x、@3x切图,一份暗黑模式下的@2x、@3x切图。

 

三、四个适配细节

下面分别讲述Dark适配需要关注四个细节:字色、图标、插图、其他

 

3.1 字色适配

过去常见的文字配色为#333333、#666666、#999999、#CCCCCC

 

这些字色都是不带透明度的色值。这四种色值在HSB的模式下,H和S相同,只在B上存在差别。而亮度差,刚好构成了字色上的“层级”。PS:详见之前写的《深色模式文字配色》为了适配暗黑模式,建议字色采用某个固定色值,字色的层级仅靠透明度进行区分,如下图:

 

这样做,不仅方便后期标注。也能让文字和背景之间保持良好的对比度。如果采用不带透明度的文字,那暗黑模式下,很容易出现文字和背景之间对比度较低,严重的会导致文字和背景“相融”,对阅造成障碍,如下图:

 

而采用带透明度的配色方案,可以让文字和背景之间保持一个相对好的对比度:

避免出现文字和背景相融的Bug

 

3.2 图标适配

下面是苹果原生键盘中的Emoji Key按钮。

 

在iOS 9上,苹果公司采用的是办法将浅色模式下的线性图标颜色反转,拿到深色界面下使用。等到了iOS 11,苹果公司将这个图标在暗黑模式下改成了面性图标。这是因为白色背景可以更好的表现出形状,人的大脑可以将白色脑补成图形的一部分。然而在暗黑模式下,这种作用消失了,人脑更倾向于认为这些空白的部分是镂空的。比如电影哪吒魔童结尾的彩蛋图:

 

看到黑底白线的卡通人物,会不会觉得怪怪的?尤其是眼睛

上一页 下一页

0
↑ 回到顶部

热门推荐

发送
//www.weibenh5.com/newhome/images/longyang2.jpg