用 Duo Studio 制作折叠屏效果图

Duo Studio 是一个开源、完全在浏览器中运行的折叠屏效果图与动画制作工具。上传 App 的内外屏截图,选择设备姿态,即可为产品发布生成视觉素材。网页模拟模式可预览允许 iframe 嵌入的网站。截图处理与导出在本地完成,应用可以部署在静态托管服务上。

如何用截图制作效果图?

在顶部选择截图制作模式,展开上传截图入口。
上传内屏截图,也可以单独上传外屏截图。没有单独外屏图时,可从内屏左半部分生成外屏视图。图片比例不一致时,可调整填充模式铺满屏幕。
选择自由开合、闭合、展开横屏、展开竖屏、坐姿或站立,为不同场景配置方向相符的截图,再调整折叠进度。
点击导出,选择格式和尺寸后生成下载。高级模式可调整更多取景与场景设置。

需要准备什么尺寸的截图?

为每个要导出的姿态准备一张截图。Duo Studio 将 iPhone Duo 内屏按横屏 2853 × 2007 像素、竖屏 2007 × 2853 像素(约 1.42:1)渲染,外屏为 1398 × 2034 像素,站立姿态为 2034 × 1398 像素。这些尺寸是本工具截图槽位的预设值，不代表经过验证的硬件参数或 App Store 提交要求。工具接受每边最长 4096 像素的 PNG、JPEG 和 WebP 图片;比例不一致时,「适应」保留完整图像并留边,「填充」裁剪铺满。

屏幕	使用姿态	建议像素	宽高比
内屏 · 横屏	自由开合、展开横屏	2853 × 2007	1.42:1
内屏 · 竖屏	展开竖屏、坐姿	2007 × 2853	1:1.42
外屏 · 竖屏	闭合	1398 × 2034	1:1.45
外屏 · 横屏	站立	2034 × 1398	1.45:1

Duo Studio 的六种设备姿态:自由开合、闭合、展开横屏、展开竖屏、坐姿与站立

完整的槽位、姿态与导出规格表见截图尺寸与导出规格专页。

截图制作和网页模拟有什么区别?

模式	输入	适用场景
截图制作	内外屏图片	产品发布图、设备效果图、折叠动画
网页模拟	允许嵌入的网站地址	检查不同姿态下的响应式布局与网页交互

任何网站都能打开吗?

不能。目标网站必须允许 iframe 嵌入。通过 Content-Security-Policy 的 frame-ancestors 或 X-Frame-Options 限制嵌入的网站可能无法打开,本工具不会绕过这些限制。网页模拟会直接请求目标网站,而不是上传网页截图。

导出实时网页需要在支持的浏览器中授权捕获当前标签页。网页布局视口和导出图片的像素尺寸是不同的设置,导出前应检查当前场景和输出尺寸。

支持导出哪些格式?

所有导出均在本地生成:

格式	内容	分辨率与帧率	说明
PNG 静态图	按所选输出尺寸装框的效果图	场景原始尺寸最高 2853 × 2007,横版 1600 × 1000、竖版 1080 × 1350 或方形 1200 × 1200	可选透明背景
MP4 动画	H.264 折叠动画	30 fps,最长边最高 1280 px	需浏览器支持 H.264 编码
WebM 动画	VP9 折叠动画	30 fps,最长边最高 1280 px	需浏览器支持 VP9 编码
GIF 循环	循环折叠动画	12 fps,最长边最高 640 px	128 色调色板
场景包 ZIP	每个屏幕槽位一张 PNG,附清单文件	槽位原始尺寸,如 2853 × 2007	适合整套截图素材
原始 UI PNG	未装框的上传原图	必须与槽位尺寸完全一致,如 1398 × 2034	用于核对精确尺寸

Duo Studio 导出面板,列出 PNG、MP4、WebM、GIF 与 ZIP 场景包选项

动画时长 2–10 秒,两端可加停留。视频编码能力取决于浏览器。

截图会上传到服务器吗?

Duo Studio 在本地处理截图并生成导出文件。项目可以保存为 .duo.json 文件,也会在浏览器中自动保存。项目文件可能包含原始截图,分享时需要一并考虑这些素材。网页模式会访问你打开的网站,该网站有独立的隐私实践。

这是 iPhone Duo 真机模拟器或 Apple 官方工具吗?

Duo Studio 使用项目中注明来源的设备素材,生成 iPhone Duo 风格的视觉效果图。它不运行 iOS 或你的原生 App,也不是 Apple 官方产品。效果图不能证明真机兼容性、适配完成或符合 App Store 审核要求;这些仍需通过真实测试与当前提交规范确认。

项目由谁维护?

代码、许可证、素材来源与问题反馈入口均在 iPhoneDuoMock 源码仓库公开。示例使用 EchoPod 截图,你可以替换为自己的 App。反馈问题或提出功能建议。

截图尺寸与导出规格

打开编辑器