以前送审一个 App 意味着导出一个装了三十个图标文件的文件夹。现在不用了:两个平台都改成收一张大方图,其余自己推导。没有消失的是“那张方图可以放什么”的规则——而两个平台的规则不一样,几乎所有图标问题都从这里开始。
两边都是正方形,都要求设计填满画面,然后就分道扬镳了。
两条规则,而且两条都经常被违反:
不要自己把角磨圆。iOS 会套用它自己的圆角方形遮罩。如果你导出时已经把角磨圆了,遮罩会对着圆角再圆一次,于是在你的圆弧和系统圆弧不吻合的地方出现一圈看得见的暗边。导出完整的方形,一直到边。
不要透明。1024 的图标完全不能有 alpha 通道。透明背景不会变成壁纸——它通常会填成黑色,这就是为什么那么多送出去的图标看起来像一个 logo 浮在深色砖块上。画一个实心背景。
除此之外:图标里不要放自家 App 的截图,也不要放文字。图标在主屏幕上大约显示 60 点。那个尺寸的文字是一种质感,不是语言。
Android 的自适应图标是两层——前景和背景——各 108 × 108 dp。在最高的常见密度下那是 432 × 432 像素。
以下是所有人都会中的那一段。只有中央保证看得见。四边各 18 dp 是保留的:启动器会把它遮掉,并且用它来做你滑动主屏幕时那个细微的视差位移。真正留下来可见的是中间一个 72 × 72 dp 的圆——宽度的三分之二。
所以任何重要的东西都得待在那中央的三分之二里。常见的失败是照满版 108 设计的图标,到了手机上边缘被削掉。
保留这一圈的原因是各家启动器套用的形状不同。同一个图标在这台手机上是圆形、在那台上是方圆形,在别的地方是圆角方形或水滴形。因此你的背景层必须是纯色或简单纹理,能在任何一种裁切下存活——而不是一个有自己轮廓的形状。
这一条只要漏掉,几乎每次都会收到 bug 反馈。Android 的通知图标不是你的 App 图标。它必须是透明背景上的纯白剪影:系统会剥掉所有颜色,只用 alpha 通道。
你给它一个全彩图标,每一个像素都会变成不透明的白——通知上显示一个毫无特征的白方块。那个图标文件完全合法,所以它过得了审查,直到有人真的收到一则通知才现形。
你在 1024 上设计。它在主屏幕上显示大约 60 点,在设置列表和搜索结果里更小。那大约是十七倍的缩减。
由此得出:
唯一诚实的测试是在真的主屏幕上、真的尺寸下,跟其他 App 摆在一起看。单独放在 1024 像素下审视,几乎每个图标看起来都不错。
很有诱惑力,毕竟两者都是同一个品牌的方形记号。但 favicon 是照 16 像素、没有遮罩设计的,而 App 图标有遮罩、有圆角,而且显示尺寸大二十倍。favicon 放大到 1024 很粗糙;App 图标缩到 16 会糊掉。它们是亲戚,不是同一个文件。