微信暗黑时代来了但不是换个黑色界面这么简单

　　前两天因为苹果要求所有APP适配iOS13的夜间模式，微信说有望在下个版本支持iOS系统的的黑暗模式，不负众望又又又又又上了一次热搜。微信界面变黑色
　　那么，作为这两年兴起并标配暗黑模式功能，你了解多少？各位设计狮能够设计出一个好用的暗色模式吗？
　　微信界面变黑色夜间模式的发展趋势
　　现在人们的压力来自于各方面，再加上每天长时间使用各种电子产品，如电脑、手机、电视、pad等，非常容易造成眼睛的不适。因此，在夜晚或者黑暗的环境中，长时间对着白花花刺眼的屏幕更容易容易引起视觉疲劳，应用的夜间模式因此而诞生。
　　当然了，现在主流的智能机屏幕越做越大，屏幕越做越亮，成了耗电的大头，而手机却越来越薄，电池量伤不起啊，而夜间模式能有效地节能省电。一举多得的感觉有木有啊
　　暗黑时代已到来，设计师如何接招？
　　下面是大神王羽枫（阿里设计），以Alibaba。comApp为例，讲解如何快速研究了DarkMode模式的无线UI升级适配。微信界面变黑色
　　1。暗黑UI不是简单的反色处理
　　暗黑主题是一种弱亮度UI，主要显示深色的界面。暗黑主题通过大面积使用黑色（深色）、颜色的减少减弱，降低了设备屏幕发出的亮度，同时也满足了最低色彩对比度的要求。
　　结合终端去看，比如Android以卡片层级为主的设计思路，那么在黑暗主题下就是提高卡片的层级：使用最暗的颜色作为主要背景，利用卡片高度的叠加来显示灰度的变化。卡片高度越高，颜色越浅。
　　在iOS13设计规范中，给出了一组系统级别颜色适配光、暗黑模式下的色彩变化需求，仔细分析会发现在保障原色系基础上，适量增加对比度降低透明度。微信界面变黑色
　　举个例子，Alibaba。com以亮橙为品牌色的产品，更要慎用饱和度过高和过深的颜色。在使用品牌色时，需要考虑到颜色是否适合于深色（黑色）的背景使用。也可以使用品牌延展色（浅色）或辅助颜色，既保持了对比度，不易产生疲劳感，也满足了界面的美观。所以暗黑模式下对色彩做了降级处理，保障清晰度的同时避免亮色与暗色依然会形成刺眼的视觉效果，反倒会降低对比识别度。
　　2。注重用户的观感体验
　　以文字颜色配比为例，传统浅底深字的界面，因为对比度较强，阅读时间长后眼睛容易产生疲劳感。通过黑暗模式的深底浅字，减少了屏幕中发出的光，也满足了最低色彩对比度要求。但暗色背景上的浅色文字也要把握尺度，避免亮度过高会产生的视觉疲劳。微信界面变黑色
　　3。亮暗顺畅切换适配原则
　　微信界面变黑色从用户需求出发，保持常规主题和暗黑主题的流畅切换的适配原则。
　　设计方案需要满足常规主题暗黑主题的同时适配：在AndroidQiOS13中，用户可能随时在这两个模式间进行切换（iOS支持设置时间段内自动切换）。因此需要在设计和开发APP的时候，同时兼顾到这两个模式下的使用体感。
　　4。WCAG2。0标准（Web内容可访问性指南）
　　微信界面变黑色WCAG2。0是国际公认的通用标准，在某些西方国家甚至作为评判产品优劣的重要指标，所以涉及到有海外用户的App尤其要关注这个标准。
　　保持足够的对比度：利用深色（黑色）主题色来配上浅色文字，将对比度控制在4。5：1的基础上，满足了Web内容无障碍指南的AA级要求。微信界面变黑色
　　这里给大家分享一个查询对比度的实用工具Contrastratio。com来检测文字和背景是否符合规范。（注意：在实际的项目中也并非所有的内容的对比度都在4。5：1之上）
　　使用不同透明的文字来表达层级关系：在深色主题上进行多层文字（浅色）表达时，可以对文字进行降透明度的方式来设计，越重要的文字透明的数值越低（对比度越高），非重要的文本信息透明的数值越高（对比度越低）。
　　5。iOS13AndroidQ暗黑模式对比
　　仔细解读iOSAndroid两套设计语言可以发现它们的DarkMode策略其实有所不同，除了在基础色彩体系的数值有些差距外，更明显的是在Accentcolor的不同处理方式。微信界面变黑色
　　iOS13在颜色把控上减少亮暗两种模式下色彩产生的较大幅度变动。
　　AndroidQ则强调保障清晰观看体验的前提下，要具备更多的灵活性，比如在原色彩上面加40的白色透明遮罩，以增强在深色背景上的清晰对比度。缺点可能会让原色彩在感官上发生较大的偏差。
　　5。初步发现的坑
　　微信界面变黑色浅色为主的图片、视频等图像内容信息
　　以电商APP为例，不可避免有大量商品图片元素，并且在目前主流图片规范引导的是干净的浅色底为主，就会形成下图中Dark所示，产品图区域比较突兀。简单高效的解决方案还需要不断测试，如：阿里达摩院的智能算法抠图工具顽兔也许可以实现产品图透明底，以配合不用背景颜色的需求。微信界面变黑色
　　微信界面变黑色开发团队视角，暗黑模式实现成本
　　AndroidQiOS13因为采用不同的暗色视觉方式，所以如果遵循各自平台的官方规范做适配，极有可能导致同一个APP在两端的品牌视觉有较大差异，不利于给用户建立统一严谨的品牌心智，所以可以尝试follow其中一端的标准，改动另一端。或者跳出两边官方规范自成一套暗色视觉体系，需要根据每个产品的情况自主选择。微信界面变黑色
　　暗黑模式对开发的工作量也是一个不小的挑战，尤其是规模庞大的复杂APP，同时有Native、Weex、Flutter等代码结构时，想做DarkMode适配不是一件简单的事情。
　　总之，如2016年的刘海屏一样，不管喜不喜欢，它就这样闯入你的世界。微信界面变黑色