Sketch49正式版发布,这次它说要成为可交互的原型设计工具(
2018年2月28日,Sketch版本49正式发布,这次它带来了我们交互设计师期待已久的新功能:Prototyping(原型),经过实测体验,利用该功能可以实现原型页面之间的跳转,并且有简单的过渡动画效果。原话是:Prototyping——You can now connect Artboards with Links and Hotspot layers to create prototypes of your designs that can be viewed in Sketch Preview, Sketch Cloud, and Sketch Mirror on iOS.
![](https://img.haomeiwen.com/i1918483/16a387a065e52c8c.png)
1.Sketch的野心不局限于UI设计
自Sketch面世以来,一直被拿来和传统的UI设计工具Photoshop做比较,虽然大家都认为它是一款轻量化的矢量设计工具,但它的野心不仅仅局限在UI设计身上,它要做一款UI、UX/UE都通用的设计工具。Symbol帮助我们构建可复用的组件,Libraries为团队协作扫平了障碍,现在,它通过Prototyping告诉我们,它要成为海贼王的男人...呃,是可交互的原型设计工具。
2.Prototyping功能介绍
先说说经过实测体验的结论:
(1)Prototyping可以通过图层(矩形、图像、文字、直线等)、热区和其他画板建立链接,实现原型页面之间的跳转;
(2)Prototyping需要依赖画板,链接的对象只能是画板,而不能是图层;
(3)可以跨页面为不同的画板之间建立链接;
(4)建立链接之后,可以通过“预览”来查看实现的效果,也可以在手机Mirror上进行预览和操作;
(5)可以增加简单的过渡动画,例如左滑、右滑、上滑、下滑等。
下面是详细的操作体验过程:
首先,我们需要将Sketch更新到49版本,然后在工具栏中调出Prototyping、Link、Preview、Hotspot这几个工具。
![](https://img.haomeiwen.com/i1918483/2fee67990ce43ad6.png)
然后,在两个Artboard画板上准备一些内容,这里我们选择实现的效果是点击两个画板上的头像,完成2个画板之间的跳转。选中第一个画板的夜雨头像,然后点击工具栏的“Link(链接)”,然后鼠标移动到第2个画板上,出现了建立链接的效果,在黄色透明区域内单击即可完成链接。
![](https://img.haomeiwen.com/i1918483/ad079c1dd6d0484b.png)
完成链接后,点击“Prototyping”,可以切换显示/隐藏连接线。
![](https://img.haomeiwen.com/i1918483/1c8e7a8b0be977c4.png)
选中建立链接的夜雨头像,在检查器中,我们可以看到出现了一个“Prototyping”的选项,我们可以删除链接,也可以通过“Animation(动画)”设置过渡动画效果,分别是:普通、左滑、上滑、右滑、下滑。其中Target的意思是链接的目标对象。
![](https://img.haomeiwen.com/i1918483/994c1baf681a5fe6.png)
设置好过渡动画后,我们可以通过点击工具栏的“Preview(预览)”打开预览窗口,通过鼠标点击查看跳转的效果。点击空白区域,会用黄色遮罩提示可点击的区域,这里有个旗子,点击后,就会把当前画板设置为每次预览启动看到的第一个页面。
![](https://img.haomeiwen.com/i1918483/593ed88cfa95d136.png)
看到这里,相信大家已经基本了解Prototyping功能是怎么实现的,但是,在实际原型设计中,我们可能还会遇到只能点击某个限定区域来实现跳转,这个时候,之前提及的“Hotspot(热区)”工具就派的上用场了。例如,我们可以点击包括“萌萌”头像、名字在内的大面积区域实现跳转,我们就可以先点击“Hotspot”工具,然后绘制需要点击的区域大小,再链接到其他画板即可。
![](https://img.haomeiwen.com/i1918483/3ae19a6595954358.png)
3.其他更新功能内容
Sketch49正式版还有2条重要的更新
(1)Libraries on Sketch Cloud——Files uploaded to Sketch Cloud can now be installed as Libraries directly from Cloud.
上传到Sketch Cloud的Libraries可以直接从云端引用了,这条更新摸索了很久也没看到从哪里可以引用云端的Libraries,有发现的同学请留言告知一下路径。
(2)Apple UI Design Resources——Apple’s official iOS 11 UI Kit is now a built-in Library in Sketch.
苹果官方的IOS 11 UI Kit已经是Sketch自带的Libraries了。需要动动手指,在路径Sketch-Preference-Library点击一下“Download”
![](https://img.haomeiwen.com/i1918483/e5f7e032b8458d3c.png)
至于其他优化复制粘贴大型文档的性能、改进EPS导入等优化类的更新,大家可以关注官方的更新日志说明,这里就不一一枚举了。
更多Sketch教程系列文章
个人精品文章(过万阅读,700+赞)