用sketch做跳转动效？就这么简单

最近接了一个新项目，负责这个项目的产品先生，以前没有合作过，这次算是首次携手。因为我是中途加入，前面还没有看过资料。据说他用sketch画原型。OK没问题，我觉得应该没影响吧。可是收到他原型的时候我是崩溃的。

密密麻麻的全是线哪。能点击么？我尝试了一下并不能。可是我用鼠标指着线找对应要跳转的界面，眼睛使瞎了是小事，问题是很多交叉的地方，根本捋不清啊。此处有恶龙咆哮的声音。一遍看一边问候我们的产品先生。

结果后来给我演示的时候，竟然是可以预览、点击跳转的。好吧我差点没跳起来。对不起我误会我们的产品大哥了。用了这么久的sketch，竟然不知道这个技能，除了惭愧我还能说什么。接下来就开始虚心向产品大哥请教，现学现卖整理出这个教程？（可能很多人都已经会了，那就算我的学习笔记吧）

这个交互的功能是在sketch49之后才有的，因此首先要版本达标。那么我们的平时工作中除了产品原型可以用的到，做完设计稿来做演示动效也是很方便的，并且相当的易掌握。在这里我用一个简单的案例说明。

假设现在要点击A界面的红色色块，跳转到B界面。应该如何建立链接呢？

首先注意工具栏上这几个按钮的功能作用。这里建立链接可以用Link直接创建，也可以创建热区做跳转。

用Link创建连接

选中色块，点击Link或者在右侧Prototyping点添加，当色块上出现跳转的连接线时，再点击要跳转的界面就可以了。

建立链接的模块在左侧显示链接标识，选择相应模块可以修改交互的属性和方式。

创建热区

点击Hotspot或者使用快捷键“H”呼出热区功能，在要建立热区的位置拉取适合大小的框，然后为热区建立链接。建立链接时，页面顶部左右两侧各有一个小图标，分别可以返回上一页面和直接选择目标页面。

做好跳转之后可以直接在sketch里面预览，预览时，点击 Preview 按钮或者使用快捷键 “cmd+P”，进入预览模式。顶部可以选择要浏览的页面，也可以设置起始页面。当点击到未设置链接区域时，页面中会显示橘色不透明框，提示可点击位置。当然也可以连接手机，用Sketch Mirror直接预览。

其实这个功能已经出来很长一段时间了，但是我才刚刚知道并学习。整个操作过程很简单，很容易上手。虽然目前的交互功能还不尽完善，跳转的方式比较单一，但是做一些简单的交互动效还是可以的。在一定的程度上也降低了学习其他交互软件的成本，期待接下来可以更加完善。

海盐社Q3招新，回复数字【2】查看