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

来,我们先瞅瞅

842c9c9405b276e0b95f37de82042cc3.png

1,做交互原型会用到哪些工具?

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

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

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

644b9b562b5186f2c18ff118693d3d9d.png

2,工具栏里没这4个工具?

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

7bee5d113e79b1128e4478844d3b2884.png

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

02cbaaa33df69c207af72a5d0ca26c6b.png

3,页面之间是怎么跳转的?

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

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

00e5adc63cb4a95b9eed5cef21cd9e23.png

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

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

bfc23a64a4635d97338e37eb6b8b45b5.png

4,如何预览交互效果?

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

ca9362da63b96efaded0e03c47233a30.png

5,连接线太多太乱,怎么办?

4ad85febff21a587c8ef94cb13dfd244.png

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

就是

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

7b0914c01cd764d790d45908d1ea50fc.png

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

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

5170d5f37a7511373c6890646fe5e56a.png

用“链接到上一个画板”功能,好处:

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

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

85a181ddc19e67be93bed941f7c85f77.png

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

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

be1ab046c132f74910a61a1ad38cd061.png

7,滚动时,如何固定图层位置?

13473a088e5a25bf2244dd0c729eb2c8.png

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

55abb7a187dca905f611402aa73a6ba2.png

8,链接元素 如何转化成热区?

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

c2eb447202ac3bb86f6e93ed768ce61e.png

9,如何快速找到目标画板?

A链接到B,如何快速找到B?

ea43c7073120d4fdd668912820640028.png

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

d1e172536ebc4779ffed86eea280c40a.png

10,如何删除链接?

1,元素删除链接:

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

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

7a8a302e9ac537b1a2438fcd18b5e5a0.png

2,热区删除链接:

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

aa3be216879349070b664fdee2b83d0f.png

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

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

8612d169f1a3465e35d68c7e23f5c40f.png

操练起来:

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

12 ,有几种演示效果的方法?

1,Sketch软件内部预览

c3f8d5cdd0fb328b2ef49ad3458a1fbc.png

2,Sketch Mirror APP 内实时预览

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

3,Sketch Cloud

eb725b8fe17632b362b8f8643a5f5285.png云端团队协作预览

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

小提示:

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

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

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

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

4d999b8d85aadfb7a4b9ba9e9117a3b2.png


版权声明:本文为weixin_33999969原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。