手机图标设计规范:别再乱改圆角和阴影了

做App上线前最后一步,很多人随手拖张图进Sketch,调个圆角、加点阴影,导出扔给开发——结果上架后图标在iPhone上发虚,在华为桌面又偏色,甚至被苹果审核打回。问题不在工具,而在没看懂平台背后的图标设计规范

苹果iOS:尺寸、形状、命名全得守规矩

iOS要求所有App图标必须是正方形,且不带任何透明背景或描边。系统会自动添加圆角、阴影和高光效果,你提交的原始图必须是纯白底(#FFFFFF)或纯黑底(#000000)的正方形PNG,边长至少1024×1024像素。

常见错误:自己加30%圆角、手动叠投影、导出带Alpha通道的PNG——这些都会导致图标边缘模糊或渲染异常。正确做法是交一张干净的正方图,命名按Apple要求来:

iTunesArtwork.png(1024×1024)
Icon-App-20x20@2x.png(40×40)
Icon-App-60x60@3x.png(180×180)

安卓阵营:别只盯着小米和华为,先看Android Studio模板

安卓没有统一图标标准,但Google官方推荐使用Adaptive Icons(自适应图标)。它由两层组成:底层(background)+ 上层(foreground),中间留出安全区(Safe Zone)。很多开发者直接拿iOS图切一套扔进去,结果在Pixel手机上图标被裁掉一半——因为foreground图不能超出533×533像素的安全框。

举个实际例子:你画了个带飘带的快递图标,飘带伸到角落,导出时没收缩进安全区,到了OPPO Reno桌面就只剩一个包裹主体,飘带全没了。

国内厂商的‘隐藏规则’更得留心

华为EMUI对图标色彩敏感度高,RGB值超过240的浅灰容易被系统自动压暗;vivo则默认启用‘图标动态模糊’,如果你的图标边缘有细微渐变或噪点,开机动画阶段会糊成一片。最实在的办法:用厂商提供的桌面图标生成器(比如华为的AGC图标工具)上传原图,它会自动输出适配各机型的多套资源。

设计师和开发交接时最容易踩的坑

设计师说“这个蓝要Pantone 294”,开发回:“安卓不认Pantone,你给个#1E90FF”。结果上线后iOS显钴蓝,安卓显青蓝。解决方法很简单:所有颜色统一用sRGB定义,导出前在PS里把色彩配置文件设为sRGB IEC61966-2.1,关掉‘嵌入配置文件’选项。

还有种情况:图标在Figma里看着锐利,一导出就发虚。检查两点:一是画布是否对齐像素网格(右键图层→‘对齐像素’打钩),二是导出设置里是否勾选了‘缩放至整数倍’——比如你要导180×180,别设成1.5x缩放再导,直接设1x+180px输出。

图标不是美术作业,是功能入口。用户点错三次,可能就卸载了。按规范走一遍,比后期修十版图更省时间。