AppScreenshots 文档设备框
在截图项目中选择、填充并调整真实设备样机或 CSS 设备框。
使用设备框，但不要遮住产品本身
设备框告诉用户产品运行在哪里，但设备本身不是产品。放在其中的界面必须足够大、足够新，并且容易检查。
当前英文模板预览参考。手机外框提供设备语境，应用界面仍然是视觉证明；请在自己的帧中保持同样的主次关系。
选择设备框风格
在截图编辑器中打开 Devices。面板提供两种模式：
| 模式 | 包含内容 | 适合场景 |
|---|---|---|
| Real Device | 按 iPhone、iPad、Mac、Apple Watch、Android 和 Display 分类的真实设备资源 | 真实硬件语境能帮助讲清产品故事 |
| CSS Device | 可配置的 iPhone、iPad、Android、HarmonyOS 和浏览器设备框，并按可用情况提供标准、3D、手持和自定义样式 | 需要更干净、图形化或更灵活的样机表现 |
设备列表会在产品中持续维护，因此请以编辑器内当前可选型号为准，不要依赖文档中的静态型号列表。
正确放入应用界面
添加并选中设备
在 Devices 中选择一台设备，它会加入当前帧。在画布上点击该设备，打开 Device Properties。
上传或替换应用界面
使用 Upload Screenshot。图片加入后，同一区域还会提供 Replace 和 Remove。请把原始截图留在项目素材中，方便后续版本快速替换。
调整展示方式
在设备属性中选择设备类型、颜色、可用的 3D 角度或手持样式，然后调整尺寸、旋转、位置和图层顺序。设备应足够大，让用户看到 UI，而不是只看到硬件外观。
将设备框与交付计划匹配
| 交付场景 | 推荐做法 |
|---|---|
| iPhone 或 iPad 商店页 | 使用目标设备类别的源截图和匹配设备框；在目标商店后台确认所需画布尺寸。 |
| Android 商店页 | 使用干净的 Android 源截图和兼容的 Android 设备框。不要只因 iPhone 外壳更熟悉就混用。 |
| 浏览器或扩展程序商店页 | 使用浏览器框，并选择浏览器尺寸的模板或画布；确保浏览器界面和内容可读。 |
| 营销或社媒素材 | 先选择最能讲故事的设备框，再用 Screenshot Resizer 生成其他交付尺寸。 |
避免四类常见错误
- UI 太小： 放大设备，直到用户能识别出相关操作。
- 证明不匹配： 让截图内容证明标题，而不是只让它和设备类型匹配。
- 视觉语言混乱： 除非有意制造对比，否则整组使用一致的硬件风格和设备颜色。
- 裁切不安全： 为阴影、标题和翻译后的文案预留空间；检查导出的边缘，而不仅是编辑画布。
跨帧设备
如果需要连续的横向全景布局，请将画布切为横向，开启连续模式，选中设备，然后在 Device Properties 中开启 Frame Spanning。选择向右跨越多少帧即可。这是视觉效果，而不是替代每一帧独立可读性的办法。