从阿里APP来学习，如何快速适配深色模式。

GoogleI/O和ApleWDC终于在2019年的两次重量级新闻发布会上落幕。在各种新颖的科技信息中，我们会有趣地发现，两家公司都发布了手机系统的DarkModee（Theme），在接下来的几个月里，大众群体可以升级AndroidQ和iOS13体验暗黑色模式的UI界面。预感DarkMode这个词今年就要火了！ICBU设计团队的合作伙伴迫不及待地从有限的零散数据开始快速测试和解释「暗黑模式」以下体验设计进行了总结和探索。仅供抛砖引玉，欢迎大家一起讨论。简单回顾一下近几年UI的发展历程，暗黑破坏神模式并不是一个全新的概念:2018年MacOS10.14应该是大家深有感触的，这款电脑DarkMode已经受到了很多好评；向前追溯，几年前，Windows10长期以来一直支持深色模式；设计师最熟悉的工具软件Adobe系列和Sketch或早或晚开始了深色界面风格；国内神机小米也在最新的MIUI10中增加了深色模式；苹果在iOS11中进行了测试「反转颜色」功能...暗体验的变化已经开始潜移默化的演变。Alibaba.以comapp为例，我们先快速预览暗黑模式下的app界面。Alibaba.以comapp为例，我们先快速预览暗黑模式下的app界面。为什么暗黑模式会受到追捧？为什么IT大佬们把DarkMode纳入自己的设计体系？1.随着人们对智能机器的依赖性越来越强，设备的使用时间也经常覆盖白天和黑夜，因此暗光环境的使用需求确实被放置在桌子上。以设计专业为例，设计师通常在2019年阿里经济体设计师大会上工作5-6个小时。2.屏幕亮度造成的「光污染」长期使用智能机器导致视力下降已成为无可争辩的事实。我们无法摆脱工作和生活中对智能设备的依赖，但我们可以通过设计&减少高频亮屏对眼睛的损害。因此，DarkMode可以降低屏幕的整体视觉亮度，降低对眼睛的视觉压力。3.节能耗电现在主流智能机屏幕越来越大，屏幕越来越亮，OLED、AMOLED已经成为耗电量的主要组成部分，但手机越来越薄。在技术蓄电量无法跳跃发展的前提下，电池只能为轻机身做出让步，因此手机续航能力的问题越来越严重。即使是评价声誉领导者的iPhone系列也不可避免地寻找提高耐久性的最佳解决方案，可以降低DarkMode优势的设备功耗（因为OLED屏幕上的每个像素都是独立发光的，所以像素在显示深色元素时消耗的电流较低，特别是在纯黑色像素点可以完全关闭以达到节能的效果）。4.关注内容颜色有层次关系，深色会在视觉感官上自动后退，浅色部分会向前延伸。这种强烈的层次关系可以让用户更加关注突出的内容和交互操作。特别是信息负责界面内层次关系的合理开放，对提高操作效率起到了明显的作用。5.有趣的信息保护测试发现，在非正视角预览暗黑破坏神模式下的屏幕信息时，信息识别的可视性会降低。当颜色使用得当时，它可以在黑暗模式下发挥一定的信息保护作用，如Alibababa.com交易客户端用户对个人信息有一定的隐私要求。需要特别注意的是，DarkMode不仅用于夜间，也不完全代表夜间模式。除了上述硬件营销和体验需求外，用户也很可能在白天打开黑暗模式，这意味着在明亮的环境下，DarkMode模式下，界面信息交互必须保持清晰的可视性。同时，国际上也有一般的标准来满足身体障碍患者的使用需求。今年谷歌I/O会议上关注的LiveCaption是为了解决特殊群体用户的使用障碍。IOS也是如此&Android的设计语言还侧重于WCAG2.0(Web内容可访问性指南)，以满足色盲色弱用户的使用需求，这些都是设计师需要考虑的。「暗黑」时代已经到来，设计师如何接招？我们用Alibababa.以comapp为例，对Darkmode模式的无线UI升级适应进行了快速研究。1.暗黑色UI不是一个简单的反色处理暗黑色主题是一个主要显示深色界面的弱亮度UI。黑色(深色)通过大面积使用暗黑色主题、减少颜色，降低设备屏幕的亮度，同时满足最低颜色对比度的要求。有助于改善眼睛视觉疲劳，节省电池电量(OLED)、AMOLED屏幕设备使用关闭黑色像素来显示黑色)。结合平台设计语言，如安卓主要是卡层设计理念，那么在黑暗主题下是提高卡层：以最暗的颜色为主要背景，以卡高度的叠加来显示灰度的变化。卡片高度越高，颜色越浅。在iOS13的设计规范中，给出了一组系统级颜色适应光和暗模式下的颜色变化需求。仔细分析会发现，在保证原色系统的基础上，适当增加对比度&降低透明度。举个例子，Alibaba.以亮橙为品牌色的com产品，更要慎用饱和度过高、过深的颜色。在使用品牌颜色时，需要考虑颜色是否适合深色（黑色）背景。品牌延展色(浅色)或辅助色也可用于保持对比度，不易产生疲劳感，还能满足界面的美观。因此，在黑暗模式下降级颜色，以确保清晰度，同时避免明亮和深色仍会形成耀眼的视觉效果，但会降低对比度识别。2.注意用户的视觉体验。以文本颜色比例为例。由于对比度强，传统的浅底深字界面在长时间阅读后容易感到疲劳。黑暗模式的深底浅字减少了屏幕上的光线，满足了最低色彩对比度的要求。但深色背景上的浅色文字也要把握尺度，避免高亮度造成的视觉疲劳。3.「亮&暗」从用户需求出发，顺利切换适配原则，保持常规主题和暗黑主题顺利切换的适配原则。设计方案需要满足常规主题&同时适应暗黑主题:AndroidQ&在iOS13中，用户可以随时在这两种模式之间切换(iOS支持在设定时间内自动切换)。因此，在设计和开发APP时，需要兼顾这两种模式下的体感。4.WCAG2.WCAG20标准(Web内容可访问性指南).0是国际公认的一般标准。在一些西方国家，它甚至是判断产品质量的重要指标。因此，涉及海外用户的应用程序应特别注意这一标准。保持足够的对比度:用深色(黑色)主题色搭配浅色文字，将对比度控制在4.5:在1的基础上，满足了Web内容无障碍指南的AA级要求。在这里，我想和大家分享一个实用的工具，contrastttt，查询对比度-ratio.com测试文本和背景是否符合规范。(注:实际项目中并非所有内容的对比度都是4.5:1以上)使用不同的透明文本来表达层次关系:在深色主题上表达多层文本(浅色)时，可以通过降低文本的透明度来设计。文本透明度越重要，值越低(对比度越高)，非重要文本信息透明度值越高(对比度越低)。5.iOS13&AndroidQ暗黑模式对比(还在研究中…)仔细解读iOS&Android的两套设计语言可以发现，它们的Darkmode策略实际上是不同的，除了基本颜色系统的值之间的一些差距外，更明显的是Accentcolor的不同处理方法。在色彩控制上，iOS13减少了两种模式下颜色的明暗变化。AndroidQ强调，在保证清晰观看体验的前提下，要有更多的灵活性，比如在原色上加40%的白色透明遮盖，以增强深色背景的清晰对比度。缺点可能会使原色在感官上产生很大的偏差。6.初步发现「坑」以电子商务APP为例，浅色图片、视频等图像内容信息不可避免地会有大量的商品图片元素，目前主流图片规范主要是干净的浅色背景，将在下图中形成「Dark」所示产品图区域比较突兀。简单有效的解决方案还需要不断的测试，比如：阿里达摩院智能算法抠图工具「顽兔」为了满足不需要背景颜色的需求，可以实现产品图透明底。开发团队视角，黑暗模式实现成本AndroidQ&由于iOS13采用不同的深色视觉方法，如果遵循各自平台的官方规范进行适应，很可能导致两端同一应用程序的品牌视觉差异较大，不利于为用户建立统一严谨的品牌头脑。因此，您可以尝试follow一端的标准，并更改另一端。或者跳出双方的官方规范，形成自己的深色视觉系统，需要根据每个产品的情况独立选择。暗黑破坏神模式对开发的工作量也是一个巨大的挑战，特别是大型复杂的应用程序，以及Native、Weex、在Flutter等代码结构中，做DarkMode适应并不容易。总之，比如2016年「刘海屏」同样，不管你喜不喜欢，它都会这样闯入你的世界。DarkMode带来的黑暗体验必然会让视觉设计师花费一些心思。想象一下，当用户将手机切换到黑暗模式，舒适地享受黑暗系统的舒适和宁静时，打开一个没有适应的应用程序就像深夜睡觉时突然打开灯一样，他们会痛苦地大喊大叫「关灯」。大众用户的接受度还需要时间来验证DarkMode会带来多少创新浪潮。虽然现在只有分散的官方间谍照片，但也缺乏详细的官方规范文件。但带着与时俱进的心态，ICBU设计将与技术团队合作，开始研究和开发DarkMode的相应解决方案。