微信深色模式&夜间模式引发的迷思

这些场景你一定遇到过。电影院、晚上回家的车里、被窝里玩手机，突然来了一条消息，高亮的屏幕像闪电一样打破原来安静的氛围。

人类为什么会在夜晚畏光？

瞳孔直径的变化控制着光进入眼底视锥细胞的多少，方便我们在各种光照环境下都可以看清楚东西，弱光时瞳孔变大，吸收更多光线，强光时瞳孔缩小，减少光的进入，光实在太强时，眯眼也是一种物理减光的方式。

随着年龄的增长，人的瞳孔会逐渐缩小，对光的耐受能力加强，随之而来的是夜间视力的微弱下降。

深色模式的理论基础

用一张相机光圈原理图举例，从图中可看到瞳孔缩小时，景深范围变大，可以不严谨的理解为看清楚的范围更大。

瞳孔变大带来更多进光量，生理景深变浅+大脑释放褪黑素会导致反应变慢，更易沉浸于小范围内容，这也是苹果使用黑色模式会使前景脱颖而出的理论基础。

• 使用浅色模式时（白多黑少），进光量大，瞳孔直径变小，景深范围大，阅读范围大。
• 使用黑色模式时（黑多白少），进光量小，瞳孔直径大，景深范围浅，阅读范围小，但可以营造专注氛围。

光的强弱如何应用在设计中？

我们日常工作中颜色可以用多种方法表示。

Hex #25AB5B 这样的#号加6位数字字母是Hex Code，也称为二进制颜色模式。

rgb(37,171,91) 称为RGB颜色模式。

hsl(144,64%,41%) 称为HSL颜色模式。

hsb(144,78%,67%) 称为HSB颜色模式。

以上是同一个颜色“深绿”的4表达方式。

• H （Hue）色相

颜色名称，例如“红色”、“蓝色”。也就是拾色器旁边的色彩选择轴，共360度

• S （Saturation）饱和度

颜色的纯度，拾色器上从左0%到右100%。

• B（Brightness）明度 

颜色的明亮程度,拾色器 从下0%到上100%。

光的强弱可以反映在 HSB 色值中的 B 值。B 值越高，屏幕就越亮。

微信深色模式与Apple Developer Guideline有什么区别？

吸色可发现微信的深色模式没有使用纯黑(B=0%)和纯白(B=100%)，这也是微信被诟病最深的地方。

1、导航栏没有完全黑下去，观感灰沉、刘海明显。

2、白色不亮度不高，白天不可用。

Apple Developer Guidelines - Dark Mode：使前景内容在深色背景前脱颖而出

微信为什么要这么做？

文字（浅色模式下）

长时间观看ABC三段文字，可以感受到让人眼最舒服的方案是C，一定要使用纯白背景时，图B也可以接受。

PS:因为中文的细节丰富、边角锐利特性，会比英文圆润留白多的字体更不适用于高对比配色。

文字（深色模式下）

同样是C对眼睛较为友好。

搞设计的不使用纯白和纯黑？

在从拟物到扁平的UI设计时期，我们习惯不使用纯白或纯黑，因为让人眼舒服的拟物世界不存在纯白或纯黑。

这些经典教条在后扁平时代已经逐渐被放弃。

现在越来越多的OS、App使用#ffffff纯白当做背景，同时OLED 技术做到单个像素点可以独立关闭，黑的纯粹和节电等原因，#000000 纯黑也被 Apple 写入 Developer Guildelines中。

回到微信

我们把吸到的HSB颜色其中B值相减，发现一个没有用的冷知识。

• 当两组计算结果的绝对值相近时，从亮度上来讲它们的反差接近，可用来验证组图的明暗对比度统一性。

结论：

• 微信可能是为了一种配色设计方案兼容 Dark Mode 和另一种来自用户需求的，苹果的官方文档上并未提到的 ‘Night Mode’.
• 阅读黑底白字文字时，对比过于强烈，人眼的辨识度会因为瞳孔的变大和边缘高对比度而下降。
• 当需要使用纯黑 B=0 背景时，文字 B 值≤ 90
• 当需要使用纯白 B=100 背景时，文字 B 值≥ 10
• 背景色可以使用纯黑 B=0
• 背景色大面积使用浅色时，B应≯99。

文字说完，我们来聊聊颜色，这里就要把刚才的 HSB 里的 H 和 S 搬出来了

微信做了哪些变化？

对比“我收到的消息”气泡，左边白色模式的背景和白底气泡B值相减，和右边黑色模式黑色气泡和背景的B值相减，对比差值相同。

而“我发出的消息”因为使用了主题色，消息气泡 H值 （色相）产生了变化，从100向右移动到了144，B值（明度） 的百分值降低了 21%，

转账的 H 值和Icon颜色都没有变化，只有 B 下降了10%。

而就是这10%，似乎修改最小的地方，却是用户一眼就看出区别和负面声音最多的地方。

微信不敢大面积的调整转账的颜色可能就在于转账和红包相当于微信货币，突然改版货币的颜色，对于用户会是个不小的挑战。

造成了背景变化但是前景没变化带来的较强反差，通过背景和已领取红包色 B 值相减，可得出 Light Mode 里B的差值是-6，而 Dark Mode 的差值为-58. 

和红包转账一样，音乐播放气泡去掉了底部白色条

支付按钮的主题色因为面积可控，不像聊天气泡一样可能会大面积使用，所以并没有变化，也可能是微信还来得及更新。

那些颜色可以不用重新适配？

理想的环境是浅色一套配色，深色一套配色。实际情况因为人员、开发成本等，和理想往往存在差异。我们来看哪些颜色不用修改就可以适配深色模式。

截取了S和B，50和100的4套颜色分别放在白底和黑底上，可以看出来如果大面积用色，无论是白色模式还是深色模式，高饱和度高明度都需要尽量避免，中饱和度高明度和中饱和度中明度会是可以同时适配两种模式的较好选择。

• 非深色模式可使用颜色较多，深色模式用色需要更慎重，可用颜色有限。
• 深色模式下，背景颜色的 B 值需＜20，两色块接壤时 S和B 绝对差值若＞50 观感轻微不适。
• 当主题色 B 和 S 值过高时，在设计黑色模式时，需主动降低主题色的 B 值或 S 值，或背景不使用纯黑，在黑里要添加一些其他颜色等方式来中和不适。

好的用户体验来源于正确、及时的响应。在设计的未来的道路上，不妨猜测一种可能：白天不是突然过渡到晚上的，日间模式和夜间模式也不会是一段线开头和结尾仅有的两个点，它会像日夜交替一样与环境结合。设计师给出两端的色彩或者范围，程序根据一天中不同的环境自动计算出当下应该显示的最佳颜色。或许“Full-time” Mode 才是未来。

引用：
《国际眼科杂志》 2006年06期
http://www.cnki.com.cn/Article/CJFDTotal-GJYK200606044.htm
《天津大学》博士论文 2016年
http://cdmd.cnki.com.cn/Article/CDMD-10056-1017134176.htm

Finally. Dark Mode on WhatsApp
https://www.youtube.com/watch?v=DoPYlgsEKvk

Apple Developer Human Interface Guidelines
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/

Powered by Froala Editor