快生活 - 生活常识大全

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


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