设备样机

设备样机是把截图放进逼真的手机、笔记本电脑或平板电脑边框中，为营销素材、演示文稿或文档提供使用环境。

Related workflow terms: 截图工作流程, 响应式截图.

设备样机为何重要

原始截图只是一个没有视觉背景的平面矩形。读者能看到画面，却无法立即判断它来自手机应用、桌面仪表盘还是平板体验。设备样机用熟悉的设备轮廓包住截图，一眼就能交代使用环境。

这些背景信息有实际作用。营销素材无需额外文字，就能用设备样机表明支持的平台；演示文稿中的设备边框可以把观众注意力引向产品，而不是幻灯片背景；文档则能借此说明一组步骤适用于哪个平台。

设备样机也能让不同素材保持视觉一致。即使底层截图并非同时制作，只要演示文稿中的每张截图都放在相同角度、相同样式的笔记本电脑边框里，整体就会更统一。

常见设备边框

• 智能手机边框——最常用于手机应用营销、应用商店页面和社交媒体广告，iPhone 与 Android 轮廓都很常见。
• 笔记本电脑边框——用于 SaaS 产品、网页仪表盘和桌面软件。MacBook 轮廓最常见，而通用笔记本电脑边框可以避免平台倾向。
• 平板电脑边框——适合面向平板的应用，也可用于展示中等尺寸断点下的响应式布局。
• 浏览器窗口边框——只保留地址栏、导航按钮等简洁的浏览器顶栏，不包含完整设备外壳。当设备本身不重要、但需要说明浏览器环境时很合适。
• 多设备组合——把手机、平板电脑和笔记本电脑边框放在一张图片中，展示布局在不同断点下的响应式表现。

如何创建设备样机

最简单的方法是使用模板。先准备一张屏幕区域透明的 PNG 或 SVG 设备边框图片，再把截图放进该区域。许多设计工具内置这一功能，专门的样机生成器还能自动完成对齐和缩放。

对于经常制作样机的团队，自动化可以省去手动操作。支持设备边框的截图工具能在截取时把每张图片直接放入指定边框，不必再导入设计工具。当产品发布需要数十张截图，或需要为多种设备尺寸制作一组应用商店素材时，这一点尤其省时。

分辨率匹配是关键的技术细节。截图的像素尺寸应与设备边框中的屏幕区域一致。低分辨率截图放进高分辨率边框会显得模糊；过大的截图缩小后，也可能损失细小细节。从一开始就按正确分辨率截图，可以避免这两个问题。

实际使用中，只需为确实需要展示环境的截图制作样机。文档和 QA 通常直接使用原始截图更清楚；发布素材和商店图片则往往值得加上设备边框。

常见问题

• 使用过时的设备边框。 三代以前的手机轮廓会让人觉得产品或至少营销素材很久没有更新。应使用当前一代设备边框，让素材保持新鲜感。
• 截图分辨率与边框分辨率不匹配。 把 750 像素宽的截图放进按 1170 像素屏幕设计的边框，会产生明显模糊。截图分辨率应始终与边框的屏幕区域一致。
• 过度使用 3D 角度。 透视强烈的倾斜样机放在主视觉横幅中很醒目，却会让 UI 更难看清。3D 边框适合概览图；需要阅读内容时，应使用平面、正面的边框。
• 忽略安全区域。 部分设备边框带有刘海、圆角或状态栏，会盖住一部分屏幕。应确保截图中的重要内容不会被这些元素遮挡。