满象网络 满象网络
  • 首页
  • 运营知识
    • 用户运营
    • 电商运营
    • 社群运营
    • 产品运营
  • 行业洞察
  • 产品相关
    • 产品经理
    • 产品设计
    • 评测分析
    • 交互体验
    • 数据分析
  • 营销干货
    • 品牌营销
    • 广告文案
    • 增长黑客
    • 活动策划
    • 竞价推广
  • 职场必看
    • 职场攻略
    • 企业战略
  • 好文分享
  • 行业动态
  • 爱思动态
  • 注册
  • 登录
首页 › 产品相关 › 交互体验 › 微信黑暗模式发布,UI设计细节完全分析及体验

微信黑暗模式发布,UI设计细节完全分析及体验

高幕
2020-12-01 19:22:13交互体验阅读 151

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

微信黑暗模式发布,UI设计细节完全分析及体验-满象网络

如何开启微信黑暗模式?

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

微信黑暗模式发布,UI设计细节完全分析及体验-满象网络

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

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

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

微信黑暗模式发布,UI设计细节完全分析及体验-满象网络

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

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

聊天列表页面

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

微信黑暗模式发布,UI设计细节完全分析及体验-满象网络

图标颜色分析对比

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

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

微信黑暗模式发布,UI设计细节完全分析及体验-满象网络

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

微信黑暗模式发布,UI设计细节完全分析及体验-满象网络

公众号文章页面对比

微信黑暗模式发布,UI设计细节完全分析及体验-满象网络

微信黑暗模式发布,UI设计细节完全分析及体验-满象网络

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

朋友圈界面对比

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

微信黑暗模式发布,UI设计细节完全分析及体验-满象网络

聊天页面

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

微信黑暗模式发布,UI设计细节完全分析及体验-满象网络

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

微信黑暗模式发布,UI设计细节完全分析及体验-满象网络

弹层及搜索框

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

微信黑暗模式发布,UI设计细节完全分析及体验-满象网络

最后的总结(黑暗模式设计思路)

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

微信黑暗模式发布,UI设计细节完全分析及体验-满象网络

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

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

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

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

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

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

赞赏 赞(0)
抖音投放,选FEED流还是DOU+?
上一篇
产品经理的产品观:用户
下一篇

请登录以参与评论

现在登录
暂无评论
近期文章
  • 新能源充电站能赚钱吗?
  • 你怎么看待打工临时夫妻现象?
  • 没有这两种能力,赚钱就是空谈
  • 闲鱼运营学到这些技巧你就离成功更近了!
  • QQ群最新排名优化
  • 没有门槛的项目,真的能赚到钱吗?
  • 当B站“不再二次元”,破圈易,盈利难!
  • 直播间十大话术总结,直播间的互动话术你懂了几个?
聚合文章
11条核心攻略,助你做好小红书运营
增长黑客:涨粉和刷屏,是我的终极使命
微信朋友圈优缺点浅析,学会正确的发圈姿势
复盘我最失败的创业项目
我来CSDN的这一年
头部电商的中台实践总结
锤子T2是老罗情怀济世的最后机会
客户覆盖有效性模型:CCCM(上)
B端交互设计过程中的思考
2021-04-19 19:26:54
245 0 0
一文读懂“人本主义心理学中洞察人性”的马斯洛需求层级理论
2021-04-06 19:27:01
369 0 0
HSB色彩模式,让配色有理有据
2021-04-03 19:27:36
180 0 0
交互设计中缩短用户路径的方法与案例
2021-04-01 19:27:17
294 0 0
  • 0
  • 0
Copyright © 1992-2023 满象网络. Designed by nicetheme.
未经许可,请勿转载 豫ICP备2020024986号-2
  • 首页
  • 产品相关
    • 交互体验
    • 产品经理
    • 产品设计
    • 数据分析
    • 评测分析
  • 好文分享
  • 职场必看
    • 企业战略
    • 职场攻略
  • 营销干货
    • 品牌营销
    • 增长黑客
    • 广告文案
    • 活动策划
    • 竞价推广
  • 行业洞察
  • 运营知识
    • 产品运营
    • 用户运营
    • 电商运营
    • 社群运营
  • 行业动态
高幕
微信公众号:品牌运营,商业模式、产品设计、品牌运营、传播整合、营销策划、经营管理、客户管理、资源管理。
1832
文章
0
评论
0
喜欢