这是一个创建于 1320 天前的主题，其中的信息可能已经有所发展或是发生改变。
简介
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
 |
1
cairnechen 2021-05-17 11:09:13 +08:00
facebook 家的吧，以前捣鼓 fresco 的时候了解过
|
 |
2
sillydaddy OP 如果有疑问的话，可以在回复里面提问，说不定我可以答上来。
|
 |
3
HiJony 2021-05-17 11:26:49 +08:00
欢迎到群里来交流:D
VGhlRmFrZUpvbnk= |
|
5
sillydaddy OP |
 |
6
CSGO 2021-09-10 17:05:18 +08:00
hard for me.
|
Select Language