微信深色模式可爱否。

微信在3.23号上线了传闻已久的 "暗黑版",用来适配 iOS 的深色模式,相信不少同学已经安装并体验上了。微信每有一次大动作都会引发全网性的讨论,而针对设计上的调整,往往只会迎来一片骂声。比如我们看看知乎中讨论的内容,感觉民愤都快压抑不住了。

微信深色模式可爱否(图1)

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

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

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

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

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

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

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

然后再解释一下苹果的深色模式,深色模式是 iOS13 后才推出的模式,我们之前也写过对应规范的介绍,感兴趣的同学可以点击下面的图片链接直接阅读。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

微信深色模式可爱否(图2)

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

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

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

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

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

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

微信深色模式可爱否(图3)

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

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

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

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

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

原文地址:

https://www.zhihu.com/question/378027349/answer/1069072154

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

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

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

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

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

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

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/227094.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2023年2月22日 21:01
下一篇 2023年2月22日 21:01

相关推荐

  • 图标设计怎么做?从6方面详解图标设计基础知识。

    做好图标设计是一个入门级 UI 设计师的必备技能之一,图标是界面中非常重要的组成部分,在实际的工作中,即便是一些工作多年且有一定经验的设计师,也很难保证自己设计的图标有多么完美。不同位置的图标在界面中所…

    2023年3月1日 SEO操作
    030
  • 如何设计折叠屏?超详细的折叠屏设计指南。

    最近做了HUAWEI Mate Xs手机折叠屏的相关设计,借此机会「趁热打铁」分享一手界面操作体验、适配技巧分享给大家,希望对各位设计师同学有所帮助和参考。在这里我使用的是华为折叠屏(HUAWEI Mate Xs 上市时间2020年…

    2023年3月1日 SEO操作
    05
  • WordPress优化:提升网站速度和用户体验。

    提升WordPress网站的速度和用户体验对于提高搜索引擎排名、降低跳出率以及增强用户满意度至关重要,以下是一些技术性建议,帮助您优化WordPress网站。 一、选择合适的主机提供商 选择一个性能优秀的主机对网站速度…

    2024年7月18日
    00
  • 通过网站布局创造难忘的用户体验。

    网站建设的主要目标之一是设计出用户会记住的东西。尽管这个目标听起来很简单,但却很难实现。每个利基市场都有成百上千个网站,所有这些网站都在争取观众的兴趣和关注。 内容和设计是定义站点是否保留在用户内存中…

    2023年2月20日 SEO操作
    00
  • 小编教你企业公司网页设计。

    企业公司网页设计是一个复杂而细致的过程,它不仅需要设计师具备良好的审美观和创新思维,还需要对用户体验、网站功能和搜索引擎优化等方面有深入的理解和掌握,以下是一些关于企业公司网页设计的基本原则和技巧。 …

    2024年6月30日
    00
  • 用户体验设计和网页设计之间的主要区别。

    每个人都喜欢能够轻松可靠地充分有效地执行的网站。当涉及到网站设计时,良好的功能和性能常常让位于视觉吸引力。当网站无法按预期运行时,缺乏对用户体验的深思熟虑可能会让用户感到失望。 在创建有效的商业网站时…

    2023年3月7日
    01
  • 今日分享WordPress优化:提升网站速度和用户体验。

    提升网站速度和用户体验是WordPress网站优化的重要目标,一个加载迅速且易于导航的网站可以显著提高用户满意度,减少跳出率,并有利于搜索引擎优化(SEO),以下是一些关键的WordPress优化策略: 1. 选择性能优秀的…

    2024年7月12日
    00
  • X缩写有几种类型?它重要吗。

    创造像"用户体验"或首字母缩略词" UX"之类的术语的问题之一是,它为其他与体验相关的新潮缩写词打开了进入网页设计词典的大门。CX, DX, EX, HX, JX, PX, UX,(U)XD…所有这些真的有必要吗?虽…

    2023年2月20日
    01

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息