澳门威尼斯人官方平台> 威尼斯手机投注>App改版案例分析Android深色UI如何做好适配

App改版案例分析Android深色UI如何做好适配

发布时间:2019-10-23 14:02     来源: 澳门威尼斯人官方平台

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

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

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

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

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

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

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

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

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

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

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

在我们的App中,直接把浅色背景下的标签颜色带到深色模式中,文本开始变得很难阅读。为了得到一个好的对比度,所有的标签文本需要修改到深色,识别度会更高。

谷歌做了一款测试工具,帮助确定在哪个颜色值时需要将白色文本改为黑色文本,工具的地址在(///design/color/#tools-for-picking-colors)

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

如果应用包含插画和图形元素,这些也需要做好深色适配工作。如果插画有”背景“和”主题“,最好是将背景的饱和度降低,以保证对于主题的关注。


  • 波浪
  • 波浪