赞助商
立即赞助

如何适配深色模式?用一个 APP 改版案例让你学会!

UI设计3年前 (2021)发布 流光
3.4K 0 1

一个 app 改版案例,深入浅地告诉大如何适配深色模式,同时给出了确错误的示范,相信对于目流行的深色设趋势,非常的实用了。

如何适配深色模式?用一个 APP 改版案例让你学会!

Google  2019 度 I/O发者会宣布,安卓将会从系统底层支持深色模式。同时,我们也会看到多支持深色 UI 的应用推出。

深色 UI 很快将成为一种见的模式,他应很快会遵循这一模式。

在篇文章中,我将以我们的应用 Shutter Points 为例,释何从浅 UI 适深 UI。

优化颜色

1. 调色

Shutter Points UI 的要颜色是单色为,目的是为了突图片容。色调于导航栏,标签中使 5 种辅色将图片注释与对应的类别联系起来。

如何适配深色模式?用一个 APP 改版案例让你学会!

△ Shutter Points 中的色和辅色及在界面中的应截图

当应用深模式时,亮和低饱和度的颜相比饱和度高的颜更受欢迎。使用亮的时要确元素易阅读,并合一个对比度适中的暗背。

使用歌提供的颜色编辑器(https://material.io/resources/theme-editor/)可以为每个品牌颜色创建一个定义色板,然后从中选择适的颜色。

根据谷歌设计规范(https://material.io/design/color/dark-theme.html#ui-application)议,在使用深色模时,个好经验法则是将调色板色值范围保持在 200 左右。

(彩云注:谷歌提供的颜色规范中 100-900 数的具体意义,感趣的请见知乎的回答:https://www.zhihu.com/question/26340807,这里就不深入解读了。)

任何一个深色界面都需一合的对比度,按 WCAG 的 AA 级标准,界面中的文字与背景的对比度至少达到 4.5 : 1。

如何适配深色模式?用一个 APP 改版案例让你学会!

△ 品牌颜色中的一浅色被选深色模式配色

2. 界面颜色

了新的配色方案手,时候改变界面的颜色了。深色主题中的所界面都以默认的深灰色 #121212 作基准的。

在 UI 组件上添同透明的白色,根据同的层级搭配同的透明。

如何适配深色模式?用一个 APP 改版案例让你学会!

△ 叠的层次范围从0%到16%

(彩云注:深模式中的高度 [ elevation ],准确的含义其是 Android 开中的一个样式代码,用来设置界面的权重的,比 android:elevation=”1dp”,级就在 android:elevation=”0dp” 之上。)

为了表示不同的层高度,需要在组件的式中调整 2 个值:

  • 投影属
  • 叠加的透度

无论使用哪种主题,应用正确的高度将确元素持在一个一致的视次。想道应用中透明度该用少?里有一个表:

如何适配深色模式?用一个 APP 改版案例让你学会!

(彩云注:我把规范中的表帮大家截图出来,贴在里,想看更详细内容请见:https://material.io/design/color/dark-theme.html#properties)

如何适配深色模式?用一个 APP 改版案例让你学会!

组件中通使用不同透明度的白覆盖来持它们在深主题中的高度一致。

3. 避免大面积颜

在某情况下,仅仅将颜由亮变暗并不得到一个的结果。

例如在 app 的引导页中,浅色模式下使用次要颜色能突出内容,但在深色模式下,整个背景都是高饱和度的颜色,却会让界面显得非常的刺眼。

于这些情况,最好是选择个深色背景,然后保留级颜色用于标题等小积元素。

如何适配深色模式?用一个 APP 改版案例让你学会!

大积高饱和度颜色不适合用于深色模。

文本优化

1. 文字颜色

歌计规范主要调了 3 种文本颜色。

这里主要是过改白色或黑色不透明度作为颜色值。

  • 调文本 -> #FFFFFF(87% opacity)
  • 等文本 -> #FFFFFF(60% opacity)
  • 次级文本 -> #FFFFFF(38% opacity)

如何适配深色模式?用一个 APP 改版案例让你学会!

△ 不同重要和不同大的文本在整个UI中传递出了层次结构,这个理也适用于深色主题。

2. 注对比度

所有的文本内容应该易于阅读并符标准规范。网页标准 WCAG 2.0 中规范 AA 别的文本,普通文本背景之间的对比度为 4.5 : 1,大标题文本这个比例为 3 : 1。

在我们 App ,接把浅色背景下标签颜色带到深色模,文本开始变很难阅读。为了到个好比度,所有标签文本需要改到深色,识度会更高。

如何适配深色模式?用一个 APP 改版案例让你学会!

△ 色元素上文本需要改变颜色以保证易读。

谷歌了一款测试具,帮确哪颜色时需将白色文本改黑色文本,具的址(https://material.io/design/color/the-color-system.html#tools-for-picking-colors)

(彩注:彩亲测,还挺方使的,建议电脑端打开这个页面试一,对于配色纠结症患者,有良好的治愈效果。)

如何适配深色模式?用一个 APP 改版案例让你学会!

小建议:推荐一款在 sketch 和 Adobe XD 中使的小插件叫 Stark,可方的测试你设计的界面可性。

插画和动效

如果应包含插画和图形元素,这些需要做好深色适配工作。

果插画有「背」和「主题」,最是将背的饱和度降低,以证对主题的关注。

Lottie 动画可以通过在 AE 中的源文件来重新导出 json 文件,来调整动画的暗适配,方便。

如何适配深色模式?用一个 APP 改版案例让你学会!

△ 深色主题插画同让用户关注插画的主题内容。

总结

随着深色主题被引入操作系统别,应用将需要在不破坏任何有体验的情况下做出适配优化。

深色主题并不是仅仅做简单反色。

设师发者必须明确以下几点:

  • 所有 UI 元素必须符合标准可用性原则;
  • 组件的可视层次结构不同的颜色主题内应该保持一致的;
  • 牌识别应该受到题颜色变的影响。

原文链接:《Design for the Dark Theme》

注译者的微信公众号:「彩云译设计

如何适配深色模式?用一个 APP 改版案例让你学会!

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

相关文章

QQ 阅读作为国内较大的数字阅读平台,拥有海量的数字正版图书资源,随着产品内容不断丰富,图书资源已覆盖网络文学、历史、教...
改版实战
@C7210 :这是一篇来自 Google Translate 团队设计师的改版经验分享。 Google Translate改版经验谈 2018 年底,我们上线了...
Google Translate
读完这篇文章你将会了解到: 关闭按钮「x」的设计历史 「x」设计的注意事项 关闭按钮设计的最佳案例 「x」图标在应用...
关闭按钮
2019 年的两场重量级发布会 Google I/O 和 Apple WWDC 终于落下帷幕。在各种新奇科技资讯中大家会有趣地发现两家公司不约而同...
AlibabaDesign
用一篇文章,帮你读懂产品经理与设计师工作内容之间的区别,希望对有转岗想法的朋友有些帮助! 两年前,我从设计转岗到产品...
产品经理
很多人说看过很多设计道理却依然做不好设计,还不如直接看设计案例来的简单粗暴。今天为大家找到一篇实战好文,一个人,3天时...
APP 设计
大家好,我是彩云。最近有帮忙看我群里一些同学的作品集,会发现很多人在图标设计细节上有不少问题,这块也是我给出建议较多...
UI 设计
周日的时候去看了徐峥的电影《我不是药神》,电影很走心,很现实,反正我是看哭了。现在的人,安全感缺失,有一部分原因可能...
产品设计