赞助商
立即赞助

用阿里巴巴APP的案例,教你如何快速适配「深色模式」

UI设计3年前 (2021)更新 流光
2.6K 0 0

2019 年两场量级发布会 Google I/O 和 Apple WWDC 终于落下帷幕。在各新奇技资讯大家会有趣地发现两家公司不约而发布了手系统 Dark Mode(Theme),大众群体可以在随后几个月内升级 Android Q 和 iOS 13 体验暗黑色模 UI 界。

预感Dark Mode这个词今年要火了!

ICBU 设计团队小伙伴们迫不及待地从有限零散资料入手快速试验解读,「暗黑模」下体验设计进了结和探索。仅供抛砖引,欢迎起探讨。

简单顾几年 UI 发展历程,暗黑模式实并是全概念:

  • 大家感知比较深应该是2018年 MacOS 10.14,这个电脑端 Dark Mode 已经受到不少好评;
  • 再往前追溯,前几年的 Windows10 早就支持了暗色模式;
  • 还有计最熟悉的工软件 Adobe 系列和 Sketch 都或早或晚的开始了暗色界面风格;
  • 内神机小米也新 MIUI 10 中加入了深色模式;苹果在 iOS11 验了「反转颜色」功能……

暗色体验的转变早已开始潜移默的演变。

以 Alibaba.com App 为例,先快速预览下暗黑模式下的 App 界面。

用阿里巴巴APP的案例,教你如何快速适配「深色模式」

暗黑模式为什么受到追捧?

IT 大佬们为何纷纷把 Dark Mode 纳入自的设计体系?

1. 暗光环境使场景

随着人们对智机的依赖性越来越强,设备使时间频覆盖了白天、黑夜,暗光环境的使需求被实实在在的摆到台面上。

以计职业为例,2019 年阿经济体计大会上享的数据结果,计群体通常要在晚上工作 5-6 个。

用阿里巴巴APP的案例,教你如何快速适配「深色模式」

2. 屏幕亮成的「光污染」

长时间使智机导致视降已经成为争的实事,我们无法摆脱工作生中对智设备的依赖,但是可通过设计&技术手降低频亮屏对眼睛的损害。 Dark Mode 可降低屏幕的整体视觉亮,减对眼睛的视觉压。

3. 节耗电

现在流的智机屏幕越做越大,屏幕越做越亮,OLED、AMOLED 都成了耗电大头,而手机却越做越薄,电池在本身技术蓄电量跳跃式发展的前只为轻薄机身做步,手机续航的问题日益严峻。即使是评口碑领头羊的 iPhone 系列免要为升续航寻最优解决方案,可降低设备耗电速的 Dark Mode 优势突显来(由于 OLED 屏幕中每个像素都是自发光,在显示深色元素时像素消耗的电流更低,尤在纯黑颜色时像素点可全闭达到省电的效果)。

4. 专注容

色彩具有层级系,深色会在视觉感官上自后退,浅色分则会向前延展,这样的对强烈的层次系可户更注重被凸显来的容和交互操作。尤在信息负责界面层级系的合拉开对操作效率都有明显的促进作。

5. 信息保护

有趣的测试发现,暗黑模式的屏幕信息在非正视角预览时,信息的辨别可视性反倒会降低。当色彩得当,可暗黑模式起到一定的信息保护作,如 Alibaba.com 贸易客户端户对个人信息具有一定的隐私性需求。

需要别注的是 Dark Mode 不只是为夜晚使用,它也不完全代表夜间模式。除了前面到的硬件营销和体验需求,户极有可在白天打开暗黑模式,这就意味着 Dark Mode 模式必须界面的信息交互在亮光环境依然保持清晰的可视性。

同国际上有针对足身体障碍人群的使用需求的通用标准,今年 Google I/O 大会上重点讲解的Live Caption 就是为解决殊人群用户的使用障碍。同在 iOS & Android 的计语言中也在重点说足色盲色弱用户的使用需求的 WCAG 2.0(Web内容可访问性指南),这些都是需要计着重考虑的地方。

用阿里巴巴APP的案例,教你如何快速适配「深色模式」

「暗黑」时代已到来,设计师如何接招?

我们 Alibaba.com App 为例,快速研究了 Dark Mode 模式的无线 UI 升级适配。

1. 暗黑UI不是简单的反色处理

暗黑题是一种弱亮 UI ,要显示深色的界面。暗黑题通过大面积使黑色(深色)、颜色的减减弱,降低了设备屏幕发的亮,同时满足了最低色彩对的要求。有助于改善眼睛视觉疲劳,同时节省电池电量(具有 OLED、AMOLED 屏幕的设备利闭黑色像素来显示黑色)。

结计语言去,比如 Android 以卡片层为主的计思路,那在黑暗主题下就是提高卡片的层:使用最暗的颜色作为主要背景,利用卡片高度的叠加来显示灰度的变化。卡片高度越高,颜色越浅。

用阿里巴巴APP的案例,教你如何快速适配「深色模式」

iOS 13 计规范中给了一组系统别颜色适配光、暗黑模式下的色彩变化需求,仔细析会发现在保障色系基础上,适量增加对比度&降低透度。

举例子,Alibaba.com 以亮橙品牌色的产品,慎用饱度过高过深的颜色。使用品牌色时,需考虑到颜色否合于深色(黑色)的背景使用。也可以使用品牌延展色(浅色)或辅颜色,既保持了对比度,不易产疲劳感,也满足了界面的观。所以暗黑模式下对色彩了降级处理,保障清晰度的同时避免亮色与暗色依然会形刺眼的视觉效果,反倒会降低对比识别度。

用阿里巴巴APP的案例,教你如何快速适配「深色模式」

用阿里巴巴APP的案例,教你如何快速适配「深色模式」

2. 注重用户的观感体验

字颜色配为例,传统浅深字的界面,因为对较强,阅读时间长后眼睛容易产生疲劳感。通过黑暗模式深底浅,减少了屏幕发出,也满足了最低色比度要求。暗色背景上浅色文也要把握尺度,避免亮度过高会生视觉疲劳。

用阿里巴巴APP的案例,教你如何快速适配「深色模式」

用阿里巴巴APP的案例,教你如何快速适配「深色模式」

3. 「亮&暗」顺畅切换适配原则

从用户需求出发,保持常规主题暗黑主题的流畅切换的配原则。

设计方案需要满常规主题&暗黑主题的同时适:在Android Q & iOS13 中,用户能随时在两个模式间进行切换(iOS支持设置时间段内自动切换)。因此需要在设计和开 APP 的时,同时兼顾到两个模式下的使用感。

用阿里巴巴APP的案例,教你如何快速适配「深色模式」

4. WCAG 2.0 标准(Web内容可访问性指南)

WCAG 2.0 际公认的通用标准,某些方家甚至作判产品优劣的重指标,所以涉及到海外用户的 App 尤其关注这标准。

持够的对比度:用深(黑)主题来上浅文字,将对比度控在 4.5 : 1 的基础上,满 Web 内容无障碍指的 AA 级要求。

这里大家分享个查询比度实用工具 Contrast-ratio.com 来检测文和背景是否符合规范。(注意:在实项目也并所有内容比度都在 4.5 : 1 上)

使同透明的字来表达层级系:在深色题上进行多层字(浅色)表达时,可对字进行降透明的方式来设计,越重要的字透明的数值越低(对越),非重要的本信息透明的数值越(对越低)。

用阿里巴巴APP的案例,教你如何快速适配「深色模式」

5. iOS 13&Android Q暗黑模式对比(还在研究中…)

仔细解读 iOS & Android 两套设计语言可以发现它们 Dark Mode 策略其实有所不,除了在基础色体系数值有些距,更明显是在 Accent color 不处理。

iOS 13 在颜色把控上减亮暗两种模式色彩产生的较大幅变。

Android Q 则调保障清晰观体验的前提下,要备更多的灵活性,比如在色彩上面加 40% 的色透遮罩,以增在深色背景上的清晰对比度。缺点可能会让色彩在官上发生较大的偏差。

6. 初步发现的「坑」

浅色为的图片、视频等图像容信息

电商 APP 为例,可避免有大量商图片元素,并且在目前流图片规范引导的是干净的浅色为,就会形成图中「Dark」示,产图区域较突兀。简单效的解决方案还需要断测试,如:阿里达摩院的智算法抠图工具「顽兔」许可实现产图透明,配合背景颜色的需求。

用阿里巴巴APP的案例,教你如何快速适配「深色模式」

开发团队视,暗黑模实现成本

Android Q & iOS 13 为采用不暗色视觉,所以如遵循各自平台官规范做适配,极有可能导致个 APP 在两端品视觉有较大异,不利于用户立统严谨品心智,所以可以尝试 follow 其端标准,改动另端。或者跳出两边官规范自成套暗色视觉体系,需要根据个品情况自主选择。

暗黑模式对开发的工作量是一个小的挑战,尤是规模庞大的复杂 APP,同时有 Native、Weex、Flutter 等代码结构时,想做 Dark Mode 适配是一件简单的事情。

用阿里巴巴APP的案例,教你如何快速适配「深色模式」

用阿里巴巴APP的案例,教你如何快速适配「深色模式」

用阿里巴巴APP的案例,教你如何快速适配「深色模式」

总之, 2016 年的「刘屏」一样,不管喜不喜欢,它就样闯你的世界。

Dark Mode 带来暗黑体验势必要让视觉设计师们耗费番心思。试想用户把手切换到暗黑模下舒服地享受着暗色系舒适宁静时,打开个没有做适配 App,会犹如深夜睡觉突然被打开灯,心里会痛苦地呐喊「关灯」。

Dark Mode 到会带来多大的革浪潮,大众户接受都还需要时间的验证。虽然现在只有零散的官方谍照,缺乏详尽的官方规范档。但是抱着与时俱进的心态,ICBU 设计将联合技术团队开始对 Dark Mode 做对应解决策略的研究开发。

欢迎关注「阿巴巴国际UED」公众号:

用阿里巴巴APP的案例,教你如何快速适配「深色模式」

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

声音设计长久以来一直在影视、音乐、游戏领域发展与发挥价值,作为在阿里巴巴的体验设计师,以前并没有太多的机会去以声音作...
AlibabaDesign
大家都知道,设计一定没有单纯的「感性的设计」与「理性的设计」。 多年以前,我在一本书中读到过这么一段对于绘画和设计异...
夜间模式
2019 年是造物节的第四年,也是品牌设计的第四年,前面每一年设计师们都会利用自己的认知,理解和专业给出各自的答案。今年造...
AlibabaDesign
网易UEDC – 姜永超 :习惯了浅色界面的设计?本文将带你了解深色界面的设计,聊聊深色界面下的设计细节,使你设计的深色界面...
UI 设计
「 罗马不是一天建成的!」 天猫双十一的奇迹,也不是一蹴而就。 奇迹的背后,是所有人十年如一日的自我挑战、追求极致的共...
AlibabaDesign
于是在淘宝设计第一期对外的圆桌讨论会中,我们请到了4 位淘宝资深「体验设计」招聘面试官,以及 18 年校招加入的体验设计师...
AlibabaDesign
过去的一个月,2020年阿里实习生春招正在火热进行中,上周我们也征集了一波同学们关于作品集的问题,收到了同学们强烈的响应 ...
AlibabaDesign
凤凰新闻 APP 在 2020 年上半年完成了 Dark Mode 适配,本文主要从规范、设计和实现的角度对整个项目的落地过程进行复盘。 项...
凤凰新闻