爱范儿：做一个引起极度舒适的「深色模式」，到底有多难？( 二 )

不只是背景色，在低对比度的深色模式下之下，一般模式之下的各种色彩几乎都要重新设计。
比如很多 app 的品牌色饱和度都比较高，然而高饱和色则是深色模式的大忌之一。正如前文所说，这种对比度十分影响视觉体验，因此必须降低这些颜色的饱和度， Google 的深色模式就会给「错误提示」的红色一层 40% 透明的白色图层。

本文插图
看起来容易非常容易对不对？
对于一些轻量级 app 或许是的，但对于一些规模庞大。代码结构复杂的 app 来说，要给各个页面、每个图标和元素都重新调整配色，真的会让程序员分分钟吐血。
如果把深色模式看作给房子刷漆，给一间小房子刷漆的难度，和一个几十栋楼的大型小区无法显然无法相提并论。

本文插图
对于月活超过 11 亿的微信来说，这显然不是一件一蹴而就的事情。
很多 app 都做了深色模式，真的有那么难吗？的确，在微信上线深色模式之前，就有一些 app 就推出了深色模式，比如知乎，但这些应用的深色基本沿用了原来的「夜间模式」，体验一言难尽，可以参考下面这些知乎用户的评论。

本文插图
很多人会把深色模式与夜间模式划上等号，但实际上两者并完全是一回事。夜间模式主要照顾的是暗光条件下的场景，而深色模式还需要兼顾亮光环境下的使用。
设计网站 UX Planet 主编 Nick Babich 列出的「暗黑模式 8 个设计准则」就有这么一条，「要分别在灯光和黑暗条件进行测试」。纵观现在推出深色模式的 app ，能让人在亮光环境下依然愿意使用的并不多。
除此之外，在一些应用上的部分功能模块，往往还不能直接变为深色。尤其是在一些文字编辑的界面，白色或者浅色背景才能让人产生「在纸张上书写」的感觉。

本文插图
俄罗斯最大的搜索引擎 Yandex 在设计邮箱客户端时就遇到了类似的问题，随后通过一种基于 CSS 变量的方法解决，让深色模式在保持一定对比度和亮度自适应地调整。
这样的问题在很多电商 app 上更显明显，因为大量商品的图片和视频都是以浅色背景为主。如果要只把背景变深色，就会显得十分刺眼。但如果要调整海量的商品图片底色，工作量则十分巨大。
针对这个问题，苹果给出的建议是采用「语义化颜色」（Semantic Colors）进行适配。所谓语义化颜色，就是不再通过某一色值来描述颜色，而是根据用途来描述，让界面元素可以自动适配当前的外观模式。
去年被淘宝称为「史上难度最大适配」的 iOS 内测深色模式，颜色的适配就是采用了「语义化颜色」的原理。

本文插图
▲ 图片来自：阿里巴巴国际 UED
按照淘宝的介绍，这种方案大大降低了对所有页面进行进行颜色语义化设置的难度，让绝大多数场景无需修改代码就可以自动适配深色模式，可以在短时间内快速、高质量适配深色模式。
总的来说，给应用适配深色模式的技术难度本身并不高。但要兼顾的细节却非常多，如果碰上量级十分大的应用，复杂程度就会超乎想象。
为什么需要深色模式？深色模式的作用过去常常被夸大。其实深色模式不仅不护眼，在很多场景其实反而会降低阅读效率。有研究视觉研究表明，人类天生就是更喜欢前暗后亮（dark-on-light）。