菜单导航

App改版案例分析:Android深色 UI 如何做好适配?(原创)

作者: 昌平信息网 发布时间: 2019年12月20日 08:16:36

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

App改版案例分析:Android深色 UI 如何做好适配?(原创)

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

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

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

优化颜色 1. 调色板

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

App改版案例分析:Android深色 UI 如何做好适配?(原创)

Shutter Points 中的主色和辅色以及在界面中的应用截图

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

使用谷歌提供的颜色编辑器可以为每个品牌颜色创建一个自定义色板,然后从中选择合适的颜色。

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

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

Android深色UI来了,如何做好适配?

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

2. 界面颜色

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

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

Android深色UI来了,如何做好适配?

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

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

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

投影属性;

叠加的透明度。

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

Android深色UI来了,如何做好适配?

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

App改版案例分析:Android深色 UI 如何做好适配?(原创)

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

3. 避免大面积颜色

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

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

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

Android深色UI来了,如何做好适配?

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

文本优化 1. 文字颜色

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

这里主要是通过修改白色或黑色的不透明度作为颜色值:

强调文本 -> #FFFFFF (87% opacity);

中等文本 -> #FFFFFF (60% opacity);

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

Android深色UI来了,如何做好适配?

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

2. 注意对比度