app-icon-optimization
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseApp Icon Optimization
App 图标优化
You help design, audit, and A/B test app icons to maximize tap-through rate (TTR) — the percentage of users who tap your app after seeing it in search results or browse.
你将帮助设计、审查和 A/B 测试 App 图标，以最大化点击率（TTR）——即用户在搜索结果或浏览页面中看到你的 App 后点击它的用户比例。
Why the Icon Is Your Most Impactful Asset
为什么图标是最具影响力的素材
The icon is the first thing users see in search results — before the title, rating, or screenshots. A compelling icon can lift TTR by 20–40% with no other changes. In browse/charts, it's often the only visual element competing for attention.
图标是用户在搜索结果中看到的第一项内容——甚至早于标题、评分和截图。富有吸引力的图标无需其他改动，就可能让 TTR 提升 20–40%。在浏览页或榜单中，图标通常也是唯一与其他应用争夺视觉注意力的元素。
Icon Design Principles
图标设计原则
1. Simplicity at Small Size
1. 小尺寸下的简洁性
Icons render at 60×60pt (iPhone search results). At that size, detail disappears.
- Maximum 2 elements
- No text (illegible at small sizes; Apple discourages it)
- Strong silhouette recognizable at a glance
- Test at 60×60px before finalizing
图标在 iPhone 搜索结果中以 60×60pt 呈现。在这个尺寸下，细节会消失。
- 最多包含 2 个元素
- 不使用文字（在小尺寸下难以辨认，Apple 也不建议使用）
- 具备一眼即可识别的鲜明轮廓
- 最终确定前，在 60×60px 下进行测试
2. Color Contrast Against the App Store Background
2. 与 App Store 背景的色彩对比
The App Store has a white/light background (light mode) and dark background (dark mode).
- High contrast on both modes
- Avoid white icons — they disappear in light mode
- Avoid very dark icons — they disappear in dark mode
- Consider adding a subtle shadow or border on your icon background
App Store 在浅色模式下采用白色或浅色背景，在深色模式下采用深色背景。
- 在两种模式下都保持高对比度
- 避免使用白色图标——在浅色模式下会消失
- 避免使用过暗的图标——在深色模式下会消失
- 可考虑在图标背后添加轻微的阴影或边框
3. Category Visual Language
3. 品类视觉语言
Match and differentiate from your category norms:
| Category | Common patterns | How to stand out |
|---|---|---|
| Productivity | Blue, clean, minimal | Warmer colors, bolder marks |
| Health/Fitness | Green, orange, energetic | Premium dark, sophisticated |
| Finance | Blue, green, conservative | Bold, distinctive mark |
| Games | Bright, characters, action | Premium/dark if competitors are loud |
| Social | Round shapes, soft colors | Sharp, distinctive if feed is soft |
| Meditation | Purple, blue, calm | Unexpected contrast color |
| Photo/Video | Gradient, camera | Single strong mark |
Rule: Look at your top 20 competitors' icons. Then design to be immediately distinguishable.
图标应契合所在品类的惯例，同时形成差异化：
| 品类 | 常见模式 | 如何脱颖而出 |
|---|---|---|
| 效率 | 蓝色、干净、极简 | 更暖的色调、更醒目的标志 |
| 健康/健身 | 绿色、橙色、充满活力 | 高端深色、精致感 |
| 财务 | 蓝色、绿色、较保守 | 大胆、独特的标志 |
| 游戏 | 鲜艳、角色、动作感 | 竞品风格张扬时采用高端/深色风格 |
| 社交 | 圆形、柔和色彩 | 信息流风格柔和时采用锐利、独特的设计 |
| 冥想 | 紫色、蓝色、平静 | 出人意料的对比色 |
| 摄影/视频 | 渐变、相机 | 单一醒目的标志 |
规则： 查看排名前 20 的竞品图标，然后设计出能立即被区分的图标。
4. Recognizable Mark
4. 易识别的标志
The icon needs a single, memorable mark — not a scene or a composition. Ask:
"Can someone describe this icon in 3 words?"
- ✅ "Red speech bubble" | ❌ "Someone using a phone with a gradient"
- ✅ "Bold orange flame" | ❌ "Abstract colorful shapes"
图标需要单一、令人难忘的标志，而不是场景或复杂构图。思考：
“能否用 3 个词描述这个图标？”
- ✅ “红色对话气泡” | ❌ “某人使用带有渐变的手机”
- ✅ “醒目的橙色火焰” | ❌ “抽象的彩色形状”
5. Brand Consistency
5. 品牌一致性
The icon is your brand mark in the App Store. It should:
- Match your app's primary color palette
- Be consistent with your splash screen, push notifications, and marketing
- Work as a favicon, social media avatar, and press kit asset
图标是你在 App Store 中使用的品牌标志。它应该：
- 与 App 的主色调保持一致
- 与启动页、推送通知和营销素材保持一致
- 适用于作为 favicon、社交媒体头像和媒体资料包素材
Icon Sizes Required
所需的图标尺寸
| Platform | Size |
|---|---|
| iPhone (App Store) | 1024×1024px (master) |
| iPhone (home screen) | 60×60pt @1x, @2x, @3x |
| iPad | 76×76pt @1x, @2x |
| Watch | 40×40pt – 44×44pt |
| Android adaptive icon | 108×108dp (safe zone 66×66dp) |
Submit a single 1024×1024px PNG (no transparency, no rounded corners — Apple applies the mask).
| 平台 | 尺寸 |
|---|---|
| iPhone（App Store） | 1024×1024px（主视觉稿） |
| iPhone（主屏幕） | 60×60pt @1x、@2x、@3x |
| iPad | 76×76pt @1x、@2x |
| Watch | 40×40pt–44×44pt |
| Android 自适应图标 | 108×108dp（安全区域为 66×66dp） |
提交单张 1024×1024px 的 PNG（不含透明通道，不添加圆角——Apple 会自动应用蒙版）。
A/B Testing Icons
图标 A/B 测试
iOS — Product Page Optimization
iOS — Product Page Optimization
- App Store Connect → Your App → Product Page Optimization → Create Test
- Create up to 3 icon variants
- Set traffic allocation (20–33% per variant)
- Run for minimum 7 days or until statistical significance
Access: App Store Connect → App Store → Product Page Optimization
- App Store Connect → Your App → Product Page Optimization → Create Test
- 最多创建 3 个图标变体
- 设置流量分配（每个变体 20–33%）
- 至少运行 7 天，或直到结果达到统计显著性
访问路径： App Store Connect → App Store → Product Page Optimization
Android — Play Store Experiments
Android — Play Store Experiments
- Play Console → Store listing experiments → New experiment
- Upload up to 3 icon variants
- Set traffic split
- Google reports install conversion rate per variant
- Play Console → Store listing experiments → New experiment
- 上传最多 3 个图标变体
- 设置流量分流比例
- Google 会报告每个变体的安装转化率
What to Test
测试什么
Test one variable at a time:
| Test | Variants |
|---|---|
| Color scheme | Same mark, 3 different background colors |
| Mark style | Flat vs illustrated vs 3D |
| Dark vs light | Dark background vs light background |
| Character vs abstract | Character-based vs geometric/abstract |
| With vs without text | Mark only vs mark + short text |
每次只测试一个变量：
| 测试项 | 变体 |
|---|---|
| 配色方案 | 相同标志，3 种不同的背景色 |
| 标志风格 | 扁平 vs 插画 vs 3D |
| 深色 vs 浅色 | 深色背景 vs 浅色背景 |
| 角色 vs 抽象 | 基于角色 vs 几何/抽象 |
| 含文字 vs 不含文字 | 仅标志 vs 标志 + 短文字 |
Reading Results
解读结果
- Primary metric: Install conversion rate (impressions → installs)
- Minimum sample: 1,000+ impressions per variant for reliable signal
- Significance threshold: p < 0.05 or Appeeky/Play Console confidence indicator
- 主要指标： 安装转化率（曝光 → 安装）
- 最小样本量： 每个变体至少获得 1,000+ 次曝光，以获得可靠信号
- 显著性阈值： p < 0.05，或达到 Appeeky/Play Console 的置信度指标
Icon Audit
图标审查
Evaluate your current icon against:
Clarity at 60×60px: [1–10]
- Recognizable mark at small size?
- No illegible text?
Color contrast: [1–10]
- Works on white (light mode)?
- Works on dark backgrounds (dark mode)?
Category differentiation: [1–10]
- Stands out from top 10 competitor icons?
Simplicity: [1–10]
- Max 2 elements?
- Describable in 3 words?
Brand alignment: [1–10]
- Consistent with app's visual identity?
Overall: [N]/50根据以下维度评估当前图标：
60×60px 下的清晰度: [1–10]
- 小尺寸下标志是否容易识别？
- 是否没有难以辨认的文字？
色彩对比度: [1–10]
- 在白色背景（浅色模式）下是否清晰？
- 在深色背景（深色模式）下是否清晰？
品类差异化: [1–10]
- 能否从排名前 10 的竞品图标中脱颖而出？
简洁性: [1–10]
- 最多包含 2 个元素？
- 能否用 3 个词描述？
品牌契合度: [1–10]
- 是否与 App 的视觉识别保持一致？
总体: [N]/50Brief for Icon Designer
图标设计师需求简报
When briefing a designer:
App: [name and one-line description]
Category: [category]
Primary audience: [who uses it]
Brand colors: [hex values]
Mood/feeling: [premium / playful / trustworthy / energetic / calm]
What the icon should convey: [core value or identity]
What to avoid: [don't replicate competitor X, avoid Y]
Competitors to differentiate from: [list 3–5 with icons]
Reference icons I like: [list 3–5 from other apps]
Deliverables:
- 3 distinct concepts at 1024×1024px
- Each concept tested at 60×60px mockup in App Store search context
- Final: PNG, no alpha, no rounded corners向设计师提供需求简报时：
App: [名称及一句话描述]
品类: [类别]
主要受众: [使用者]
品牌颜色: [十六进制色值]
氛围/感受: [高端 / 趣味 / 可信 / 充满活力 / 平静]
图标应传达的内容: [核心价值或品牌身份]
需要避免的内容: [不要照搬竞品 X，避免 Y]
需要形成差异化的竞品: [列出 3–5 个及其图标]
喜欢的参考图标: [列出其他 App 中的 3–5 个]
交付物:
- 3 个不同的概念稿，尺寸为 1024×1024px
- 每个概念稿都需在 App Store 搜索场景的 60×60px 模型中测试
- 最终稿：PNG，不含 alpha 通道，不添加圆角Related Skills
相关 Skills
- — Full A/B testing methodology
ab-test-store-listing - — Complement the icon with strong screenshots
screenshot-optimization - — Android adaptive icon requirements
android-aso - — Icon is one factor in the full ASO score
aso-audit
- — 完整的 A/B 测试方法
ab-test-store-listing - — 使用高质量截图补充图标的效果
screenshot-optimization - — Android 自适应图标要求
android-aso - — 图标是完整 ASO 评分中的一个因素
aso-audit