设备样机

设备样机（Mockup）是一种将截图放进绘制或拍摄的设备外框中的图像，外框可以是手机、平板电脑、笔记本电脑或浏览器窗口。外框告诉观看者界面运行在什么设备上。

每个样机模板都有一个尺寸和宽高比固定的屏幕区域。截图必须与该区域匹配，否则会被拉伸、裁剪或周围留出空白。基于照片的模板还会应用透视效果，将截图变形以贴合倾斜的屏幕。

样机是一种展示用图像。它与设备模拟不同，设备模拟改变的是页面本身的渲染方式。

设备样机为何重要

网页上一张光秃秃的手机截图看起来可能只是一个随意的竖长矩形。外框能让观看者立刻了解屏幕尺寸和使用场景。它还能让落地页或演示文稿中各式各样的截图呈现统一的外观。

常见设备外框

• 竖屏手机，带或不带刘海或灵动岛区域。
• 竖屏或横屏的平板电脑。
• 屏幕呈一定角度的笔记本电脑。
• 带简易地址栏的浏览器窗口，用于展示 Web 应用截图。

如何制作设备样机

1. 按外框屏幕区域的宽高比截图。
2. 在设计工具或样机生成器中打开样机模板。
3. 将截图放入屏幕区域，检查四角和刘海位置。
4. 按目标渠道所需的尺寸导出。

在 Temposhot 中，Custom Area 选择器提供 iPhone 17 Pro（402×874）、iPhone 17 Pro Max（440×956）、Galaxy S25（360×780）和 Pixel 9（360×808）等手机预设。对于网页，Website Capture 提供 390×844 的 Mobile 设备尺寸。

常见错误

• 使用宽高比不同的截图，导致外框遮住部分内容。
• 将小尺寸截图放大以填满大外框，导致文字模糊。
• 在应用商店要求纯截图的位置使用样机。请查看该商店的最新要求。
• 使用与当前硬件不再相符的过时设备外框。

需要反复截取同样的画面？

使用 Mac 截图自动化，一次运行即可截取所有手机尺寸的画面。

常见问题

应用商店接受样机图吗？

各商店的规则不同，而且会随时间变化。提交前请阅读该商店最新的截图规范。

截图应该是多大的分辨率？

至少要达到外框屏幕区域的像素尺寸。Retina 截图通常能提供足够的像素。

参考资料

• Mockup（维基百科）

相关资源

• 截取源：Custom Area 预设。
• Social Image Composer：将截图放到带内边距的背景上。
• Aspect Ratio Calculator：匹配外框屏幕区域的宽高比。