博客 / 实用教程

手机截图样机怎么做?先建立规则,再复制风格。

样机的价值是让观众快速理解产品,而不是用更多装饰掩盖界面。这套流程适合官网、作品集、社交媒体和演示文稿。

样机工作流 阅读 7 分钟

01 / 先把素材按“想说什么”分组

不要按截图时间排序,而是按信息层级分组:第一张说明核心价值,后续图分别解释主要操作、结果和细节。

位置任务建议内容
首图建立价值最能代表产品的界面
中间解释流程一张图一个步骤或功能
收尾强化结果成品、对比或使用场景

02 / 固定三个视觉变量

整组图不需要完全相同,但至少要固定设备框外观、背景色系和标题层级。先完成一张基准图,再用相同规则处理后续素材。

✓ 设备框类型和外观统一
✓ 标题字号和对齐方式统一
✓ 背景亮度和饱和度统一
✓ 设备与画布边缘的距离统一

03 / 在小屏幕上检查信息密度

把成品缩小到实际使用大小。如果标题读不清、界面重点找不到,问题通常不是分辨率,而是一张图承载了太多信息。

  • 先删副标题,再考虑缩小字号
  • 优先放大关键操作区,不必完整展示所有 UI
  • 用留白分隔设备和文字,不要依赖复杂装饰

04 / 为每个渠道另存一份结果

官网、社交媒体、作品集和应用商店的尺寸与内容规则不同。保留同一个视觉源,但按发布渠道分别导出和检查,不要用一张图强行适配所有地方。

常见问题

样机图一定要有手机边框吗?

不一定。设备边框适合强调使用场景,纯界面截图则适合解释细节。一组图可以按任务混合使用。

一组图需要都用同一个背景吗?

不必完全相同,但应共享明确的色系、亮度和标题系统,让观众能看出它们属于同一组。

官网图可以直接拿去提交 App Store 吗?

不要默认可以。应用商店对像素、格式、透明度和内容都有独立要求,需要另外核对。

App 原生导出 · 真实 PRO 界面
App 原生导出 · 真实 PRO 界面