推荐一下 Origami（App 原型制作工具）

简介

Origami 是一个比较有特色的原型工具。如果你对现在手上的原型工具不满意，可以看一下。如果你已经有合适的原型工具了，不妨也了解一下。

不多说，先贴图

这张图实现的效果是：
鼠标点击某个图层后，将 Photo 图层的缩放由 0 变为 1，将另外一个图层的 Opacity(透明度)由 0 变为 1 。并且变化过程有时间动画效果(Pop Animation)。

图片里面，"Switch"/"Pop Animation"/"Transition" 这些灰色框框，表示 Patch，仔细观察会发现它们的左侧和右侧各有一些“锚点”。左侧的是输入数据，右侧的是输出数据。你可以把这些 Patch 理解成数据加工的机器。并且 Patch 可以串联起来，对数据作连续的加工。

从图片里面，可以清晰看到数据流向：紫色框是用户的点击操作，触发后面的一个开关翻转，开关的状态(0/1)作为 Pop Animation 的输入，设定好 animation 的时间(speed)，它输出一个随时间变化的 process，这个 process 作为输入，经过一个线性映射(transition)，再将线性映射的输出，绑定到多个图形的属性(比如 Opacity/Scale)上。

它不仅可以处理“点击”这种单次离散的事件，也可以处理“拖拽”这种连续的。

看一下 拖拽对应的 patch

整个 Origami 的设计就只有这一种“数据流+连接”抽象，没有其他更多的概念了。 这种抽象方式，是不是很容易理解呢？所有的用户操作都可以作为输入，而图层的所有属性，都可以接收 Patch 的输出。

我觉得这种方式特别适合于原型制作，因为原型的输入输出，都是很直接的，中间没有复杂的数据逻辑。而且有点 zero-abstract(零成本抽象)的感觉：在花很少的时间理解了这种数据流的方式后，如果你要制作的原型比较简单，那只需要常用的 4 ～ 5 个 patch 即可，如果需要更复杂的(比如条件判断、循环)，只需再学习对应的 patch，整个软件的使用逻辑是不会变的。

有些担心

不知道你是否和我曾经一样，担心这种连线会变成一团糟糕的线团。看下面的文章会解除你的顾虑：
https://blog.prototypr.io/a-cure-for-cable-clutter-in-origami-studio-f07e6a65264f

进一步的资料

官方例子，Origami 的简单演示
https://www.youtube.com/watch?v=ThaWrk3L2eU

里面有连续触发、离散触发的形象演示，可以不看文字，只看动图
https://www.raywenderlich.com/117-origami-studio-tutorial-for-mobile-prototyping-getting-started

官方网站，文档很完备
https://origami.design