本篇教程要介绍的案例是：一个在App界面上调整时间的交互原型，我们先来看一下效果：

本案例研究就是用这款软件制作的，它是近来非常流行的原型设计软件，很多公司也用它来制作高保真原型，以便在正式​​开发之前作为最小可行产品（MVP）进行用户调查和可用性测试。

主要有以下几个优点：

案例中主要用到的功能是当你用手指在屏幕上上下滑动的时候，分针和时针会随着滑动转动，这是系统的一个重要功能，也译作联动。

官方对这个联动功能有很长的解释，但是不解释的话很难理解。不过没关系，因为后面会通过例子来介绍这个功能。

步骤 1：将材料导入

有两种方法：

1. 将素材逐一拖至中心。

2.制作视频里的素材，保持打开状态，然后打开选择导入。

第 2 步：做上下滑动动作

1. 创建一个矩形，让它很长。将其命名为“ ”，并将属性调整为“Drag”。然后你可以上下拖动矩形。（见下图）

为什么第一步要这么做呢？这是因为当我们上下滑动矩形的时候，分针和时针是可以转动的。那么矩形就是联动源，矩形和分针、时针之间就存在联动关系。

为了更好的理解这个概念，我们先看一下官方的解释：

链接来源 ( )

要创建联动，画板上必须有一个可改变的属性，即联动源。在联动视图的列表中会自动显示可拖拽图层、可滚动图层、选中的属性。

2. 然后将矩形的 Fill 属性的透明度调整到最高设置。使矩形透明。（见下图）但请注意：您不能直接调整此属性，因为如果这样做，拖动矩形将不会产生任何效果。

步骤3：将分针与“隐形控件”链接起来sketch 教程，这样当你上下滑动屏幕时，分针就会转动。

1.首先需要对分针图片进行处理，因为分针是绕着表盘中心旋转的，所以要将分针的中心点调整到指针的末端。但是中心点暂时调整不了（如果有谁知道怎么调整，请告诉我，不胜感激）。所以我有个笨办法，就是复制一个分针，放到对称的位置，选中两个分针，按cmd+G。然后调整其中一个分针为透明，中心就调整好了。

2.然后关键时刻到了，选中“分针”组，点击，点击时针旁边的+号，选择角度。

3.然后把下图中的拉杆拉回到某个位置，拉的时候可以看到“不可见的控制”矩形向下移动，这个和AE基于时间轴的概念不一样，AE是基于位置的。

4. 选中分针，调整角度为4410度，此时面板中会自动出现一条蓝线，这个和补间动画的概念类似。

5. 现在sketch 教程，当您拉动蓝线区域的杠杆时，您会看到分针转动，而“隐形控制器”移动。这样就完成了联动。

我们可以参考官方的解释来理解这部分操作：

链接属性 ( )

有了链接源后，您就可以使用它来控制任何其他图层（包括您自己的图层）的属性。选择要控制的图层，单击链接面板中的蓝色加号图标，然后选择要链接的属性。这将使用当前属性参数创建一个起始关键帧。只有一个关键帧不会产生任何效果。

联动关键帧（ ） 完整的联动至少需要两个关键帧才能起作用。方法很简单：水平拖动灰色标记到要添加关键帧的位置，然后调整属性值。系统会自动为您插入一个新关键帧。点击衣柜，然后点击关键帧左侧的红色按钮即可添加关键帧。

步骤 4：重复上述步骤，将时针与“隐形控件”链接起来。步骤 5：完成“点击重置按钮重置表盘”功能，复制当前的。选择左侧面板中的复制和粘贴。选择中间的重置按钮，将其连接到第二个

搞定，现在点击重置按钮，表盘无论在什么位置都会重置到12点钟方向。为什么会这样呢？因为如果两者之间有同名的控件，它们会自动连在一起，形成一个插值动画。这个功能跟魔法移动很像。

学习完上面的步骤，大家应该对什么是 有了比较透彻的理解了。那我们再来看看官方的解释：

连锁（）

想要制作可交互的视差效果？想要让某个图层在拖动时根据拖动角度旋转？联动功能可以实现这一点。联动将各个属性用关键帧链接起来。与动画不同，动画发生在画板之间切换时，联动发生在同一个画板内。点击工具栏中的按钮，展开当前画板的联动面板。如果你的鼠标不支持水平滚动，可以在拖动联动面板时按住空格键（Space）进行滚动。

这样一对比是不是更容易理解呢？

总结：

它是一款非常易于使用的原型设计软件。它支持很多功能。特别是，这是其他原型设计软件所没有的。

但也存在一些限制：

图片绘制不方便，建议在 中制作图片，然后导入 。当前页面中不能制作动画，比如跳转到当前页面后按钮有按下效果然后返回正常状态，只有跳转时才会有变化。 中的素材不能自由调整大小，只能使用左侧面板中的比例和宽高选项进行调整。

如果以上有误，请告诉我解决办法，非常感谢~

附上一些官方学习网站：

3.官方视频教程#-tabs几个非常短小实用的视频

作者：顾晓阳（简书作者），交互设计师，3年互联网教育产品设计经验

如有侵权请联系删除！