sketch如何做设计稿交互_sketch 交互原型制作方法

来，我们先瞅瞅

1，做交互原型会用到哪些工具？

1，菜单栏 - 原型-菜单下的所有功能

2，菜单栏 - 视图 - 显示原型

3，工具栏 - 链接、热区、预览、cloud  (这4个工具)

2，工具栏里没这4个工具？

来，我们把它找出来： 鼠标放在工具栏处- 右键 -自定义工具栏

找到(链接、热区、预览、cloud )这4个工具 - 拖拽到顶部默认工具栏上 - 完成

3，页面之间是怎么跳转的？

方法1：通过工具栏上的链接工具 / 快捷键W

选中A画板上的元素(图层/图层组) - 点击链接工具 / W - 点击B画板，就完成了A到B的跳转。

方法2：通过热区/快捷键H(热区就是可点击区域，点击这块区域就会跳转)

点击 - 热区工具 / H - 在B画板上画出热区。然后把链接线拖拽到A面板。  这样，就完成了B到A画板的跳转。

4，如何预览交互效果？

工具栏上 - 预览按钮/快捷键 ⌘+P   ⌘+W 关闭预览窗口

5，连接线太多太乱，怎么办？

有个小方法，可以减少返回链接线(如上图蓝色线)的穿梭。

就是

所有的返回/关闭 链接都可以用：菜单栏 - 原型 - 链接到上一个画板来代替

“链接到上一个画板”就是，自动返回到来的画板。从哪来，回哪去。

设置“链接到上一个画板” 后，会有个黄色的返回icon出现在画板左上角。

用“链接到上一个画板”功能，好处：

1，页面多时，不用在千里迢迢的寻找上一个画板拖拽链接线。

2，如果是在热区上执行的这个命令，那么热区可复制到其他画板上，进行复用。

6，页面跳转时，怎么做画板从左/右进入的动画？

A元素-链接到 B画板后， 点击A元素，右侧面板中可选择动画样式(从右侧、从底部、从左侧、从顶部移入画板)不想要动画的话，可点击第一个按钮-无动画

7，滚动时，如何固定图层位置？

点击要固定的图层 - 右侧面板  调整尺寸(靠边固定 - (顶对齐 就固定 左、上、右)  (底对齐 就固定 左、下、右)) - 勾选 滚动时保持固定

8，链接元素 如何转化成热区？

选择元素 - 原型 -转化为热区

9，如何快速找到目标画板？

A链接到B，如何快速找到B？

只要点击A元素 - 原型 -定位到目标画板。  B画板就会自动显示在屏幕居中位置。

10，如何删除链接？

1，元素删除链接：

选择元素 - 原型 - 移除选项的链接   (第2种方法：选择元素- W - esc )

如果想一键清除所有链接线，可框选所有画板 - 原型 - 移除选项的链接

2，热区删除链接：

点击热区 - delete   (按shift 可多选)

11，如何设置预览时的默认首页

假如把ABCD四个画板做成了一套交互原型，点击B画板预览,那么默认显示的就是B ，点击C画板预览，默认显示的就是C，这时候，如果把A画板设置为 - 画板起点 -那么，之后不管你是点B,还是C,预览时第一个页面显示的都是A

操练起来：

做好一组交互链接后，选择(要作为首页的)画板 - 原型 -设画板为起点(设置后，画板左上角会出现一个小旗子图标)，有旗子的画板默认为每次(重新)预览启动看到的第一个页面。

12 ，有几种演示效果的方法？

1，Sketch软件内部预览

2，Sketch Mirror APP 内实时预览

(USB连接或同局域网内预览操作)

3，Sketch Cloud

云端团队协作预览

(登录Sketch Cloud后 - 将项目文件上传至官方云端 - 邀请项目成员及权限设置-就可实现在线多人预览啦！)

小提示：

1，交互动态必须在“画板”上进行，画板外的图层，是没办法做交互的。

2，显示/隐藏原型交互线  control+F

3，做链接时，最好一去一回， 就是A跳到B， B返回A，这样算是一个完整的来回。

养成这个习惯，页面多的时候也不会遗漏。