1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 设计管理 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

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

时间:2020-06-22   分类:设计管理    作者:网络   来源:网络整理   点击:71

如何适配深色模式?用一个 APP 改版案例让你学会!--九分科技 copyright 9fen.net

www.9fen.net

以一个 app 改版案例,深入浅出地告诉大家如何适配深色模式,同时给出了正确和错误的示范,相信对于目前流行的深色设计趋势来说,是非常的实用了。 九分网络

如何适配深色模式?用一个 APP 改版案例让你学会!--九分科技 本文来自九分网络

本文来自九分网络

Google 在 2019 年度 I/O开发者大会上宣布,安卓将会从系统底层支持深色模式。同时,我们也会看到更多支持深色 UI 的应用正在推出。 内容采集来自9fen.net

深色 UI 很快将成为一种常见的模式,其他应用也很快会遵循这一模式。

本文来自九分网络

在这篇文章中,我将会以我们的应用 Shutter Points 为例,解释如何从浅色 UI 适配深色 UI。

copyright 9fen.net

优化颜色

1. 调色板 内容采集来自9fen.net

Shutter Points UI 的主要颜色是单色为主,目的是为了突出图片内容。主色调用于主导航栏,标签中使用 5 种辅色将图片注释与对应的类别联系起来。 www.9fen.net

如何适配深色模式?用一个 APP 改版案例让你学会!--九分科技 copyright 9fen.net

内容采集来自9fen.net

△ Shutter Points 中的主色和辅色以及在界面中的应用截图 内容采集来自9fen.net

当应用深色模式时,亮色和低饱和度的颜色相比于饱和度高的颜色会更受欢迎。使用亮色的时候要确保元素易于阅读,并配合一个对比度适中的暗色背景。 内容采集来自9fen.net

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

根据谷歌设计规范()建议,在使用深色模式时,一个好的经验法则是将调色板的色值范围保持在 200 左右。

copyright 9fen.net

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

内容采集来自9fen.net

任何一个深色界面都需要有一个合适的对比度,按 WCAG 的 AA 级标准来说,界面中的文字与背景的对比度至少要达到 4.5 : 1。

本文来自九分网络

如何适配深色模式?用一个 APP 改版案例让你学会!--九分科技 九分网络

copyright 9fen.net

△ 品牌颜色中的一个浅色被选为深色模式配色

本文来自九分网络

2. 界面颜色 本文来自九分网络

有了新的配色方案在手,是时候改变界面的颜色了。深色主题中的所有界面都是以默认的深灰色 #121212 作为基准的。 copyright 9fen.net

在 UI 组件上添加不同透明度的白色,根据不同的层级搭配不同的透明度。

本文来自九分网络

如何适配深色模式?用一个 APP 改版案例让你学会!--九分科技 www.9fen.net

本文来自九分网络

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

copyright 9fen.net

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

本文来自九分网络

为了表示不同的层级高度,我们需要在组件的样式中调整 2 个值:

www.9fen.net

投影属性 www.9fen.net

叠加的透明度

内容采集来自9fen.net

无论使用哪种主题,应用正确的高度将确保元素保持在一个一致的视觉层次。想知道应用中透明度该用多少?这里有一个表:

九分网络

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

内容采集来自9fen.net

内容采集来自9fen.net

(彩云注:我把规范中的表格帮大家截图出来,贴在这里,想看更多详细内容请见:)

九分网络

如何适配深色模式?用一个 APP 改版案例让你学会!--九分科技 copyright 9fen.net

www.9fen.net

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

本文来自九分网络

3. 避免大面积颜色

本文来自九分网络

在某些情况下,仅仅将颜色由亮变暗并不会得到一个好的结果。 copyright 9fen.net

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

对于这些情况,最好是选择一个深色背景,然后保留次级颜色用于标题等小面积元素。

copyright 9fen.net

如何适配深色模式?用一个 APP 改版案例让你学会!--九分科技 copyright 9fen.net

copyright 9fen.net

大面积的高饱和度颜色不适合用于深色模式。

内容采集来自9fen.net

文本优化

1. 文字颜色

本文来自九分网络

谷歌设计规范主要强调了 3 种文本颜色。

本文来自九分网络

这里主要是通过修改白色或黑色的不透明度作为颜色值。 www.9fen.net

强调文本 -> #FFFFFF(87% opacity) 九分网络

中等文本 -> #FFFFFF(60% opacity) 内容采集来自9fen.net

次级文本 -> #FFFFFF(38% opacity)

本文来自九分网络

如何适配深色模式?用一个 APP 改版案例让你学会!--九分科技 本文来自九分网络

本文来自九分网络

△ 不同重要级和不同大小的文本在整个UI中传递出了层次结构,这个原理也适用于深色主题。 copyright 9fen.net

2. 注意对比度

copyright 9fen.net

标签: 优设 优设网 深色模式 改版实战 优秀 彩云译设计 深色界面

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----