前言

Facebook Design 于今年9月底发布了Origami Studio 3。这是Facebook免费设计原型工具的最新版本，借助新的布局和兼容性工具，我们可以看到Origami不同以往的操作亲和力，不断提升的工具能力，以及对前沿设计趋势的追求。

这次发布的重要功能是Canvas，它为Origami和新的智能动态布局增加了矢量绘图功能。

同时，Origami Studio 3增加了两个新功能：照片库和音频测量。通过照片库可以从iOS上的Camera Roll或macOS上的照片库中检索图像和视频，从而使设计人员可以创建基于照片的布局和交互。

允许Origami测量来自音频源（如麦克风）的音量和频率数据，可以帮助设计师从录制的音频，音乐或基于位置的GPS功能创建可视化效果，甚至可以使用Origami制作AI语音识别助手的原型。Origami Studio 3还增加了对Figma和Sketch的支持。设计师可以将设计稿从Sketch或Figma等工具直接导入到Origami中。

Origami对于基础交互有很好的定义，许多交互细节都值得借鉴学习。当然，他人制定好的规则不是圣经，过程中让我们主动思考，举一反三。

什么是Origami Studio？

什么是Origami Studio？官方有一个具体的定义：

“Origami Studio is a free design tool created by Facebook and available for Mac. It allows designers to rapidly build and share interactive interfaces.”

Origami是由Facebook创建的免费设计工具，适用于Mac，它能设计人员快速构建和共享交互式界面。

它主要由6部分组成，分别是

1. Canvas（画布）

2. Patch Editor（补丁编辑器）

3. Layer List（图层列表）

4. Inspector（属性检视）

5. Viewer（窗口预览）

6. Patch Library （补丁库）

前5个部分非常简单，与我们日常使用的Sketch或Figma操作行为习惯大同小异，Origami最核心的部分在补丁库，这也是它的精髓所在。

Origami Studio的优势在哪

1.高效。

通过使用系统原生的交互，动画语言，与开发沟通障碍能最大程度地缩小，保证落地效果的还原度，做到可见即可得。

2.节点流思想。

这是贴合开发语言的操作思想，与常规绘图软件的操作逻辑不同，节点流能够让我们

有更灵活，更切合实际的思维拓宽。

3.开源。

当然啦，能够白嫖也是我们选择它的原因，毕竟除了Facebook，很少有团队能够支持维护，又不跟你伸手要钱。

4.活跃的社区交流。

我们可以看到很多Origami爱好者在社区网站上面交流，分析和解决设计问题。良好的学习交流氛围对我们来说很有帮助。

Interation Touch案例指南

1.Sample and Hold

补丁样式

功能定义

存储任何类型的值。补丁程序将存储该值，直到采集到新值或重置当前值为止。

主要节点

Value = 输入值 

任何类型的值。默认情况下，该值为数字。

Sample = 样品

程序采样时为true的值。如果为false，则即使更改，补丁也不会采样值。补丁输出最近采样的值。

Reset = 重启 

清除当前存储值的节点

常用交互

Down state：波纹扩散

控制波纹尺寸：Interaction - Switch - Classic Animation - Transition - Oval

控制波纹初始位置：Interaction - Sample and Hold - Oval

2.Tap & Double Tap

补丁样式

功能定义

在指定的时间范围内捕获双击或单击。与Interaction修补程序中的Tap端口一起使用。

主要节点

Tap = 双击或单击

输入交互补丁传输过来的节点

Delay = 延迟

两次轻击之间激活两次轻击的最长时间。默认情况下，延迟为0.3s（Mark，微交互细节）

Double Tap = 双击 

在指定的延迟时间内发生两次点击时产生的节点

Single Tap = 双击 

在指定的延迟时间内发生一次点击时产生的节点

常用交互

Single Tap：单击

控制尺寸：Interaction - Double Tap(Single Tap) - Switch - Classic Animation - Transition - Oval 

Double Tap：双击

控制尺寸：Interaction - Double Tap - Switch - Classic Animation - Transition - Oval

3.Long Press

补丁样式

功能定义

在指定的时间范围内捕捉长按。与Interaction修补程序中的Down端口一起使用。

主要节点

Down = 按下

输入交互补丁传输过来的动作 

Delay = 延迟

按下以激活长按的最短持续时间。

默认情况下，延迟为0.5s（Mark，微交互细节）

Long Press = 长按

在指定的延迟时间内长按时产生的节点

常用交互

Long Press：长按

控制尺寸：Interaction - Long Press - Switch - Classic Animation - Transition - Oval and “Pikachu”

Interation Scroll案例指南

1.Scroll

补丁样式

功能定义

使用自由滚动或分页（轮播）滚动来滚动图层。该图层将在其父图层组内部滚动。

使用图层上的“触摸”按钮可以快速添加交互。

主要节点

Content Layer = 内容层 

要滚动的图层

Enable = 启用

启用滚动时为true的值

Scroll X = 水平滚动（X轴滚动）

水平滚动样式有3种，分别为None，Free，Padding

Scroll Y = 水平滚动（Y轴滚动）

垂直滚动样式有3种，分别为None，Free，Padding

Settings = 设置

自定义滚动设置， 与“Scroll Setting”补丁的输出一起使用

X = 当前水平滚动位置

连接到所选图层的“ X位置”

Y = 当前的垂直滚动位置

连接到所选图层的“ Y位置”

Page X = 当前的水平滚动页面索引

Page Y = 当前的垂直滚动页面索引

2.Scroll Settings

补丁样式

功能定义

定义滚动补丁的行为属性

主要节点

Content Size W H = 图层的宽度和高度

要滚动的图层的宽度和高度。默认值是链接的Scroll中选择的图层大小。

Direction Locking = 方向锁定

当滚动锁定到用户每次触摸，滚动的初始方向时为true的值。

Page Size W H = 页面的宽度和高度

当“滚动”程序设置为“分页”时，页面的宽度和/或高度。 该页面将位于边界的中心。 仅需要在Scroll补丁分页的轴上定义（例如：Paging X Scroll仅需要页面宽度）。 确保被滚动的图层可被页面大小和内边距整除。

Page Padding = 页面的间距

当“滚动”修补程序设置为“分页”时，每个页面之间的填充。 仅需要在Scroll补丁分页的轴上定义

（例如：Paging X Scroll仅需要填充宽度）。

Jump Style X = 跳转方式 X

水平跳跃时的跳转样式（动画跳转或即时跳转）

Jump Position X = 水平跳转位置 X

Jump Style Y = 跳转方式 Y

水平跳跃时的跳转样式（动画跳转或即时跳转）

Jump Position Y = 垂直跳转位置

常用交互

Verticle Scroll：垂直滚动

垂直滚动 ：Scroll Settings - Scroll - Verticle Scroll View

控制页面间距 ：Spacing（即Spliter补丁：spacing属性）- Scroll Settings（Page Padding）

Horizonal Scroll：水平滚动

水平滚动 ：Scroll Settings - Scroll - Horizonal Scroll View

控制页面间距 ：Spacing（即Spliter补丁：spacing属性）- Scroll Settings（Page Padding）

Interation Drag案例指南

1.Drag

补丁样式

功能定义

沿任意方向拖动图层。选择要拖动的图层，然后将“位置”输出连接到该图层的“位置”端口。

主要节点

Enable = 启用

启用拖动时为true的值

Layer = 图层

要拖动的图层的名称

Start

原型启动时，图层开始的位置

Reset = 重启 

将位置重置为起始位置的节点

Settings = 设置 

可进一步自定义“拖动设置”程序中拖动行为的设置

Position = 位置 

可拖动图层的当前位置

Velocity = 速度

Translation = 转化值

2.Drag Settings

补丁样式

功能定义

进一步自定义“拖动设置”程序中拖动行为的设置

主要节点

Clip = 裁剪

启用裁剪后为true的值。裁剪可防止将图层拖出定义的边界。

Min = 最小值

定义拖动边界左上角的点。

Max = 最大值

定义拖动边界右下角的点。

Momentum = 动量

启用动量时为true的值。滑动时，动量会增加物理量。

Momentum Friction = 动量摩擦

0到950之间的数字，表示轻拂该层时的摩擦力。

【*3-5点为案例需要，穿插涉及Math补丁】

3. /(除以)

补丁样式

功能定义

将一个值除以一个或多个值。

主要节点

Input = 基础值

基础值。默认情况下，该输入值为数字。

Input = 乘以值（分母）

分母，要除以的数值。默认情况下，该值为数字。

4. x(乘以)

补丁样式

功能定义

将一个值乘以一个或多个值。

主要节点

Input = 基础值

基础值。默认情况下，该输入值为数字。

Inputt = 除以值（分母）

分母，要除以的数值。默认情况下，该值为数字。

5. Equals

补丁样式

功能定义

检查两个数字是否相等或在公差范围内近似相等。对于不以整数取整的弹性值很有用。

主要节点

First Value = 初始值

输入的基础数值

Second Value = 比较值

要与基数进行比较的数字

Tolerance = 公差

一个数字，表示第一个值和第二个值之间的摆动空间。

例如，容差为0.1意味着2.1等于2。对于弹性/平滑值很有用。

6.Option Picker

补丁样式

功能定义

选择一个选项以根据所选选项进行输出。通常与选项开关一起使用，以控制选择哪个选项。类似于过渡。

主要节点

Option = 选项

代表输出选项的索引（从0开始）。

Input = 输入值

代表选项0的值

Input = 输入值

代表选项1的值

常用交互

Drag：拖动（限制拖动边界）

控制滚动的最大值（即边界右下角的点） ：Layer Info - / - Drag Settings(Max) - Drag - Pokemen

控制滚动的最小值（即边界左上角的点） ：Layer Info - / - Drag Settings(Min) - Drag - Pokemen

Drag：拖动（坐标值归整效果）

归整X坐标值：Point Unpack（X） - Equals - And - Pulse - Drag（Reset）- Pokemen

归整Y坐标值：Point Unpack（Y） - Equals - And - Pulse - Drag（Reset） - Pokemen

停止拖动时触发归整：Interaction - Not - And - Pulse - Drag（Reset） - Pokemen

Option Picker：透明度切换（静止与拖动）

控制静止状态透明度：Ineraciton（Down）- Option Picker（1） -Pokemon

控制拖动状态透明度：Ineraciton（Down）- Option Picker（0.25） -Pokemon

Interation Swipe案例指南

1.Pop Switch

补丁样式

功能定义

在任何两个位置，旋转或缩放之间滑动，旋转或收缩图层，并添加了来自Pop Animation的弹性动画。

主要节点

Enable = 启用

启用手势时为true的值

Layer = 捕获手势的图层

Gesture = 手势选项

Swipe X = X方向滑动

Swipe Y = Y方向滑动

Pinch Scale（未涉及，待深入）

Pinch Rotate（未涉及，待深入）

Pinch X（未涉及，待深入）

Pinch Y（未涉及，待深入）

Start Value

一个数字，代表图层的默认位置，比例或旋转度。

End Value

一个数字，表示手势应对其进行动画处理的图层的第二位置，比例或旋转度。

Flip

触发开关状态（从接通到断开，反之亦然）的节点，该节点还将值转为相应的数字。

Turn On

一个使开关接通的节点，该节点还将值转为最终值。如果开关已经接通，则节点无效。

Turn Off

一个使开关关闭的节点，该节点还将值转为初始值。如果开关已经关闭，则节点无效。

Bounciness

代表动画的跳动度的数值

Speed

代表动画的速度的数值

2. -(减去)

补丁样式

功能定义

从基本值中减去一个或多个值。

主要节点

Input = 基础值

基础值。默认情况下，该输入值为数字。

Input = 减去值

要减去的第一个数字。默认情况下，该值为数字。

常用交互

Card Swipe：卡片滑动（手势）

向左滑动：Pop Switch (Gesture：Swipe X) - “—” - Transition - Frame（Position）

向右滑动：Pop Switch (Gesture：Swipe Y) - “—” - Transition - Frame（Rotation）

重置：Reset - Pop Switch (Turn Off) 

有疑惑或不同见解，欢迎评论留言交流、纠正。