微信黑暗模式终于来啦！UI设计细节完全分析及体验

静电说：它来啦！前一段时间传的沸沸扬扬的苹果与微信黑暗模式的纠葛，终于以微信适配iOS端告终。3月22日静电一觉醒来，微信已经正式开启了“暗黑”模式。不过，很多人也许发现不了，因为手机白天还是浅色模式，只有到晚上才会改为黑暗模式。

如何开启微信黑暗模式？

首先，你必须更新到iOS端的微信7.0.12版本。然后，在白天，只有你手工开启了“设置”>“显示与亮度” 菜单下的深色模式，它才有效果。至于安卓用户，截止3月22日文章发布的时间，官网依然没有更新。安卓的小伙伴就再等等吧。开启后效果如下：

这次的改动可以说是很全面的，几乎所有的界面都进行了调整，包括聊天窗口，朋友圈文章，微信游戏，帮助页面，看一看等等，但是微信小程序则依赖开发者的适配，目前来看，还都是白色的。

不少小伙伴对于黑暗模式的设计还不是特别熟悉，接下来咱们通过微信设计细节的分析，来看看小伙伴们都能从微信的改变上学到什么？

Tab菜单对比及颜色字号分析

请注意，以上内容为截图取色，可能存在不准的情况。但是可以看到，微信在Tab背景上并不是使用的纯白或者纯黑色。 在Tint颜色上，亮色模式和暗色模式的颜色也不一样，这符合iOS 13 黑暗模式设计的规则定义。一般来说Tint颜色，黑暗模式下更亮一点。（左侧色卡为浅色模式，右侧为深色模式，下同）

另外，以上取色均没有考虑透明度，在实际应用中需要考虑透明度的使用。而对于Tab背景来说，亮色模式和黑暗模式均沿用透明毛玻璃效果。

聊天列表页面

左侧色卡为浅色模式，右侧为深色模式，均没有考虑透明度影响。

图标颜色分析对比

在聊天列表，通讯录列表页面，系统图标在两种模式下的颜色均保持一致，未做改变。

但在发现页面中，列表左侧的icon颜色则有略微变化。总体来说，黑暗模式下比亮色模式下的图标颜色更“亮”。是不是这里比较拗口？也就是下图中，右侧比左侧的图标，亮度提升啦！

支付界面中的图标，处理方式同上边一样，右图比左图的图标亮度要高一些。但是下图中绿色的大色块，颜色却一致。

公众号文章页面对比

而文章背景颜色，亮色模式为#FEFFFF，黑暗模式为#232323，可见也不是完全的纯白和纯黑色。另外，想在黑暗模式上贴各种表情的作者可要注意了，你的GIF表情可能会变成上图那样？ 就像在黑色背景下开了个白色天窗！一大波白色不透明GIF图即将失效！

朋友圈界面对比

朋友圈界面的背景色和点睛色均发生了变化，在黑暗模式下，发广告还是美丽的照片，用户的关注程度都会提升，当然，不好看的图片，也会把缺点放更大。所以让你的照片更吸引人吧。

聊天页面

聊天页面中相应的Tint色也有变化。另外，请注意，背景色依然不是纯白色和纯黑色。而微信的设计师倾向于使用#FEFFFF而不是#FFFFFF，虽然这俩颜色相差几乎为零，肉眼不可分辨。是不是这位设计师有某种洁癖？或者是纯粹弄错了？

关于聊天时使用的透明动图，其实仔细看还是有不少毛边的，之前我们也做过相关的分析文章。因为这种情况单纯使用256色的GIF效果已经非常差了。具体实现方式可以看这里：不要大白边！聊聊GIF动画毛边的处理方法。以免出现像下面的情况：

弹层及搜索框

弹层颜色在两种模式下颜色没有发生变化，搜索框颜色在针对黑暗模式设计时，可以考虑在白色基础上进行透明度处理。

最后的总结（黑暗模式设计思路）

· 一般情况下Tint颜色，在黑暗模式要比浅色模式要亮，请注意，不管是图标还是点睛的颜色。

· 苹果的设计指南中建议背景色为纯黑色，但是真正实践过程中，没必要完全遵循，可以用一定灰度的颜色替代。

· 使用具有透明度的图标和文字，在亮色模式转黑暗模式的时候会更加轻松

· 不管你使用怎样的颜色，请确保黑暗模式下的设计元素具有足够的可读性，同时兼顾美观。

· 黑暗模式下的层级设计与亮色模式不同，阴影在黑暗模式下没有太多作用。

· 当发布一个大版本的APP更新时，可以进行分渠道投放，让一部分先用上新版本，并测试其反馈结果，进而再进行全渠道的投放，可以最大限度降低被用户吐槽的风险。

万年不变的佛系应用-微信终于顺应了潮流。那么，你喜欢这次微信的改变吗？