App Icon 与应用商店截图设计
用户在 App Store 里从看到你的图标到决定下载,平均用时 3 秒。这 3 秒里,只有两个东西在工作:一个 1024×1024 的图标,和前三张预览截图。
App Icon 是数字时代最小但最重要的品牌触点。一个用户每天解锁手机上百次,你的图标就在他屏幕上——这是品牌曝光频率最高、最近距离的接触点。
App Icon:1024px 上的品牌浓缩
各平台图标尺寸
| 平台 | 商店展示 | 主屏幕 | 通知栏 |
|---|---|---|---|
| iOS | 1024×1024 | 180×180(iPhone) | 自动衍生 |
| Android | 512×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 张 | 更多细节 | 给深入了解的人 |
截图设计规范
| 平台 | 竖版 | 横版 | 格式 |
|---|---|---|---|
| iOS | 1284×2778 | 2778×1284 | PNG |
| Android | 1080×1920 | 1920×1080 | PNG/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 一样的认真。