手机图标设计规范:新手也能看懂的实用要点

你有没有遇到过这种情况:自己做的App图标,发到群里让朋友看,结果大家第一反应是‘这啥?放大镜?还是个药丸?’——其实问题很可能出在没按规范来。

为什么图标不能随便画一个?

手机桌面不是画布,是信息快车道。用户平均扫一眼图标只用0.3秒,太花、太细、太暗、太偏,就直接被跳过了。安卓和iOS各自有明确尺寸、圆角、阴影、留白要求,不照着做,轻则显示模糊,重则被应用商店拒审。

iOS图标:圆润+留白是铁律

苹果要求所有图标必须是正方形,且不带透明背景(别再导出PNG-24带alpha通道了)。最外层要预留15%安全边距,中间内容区得缩进至少20%,不然放到深色模式里,边缘容易糊成一团。官方推荐尺寸是1024×1024像素(用于App Store),但系统会自动缩放生成从20×20到1024×1024共10多个版本。

安卓图标:强调自适应与前景/背景分离

Android 8.0之后全面启用自适应图标(Adaptive Icons),要求把图标拆成两层:前景(Foreground)背景(Background)。前景图必须是448×448像素、居中、透明背景;背景图是108×108像素纯色或简单渐变。系统会根据不同厂商定制的遮罩(比如三星的水滴形、小米的圆角矩形)动态裁切显示。

举个实际例子:如果你给前景图加了阴影或描边,那在华为EMUI的圆形遮罩下,阴影会被硬生生截掉一半,看起来像缺了一角。

常见翻车点清单

  • 文字太小或用了细字体——缩到40×40像素时根本认不出
  • 图标里塞太多细节(比如齿轮+闪电+云朵)——变成马赛克
  • 主色用纯黑(#000000)或纯白(#FFFFFF)——在深色/浅色桌面下完全隐形
  • 导出时没关抗锯齿或用了错误压缩——边缘发虚

动手前先做三件事

1. 打开Figma或Sketch,建一个1024×1024画板,画一圈灰色参考线(距离边缘153像素),这就是安全区;
2. 在中心画个680×680的正方形,这是内容核心区;
3. 把你的图形往里放,删掉所有超出边界的元素。

导出时选PNG-24,关闭“透明度抖动”,DPI设为72即可——别信网上说的“要300dpi才清晰”,那是打印用的。

顺带一提:微信、钉钉这些大厂图标看着简单,其实都经过几十轮A/B测试。你不用一步到位,但起步时守住规范底线,比后期反复返工省三天时间。