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

本文脱胎于我在公司内时长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,苹果公司将这个图标在暗黑模式下改成了面性图标。
这是因为白色背景可以更好的表现出形状,人的大脑可以将白色脑补成图形的一部分。
然而在暗黑模式下,这种作用消失了,人脑更倾向于认为这些空白的部分是镂空的。
比如电影哪吒魔童结尾的彩蛋图:

 

看到黑底白线的卡通人物,会不会觉得怪怪的?尤其是眼睛?
下面将彩蛋哪吒反色处理后,变成白底黑线,再看下效果:

 

是否觉得白底黑线,更有立体感?
所以苹果在iOS 13暗黑模式下,放弃线性图标,改用面性图标。比如Emoji键盘上的图形:

 

不过键盘最右侧的“删除”,在暗黑模式下却依然采用线性图标。我想删除按钮用线性图案,也许是苹果刻意为之。毕竟在深色键盘中,诸如地球、麦克风这个两个图形,也都是线性图标。

 

也就是说,暗黑模式下采用面性图标并非一招鲜的解决办法。最终还是需要设计师根据具体效果进行选择。
在爱奇艺 iOS V10.8.5 中,底部导航在暗黑模式下,也由线性图标变成了面性图标。

 

值得一提的是,有一些浅色模式下“面性图标”(填充图标),到暗黑模式下,也是要进行再设计的。
比如下面的页面:

 

灰色图标和彩色图标,在浅色模式下,图案比圆形的底色要深。这样的设计在暗黑模式下,效果并不理想。如下图:

 

因此需要对图标的图形和圆形底色进行调整。改为底色暗、图形亮。如下图:

 

修改前后对比如下:

 

多说一点:

有些文章中提到,在适配暗黑模式时,可以提供SVG格式的切图。

 

这样就可以让程序员调整切图颜色,减少设计师工作量。
在我看来,SVG切图完全不符合国情。
首先,国内的APP产品,很少使用单色图标,以“多色”、“彩色”、“带投影”为主,如下图:

其次,如果只是局部使用SVG,那后期维护成本不低。远不如png切图维护起来方便。
还有就是,矢量切图在@3x下,不可避免的会出现像素不对齐、描边线虚边这类Bug。
简单来说,SVG虽有亮点,但缺点尤多,慎用。

 

3.3 插图适配

现在大家都说暗黑模式更加适合夜晚操作,那想必大家都不希望在操作一款适配暗黑模式的APP时,时不时出现“亮瞎”眼睛的白色页面。
普通的页面适配起来比较简单,程序员就可以完成适配。但一些带有插图的页面,就免不了需要设计师专门进行适配。
下面这些页面,就需要设计师注意了:

 

① 启动页
以下样式,logo中带有黑色、图中有很亮的配色(比如黄色),需重绘:

 

下面这种本来就是黑色,以及大面积品牌色的做法,可直接复用:

 

② 新手引导
原本适配白底的插图,快重绘制吧:

 

彩色底、品牌用色、大面积彩绘的方案,可直接复用:

 

③ 弹窗
暗黑模式下,弹窗颜色也有调整,如下图:

 

出现在白底弹窗上的配图,难免要重绘,如下图:

异形弹窗可直接复用,如下图:

 

④ Loading
以蚂蜂窝APP为例,如下图:

 

蚂蜂窝logo中存在黑色,且logo动画中用到了浅灰色。

那么如果这个动效要适配深色底的背景,无疑需要重绘。

 

⑤ 空态插图

 

线性插图、白色插图、黄色插图(亮色插图)也需要重绘。
其中带眼睛的线性插图,无论是反色、还是简单的转成面,在深色上看起来都会很奇怪。

 

这个时候,建议参考爱奇艺Mac端的插图方案:

保留眼白和眼球,将整个图形调暗。

 

⑥ 其他
还有一些,诸如身高体重设置、性别选择、内容推荐、勋章展示等页面,其中的元素和插图

在暗黑模式下,难免也需要重新绘制。

 

3.4 元素适配

在APP中,有一些元素不像图标和插图那么明显,导致经常被忽视。但其实又经常能够遇见。

 

① 默认图和默认头像

 

在进行暗黑模式适配的时候,如果忽略这些元素,整个产品的体验会大打折扣。
在爱奇艺 iOS V10.8.5 中,首页默认图已适配Dark模式。

 

但其他模块的视频预加载尚待适配,如下图:

 

② 标签
还有一些标签图,需要进行二次设计:

比如爱奇艺首页的“剧头条”的插图和“最新”标签。

 

③ Logo
iOS 13邮箱设置界面中,雅虎logo为深紫色,Aol.为黑色。在暗黑模式下,苹果对这两个logo的颜色都做了改变。

 

④ 地图
最后,还有一个工作量巨大的模块:地图
iOS 13中,苹果地图已经完成了暗黑模式的适配。

 

这样一来,夜间开车看地图再也不用担心手机晃眼了。??
但对于一些公司来说,地图适配恐怕要头疼了。比如自如、美团、微信:

 

如果地图要自家设计适配的话,这工作量恐怕得要个一年半载。
即便提供地图服务的公司来完成地图暗黑模式的适配,这些公司在地图上用到的小元素,自然还需要自家设计师来处理。

 

四、Dark适配难点

4.1 重绘

除了上面提到的各种图标、插图、小元素 重绘外

 

还有一些不起眼的H5页面需要进行适配,比如:用户协议、加载页、功能介绍,如下图:

 

目前豆瓣APP也做了Dark模式适配,完善度相当高。就连Tost、加载中这样的细节都做了适配,如下图:

 

不过,当下豆瓣APP(V6.22.0)分享弹窗图标尚待完善,如下方左图:

右侧放了爱奇艺的弹窗图标,方便做个对比。

 

4.2 对比度

无论是Android Q,还是iOS 13,在暗黑模式的建议中,都提到了文字需满足WCAG无障碍阅读的AA标准。
WCAG从高到低分别是AAA、AA、A三个等级。其中AA要求文字与背景对比度不小于4.5:1

 

不过,WCAG还规定,大号文字与背景的对比度大于3:1就算符合要求。

 

同理,小字号要求的对比度会高于4.5:1 ,加之国内正文字号普遍小于18dp(@2x,36px)所以单纯比较对比度,并不实用。
比如,现在很多人推荐的 contrast-ratio.com (在线测量对比度):

 

这个网站只能提供两个色值的对比度,功能十分局限。
建议使用hexnaw.com进行对比度测量:

 

这个网站支持最多12种颜色的交叉对比:

 

这里输入3种色值,就能看到交叉对比的结果:

第一个参数是对比度,后面分别对应的是大字号、小字号的WCAG评级(AAA最高,AA普通,A最低,Naw不及格)
 

4.3 遗漏

要完成产品的暗黑模式适配,最大的难题就是遗漏。以爱奇艺 iOS V10.8.5为例
部分主页完成了暗黑模式适配,但很多二级页面尚待适配,如下图:

 

另外,一些页面虽然“大面”上完成了适配,但如果细节处理不完善,效果就会大打折扣,比如爱奇艺应援页面:

 

仅这一页,就尚有四处有待进一步完善。现在的效果,无疑破坏了产品在暗黑模式下体验的一致性。
对于容易出现的遗漏,建议如下:
首先在适配前,用Excel统计好需要适配的产品页面。

 

其次,标记好各种不常见的页面模块和组件,比如低频的运营配置模块。
同时在替换素材和切图时,避免采用“替换全局”这种不便后期排查的描述。而是标记好需要替换的页面,并在开发后逐一排查。

 

如果一味把工作量和责任推给开发,也成。
不过,当别人看到不完善的页面时,一定不会觉得是程序员的锅,而只会吐槽设计师。

 

如果你还没有开始适配Dark,那我希望你在看完本文后,可以对适配工作量有一个较为全面的了解。
重新思考是否要进行Dark适配,不要走过去“MD风格适配”的老路。
Dark适配一旦开工,就不好轻易掉头和叫停。
也许眼下,觉得做暗黑模式很新鲜,可时间一长,多数需求都要做两套,那可就是另一副光景了。

最后,祝正在进行Dark适配的设计师,
身体健康,多多保重!

 

原文地址:
海边来的设计师(公众号)
作者:海边来的设计师


 

0

评论0

站点公告

 

AI创作与绘画大师,国内版chatGPT在线版本免费使用哦

点击打开: https://ai.uiya.cn

   
显示验证码
没有账号?注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码