视觉物料：图标、截图、演示图与素材清单

物料不是发布前补的图，是产品的一部分。

一、上线前一天，才开始找图

以下情境为教学假设，人物、引语和数字不代表经核实的真实案例。

岑野的产品做完是周四，计划周六上线。周五他开始填应用商店的表单，才发现需要：五种尺寸的应用图标、至少六张截图、一张置顶宣传图、一段演示视频，以及官网首屏要用的一张产品图。

他手里只有一张开发时截的桌面图，里面有测试数据、一个未完成的按钮和浏览器书签栏。他熬到凌晨，用手机拍了两张界面，裁成商店要求的比例。

上线后第一周，下载转化率 1.2%。他以为是产品不够好，后来对比同类产品才发现：别人的截图第一张就展示了结果，他的第一张是一张模糊的、带测试数据的列表。

物料质量直接影响转化，而它最容易被一个人忽略。 因为它不在功能清单里，没有测试，也没有报错。

物料缺失还有连锁反应：商店页延期、发布公告没有配图、社交分享的链接预览是一张空白卡片。每一处都不致命，加起来会让产品显得像没做完。

物料准备应该比发布早一周。 一周足够发现尺寸不对、重新导出，也足够放弃一个不好看的角度。前一天开始，就只剩下凑合。

二、图标：四个尺寸与安全边距

应用图标是最常被复用的物料，也是最容易做残的。

商店图标不要自己加圆角。 大多数平台会自动裁切，你自己加圆角会导致二次裁切后边缘出现白边。

安全边距至少 12%。 主体图形缩在画布中央，四周留白。贴边设计在圆形或圆角裁切后会被切掉一角。

小尺寸要单独检查。 32×32 的 favicon 里塞不下三个字母和一条曲线。把图形简化到只剩一个轮廓，再逐尺寸导出。

视觉重心要居中。 一个偏左的图形，在方形裁切与圆形裁切下会显得歪。导出前把图形放进画布中央对齐一次，比事后逐个平台修便宜。

图标要有单色版本。 深色模式、打印、水印都需要它。没有单色版本时，人们会用截图凑，结果颜色和比例全不对。

导出格式要固定。 图标用 PNG 或 SVG，截图用 PNG，演示用 MP4。格式不统一会在不同平台被反复压缩，最后糊成一片。

三、截图：三张一组

商店截图不是界面截图，是产品的广告位。每一张只讲一件事。

第一张必须是结果，不是登录页。 用户滑动商店页时只看前两张。登录页截图等于什么都没说。

截图要使用真实但干净的数据。 测试数据（test、abc、123）会让产品显得不专业；真实数据里又要删掉个人信息。准备一份专门用于截图的演示数据，是值得的一次性投入。

每张截图配一句短标题。 标题写在图的上方或下方，不超过 12 字。用户先读标题，再决定要不要看图。

截图的顺序要能独立成故事。 把六张图连起来读，应该能回答「这是什么、怎么用、为什么比现在好」。

不要把所有功能都塞进截图。 六张图覆盖三个核心场景足够，剩下的留给详情页。

截图里的文字要在缩略图尺寸下可读。 商店页的图常被缩到手机屏幕三分之一宽，12px 的界面文字那时完全看不清。需要强调的信息，用图上的大标题说，不要指望用户去看界面细节。

四、演示图与素材清单

演示图（GIF 或短视频）负责展示「动起来是什么样」，它比截图更有说服力，也更容易做砸。

演示时长：8–15 秒
循环：无缝，首尾同一画面
内容：一个完整动作，不要剪辑多个功能
尺寸：按目标平台要求导出，另存一份 1:1 方图

制作工时（教学假设）：
脚本与录屏   1.5 小时
剪辑与压缩   1.0 小时
多尺寸导出   0.5 小时
合计         3 小时

一个演示只讲一个动作。 从点击到结果，八秒足够。塞进三个功能的演示，用户一个都记不住。

循环要无缝。 首尾画面不一致的 GIF 会在每次循环时闪一下，非常显眼。

文件大小要控制。 超过 5MB 的 GIF 在移动网络下加载缓慢，很多平台会直接压缩到失真。必要时改用视频格式。

素材清单要提前列出来。 上线前一周，把所有需要的图列成一张表，标注尺寸、用途、负责人（通常是自己）和状态。

物料要能复用。 同一张产品图，可以裁成商店截图、官网首屏和社交分享图。拍摄或截取时留出裁切余地，比每次重做便宜。

物料要跟着界面一起更新。 界面改版后，旧截图会立刻显得过时。把「更新物料」写进发布清单，而不是等用户指出。

五、行动清单与复算验收

• 列出全部需要的物料，标注尺寸、用途与状态
• 准备一份专门用于截图的演示数据
• 导出四个尺寸的图标，逐个检查小尺寸可辨性
• 产出单色图标版本，确认在深色背景可用
• 按「结果 / 流程 / 对比」产出前三张截图
• 为每张截图写一句不超过 12 字的标题
• 录制一段 8–15 秒、首尾衔接的单动作演示
• 统计全部物料的总制作工时，写进发布计划

验收标准：能报出物料清单的完成度，以及每张截图对应的场景。 只回答「图都截好了」的，说明还没按用途分类。

使用边界与实操验收

本文讲视觉物料的规格与生产，不涉及商店页的关键词、标题与文案策略，那属于商店页与搜索入口：翻译不是本地化 ；落地页的结构与转化属于从落地页到第一个动作 ；主色与 logo 形态属于第 03 篇；品牌层的延展属于第 10 篇。

本文也不主张「物料越多越好」。六张截图、一个演示、四种图标，足够覆盖大多数个人产品。多出来的物料，通常只是多出来的维护成本。

验证以转化为准：记录商店页每次更换第一张截图后的转化率变化。连续两次更换都没有变化，说明问题不在图，而在产品定位或评价数量。

另一个可复算的指标是物料更新滞后天数：界面改版到截图更新之间的间隔。超过 30 天，说明发布清单里缺了这一项。

物料还要留下可编辑的源文件。只保存导出的 PNG，下一次改版就得从零再做一遍；保留图层与工程文件，改一行文字只要两分钟。

关键参考与核验范围

本文的尺寸与工时数字为教学演示。核验日期：2026-10-24。

• Apple Human Interface Guidelines: App icons ：应用图标的尺寸、圆角处理与多平台适配规范。
• Material Design 3: Icons ：图标风格、尺寸档位与可读性的公开设计规范。

上述两条只用于说明公开规范，不构成对任何平台审核结果的保证。各商店的具体尺寸与数量要求会调整，提交前请以平台当期文档为准。

系列导航

• 上一篇：微文案：按钮、报错与空状态怎么说
• 下一篇：设计验收：一致性、可访问性与跨平台的一张表
• 回到目录：一个人把产品做得像样：品牌、视觉识别与设计系统
• 相关阅读：商店页与搜索入口：翻译不是本地化 、视觉识别的最小系统：一色、一字、一形状