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后 - 将项目文件上传至官方云端 - 邀请项目成员及权限设置-就可实现在线多人预览啦！）

13,  补充一个web端案例，锚点定位的动效讲解，里面有几个知识点。

我们先预览一下锚点定位效果

1，先做出3个锚点切换后的静态页面

2，创建自定义尺寸（自定义创建的尺寸就是预览时窗口的尺寸）

创建方法：

自定义 - 创建自定义尺寸 - 起名字 - 输入宽高 - 保存

先要清楚两个概念。

1，画板大小    

画板大小，调节的是真实画板的大小。

   

2，自定义尺寸大小

他不会影响真实画板的高度，只是影响预览窗口的大小。

    

例：PC端页面、一屏尺寸是1920X1080   现在你做的页面高度超出一屏，尺寸是1920x3400，那么

你的画板大小设置是： 宽 1920  高3400

你的自定义尺寸大小应该设为： 宽 1920  高1080      设置成功后， command+p  预览   预览就是按照1080的高度来显示的

 

3，红框内容区域需要固定

需要固定的图层，编好组- 选择 滚动时保持固定

4，加热区，做链接。

加热区时，选择动画-无  

然后就OK了！

小提示：

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

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

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

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