本文来自微信民众号：爱范儿（ID：ifanr），作者：李超凡，题图来自：Medium

盼望着，盼望着，微信的“深色模式”正式上线了。

“深色模式”是这两年用户呼声最高的功效之一，不外 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 都做了深色模式，真的有那么难吗？

简直，在微信上线深色模式之前，就有一些 app 就推出了深色模式，好比知乎，但这些应用的深色基本沿用了原来的“夜间模式”，体验一言难尽，可以参考下面这些用户的谈论。

许多人会把深色模式与夜间模式划上等号，但实际上两者并非完全是一回事。夜间模式主要照顾是暗光条件下的场景，而深色模式还需要兼顾亮光环境下的使用。

设计网站 UX Planet 主编 Nick Babich 列出的“暗黑模式 8 个设计准则”就有这么一条，“要划分在灯光和漆黑条件举行测试”。纵观现在推出深色模式的 app，能让人在亮光环境下依然愿意使用的并不多。

除此之外，在一些应用上的部门功效模块，往往还不能直接变为深色。尤其是在一些文字编辑的界面，白色或者浅色靠山才能让人发生“在纸张上誊写”的感受。

俄罗斯最大的搜索引擎 Yandex 在设计邮箱客户端时就遇到了类似的问题，厥后他们通过一种基于 CSS 变量的方式解决，让深色模式在保持一定对比度和亮度自适应地调整。

这样的问题在许多电商 app 上更显显著，由于大量商品的图片和视频都是以浅色靠山为主。若是要只把靠山变深色，就会显得十分耀眼。但若是要调整海量的商品图片底色，工作量则十分伟大。

针对这个问题，苹果给出的建议是接纳“语义化颜色”（Semantic Colors）举行适配。所谓语义化颜色，就是不再通过某一色值来形貌颜色，而是凭据用途来形貌，让界面元素可以自动适配当前的外观模式。

去年被淘宝称为“史上难度最大适配”的 iOS 内测深色模式，颜色的适配就是接纳了“语义化颜色”的原理。

图片来自：阿里巴巴国际UED

根据淘宝的先容，这种方案大大降低了对所有页面举行举行颜色语义化设置的难度，让绝大多数场景无需修改代码就可以自动适配深色模式，可以在短时间内快速、高质量适配深色模式。

总的来说，给应用适配深色模式的手艺难度自己并不高。但要兼顾的细节却异常多，若是碰上量级十分大的应用，庞大水平就会超乎想象。

为什么需要深色模式？

深色模式的作用已往常常被强调。实在深色模式不仅不护眼，在许多场景实在反而会降低阅读效率。有研究视觉研究解释，人眼天生就是更喜欢前暗后亮（dark-on-light）。

既然如此，破费这么多资源适配深色模式到底有没有需要呢?

谈论一款产物或一项功效的可用性，不能脱离用户的使用场景。深色模式未必所有产物的设计趋势，但好的深色模式却让不少需要的场景体验加倍人性化。

爱范儿在之前一篇文章中，科普了深色模式的用途。Android 开发者网站的漆黑主题开发指导则先容了深色模式的三大优势：

• 大幅削减电量的消耗

• 为视力不佳的用户与对强光敏感的用户提供更好的可视性

• 让任何人都能在暗光环境中使用智能手机

不久前《财富》杂志公布了全球 100 个最伟大的现代设计，同时指出了好设计的尺度，已经从一种纯粹的产物美学，变为了一个产物或服务能否更好地去实现特定目的、功效，以及能否为社会带来连续的影响。

对于 iPhone 、微信这些产物来说，深色模式可以说是延续这种设计理念的一部门。

本文来自微信民众号：爱范儿（ID：ifanr），作者：李超凡