关于安卓应用图标模糊的问题

less than 1 minute read

缘由

最近在做公司一款安卓 app 的视觉优化工作,用测试机发现一个很迷的现象—— app icon 看上去有一丝丝模糊,但又不是很模糊,可就是和其他边缘清晰的 app icons 有较明显的区别。

一开始觉得可能是之前的设计师切图时没注意分辨率规范,给了开发小图。但是经过和开发的沟通才发现事情没这么简单,恼人的是经过几次尝试还未完全解决这个问题。以下就简单记录一下情况及相关参考链接。

自适应图标

说来惭愧,都9012年了,我居然经过这次优化才了解到 Android 的自适应图标规范(貌似这个“新”规范已经可以追溯到两年前了)。不得不承认这的确给交互带来了更新奇的创造可能,只可惜在国内各大手机厂商系统适配仍是一大难题。

自适应图标支持各种视觉效果

Google 官方的开发者文档对自适应图标有详细的参数说明。页面底部官方推荐了安卓设计师 Nick Butcher 发表于 Medium 的自适应图标设计教程(他还贴心地提供了各软件的模板)。其中关于 Google Play Store 图标的实现让人眼前一亮,它创新地将前景图层作为背景的遮罩层,以实现更为灵活新颖的动效。

Google Play Store 图标由彩色背景层及透明遮罩前景层组成

另附上 Material Design 关于图标绘制的规范,其中对于图标的大小,投影甚至是高光等都有具体的色值及大小等参数提供,简直是保姆级别的规范(然而…)。

好了,回到我们实际遇到的问题上。我按照自适应图标规范提供了我们这款 app 图标的前景及背景图层给开发,一开始惊喜地发现图标果然变清晰了。然而后来发现遵守规范居然会导致在华为机型上出现 bug(具体情况未详细从开发那了解),开发便调整了自适应相关的文件,结果图标又变模糊了🙄。

既然厂商不让我们追随规范,我们又试了试重新按照旧规范来导出图标。开发告知我安卓官方使用 192px 作为 XXXDPI(4倍)屏幕的标准尺寸(为什么感觉这么小),并且按照规范实际像素还要更小。好在找到了 showzeng 写的一篇文章 Android 图标设计 & 使用指南,里面详细介绍了他制作传统自适应两套图标的过程,还有前端实现方法。

没错,按照旧规范导出传统图标后仍然模糊。至此我暂时放弃,但愿以后能找出症结所在(十分怀疑和手机厂商的适配有关)。

更多参考

自适应图标制作视频教程 Design Adaptive Icons using Google Material Design Guidelines - Illustrator CC 2018 Tutorial

Google Play Store 图标设计规范

自适应图标在线预览工具 Adapticon