Basics部分

根据自己理解翻译的，不合适的地方请见谅，请帮助我改进

https://github.com/wendaleruan/Origami-Studio-Documentation-CN

简介

Origami Studio 是 facebook 创造的一款免费的在mac平台工作的设计工具。它让设计师们能够快速地创建和分享交互界面。

在Origami Studio 有4个主要的面板：

Patch 编辑器

添加交互、动画和动作到你的原型中用的模块叫做patch

Layers 图层

原型中的图层列表，在工具栏用 + 按钮添加一个新的图层，选择一个图层然后在属性面板调整它的属性。想要添加一个交互到图层上，请把鼠标放到图层上然后点击 Touch 按钮从一个列表选择交互动作如点击，滚动，滑动。

Viewer 查看器

查看原型和交互动作

Patch 库 ⌘⏎

查看列表中所有的patch和他们的描述。双击Patch编辑器或者用键盘快捷键打开Pathc库，然后选择一个patch按回车来添加patch到原型中。

——————————————————————————————————————

Patch 模块

Patch 是 Origami Studio 的构建模块。可以用惊人的速度演示你的想法和迭代。

Patch 允许你添加交互、动画和动作到你的原型中，每一个patch都有独有的功能可以从其他的patch接受和传递信息。

Patch 库包含了大量的patch模块, 但是一套15-20个patch模块的核心设置就已经支持大多数的原型了。它们都有单独的快捷键可以超级快的使用。

Patches 有简单的数学模块:

（+模块输入两个数字在左边，然后输出综合在右边，2+3=5。）

patch 可以添加交互到图层上：

（Interaction模块输出触控的信息在查看器图层上。当手指在区块上按下，它在down这个端口输出 √ 。）

patch可以管理状态：

（Switch模块能打开或关闭左侧的输入，然后输出当前的状态到右边）

patch可以控制图层属性：

（通过在属性面板点击任意属性，添加图层属性模块。这个模块控制区块是否显示或者隐藏）

端口

端口允许模块接收信息，并将信息传递出去。 左边的端口是模块的输入，右边的是输出。点击端口的值编辑输入。（除非另一个模块的连线已连接到输入上）

每一个端口都能接收不同类型的信息-- 用于Origami的值的重要类型：

• Number: 整数或小数

• Boolean: 布尔的值有两个可能的结果(例如: true/false, yes/no, on/off, 0/1). 布尔端口的值经常是 On/Off,  On 值相当于是一个对号。类似程序中，在模块间传递数据，布尔的值能被修改为一个数字 0 (off) 或者1 (on) 。

• Text: 一串字符.

• Image: 你可以拖拽或粘贴任何的图片.

• Video: 你可以拖拽或粘贴任何的视频.

• Sound: 你可以拖拽或粘贴任何的音频.

• Color: 任何 RGB 或者 HSL 颜色.

• Index: 任何非负的整数 (例如: 0, 1, 2)

• JSON Data: 任何数量的任何类型的JSON格式的值。JSON（Javas cript Object Notation）是用于存储和交换数据的通用格式。

• Point:一个相当于数字在2D、3D或4D中的值。Points可以代表任何组的X，Y，Z值（例如：位置X，Y，Z；旋转X，Y，Z）。

一些模块能改变它拥有或支持类型端口的值，右击任何模块能够看到可用的选项。

连线

连线 在模块之间通过它们的端口传递信息（值）。 想象信息就像是水流，然后连线就像管子可以把它到处移动。 数值在一个方向流动: 左边到右边 从一个输出到一个输入

创建一个连线, 从一个输出端口 (在模块的右边) 拖拽到一个输入端口 (在模块的左边)。断开连线, 拖拽右端离开输入端口。

一个输出端口能链接多个连线, 但是一个输入端口同一时间只能接受一个连线。使用模块 如 数学 (+, -, x, /), 逻辑 (Or, And, Not), 过渡或者选项选择器以从多个连线链接或者选择. 通过选择输出口快速地连接一个输出口到多个输入口，以及shift+单击你想要链接的输入口。

把它们连接一起

在下面的一个例子中，三个不同的模块用连线连接到它们的端口上传递数值到其他的模块.。这些模块一起描述了一个按下的交互动作，切换图层开和关。

总结

• 模块让你快速地添加交互、动画和动作到你的原型中。

• 模块有输入和输出让它能和其他的模块交流。

• 有一个大型的库来支持创建任何的想法。对于大多数原型来说, 你只需要知道15-20个模块。

• 学习键盘快捷键来提高你工作的速度。

————————————————————————————————————————

Layers 图层

图层在 Origami Studio 里类似于图层在 Sketch 和 Photoshop: 每个图层都具有样式属性 (位置, 大型, 图片 或者 颜色) 并且能够被有条理的组织的。

用⌘⇧N或者工具栏+按钮添加一个图层。

图层组

通过选择任意数量图层然后按下 ⌘G，图层就能被编组。图层组在 Origami Studio 有它们自己的大小和位置， 并且合上里面的图层。

图层属性

图层属性类似于模块的端口. 这些输入端口的值决定了图层的显示结果。

图层属性模块

通过模块调整图层属性 点击属性在属性面板, 然后一个名叫图层名的蓝色图层属性模块就会被创建出来，只有写着一个值的一个单独的输入端口。

（点击透明端口在区块属性上将会添加这个模块到模块编辑器里）

你也可以直接拖拽一条连线从模块到属性面板的图层属性上。

如果一个属性有多个坐标（例如: 位置 X/Y, Size W/H），你可以点击具体的坐标，如:X

或者点击全部属性，如：位置

（点击多个坐标的属性，例如: 位置，大小，角度，将自动插入一个Point模块，能够表示额外的不会默认显示的坐标，如:Z）

遮罩

图层能被其他图层遮罩住. 按下⌘⌥M将会转换图层为透明遮罩, 裁剪上面的图层。 添加额外的层被遮住，你可以选择图层并按⌘⌥⇧M.

All masks are alpha masks, which can let you do advanced masks like gradient masks or composite masks based on a group of shapes. 所有的遮罩都是透明遮罩，它可以让你做进阶的遮罩，如倾斜的遮罩或复合的遮罩，基于一组的形状。

组件

提供预置好的组件集来用标准组件在安卓或IOS上快速制作原型。

通过选择图层然后按下 ⌘⌥G 编组他们到一个组件里以创建自定义的组件 ，双击组件可以进去修改它. 添加它到你的库里并且通过按下 ⌘⌥C 分享给别人。

总结

• 图层就类似于其他app里的图层， 就像 Sketch 和 Photoshop,  都能被编组和遮罩

• 通过在属性检查器点击图层属性以在模块编辑器里添加对应的模块来编辑动画和图层。

• 使用预置组件来加快你的工作速度, 创建你自己的组件库并且分享。

——————————————————————————————————————————

Interactions交互

交互模块输出关于用户交互的信息(触摸, 滑动, 关键点按)在viewer查看器里。通过在图层上按下 Touch 按钮或者通过在模块库里面搜索模块来添加交互动作。

交互模块

• InteractionI这是在Origami主要的交互。  它可以告诉你，当一个用户在特定的层按下或点击。它还提供了在它的父组的触摸位置，以及使用笔记本电脑，手机或平板电脑时的按压力度，支持3D触摸。

• Scroll 这是在 Origami 中另外一个常见的交互. 它可以让你随着自定义的物理状态纵向或者横向滚动图层. 它能够被设定有用于原型的旋转的页面模式。

• Pop Switch 这帮你快速地创建原型一个双状态的滑动交互(例如: 左或右滑动卡片). 它也支持两手指滑动。

• Long Press 和 Double Tap 当链接交互模块时表示长按和双击。

• Drag 使任何图层可拖拽.

• Keyboard K  这表示无论何时一个按键在查看器中被按下。

• Hover 让你用鼠标悬停的交互

触发触摸事件的注释

图层需要可用并且有大于0的透明度来接收触摸。触摸在图层组中被继承并且和父组共用, 这让你用组内部的可点击的图层建立滚动图层组。

总结

• 交互模块传递关于交互的信息

• 特定图层的交互能够用触摸菜单创建

• 有多种不同类型的交互模块可以创建不同类型的交互动作

——————————————————————————————————————————

States状态

每个原型都有多个状态并且能够在状态间变化. 在 Origami中, Switch 模块帮助保持追踪你的状态. 他们就像灯光的开关能被交互模块切换。

状态模块

开关 ⇧S

Switch 模块就像灯光开关: 打开它保持开着, 和关闭它保持关着. 他们对于构建简单的两个状态的交互很有用。例如显示和隐藏弹出对话框。

多个 Switch 模块能被用逻辑模块 (Or, And, Not)连接以在其他模块之上创建，例如：打开一个具有不同连接选项的设计，用户可以切换。

选项开关

Option Switch 模块对于不能共存的互相独有的状态很有用 例如:标签栏。 选项开关对于选项选择器依据状态传递不同的值十分常用。举个例子, 如果你想要在3个状态间切换导航栏标题。

计数器

Counter 模块对于不能共存的互相独有的状态很有用, 并且按顺序增加。 例如：一个入职流程。

编号数字表示状态

Switch 和 Option Switch 模块都是输出状态的数字. Switch 模块输出  0 (off) 或者  1 (on), 以及 Option Switch 模块 输出数字从0开始 作为第一个状态,到 1 位 第二个, 以此类推:

• Index 0 → Initial state / Off State

• Index 1 → 2nd state / On State

• Index 2 → 3rd state

• Index 3 → 4th state

• ...

总结

• 用 Switch, Option Switch, 或者 Counter管理状态

• 状态用整数表示, 从0开始

——————————————————————————————————————————

Animations动画

动画在 Origami 里是被设计用来流畅转换的，例如: 他们使任何数字的改变之间变得平滑。

动画模块

• Pop Animation A 自然的有活力的动画通常在 Facebook 应用里发现。 你可以很简单的传递数值到你的开发中，用iOS的 Pop 框架，Android的 Rebound , 和web的 Rebound JS 。

• Classic Animation C 传统的缓动曲线, 如 linear, ease-in, 和 ease-out.

• Repeating Motion 重复, 缓动曲线来回的动画

动画数值

在组合中  Interaction 或者  Switch 模块,  输出 0 或 1, 一个动画模块能从0到1平滑地过渡数值, 反之亦然. Origami 一般渐进的转换换0到1的数值.

下面这个例子，当你点触的时候将从 0 到 1 (或者 0% 到 100%) 用可逆的有活力的动画缩放一个图层：

过渡

动画从 0 到 1 很简单, 但是在其他值之间变化呢?

Transition T 模块让你的过渡从 0/1 到任意 start/end 值:

举个例子, 如果你想要变化一个图层的宽从 100px 到 200px. 你要具体说明开始的值100, 和结束的值 200. 从组合中变化0到1的值上面讲过, 你能很轻易的变化图层的宽度。

With a Progress of 0:

With a Progress of .5:

With a Progress of 1:

在动画模块组合中,你现在能轻松地在任何两个值之间变化。

总结

• Pop 动画和经典动画是自动的在任意数值之间。

• 交互, 开关, 动画, 过渡 (ISAT) 是动画图层不可或缺的。

• 通过使用一个动画模块连接到多个过渡来同步多个动画一起，从0-1进阶到任何start/end 的值。