内容提要
Origami Studio是Meta出的一款交互原型制作软件,使用模块化的原型编辑方式,灵活度和自由度高。软件仅支持Mac系统,不支持简体中文。教程旨在帮助制作高保真交互原型的人,并记录作者的学习探索。导入图像时,建议使用figma作为工作流,或将sketch文件导入到figma再转入origami。教程介绍了页面跳转和素材导入的方法。
延伸解读
为什么选择 Figma 作为导入工作流
文章指出,直接使用 Sketch 粘贴到 Origami 时,只能得到拼合图像,而通过 Figma 插件 Origami Pasteboard 可以正常导入画板或元素。因此,作者建议将 Figma 作为主要工作流,或将 Sketch 文件先导入 Figma 再转入 Origami。这能避免图层丢失,也便于后续调整。
导入素材时注意倍率设置
如果直接使用 Sketch 粘贴到 Origami,需要根据设计尺寸调整倍率。例如,以 1 倍图(375px 宽)设计时,需在 Origami 中设置相应倍率,使粘贴的图片与设计稿一致;若以 2 倍图(750px 宽)设计,则默认 2x 即可。忽略此设置可能导致素材尺寸不符。
页面跳转的核心:初始状态与 Present/Dismiss
在 Origami 中,所有画板叠在一起,需先设置初始显示状态:首页显示,播放页隐藏。然后为可点击元素添加 Tap 交互,将 Tap 与播放页的 Present 连接,实现跳转;返回则用 Tap 连接 Dismiss。还可调整跳转方向或勾选 Edge Swap 支持边缘返回。
Q&A
Origami Studio是什么软件?它有什么特点?
Origami Studio是Meta推出的一款交互原型制作软件,采用模块化的原型编辑方式,灵活度和自由度高。它仅支持Mac系统,不支持简体中文,但词汇常见。
Origami Studio支持导入哪些设计文件?推荐的工作流是什么?
Origami支持导入Sketch和Figma文件。推荐使用Figma作为工作流,或者将Sketch文件导入到Figma再转入Origami。直接使用Sketch粘贴到Origami时,需要根据设计尺寸调整倍率。
如何将Figma中的设计导入到Origami Studio?
在Figma中安装Origami Pasteboard插件,选中需要复制的画板或元素,点击复制,然后回到Origami中粘贴即可。粘贴后可能需要手动调整图层位置和方向。
在Origami Studio中如何设置页面的初始显示状态?
所有画板在Origami中是叠在一起的,需要设置初始显示状态。选中画板,设置初始状态:将需要显示的页面设为显示,其他页面设为隐藏。
如何在Origami Studio中实现点击跳转到另一个页面?
选中可点击元素,添加Tap交互。然后选中目标页面,点击present前面的小加号,将Tap的小圆点与present的小圆点连接。在预览框中测试即可实现跳转。
在Origami Studio中如何实现从子页面返回首页?
与跳转类似,在子页面中添加Tap交互,然后与dismiss进行连接。勾选edge swap还可以在边缘进行返回。