"

                            ✅万博manbext体育app|最新下载 ✅㊣全球最大,最信誉的线上综合平台✅万博manbext体育app|最新下载 ✅千款游戏,砖石级服务,万博manbext体育app|最新下载 ,欢迎各界玩家加入体验!

                                                      "
                                                      微信深色模式看法
                                                      2020/6/2 15:07:39 浏览次数:9345 作者:素马设计

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

                                                      但我们先别急着参与网上的声讨万博manbext体育app|最新下载 ,现在站在设计师的角度万博manbext体育app|最新下载 ,来评价一下迟到的微信深色模式万博manbext体育app|最新下载 。

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

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

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

                                                      所以,夜间模式万博manbext体育app|最新下载 万博manbext体育app|最新下载 ,是一个用来降低屏幕对用户伤害万博manbext体育app|最新下载 ,提升夜间使用体验的特殊模式万博manbext体育app|最新下载 。

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

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

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

                                                      苹果的 DarkMode万博manbext体育app|最新下载 ,并不是一个专门面向深夜环境的模式。官方对此版本的解释万博manbext体育app|最新下载 万博manbext体育app|最新下载 万博manbext体育app|最新下载 ,详见我们翻译的 iOS 官方文档中 112 页万博manbext体育app|最新下载 。

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

                                                      所以了解了这两个模式的区别万博manbext体育app|最新下载 ,我们才能好好展开对微信深色模式的讨论。

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

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

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

                                                      然后再看看其中使用的其它配色万博manbext体育app|最新下载 ,其中主色保持了不变万博manbext体育app|最新下载 万博manbext体育app|最新下载 ,其它应用到图标色彩,都进行了明度的调整万博manbext体育app|最新下载 万博manbext体育app|最新下载 万博manbext体育app|最新下载 ,比如下图案例万博manbext体育app|最新下载 。

                                                      再看看文字的用色万博manbext体育app|最新下载 万博manbext体育app|最新下载 ,也是纯灰色,标题使用 B:85,正文使用 B:65万博manbext体育app|最新下载 万博manbext体育app|最新下载 ,注释使用 B:35(主要用色)。

                                                      而官方使用的文字色彩中,却并不是纯灰色万博manbext体育app|最新下载 万博manbext体育app|最新下载 万博manbext体育app|最新下载 ,除了级的白色以外万博manbext体育app|最新下载 ,其它灰阶的文字是由带有蓝色色相的色彩通过降低透明度来呈现的万博manbext体育app|最新下载 万博manbext体育app|最新下载 万博manbext体育app|最新下载 。

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

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

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

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

                                                      我自己认为的一个非常重要的原因万博manbext体育app|最新下载 万博manbext体育app|最新下载 万博manbext体育app|最新下载 ,就是对于 “夜间模式“ 的兼容。前面不是讲暗黑模式和夜间模式不一样嘛万博manbext体育app|最新下载 ?为什么微信的暗黑模式又去兼容夜间模式了万博manbext体育app|最新下载 。

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

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

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

                                                      如果暗黑模式直接当成夜间模式用万博manbext体育app|最新下载 ,在深夜的环境里万博manbext体育app|最新下载 ,观感会特别差万博manbext体育app|最新下载 ,因为 —— 明暗对比度过高。

                                                      1.jpg

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

                                                      新的深色模式版本中万博manbext体育app|最新下载 ,文字和背景的对比度基本控制在 50 左右万博manbext体育app|最新下载 ,降低了一半万博manbext体育app|最新下载 。

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

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

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

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

                                                      2.jpg

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

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

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

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

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

                                                      原文地址:

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

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

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

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

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

                                                      前面提到的万博manbext体育app|最新下载 ,都是不能解决的问题,这就是做深色模式的挑战万博manbext体育app|最新下载 ,因为用户 UGC 内容是不可控的万博manbext体育app|最新下载 ,官方不可能通过算法直接帮用户强行 “适配”。

                                                      而这些万博manbext体育app|最新下载 ,就是做深色版的难点万博manbext体育app|最新下载 万博manbext体育app|最新下载 万博manbext体育app|最新下载 。

                                                      版权:【注明为本站原创的文章万博manbext体育app|最新下载 万博manbext体育app|最新下载 万博manbext体育app|最新下载 ,转载请注明出处与原文地址万博manbext体育app|最新下载 万博manbext体育app|最新下载 !本站部分转载文章能找到原作者的我们都会注明万博manbext体育app|最新下载 万博manbext体育app|最新下载 ,若文章涉及版权请发至邮箱:office@cnjunnet.cn万博manbext体育app|最新下载 ,我们以便及时处理万博manbext体育app|最新下载 ,可支付稿费万博manbext体育app|最新下载 。向本站投稿或需要本站向贵司网站定期免费投稿请加QQ:957505575】 更多信息请关注微信公众号:cnjunnet  十二君微信:webjunnet

                                                      立即预约
                                                      • 企业网站设计
                                                      • 集团网站设计
                                                      • 网站优化排名
                                                      • 建站+优化推广
                                                      • 微信小程序定制
                                                      • 大型平台开发
                                                      • seo加盟
                                                      • 其他
                                                      • 5K以下
                                                      • 5-10K
                                                      • 10-20k
                                                      • 20-30k
                                                      • 30-50k
                                                      • 50k以上
                                                      Case留言咨询多一份参考万博manbext体育app|最新下载 万博manbext体育app|最新下载 ,总有益处
                                                      • 企业网站设计
                                                      • 集团网站设计
                                                      • 网站优化排名
                                                      • 建站+优化推广
                                                      • 微信小程序定制
                                                      • 大型平台开发
                                                      • seo加盟
                                                      • 其他
                                                      • 5K以下
                                                      • 5-10K
                                                      • 10-20k
                                                      • 20-30k
                                                      • 30-50k
                                                      • 50k以上
                                                      恭喜您~
                                                      留言提交成功o(∩_∩)o
                                                      我们将快马加鞭与您取得联系。
                                                      万博manbext体育app|最新下载