Skip to main content

App Icon 与应用商店截图设计

用户在 App Store 里从看到你的图标到决定下载,平均用时 3 秒。这 3 秒里,只有两个东西在工作:一个 1024×1024 的图标,和前三张预览截图。

App Icon 是数字时代最小但最重要的品牌触点。一个用户每天解锁手机上百次,你的图标就在他屏幕上——这是品牌曝光频率最高、最近距离的接触点。


App Icon:1024px 上的品牌浓缩

各平台图标尺寸

平台商店展示主屏幕通知栏
iOS1024×1024180×180(iPhone)自动衍生
Android512×512自适应图标自动衍生
小程序144×144--

App Icon 的 5 条铁律

1. 主屏幕上能认出来(6mm 测试)

把图标缩小到 180px(iPhone 实际显示尺寸),放在随机手机截图中混入 20 个图标——你能立刻找到你的吗?不能则重做。

2. 没有文字(或最多 1 个字)

6mm 尺度上任何多于 1 个字都看不清。Instagram 的相机、Twitter 的鸟——只有图形没有字。

3. 轮廓独特

所有 App 图标在 iOS 上都被裁成圆角方形。要在统一形状里制造差异化——Spotify 用三个弧线,Duolingo 用绿色猫头鹰。

4. 色彩鲜明

高饱和纯色比渐变/浅色能见度高。Spotify 的绿、Netflix 的红、微信的绿——都是 6mm 尺度上能被视网膜最快捕捉的颜色。

5. 符合平台规范

iOS 偏扁平半透明,Android Adaptive Icon 支持动画。

商业案例:Airbnb App Icon 的"逆主流配色"

Airbnb 2014 年把 App Icon 从白色背景+蓝色字改成珊瑚粉背景+贝洛图形。当时设计圈反对——"不是蓝色的 App 以后怎么被找到?"结果在蓝色霸主 Booking 和 Expedia 的海洋里,Airbnb 成了唯一一个粉色。用户找它不需要认图形,找粉色就行。


应用商店预览截图:前 3 张定胜负

截图序号内容目的
第 1 张核心功能+最大卖点3 秒让用户知道"这 App 是干嘛的"
第 2 张第二核心功能/使用场景让用户想象"我可以用它做什么"
第 3 张差异化优势/数据证明"这个比其他的好"
第 4-5 张更多细节给深入了解的人

截图设计规范

平台竖版横版格式
iOS1284×27782778×1284PNG
Android1080×19201920×1080PNG/JPG

不同尺寸截图必须分别上传,不要让系统自动缩放。

Feature Graphic(Android 专属)

Android 用户进商店第一眼看到的是大横幅 Feature Graphic(1024×500px)。放 App 使用场景而非 LOGO——用户在商店里已经看到你的图标和名字了,需要知道"打开后是什么样"。

商业案例:Duolingo 的截图公式

Duolingo 前 3 张截图永远遵循同一公式:① 猫头鹰表情+"Learn a language for free. Forever.";② 真实课程界面截图(不做美化);③ "5 分钟/天"的进度条+数字证明。这套公式在所有语言市场中通用——图形+情感+数字证明,上线至今从未大改。


附:数字品牌设计自检清单

  • 图标在 180px 尺度上清晰可辨吗?
  • 图标轮廓在圆角方形里有辨识度吗?
  • 前 3 张截图能独立讲清楚故事吗?
  • Feature Graphic 放的是场景而非 LOGO?
  • 不同尺寸截图各自上传了吗?

App Icon 是数字时代品牌最小的门店,6mm 见方的战场——每天上百次展现在用户眼前。值得你为那 6mm 付出和 LOGO 一样的认真。