一. 前言

视频版教程 ( 英文 )

范例源文件

在这份教程中，我们先会了解一些基本知识，然后我们将在你的设备上创建一个简单的原型。

这是最终的作品:

二. 准备

1. 下载 Form 并连接上你的设备

请先从 Mac App Store 下载 Form，以及从 iOS App Store 下载 Form Viewer。

你可以在工具栏上的 浏览设备 (Device Browser) 按钮连接你的设备，也可以从窗口菜单连接。

如果没有出现你的设备，请确保你的电脑和 iOS设备处在同一 Wifi 下。

2. 添加贴片(Patch)

在 Form 里，你通过 贴片(Patches) 来创建原型。贴片 (Patch) 就像一些特定的函数，每个 贴片 (Patch) 从它的 传入接口 (Inputs) 获得数值，经过处理后，再通自己的 传出接口 (Outputs) 传出数值。传入接口的值可以是你自己设定的数值或者从其他贴片传出接口传出的值。

你可以通过两种方法添加贴片：

1. 贴片库 (The Patch Library): 你可以在顶部工具栏的右侧开启贴片库。贴片可以从贴片库直接拖拽到画布上。试试拖拽任意的贴片到画布上，再按 Delete 删除它。
2. 快速插入贴片窗口 (Insert Patch Quickly): 按下 ⌘-Enter 可以唤出 快速插入贴片窗口 (Insert Patch Quickly)。 在文本框中输入贴片名称可以进行搜索。试试搜索 “Color View”，再按回车键来把它插入画布。

你现在应该可以看到文档中的 色块视图 (Color View) 以及手机屏幕上的一个白色方块。

3. 设置 传入接口值 (Input Values) 以及理解 坐标系统 (the Coordinate System)

现在，你可以过两种方法编辑 色块视图 (Color View) 的传入接口值：

1. 贴片监视器(Patch Inspector): 在顶部工具栏右上方点击属性按钮(Properties)，或者按⌘ + 1来打开贴片监视器。试着编辑一些接口值，例如 X轴坐标 (X Position) 或者 旋转 (Rotation)。
2. 直接输入数值(Input Values): 另外一种编辑接口值的方法是直接键盘输入。在任意的接口上悬停鼠标可以显示该项当前的值。 双击该接口会在画布上固定住接口值，再次双击接口值可以对数值进行编辑。

坐标系统 (View Coordinate System) : 设备的坐标系统从设备屏幕左上角的 (0, 0) 开始计算。试着改变 色块视图 (Color View) 的 位置 (Position) 接口值，并观察它是怎样在设备屏幕上移动的。

中心锚点 (View Anchor Points) : 视图 (Views) 上的 中心锚点 (Anchor Points) 都从该视图左上角的 (0, 0) 开始计算。他们的数值范围是 0 - 1，表示相对于该 视图 (Views) 的位置。中心锚点 (Anchor Points) 代表了移动、旋转、缩放等变化的中心位置。

比如，如果你想让某个 视图 (View) 绕着中心旋转，你应该把它的 中心锚点 (Anchor Points) 设置为 (0.5, 0.5) ，然后改变 Z轴旋转 (Z Rotation) 接口的值，并观察它如何运动。

4. 在贴片间创建 链接 (Connections)

贴片 (Patches) 通常从一个传出接口 链接 到另一个传入接口。传出接口是圆形的，传入接口是方形的。大部分的链接都是从左到右的。有一些传出接口，例如 交互 (Interaction) 、 手势 (Gesture) 、 状态 (State) 是从右向左链接的。

试着用 快速插入贴片窗口 (Use Insert Patch Quickly) ( 按 ⌘ + Enter )，来添加一个 触屏交互贴片 (Touch Interaction) ，以及一个 父元素接口贴片 (Superview Variables)。在两个 交互 (Interaction) 接口、两个 宽度 (Width) 接口间分别创建链接，并观察链接的方向。

在继续下面的教程之前，请删除你文档中所有的贴片。我们会在稍后把他们添加回来。

三. 创建一个简单的原型

现在，我们已经了解了一些基本知识，可以开始制作一个简单的原型了。

步骤1: 添加图片 (Step 1: Adding an Image)

首先从 Finder 拖拽一张图片进入文档。为了更好的效果，请像教程中一样，使用一张正方形的图片 (我们从 Instagram 下载了一张) 。文档中会出现一个已经和 图片视图 (Image View) 链接好的 图片贴片 (Image patch)。图片也会同时在你的iOS设备上显示。

缩放(Scale): 在这个例子中，我们把方形图片的 缩放 (Scale) 接口数值设置为2。缩放 (Scale) 接口指明了设备上一个物理点的区域内显示多少像素点。 缩放 (scale) 接口会根据图片的标题自动设置数值，如Fog_Picture@2x.jpg; 或者也可以在监视器中手动设置。

如果有需要，可以修改你图片的 缩放 (Scale) 接口来让图片适配你的屏幕。

查看链接(Connections): 接口数值在大部分情况下从左向右传递。把鼠标悬停在 宽度(Width) 或者 Height(高度) 链接上，来查看在链接上传递的数值。双击出现的数值，可以把他们固定在文档上。查看链接间传递的数值可以方便地对原型进行排错。

现在，我们的设备上就有了一张图片，接下来我们给它添加一些交互动作。

步骤2: 添加交互 (Adding Interaction)

用 快速插入贴片窗口 (Insert Patch Quickly) 添加一个 触摸交互贴片 (Touch Interaction)。

你可以用一次 触摸交互动作 来触发 图片视图 (Image View) 的动画。在 触摸交互贴片 (Touch Interaction) 的 交互 (Interaction) 接口与 图片视图 (Image View) 的 交互 (Interaction) 接口间创建链接。(与大部分链接不同，交互链接是从右向左建立的)。这样子，图片视图 (Image View) 就可以把它的触摸信息传递给 触摸交互贴片 (Touch Interaction)。你可以用同样的方法给视图添加不同的交互动作。

接下来，在触摸交互贴片 (Touch Interaction) 的 按下 (Down) 接口与 图片视图 (Image View) 的 透明度(Opacity) 接口间建立链接。现在，请试着在你的设备上进行触摸。

布尔值 (Boolean Values) : 当你在 iOS设备上的 视图 (View) 按下手指的时候，触摸交互贴片 (Touch Interaciton) 会识别出这个动作，并且从自己的 按下(Down) 接口传出一个布尔值 “ YES ”。当这个链接被连接到 透明度 (Opacity) 接口时，布尔值 “ YES ” 或 “ NO ” 会被转换成 0 或者 1，表示 视图 (View) 为透明或者不透明。所以当你按下手指时， 视图 (View) 会从透明 (按下: NO –> Opacity: 0) ，变为不透明 (按下: YES –> Opacity: 1)。

双击这条链接，观察在其上传递的数值，同时观察它们在你设备上的图像上产生了什么样的作用。

步骤3: 改变图片的比例和透明度

接下来，在文档里添加一个 开关贴片 (Switch)。开关贴片相当于一个可以在 “ 开/关 ” 两种值之间切换的布尔值切换器。

在 触摸交互贴片 (Touch Interaction) 的 按下(Down) 传出接口，和 开关贴片 (Switch) 的 切换(Toggle) 传入接口间建立 链接。随后，在 开关贴片 (Switch) 的 “ 开/关 (On/Off) ” 传出接口与 图片视图 (Image View) 的 透明度 (Opacity)、缩放 (Scale) 两个传入接口间建立链接。试着在你的设备上按下图片。

触摸交互贴片 (Touch Interaction) 的 按下 (Down) 传出接口触发了 开关贴片 (Switch) 的 切换(Toggle) 传入接口，让它从 “ YES ” 值切换到 “ NO ” 值，或者从 “ NO ” 值切换为 “ YES ” 值。而这个值又被链接到 图片视图 (Image View) 的 透明度 (Opacity) 、缩放 (Scale) 两个传入接口。

接下来，我们给透明和不透明两种状态添加一个平滑的过渡效果。

添加一个 过渡贴片 (Transition) 。这个贴片会获取一个传入接口数值，并且将它的范围区间进行调整。我们把它的 最小传出 (Output Min) 接口设为 0.5，最大传出 (Output Max) 接口设为 1.0，因此，过渡贴片传出接口的值会在 0.5 到 1.0 的范围内。

把 开关贴片 (Switch) 的 开/关(On/Off) 传出接口与 过渡贴片 (Transition) 的 传入 (Input) 接口链接。把 过渡贴片 (Transition) 的 传出 (Output) 接口和 图片视图 (Image View) 的 透明度 (Opacity) 、缩放 (Scale) 两个传入接口分别链接。

点击你设备上的图片，观察效果。

步骤4: 用弹性贴片让交互动画更加平滑

我们想让这个交互动画更加平滑。插入一个 弹性贴片 (Spring) 。这种贴片相当于创建一种三维空间上的回弹效果。对于动画元素来说，它非常实用。使用它的动画也可以在执行中途被终止，也可以优雅地改变方向。

在这个文档中，我们只需要一个一维的弹性效果。因此，我们需要把 维度 (Dimensions) 数值从 3 设置成 1。在侧边栏的 监视器 (Patch Inspector) 的 设置面板 (Settings panel) 可以更改维度，让我们在这个 标签页 (Tab) 下，把 维度 (Dimensions) 设置成 1。

然后，将 开关贴片 (Switch) 的 开/关 (On/Off) 传出接口与 弹性贴片 (Spring) 的 停止 (Rest) 传入接口链接，再把 弹性贴片 (Spring) 的 位置 (Position) 传出接口 和 过渡贴片 (Transition) 的传入接口链接。请触摸你设备上的图片，查看平滑的交互效果。

步骤5: 隐藏传入或传出接口组 (Input and Output Groups)

我们的文档变得越来越杂乱了，因此我们接下来将隐藏一些传入和传出接口组。

你可以通过以下两种方法来隐藏：

1. 文档 (Document) : 在传入接口组上右键单击，选择 隐藏传入接口组 (Hide Input Group)。
2. 监视器 (Patch Inspector) : 找到相应的传入接口组，并且单击它名称旁边的眼睛按钮。

在这个教程中，你可以大胆地隐藏没有用的传入或传出接口组。如果你稍后需要用到他们，还可以在你的贴片上右键单击或者在监视器的眼睛按钮上单击，来重新显示他们。

步骤6: 居中图片

接下来，我们希望让图片以图片和设备的中心为锚点来进行动画。

首先，更改 图片视图 (Image View) 的中心锚点 X 坐标 (X Anchor Point) 和 中心锚点 Y 坐标 ( Y Anchor Point) 两个传入接口的值为 0.5，这样图片就会从自己的中心开始缩放，而不是从自己的左上角开始。( 你可以查看教程的第三部分来复习一下坐标系统 )。

为了让图片能够相对于设配屏幕居中，你需要向文档里添加一个 父元素接口贴片 (Superview Variables)。

父元素接口贴片会传出父贴片的接口值。当你在文档的根部使用它的时候，他会传出当前设备的尺寸 ( 如屏幕的宽高 )。因为教程里使用的是 iPod Touch，所以我们获得的物理点值是 320 x 568。

为了用父元素接口贴片来居中图片，还需要添加一个 数学运算贴片 (Math patch)。设置数学运算贴片的运算为 “ 除以2 ” ( 双击贴片的中间来更改运算 )。把 父元素接口贴片 (Superview Variables) 的 宽(Width) 接口和 数学运算贴片 (Math patch) 第一个运算的接口链接，数学运算贴片 (Math patch) 的传出接口与 图片视图 (Image View) 的 X轴坐标 (X Position) 接口相链接。

接下来，添加另外一个数学运算贴片 (Math patch) ，把它的运算设置为 “ 除以2.5 ” ( 我们希望图片显示在屏幕中心点偏上一点的位置 )。然后把 父元素接口贴片 (Superview Variables) 的 高度 (Height) 接口与该 数学运算贴片 (Math patch) 第一个运算的接口相链接，再把 数学运算贴片 (Math patch) 的传出接口与 图片视图 (Image View) 的 Y轴坐标 (Y Position) 传入接口链接。

你的图片现在可以从设备的中心点进行动画了。

步骤7: 添加背景，并且排列 视图层级 (View Hierarchy)

接下来，我们给原型添加一个浅色的背景。往文档里插入一个 色块视图 (Color View)，你便可以在设备上看到一个 200x200 的白色方块。

在第6步用到的 父元素接口贴片 (Superview Variables) 的 宽 (Width)、高 (Height) 两个接口与 色块视图 (Color View) 的 宽 (Width)、高 (Height) 两个接口之间建立链接。 选中 色块视图 (Color View)，便可以在 监视器 (Inspector) 中改变 颜色 (Color) 接口的值。在视频教程中，我们选择了一个浅灰色。

然后，在 过渡贴片 (Transition) 的 传出 (Output) 接口与 色块视图 (Color View) 的 透明度 (Opacity) 接口之间建立链接。这样子当图片逐渐缩小的时候，背景也会逐渐变暗。

你会发现色块视图盖住了图片视图。通过编辑视图的层级可以改变它。

视图的层级关系 (View Hierarchy) 决定了 视图 (view) 的绘图顺序。数值最大的会排在最顶层。

以下是三种改变层级的方法，请你都试一试：

1. 你可以直接点击视图右上角的层级数值
2. 在侧边栏的监视器，最下方的视图层级关系区域里，你可以直接拖拽列表里的项目来重新排序。
3. ⌘ + [ 会增高层级， ⌘ + ] 会降低层级。

现在，图片应该可以在浅灰色背景上看到了。

步骤8: 使用 分组贴片 (Group patches) 来管理文档

画布又开始变得有些杂乱，我们将要创建一个 分组贴片 (Group) 来整理它们。分组贴片 (Group) 功能将把选中的贴片都放进同一个分组贴片里。链向分组之外的链接会继续被保留下来。

请高亮所有你想放进分组的贴片。在这个原型中, 按住鼠标并拖动，选中 图片视图 (Image Views)、色块视图 (Color Views)、数学运算贴片 (Math patches) 和 父元素接口贴片 (Superview Variables)。 你可以按住 Shift 再把刚才拖拽过程中没有选中的贴片选中。

你可以通过这两种方式来创建分组贴片:

1. 选中贴片后，单击顶部工具栏的 分组按钮 (Group button)
2. ⌘ + G 也可以从选中的贴片创建分组

现在，你的贴片都被归入了一个分组里。双击分组的标题可以给它重新命名。在本教程中，我们把这个分组叫做 “ 图 + 背景 (Pic + Background) ”。

步骤9: 对外发布 (Publish) 分组内接口

如果你想要和已经在编组内的贴片接口做链接，你需要通过 对外发布 (Publish) 功能来让这些接口暴露在分组外。

双击 分组贴片 (Group) ( 在除了标题之外的地方双击 )，进入分组内部。

你可以通过文档左下方的 面包屑导航 (Breadcrumb Navigation) 来查看你现在所处的层级位置。现在，它应该显示为：根部 > 分组 (Root > Group).

以下是两种对外发布分组内接口的方法:

1. 按住 Option 再单击传入接口或者传出接口
2. 在传入接口组或者传出接口组上右键单击，再选择要对外发布的接口

接口对外发布之后，你便可以给他重新命名，只要双击它就可以了。

试着对外发布一个传入接口，然后双击文档其余的空白部分来回到上一个层级。你可以看到刚才发布的接口已经暴露在了你的 分组贴片 (Group patch) 上。再次进入分组内部，并且单击已经发布的接口旁的’x'可以取消对外发布。

步骤10: 添加文字

下一步我们想添加一些文字，当触摸我们的图片的时候，文字会同时跳出来。我们需要一个 图片化文本贴片 (Text Image patch) 来实现。

图片化文本贴片 (Text Image patch) 将文本转化成了图片，因此它才可以在 图片视图 (Image View) 中进行展示。当你向画布里添加文本的时候，它便已经和一个 图片视图 (Image View) 创建好了链接，是不是很方便? 现在，往你的文档里添加一个文本贴片。

在这个原型中，我们通过设置 图片视图 (Image View) 的 中心锚点 (Anchor Point) 为 (0.5, 0.5)，并且链接到 父元素接口贴片 (Superview Variables)，实现了让它水平居中。 ( 可回顾‘居中图片’章节 )。

接下来，添加一个 过渡贴片 (Transition)，最小值 (Output Min) 端口设置一个大于屏幕高度的尺寸 ( iPod touch 上是600 )，最大值 (Output Max) 端口设置成让文字刚好处于图片下方的值。 你需要自己尝试最大值应该设置成多少才能适合你的原型。

在 弹性贴片 (Spring) 的 位置 (Position) 传出端口 和 过渡贴片 (Transition) 的 传入端口 建立链接，再把 过渡贴片 (Transition) 的 传出端口 和 图片视图 (Image View) 的 Y 轴坐标 传入端口建立链接。现在，当触摸屏幕的时候，文本就会跳到屏幕上了。

最终作品

到此为止，你就用 Form 创建好一个简单的原型了。你可以对它进行进一步的编辑或者添加。我们也期待你设计和构建出其它的作品。