如何评价微信新上线的深色模式？来看总监级的分析！

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

微信在3.23号上线了传闻已久的 「暗黑版」，用来适配 iOS 的深色模式，相信不少同学已经安装并体验上了，如果还没安装的可以看看下面图例。

微信每有一次大动作都会引发全网性的讨论，而针对设计上的调整，往往只会迎来一片骂声。比如我们看看知乎中讨论的内容，感觉民愤都快压抑不住了。

但我们先别急着参与网上的声讨，现在站在设计师的角度，来评价一下迟到的微信深色模式。

深色和夜间模式傻傻分不清

很多人会把深色模式和夜间模式搞混，这里必须强调这是两种不同的模式，所以我们要对还没搞清楚状况的同学先做一个扫盲（最近扫盲好像搞的比较多…）。

先说夜间模式，是一个专门针对夜晚环境适配的设计版本。腾讯的 ISUX 团队之前做过调研，有 71.1% 的用户习惯在夜间不开灯看手机。

超过8亿人使用的QQ，总结了夜间模式设计的通用方法

腾讯ISUX-花咯：你有没有在夜间使用移动设备的习惯？

如果在深夜漆黑的房间中看手机屏幕，对我们的健康有非常大的损害，不仅表现在对视力的伤害上面，视网膜和神经元容易受损，同时主流的研究项目还表明会这会抑制我们褪黑素的分泌造成失眠。

所以，夜间模式，是一个用来降低屏幕对用户伤害，提升夜间使用体验的特殊模式。

通常，夜间模式会采取 降低尼特值、减少对比度、降低色彩明度、增加深色遮罩的方法，比如之前 QQ 官方的夜间模式示意图，大家感受一下，是不是有内味儿了？

这里提一下尼特这个概念，尼特是用来说明亮度的术语，1nit=1坎德拉／平方米。是现在各大手机发布会中介绍屏幕的时候都要强调的参数之一，因为尼特值越高，证明在户外大白天的环境中屏幕内容可以越清晰，而夜间模式做的就是用来降低显示亮度尼特值的。

然后再解释一下苹果的深色模式，苹果的 DarkMode，并不是一个专门面向深夜环境的模式。官方对此版本的解释，详见我们翻译的 iOS 官方文档中 112 页。

这是一个面向全天候的视觉风格，同时通过深色背景的对比，来加凸显图片、文字内容。包括上面那种官方的配图，大家应该就能感觉到主体元素比白色模式下更凸出，更激烈。

所以了解了这两个模式的区别，我们才能好好展开对微信深色模式的讨论。

微信深色模式专业总结

接下来，我们先来总结一遍微信的深色模式。首先是分析一遍它使用的背景色。

背景色纯灰色，有3个等级的灰度。熟悉我的都了解，看色彩的奥秘，靠16进制代码和 RGB 那是分析不出个什么所以然的。如果我们把它们转化成 HSB 一看，规律性就来了。

背景色从深到浅色的灰度值 B 值分为 10、14、18，是不是朗朗上口。应用的层级虽然和官方规范一样使用了三级，但是设置和官方的不同。

然后再看看其中使用的其它配色，其中主色保持了不变，其它应用到图标色彩，都进行了明度的调整，比如下图案例。

再看看文字的用色，也是纯灰色，标题使用 B:85，正文使用 B:65，注释使用 B:35（主要用色）。

而官方使用的文字色彩中，却并不是纯灰色，除了第一级的白色以外，其它灰阶的文字是由带有蓝色色相的色彩通过降低透明度来呈现的。

对中性色增加蓝色色值是一个常规操作，可以让这种灰色看起来有一点活力，不会像纯灰色那么单调，不过这次微信明显在文字的应用上更保守，一点色相也没有给。

为什么微信色彩另辟蹊径

这次微信被大面积吐槽的，就是颜色的应用上和官方的规范不一致，作为从业人员直接开喷是相当不专业的（最起码要先走个形式），这就是我要分析的重点了。

要说微信的 UED 团队，专业性肯定是国内最顶尖的，你们网上所有看过有关交互的方法论、可用性测试的分享， 他们肯定都有做过，而且执行得更专业。

直接用官方规范的黑底白字模式，微信团队不可能没有出过这样的方案。但很明显，这个方案最后被毙了，上了我们看见的这个版本，虽然不知道以后会不会变。

再看看下面官方发的一条微博。

其中已经提及了，是和苹果 「共同探索」 出来的方案，这是非常耐人寻味的。也就是说，这个不用官方的模式是苹果团队也通过的。

那么为什么要做的不一样呢？没有内幕消息，就根据自己的经验来判断一下。

我自己认为的一个非常重要的原因，就是对于 「夜间模式「 的兼容。前面不是讲暗黑模式和夜间模式不一样嘛？为什么微信的暗黑模式又去兼容夜间模式了。

这里面有几个小彩蛋，首先就是官方对深色模式的态度，在我看来越来越暧昧了。比如在显示与亮度设置页面里，有一个自动设置外观 —— 日出前保持深色外观的功能。这样，就等于默认将深色模式和夜间模式挂钩。

还有，如果过去我们没有整理 iOS13 的翻译，就不会发现，上面我们展示的那句专注于内容的解释，现在在官网已经被删掉了（你品，你细品）。

再说关于用户认知的问题上面，在 UI 群体中，能了解暗黑模式和夜间模式是不一样的可能就只占 10 分之一，那么对于普通用户来说，这个情况就更不乐观，能有 1% 的用户了解这个概念就不错了。所以，绝大多数用户会直接认为暗黑模式就是夜间模式。

如果暗黑模式直接当成夜间模式用，在深夜的环境里，观感会特别差，因为 —— 明暗对比度过高。

如果在黑底中直接用白字，那么可以说屏幕的文字和背景的对比度就是 100（HSB中 B 的差值），在一个漆黑的环境中会非常应验 「让内容脱颖而出」 的效果，刺激性会非常强烈，文字将变得非常尖锐，比如 QQ 暗黑模式，大家可以在被窝里打开下面这张图感受一下。

新的深色模式版本中，文字和背景的对比度基本控制在 50 左右，降低了一半。

并且，中英文字形在正负形上的差异（简单理解就是中文笔划更复杂），这个感觉会更强烈。比如我们用一个公众号页面举例，使用纯黑底白字，采用相同字号的中英文，看看显示的效果。

还有，纯黑背景色和白色的对比度，会根据屏幕的类型和参数不同而有不一样的感受，比如苹果从 X 后旗舰机型使用 OLED 屏幕，纯黑色区域将不会发光，进一步扩大对比度，使得文字变得更尖锐，更让人难以接受。

如果不是使用 OLED 屏幕的同学光看一个案例可能很难受，所以我们用纯黑的案例来对比一下现在的状态。

是不是发现明显在夜间的情况下黑白模式并不如另一个模式看起来舒适？而这种不舒适的差别并不会随着屏幕亮度降低而变化。

所以色彩并没有符合官方的原因，我的判断就在大环境中无法割裂夜间和深色模式的区别，同时也要让深色模式更适应夜间环境，做出了调整。而又因为它不是真正的夜间模式，所以对比度也不能像 QQ 之前的夜间版本一样将整体环境完全压暗。

你看，真是一个让人矛盾的过程……

为什么深色模式姗姗来迟

最后再简单讨论一个问题，为什么深色模式来得这么晚。很多用户一直嘲讽，不就是换一套皮肤的事嘛，为什么就是不上线。

外行可以看热闹，但是如果是从业人员就应该知道，微信这种体量的应用，上线深色模式绝对不是一个非常容易的事情。

适配黑暗模式首先需要使用苹果新的 iOS 13 SDK（开发者工具）进行编译，等于应用中有大量的代码需要调整，而这种升级调整的结果还会导致沉重的测试压力。有经历过 Darkmode 开发的团队应该都知道这绝对不是改改颜色就能上线的皮肤。

再看到知乎另一个回答中提到的：

另一方面点大家随便听听。使用 iOS 13 SDK 之后，Apple 要求 VoIP 推送必须使用 CallKit，否则应用程序会被终止。而由于众所周知的原因,CallKit 在中国大陆是无法使用的,这样的改动会降低微信语音电话的体验。

原文地址：https://www.zhihu.com/question/378027349/answer/1069072154

再者，抛去大量用户体验调研相关的工作，微信整个生态对于暗黑模式的不友好可以说是无解的。比如说公众号，有大量公众号内部的标题、分割线、引用语句是用图片做上去的，而图片还用的是白底（透明底黑字的也有），于是现在就产生了灾难性的阅读体验。

比如我的公众号：超人的电话亭，其中文章展示的截图。

而且因为公众号发出去是不能修改的，只能删除，那么这部分存量文章将无法更改，体验也无法扭转。而且公众号还支持文字色彩等自定义，那么你在白色背景下添加的颜色，可不会直接适配深色模式，尤其是官方也不可能轻易直接给你们 「适配」 掉。

而在夜间模式，正常访问的文章网页，也和公众号会很像，但是打开以后是白色背景的话，统一的体验在哪里？

再者还有小程序，小程序虽然也可以通过微信官方提供小程序的深色模式适配文档，对应的 SDK，但是小程序不是 APP，其中有大量小程序开发后是缺少维护的。

因为线下门店通过外包方做好一个小程序上线以后，没特殊的原因不会直接去更新它，那么这部分小程序的升级适配无从谈起，会出现打开小程序一个白一个黑的窘境。

最后，再讲一个微信里最高频使用的功能 —— 发表情。深色模式直接造成大量自定义表情报废，无法正常显示的问题，比如看看下面我自己发的表情。

前面提到的，都是不能解决的问题，这就是做深色模式的挑战，因为用户 UGC 内容是不可控的，官方不可能通过算法直接帮用户强行 「适配」。

而这些，就是做深色版的难点。

总结

以上总结内容多数为主观分析，纯粹站在 UI 设计师角度进行专业解读，不带入个人立场。而一定要我自己评价的话，那就是 ：赶紧把这模式给我移除！！

再顺便提一点小感想，一个有数亿用户的产品，每一个小调整分量都不轻，都要慎之又慎。同时，你做的每一个决策，都意味着要站在其中一部分用户的对立面，因为你满足不了所有用户的需求。所以，这就是设计师的压力与挑战。

为什么支付宝要换 logo 颜色？分析下目前 Logo 的主色趋势

最近支付宝变更了主色，将本来的天蓝色变更成了深蓝色，相信大家都已经在各个平台的推送新闻中关注到这个消息，我们来看看色彩的对比。

欢迎关注作者的微信公众号：「超人的电话亭」