文章目录
- 快速导航
App Store 截图间距（Screenshot Gap）怎么设计才好看又转化
什么是 App Store screenshot gap
「App Store screenshot gap」通常指两件事叠在一起：
- 商店画廊里的缝：用户在产品页左右滑动时，相邻截图之间系统留出的空隙与投影感；
- 你在每张图里自己做的留白：设备壳与画板边缘的距离、标题与手机的间距、背景出血。
第一类由 Apple 客户端控制，你改不了像素级缝宽；第二类完全由设计决定，却常常被误当成「商店 gap 不对」。搜这个词的开发者，多数是第二种：带壳五图做出的节奏发闷、发空，或缩略图里字贴边。
它和「全景首图把多屏拼成一张」不是同一议题——全景追求连续故事，gap 设计追求单帧完整 + 帧间节奏。也和「能不能加设备边框」的合规规则不同：边框能不能用是政策问题，用了之后怎么留白是视觉问题。
为什么间距会直接影响转化
产品页首屏通常先露出 1～2 张半幅截图。间距失当常见三种伤害：
| 问题 | 用户感知 | 对转化的影响 |
|---|---|---|
| 壳贴画板边缘太紧 | 拥挤、裁切感、不专业 | 首图停留短，滑动欲望低 |
| 壳居中但四周空白过大 | 空、内容太小、像未完成模板 | 卖点看不清，跳过 |
| 五张图留白比例忽大忽小 | 系列感断裂 | 故事读不完就划走 |
间距是「无声的排版」：它决定标题、设备、背景色块谁先被扫到。F 型浏览下，稳定的外缘留白能让每一帧的标题落在相似视觉高度，滑动时更跟手。
三层间距模型
把一张商店截图拆成三层来控 gap：
1. 画板安全边距（outer margin）
从画板外缘到「最近的重要内容」（标题字或设备壳最外像素）：
| 画板短边长度 | 建议安全边距 | 说明 |
|---|---|---|
| 1242–1290 宽档 | 约短边的 4%–6% | 过小易被圆角/预览裁切感觉「顶边」 |
| 标题在顶部时 | 顶边可略大于左右 | 给状态栏视觉呼吸，避免字贴顶 |
| 有品牌色块/渐变 | 色块可顶满出血，内容仍守安全边 | 背景可满版，UI 与字不可顶边 |
经验值：1290 宽画板上，左右各留 48–72 px 量级较稳妥；具体随字体字号微调。
2. 壳与文案间距（device–copy gap）
标题/卖点文案与手机上边缘之间：
- 短标题（一行）：间距约等于标题字号的 0.6–1.0 倍；
- 双行卖点：略加大，避免字与动态岛/刘海视觉打架；
- 文案在底部时：同样保证壳下缘到字、字到画板底的两段空隙都不小于安全边。
3. 「帧与帧」的视觉缝（gallery rhythm）
系统 gap 你控不了，但可以控制相邻帧的视觉重量是否接近：
- 五张图使用同一外边距模板；
- 设备缩放比例一致（不要一张壳特写、下一张整机缩小）；
- 背景明度不要一张极暗、一张极亮（除非刻意章节换场）。
这样在商店默认缝宽下，系列仍像同一套 KV，而不是五张散图。
实用比例与模板
一套可直接套用的竖屏营销图节奏：
| 区域 | 占画板高度约 | 备注 |
|---|---|---|
| 顶边安全 + 标题区 | 18%–26% | 含标题与副标，勿超过三行 |
| 文案与壳之间的 gap | 2%–4% | 太小会糊成一块 |
| 设备展示区 | 55%–70% | 壳完整可见，勿切掉底部 Home 条区域的重要 UI |
| 底边安全 | 4%–8% | 给投影、倒影或纯留白 |
横滑预览时用手机看缩略：若缩略图里标题被切掉，说明顶边安全不够，不是「商店 gap 太大」。
常见翻车与修法
| 翻车 | 原因 | 修法 |
|---|---|---|
| 真机预览字贴边 | 只在桌面大屏看过 | 用手机打开产品页或缩小到 1/4 宽检查 |
| 带壳后内容显小 | outer margin + 壳厚度叠加 | 略放大设备缩放，或减文案区高度，而不是取消边距 |
| 五图「中间松、两头紧」 | 每张手调边距 | 用同一自动布局组件/模板 |
| 全景长图当普通五图上传 | 叙事方式混用 | 全景只做首图策略时单独设计；普通五图保持单帧完整 |
| 深色壳 + 深色底无缝 | 壳轮廓消失 | 加极轻微投影或 1 档背景明度差 |
关于设备边框能不能加、怎么加才符合商店规则，见商店截图设备边框规则；若你在做连续滑动的长图叙事，另见全景 App Store 截图。本文只解决 gap / 留白节奏。
制作流程建议
- 先定模板网格：画板尺寸 → 安全边 → 标题栏高度 → 设备缩放中心线；
- 再填内容：每帧只改文案与屏内 UI，不改边距；
- 系列对齐检查：把五张缩略并排，看标题基线、壳底边是否一条线；
- 真机滑动检查：上传 TestFlight 外的商店预览或竞品旁路对比，感受系统缝下的节奏；
- 本地化复用网格：译文变长时优先缩字号或折行，而不是挤占安全边。
独立开发者若没有设计系统，用带统一边距的模板出图，往往比每张「目测留白」更稳。需要快速套壳并保持多帧边距一致时，可在预览页用同一画板尺寸批量导出。
小结
App Store screenshot gap 的核心不是去改系统缝宽，而是管好画板安全边、文案与壳的间距、以及五图之间的视觉重量。统一外边距、统一设备缩放、用真机缩略检查，就能避免「太挤 / 太空 / 系列感断裂」。把 gap 当成固定设计 token，而不是每帧手感，商店画廊会干净很多；批量出带壳图时，也可以用 appshotmaker.com 锁死同一画板边距再替换屏内截图。