![8642430f4258ac879c3a0783efe0d866.png](https://i-blog.csdnimg.cn/blog_migrate/638afa0757f737454a482ec54c5da366.jpeg)
为了能让程序猿理解设计稿的逻辑关系,在用Sketch做UI设计的最后环节,最好再制作一下交互流程效果。交互流程图,不仅仅是给开发提供方便,还能让的甲方爸爸看得懂设计稿。
在Sketch 在49版本之前,有些小伙伴可能会选择安装Sketch插件来制作交互流程图,比如Craft、User Flows。
Craft 1.0.79 自动填充真实数据 - 马可菠萝www.macbl.com![b12e18812e38eebe9e0f6c3f1faf37a3.png](https://i-blog.csdnimg.cn/blog_migrate/d318e3283b293389ecb221cb5b86dd75.png)
![b12e18812e38eebe9e0f6c3f1faf37a3.png](https://i-blog.csdnimg.cn/blog_migrate/d318e3283b293389ecb221cb5b86dd75.png)
Craft使用起来也特别方便,而且还可以上传InVision,然后在手机上快速预览效果。想知道Craft的使用方法可查看《设计师常用Sketch插件推荐之Craft基础教学》哦~
而现在,大家都知道,Sketch在49版本之后,添加了Prototyping功能,从此在Sketch中,也可以轻松创建交互流程图,快速预览你的设计。
无论是移动屏幕还是Web界面,都可以通过链接和热区,实现页面间的跳转,实现灵活、可点击交互原型,具体使用方法可查看《Sketch初级入门教学之使用Link工具制作交互原型》。
用Prototyping创建流程图后,可以直接在Sketch中预览。
![38ae4fb352b5bd7eb10fa7601141c35b.png](https://i-blog.csdnimg.cn/blog_migrate/831137e49dd96b84fe9d7b0bfc0a0feb.jpeg)
或在iOS Sketch Mirror上预览,使用Sketch Mirror的方法可查看《Sketch Mirror 让设计稿同步手机的镜像神器》。
![82059b290bb0f94fff08614cb582d29f.png](https://i-blog.csdnimg.cn/blog_migrate/79450f117afebb7426e19f602dba138d.jpeg)
或上传到Sketch Cloud,就可以远程查看交互流程图,方便与客户或同事共享。
![c4ef41907417abb85bdf52653bc1276d.png](https://i-blog.csdnimg.cn/blog_migrate/d9a7b40c119c7f86b0a886ff622d7a79.jpeg)
使用Sketch Prototyping工具制作的交互原型,页面转场方式比较简单,目前只有淡入淡出、右侧进入、下方进入、左侧进入、上方进入。
![66807f5a6342cb96f20e635776ba708a.png](https://i-blog.csdnimg.cn/blog_migrate/1135df3583162a7404a270e04374fd10.jpeg)
有些设计师可能会觉得这些转场效果无法满足他的需求,要追求复杂的交互流程图,可以选择使用第三方Mac交互原型软件。
比如在马可菠萝网站上最受欢迎的交互设计软件Principle,它提供了多种页面切换方式,甚至还可以自由的调整转场速度,制作出丰富的交互效果。
Principle 5.9 CR2www.macbl.com![b12e18812e38eebe9e0f6c3f1faf37a3.png](https://i-blog.csdnimg.cn/blog_migrate/d318e3283b293389ecb221cb5b86dd75.png)
以及另一款交互设计软件Flinto,使用专门的动效设计器,创建微交互,完美的呈现循环动画和页面滑动效果。
Flinto 26.0.5 交互式设计软件 - 马可菠萝www.macbl.com![b12e18812e38eebe9e0f6c3f1faf37a3.png](https://i-blog.csdnimg.cn/blog_migrate/d318e3283b293389ecb221cb5b86dd75.png)
使用了这么多的Sketch制作交互流程图的工具,小编觉得在效率方面,使用Sketch自带的Prototyping最方便,不需要再把设计稿导到别的工具里面痛苦的整理,而且没有学习难度。如果只是用来对接开发的,建议选择Sketch自带工具。如果甲方爸爸对动效有高要求的话,再选择第三方软件来制作就好。
转自Macbl.com