Origami入门教程1：导入图层与页面的切换

Origami Studio是Meta出的一个交互原型的制作软件，我之前用过Principle，它的滚动动画的编辑方式令我印象深刻。而Origami使用了一种类似模块的原型编辑方式。这有点像Unity开发，也像3d材质贴图和Homeassistant自动化的设置逻辑。在初步体验下来，感觉灵活度和自由度都非常的高。

另外这款软件是Mac独占软件，不支持简体中文，不过词汇都是平常常见的。

写这个教程的主要原因一个是b站上很多视频教程都是上古版本的，虽然一些核心逻辑都一样，但是很多功能都换了位置。还有官方的文档也不更新，还是用的很久的UI。所以这个软件上手可谓是困难重重。这就是写教程的一个初衷，期望能够帮助到一些打算制作高保真交互原型的小伙伴，也能够作为我自己对于这方面学习探索的一个记录。

导入图像

Origami支持Sketch和Figma，但是Sketch我按照官方文档的直接复制粘贴的法子只能粘贴为一个拼合图像。这一点在旧版本Principle配合新版本Sketch也能见到。我目前不太清楚有没有解决方案。不过我测试下来Figma插件是支持的，所以建议使用Figma作为工作流，或者将Sketch文件导入到Figma再转入Origami。

不过，如果你打算直接使用Sketch粘贴到Origami，需要根据你的设计尺寸来调整一下倍率。

比如我做设计喜欢用一倍图做设计（常见是375px宽度），那么我需要在Origami中进行设置。

这样粘贴的图片就与设计稿相同了。但是如果你默认是2倍图做设计（常见750px宽度）那么就默认设置2x即可。

在Figma中，我们只需要安装Origami Pasteboard插件即可。选中我们需要复制的画板或者元素，然后点击复制。

当我们看到对号的时候，我们就可以回到软件粘贴了。

我们可以看到有一些图层位置和方向有一些问题，手动调整之后即可。

初始状态

最开头我们先做一个最简单的跳转吧。先说这个的原因是网上几乎没教程说新版跳转怎么跳。

我们需求是点击人物之后跳转到播放页面，点击播放上面的图片后返回到首页。

我们首先要知道，所有画板在Origami是叠在一起的，甚至区分上下层。

但是播放盖住了首页怎么办呢？我们就需要设置初始的显示状态了。

选中画板，然后设置初始状态。按照例子，我们需要将首页设置为显示，将播放页设置为隐藏。

添加交互

然后我们选中可以点击的元素。这里我选择易烊千玺的图片。然后点击右侧的加号，选择Tap。

Tap是点击。

我们将视图的显示方式切换为第三个，我们就能看到选择tap后就会出现的交互模块patch了。

我们需要点击之后跳转到播放页面，我们选中“播放”页面。可以看到present和dismiss。

我们点击present前面的小加号。我们看到了一个新的patch。

蓝色的patch代表的是更改后的状态。我们将tap的小圆点和播放present小圆点进行连接。

我们在预览框中测试一下就可以发现已经实现了。

我们还可以调整是横向还是纵向。

返回

那么我们已经制作成了跳转，那么如何点击播放中的图片返回到主页呢，跟上面的原理几乎相同。可以添加tap来与dismiss进行连接。

勾选edge swap也可以在边缘进行返回。

总结

这一期做一个页面跳转的引子，介绍一下新版本的页面跳转和素材导入的方式。最基础的页面跳转我们已经完成了。接下来我们针对单页面再进行一些动画的设计吧！