微信「深色模式」正式上线!做一个引起极度舒适的「深色模式」,到底有多难?通信
盼望着,盼望着,微信的「深色模式」正式上线了。
「深色模式」是这两年用户呼声最高的功能之一,不过 iOS 和 Android 也是去年才开始适配深色模式,似乎越是大型的应用和平台,在推出「深色模式」这个问题上就越是谨慎。
去年微信团队曾在微博以打趣的口吻回应称,「不忍心占用用户珍贵的夜晚」。不打扰,一直是微信的温柔。
可很多人不知道的是,要给用户提供一个引起极度舒适的「深色模式」,其实并不是简单的从白变黑,尤其是对于一款国民级应用来说,当中涉及的设计和开发量,甚至不比重新开发一遍少。
深色模式的黑,是什么黑
深色模式(Dark Mode)也被叫做暗黑模式,顾名思义,它给人最直观的感受,就是黑。
但「深色模式」要实现理想的视觉体验,绝不是将底色变黑,将文字变白这么简单。Google 在Material Design的设计指导中对于深色模式中列出的设计规范中,第一条就是「不要使用 100% 的纯黑」。
UI 设计师Ilke Verrelst 曾指出,不要在纯白背景上显示纯黑文字,反之亦然,这是基本的设计规则。
为什么呢?因为纯白色会反射所有波长的光线,而纯黑色会吸收所有光线,这是对比度最大的两种颜色,白底黑字时,文字过于刺眼,而黑底白字时,文字又可能难以辨认。
如果在同时一个页面上大面积使用纯白色或者纯黑色,反而会在长时间阅读时让眼睛感到疲劳。虽然有大量研究已经证明深色模式并不护眼,但如果它让用户使用 app 时更加不适,那同样与深色模式开发的初衷背道而驰。
此外纯黑和纯白的高对比度,会让页面无法通过阴影效果来构建视觉层次。比如下图中两个方框中灰色方块,在左侧纯黑的方框中,几乎看不到灰色方块的阴影。而右侧深灰色方框中,阴影的变化则明显得多。
其实「深灰色」也是很多应用在深色模式中所使用的背景色,这次微信更新的深色模式里,聊天背景用的就是深灰色(#181818)。
文字颜色也是一样,比如在亮色模式下偏暗色调的文字,在深色模式下会变得难以阅读。因此也需要选择合适的颜色,既能清晰显示,也减轻用户的视觉疲劳。
如果你觉得对比不够明显,不妨来看一下 Twitter 和 iOS 模式深色模式 。 Twitter 提供了两种深色模式,分别是「昏暗(Dim)」和「熄灯(Light out)」,前者背景色为深灰色,后者基本是纯黑色。
从Medium 上一位作者 Pudge 给出的对比图来看,在 Twitter 纯黑背景的深色模式下的界面下,通栏列表几乎与背景融为一体了。而 iOS 在深色模式下的这些地方用了稍亮的灰色,感觉更加自然了。
打开微信的深色模式,你也能看到类似的设计。在「朋友圈」、「视频号」、「扫一扫」等可交互的功能栏上,都采用比深灰色背景更亮的灰色。
由于深色模式下容易出现难以区分两个视觉元素的情况,这种方式能让颜色在不同的外观模式下都具备足够的对比度。
不只是背景色,在低对比度的深色模式下之下,一般模式之下的各种色彩几乎都要重新设计。
比如很多 app 的品牌色饱和度都比较高,然而高饱和色则是深色模式的大忌之一。正如前文所说,这种对比度十分影响视觉体验,因此必须降低这些颜色的饱和度,Google 的深色模式就会给「错误提示」的红色一层 40% 透明的白色图层。
看起来容易非常容易对不对?
对于一些轻量级 app 或许是的,但对于一些规模庞大。代码结构复杂的 app 来说,要给各个页面、每个图标和元素都重新调整配色,真的会让程序员分分钟吐血。
如果把深色模式看作给房子刷漆,给一间小房子刷漆的难度,和一个几十栋楼的大型小区无法显然无法相提并论。
对于月活超过 11 亿的微信来说,这显然不是一件一蹴而就的事情。
很多 app 都做了深色模式,真的有那么难吗?