亿软阁微营销编写引言：现如今，手机微信现已变为了大伙儿日常必不可少的交友软件，不论是便捷水平或是客户体验，给各位的体验感都非常好。在吵到议论纷纷以后，iOS版的手机微信“暗黑模式”总算来啦。文中创作者带上大家感受手机微信的关键点，看微信 Dark Mode 的设计方案究竟规不标准。
前不久在科学研究 Dark Mode，碎片时间把手机微信各网页页面手机截图测了一下文字颜色亮度对比度。
有关这一项标准的达标是否，现阶段国际性常用的参照规范便是导言里这套 WCAG 2.0，这也是一套由威斯康辛大学麦蒂生校区、W3C(万维网联盟)、Google等组织科学研究工作人员于2008年12月11日编写公布的web內容无障碍设施指引。
它界定了多种有关听觉系统、视觉效果、互动个人行为等方面的标准规范，可以使残障人士可以成功的浏览网页页面并顺利获得內容。这种规范被量化分析为AAA、AA、A三种取得成功级别，如设计方案都不符则被觉得是Fail。
大家根据各种各样线上亮度对比度检测工具得到的 AAA、AA、AA18、DNP 这种結果便是全部管理体系的一部分，有兴趣的朋友可以掌握 W3C 受权的译版和全文。
上边图示中4个标识各自相匹配AAA(亮度对比度不低于7:1)、AA (对比度不低于4.5:1)、AA18(亮度对比度不低于3:1)、小红点(未根据)4种情况叙述。在其中AA18需达到大文字字体大小的标准，最少为18pt或14pt字体加粗。
返回文章标题，大家来变大看看微信的关键点。图挺多，下边只放一部分重要网页页面的颜色亮度对比度检测結果，可供各位参照手机微信不一样等级信息内容的设计方案逻辑性，及其一起来看看究竟有哪些方面未根据WCAG 2.0标准。
大眼见以往，许多红点！
仔细观看对比結果发觉，除开次级线圈协助表明、input-box提醒文字、置灰情况文字之外，在其中仍有好几处亮度对比度低于3：1的文字，未根据WCAG 2.0规范。我坚信微信团队一定有谨慎的考虑，实际缘故咱也不敢问，咱也只有从设计方案的角度去逐级讨论。
总的来说，WCAG 2.0实质上是一份多元性设计方案指引，并并不是标准底线，遵循这种标准，web內容更非常容易为众多残废人员所接纳，也可让普通用户更非常容易浏览。
相反想，手机微信以內容散播为主导的产品属性决策了它的文字等级是丰富多彩的，假如全部文字都合乎AA18以上的取得成功规范(即亮度对比度≥3:1)，必定会造成等级(尤其是协助表明创意文案)扁平化设计，而拉不动视觉效果优先，变向提升了网页页面中的信息内容相对密度。
猜想也有一种概率是WCAG 2.0修定于2008年，那时的分辩率远小于如今的326ppi、458ppi，因而今日的机器设备在同样物理学规格下表明大量清晰度，提高了画面质量和辨识度，因此放弃了亮度对比度。
因而确实必须彻底遵循这套规范吗？好像并不是，那大家必须遵循什么？
归根结底，大家讨论亮度对比度此项主要参数，除开反映设计方案关爱之外，大量是可以用于科学研究信息内容等级。即然谈到等级，那么就不可以忽略上边手机微信深/浅二种形式的对照实验了。
人脑趋于觉得同一个网页页面中同样部位的信息内容，无论在什么色彩模式/个性皮肤下的等级都应该是一致的，代表着这种文字信息内容在深/浅二种方式下的亮度对比度应当一致或类似，或最少处在同一个取得成功规范（WCAG 2.0）。
但就算手机微信那样的人民商品，若存在深/浅二种方式下亮度对比度没有一个取得成功的标准的状况，我觉得仍然存有提升的室内空间，具体地址参考图中里加★的标明（大量加★标明可以上滑看组图）。
一、由亮度对比度引起的思索
一定会有些人跳出来而言“我认为微信夜间模式非常好用啊，亮度对比度比iPhone内置的温和多了，一点也不晃眼！”没有错，亮度对比度减少是可以在低光条件下具有一定保护视力功效，降低眼睫状体的过多收拢，缓解视觉疲劳。
这也大概率是手机微信为什么没有遵循iOS提议的深色模式颜色规范，严苛地说，手机微信Dark Mode做的是黑夜模式，而iPhoneDark Mode做的是主题元素。
风水玄学，就玄在这个地方。
iPhone很聪慧，iOS 13的Dark Mode在上年公布的情况下，官方网并沒有说这也是黑夜模式，官方网站得出的创意文案也含糊不清，非常容易使人解读为这就是小米的黑夜模式。
但实际上早在2016年iOS 9.3就早已添加了夜览作用，那时沒有深色模式，这一说白了“夜览”打开之后显示屏会照亮一层暖色调led背光，因为是物理学完成，因此手机截图没法见到。我升温ps滤镜大约仿真模拟了一下，实际效果是那样。
亮度对比度降了没有？
——不太好说。
保护视力吗？
——护。
暖色调可以有效的过虑400~450nm的短波蓝光，降低这种高效率能量光对视网膜黄斑部的危害，大家平常配近视眼镜用的抗蓝光镜片，也是这一基本原理。仅仅我们在大白天非常少触碰到这一股票波段的高清蓝光，因此大多数状况下，“保护视力”方式就被歪曲变成“晚间”方式，实际上并不肯定。
因此要怎么理解苹果的做法？认可iOS深色模式的较大产品卖点是环保节能，由于像素数在表明纯黑色的情况下不闪光。猜想iPhone也不会官方发布另一套弱比照的“夜间护眼模式”，那般相当于打倒了以前的市场营销策略，自身抽脸。
对于你们要的“夜间护眼模式”，你们就用“深色模式 夜览”自身充分发挥一下吧，总之iOS系统应用也全是java工具APP，20秒用完即走，是吧？因此深色模式、护眼设置、黑夜模式，你们仨相互之间了解吗究竟？
这也是整件事最玄的地区。
二、情景
往往玄，是由于逻辑性在同一个异次元里没法自洽。
iOS的深色模式是白底黑字的个性皮肤，是兼具了日夜情景的强比照时尚潮流设计风格；iOS的护眼设置是提升led背光暖屏；iOS的黑夜模式是把前二者累加。
手机微信的深色模式是灰底灰字的设计理念，一定水平上保护视力，一定水平上合适晚间。为何要加“一定水平”？由于有关这件事情你如果去问眼科专家，他一定会对你说晚上尽量避免玩手机，假如一定需看，提议在卧室床开一盏暖黄灯泡。
拆卸到这儿，大家会发觉深色模式、护眼设置、黑夜模式，实际上如同三种语言表达，都各有自身可用的情景，相互之间一会儿包括一会儿交叉式，像不一样异次元的人们在同一个时光遇见，平行宇宙一样。假如尝试简略归纳一下每个情景下的特性和差别，结果大约是那样：
- 深色模式：是一种以节电为核心优势的主题元素，视觉效果感受与众不同，应用极强的颜色亮度对比度以确保在强光照条件下也可以轻易鉴别內容。在该方式下必须达到保护视力的设计规范，或保存保护视力主要参数的配备通道。
- 黑夜模式：为晚间及暗光自然环境而制定的深棕色主旋律页面，应用强烈推荐利环值范畴的背景颜色与前景色（可参照腾讯官方ISUX以前汇总过的一套设计方法），应用较差的颜色亮度对比度减少对眼晴的刺激性，做到保护视力目地。
- 护眼设置：必须与此同时兼具日夜的高低光环境危害，选用符合规定的液晶屏和较差的显示器亮度、颜色亮度对比度以达到降帧闪、抗蓝光等保护视力要求，在深/浅二种方式下都必须考虑到保护视力的要求。
三、颜色语言表达
理清三者间的主脉，就能迅速爬取大家必须的情景设计方案规则，这有利于我们在不一样方式下更确切地界定结构化分析怎样机构、视觉效果等级怎样主要表现。而在决策等级关联的众多要素中，颜色是一项重要因素。
iPhone在其开发人员网址中给予了iOS 13的UI Design Resources源代码，在读取深/浅二种方式下的颜色值以后，我们可以深究iPhone的颜色配备特性。
这一版本号的手机微信，特别是在在有五颜六色管理体系上并没选用iPhone的提议颜色，都没有应用分级调节清晰度、加上背景颜色蒙版等实际操作，反而是发布了一套独属的颜色语言表达。
手机微信或是想法很细致地将icon管理体系的有五颜六色做等级分类解决，手机通讯录tab内的4大作用通道icon是脸形，等级和视觉效果份量要远高过发觉tab和我tab内的线形icon，因此在深/浅二种方式下维持统一的颜色值，保存他的颜色辨识度，防止客户造成视觉记忆断块，危害作用正确引导。
而别的tab的线形icon是对文字文章标题的协助表述，只作词义化表明，等级十分弱，因而在深/浅二种方式下配备了2套合适自然环境气氛的颜色值。大家看下一部分有五颜六色部件的样版取色結果（颜色值来自手机截图，第三方），品一下这其中的设计方案逻辑性。
全局性看2套颜色的差别或是蛮大的，比iOS 13的显著多了。“微信朋友圈”icon的8种色乃至连色彩都能够不一样。
细心对比还能发觉一些眉目，例如“搜一搜”和“付款”icon在深/浅二种方式下的颜色值彻底一样，而其余的icon颜色值在二种自然环境里都不一样；及其“个人收藏”和“礼包”icon的蓝色色值在浅色系方式下不统一。
不好说微信是有意为此或是标准沒有维护保养好，如果有手机微信的好朋友见到这儿，期待可以多多的改错，大伙儿还可以然后这一话题讨论再次向下思索。
四、最终
当期聊了这么多，从WCAG 2.0简述逐渐引出来手机微信深色模式下颜色亮度对比度的设计方案剖析；沿着这一话题讨论发掘深色模式、黑夜模式、护眼设置三者的选择差别和情景设计方案规则；最终返回手机微信的设计方案，对焦颜色管理体系在深色模式下的等级表述特性。
看起来包含了许多层面信息内容，实际上亮度对比度也好，情景也好，颜色也好，具体全是紧紧围绕一个问题在兜转：商品的构造逻辑性、组织原则和信息内容等级关联。在深色模式这一话题讨论运行以前，有好朋友劝过我慎写，假如要逐个商品逐级拆卸，剥开揉碎了讲，确实够写上大半个月。
做了Dark Mode或是明年要做的好朋友，期待当期內容可以为你们给予一些不一样的构思，在深棕色、晚间、保护视力三种情景中找到合适自身产品诉求的设计方位，也许是提升总体高效率的第一步。
译版：www.w3.org/Translations/WCAG20-zh/
全文 – www.w3.org/TR/WCAG20/
文中由 @赏酒二两 原创设计公布于每个人都是产品运营，未经同意许可，严禁转截。
题图来源于 Unsplash，根据CC0协义
<
