app开发的前沿资讯，武汉app开发公司优狐每日选取：
Google在2019年度I/O开发者大会上宣布，安卓将会从系统底层支持深色模式。同时，我们也会看到更多支持深色UI的应用正在推出。
深色UI很快将成为一种常见的模式，其他应用也很快会遵循这一模式。
在这篇文章中，我将会以我们的应用Shutter Points为例，解释如何从浅色UI适配深色UI。
优化颜色
调色板
Shutter Points UI的主要颜色是单色为主，目的是为了突出图片内容。主色调用于主导航栏，标签中使用5种辅色将图片注释与对应的类别联系起来。
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。
界面颜色
有了新的配色方案在手，是时候改变界面的颜色了。深色主题中的所有界面都是以默认的深灰色#121212作为基准的。在UI组件上添加不同透明度的白色，根据不同的层级搭配不同的透明度。（彩云注：深色模式中的高度[ elevation ]，准确的含义其实是Android开发中的一个样式代码，用来设置界面的权重的，比如android:elevation="1dp"，层级就在android:elevation="0dp"之上了。）为了表示不同的层级高度，我们需要在组件的样式中调整2个值：无论使用哪种主题，应用正确的高度将确保元素保持在一个一致的视觉层次。想知道应用中透明度该用多少？这里有一个表：（彩云注：我把规范中的表格帮大家截图出来，贴在这里，想看更多规范详细内容请见：https://material.io/design/color/dark-theme.html#properties）组件中通过使用不同透明度的白色覆盖来保持它们在深色主题中的高度一致。
避免大面积颜色
在某些情况下，仅仅将颜色由亮变暗并不会得到一个好的结果。例如在我们app中的引导页中，浅色模式下使用次要颜色能突出内容，但在深色模式下，整个背景都是高饱和度的颜色，却会让界面显得非常地刺眼。对于这些情况，最好是选择一个深色背景，然后保留次级颜色用于标题等小面积元素。
文本优化
文字颜色
这里主要是通过修改白色或黑色的不透明度作为颜色值。- 强调文本 -> #FFFFFF (87% opacity)
- 中等文本 -> #FFFFFF (60% opacity)
- 次级文本 -> #FFFFFF (38% opacity)
不同重要级和不同大小的文本在整个UI中传递出了层次结构，这个原理也适用于深色主题。
注意对比度
所有的文本内容应该易于阅读并符合标准规范。网页标准WCAG 2.0中规范AA级别的文本，普通文本与背景之间的对比度为4.5：1，大标题文本这个比例为3：1。在我们的App中，直接把浅色背景下的标签颜色带到深色模式中，文本开始变得很难阅读。为了得到一个好的对比度，所有的标签文本需要修改到深色，识别度会更高。谷歌做了一款测试工具，帮助确定在哪个颜色值时需要将白色文本改为黑色文本，工具的地址在（https://material.io/design/color/the-color-system.html#tools-for-picking-colors）（彩云注：彩云亲测，还挺方便使用的，建议用电脑端打开这个页面试用一下，对于配色纠结症患者，有良好的治愈效果。）
小建议：推荐一款在sketch和Adobe XD中使用的小插件叫Stark，可以方便的测试出你设计的界面可用性。插画和动效
如果应用包含插画和图形元素，这些也需要做好深色适配工作。如果插画有”背景“和”主题“，最好是将背景的饱和度降低，以保证对于主题的关注。Lottie动画可以通过在AE中的源文件来重新导出json文件，来调整动画的明暗适配，很方便。
总结
随着深色主题被引入操作系统级别，应用将需要在不破坏任何原有体验的情况下做出适配优化。- 组件的可视层次结构在不同的颜色主题内应该是保持一致的
本文摘自网络，版权属于原作者所有！
武汉app制作开发选武汉优狐，领先12年，专注于武汉网站建设、武汉app开发、网站推广服务
文本源自于网络, 不代表本站观点, 如有侵犯您的权益, 请联系我们!
文本源自于网络, 不代表本站观点, 如有侵犯您的权益, 请联系我们!
热线
地址
客服
