SketchSketch UI设计首页投稿(暂停使用,暂停投稿)

Sketch49正式版发布,这次它说要成为可交互的原型设计工具(

2018-03-05  本文已影响295人  夜雨y

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.

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这几个工具。

然后,在两个Artboard画板上准备一些内容,这里我们选择实现的效果是点击两个画板上的头像,完成2个画板之间的跳转。选中第一个画板的夜雨头像,然后点击工具栏的“Link(链接)”,然后鼠标移动到第2个画板上,出现了建立链接的效果,在黄色透明区域内单击即可完成链接。

完成链接后,点击“Prototyping”,可以切换显示/隐藏连接线。

选中建立链接的夜雨头像,在检查器中,我们可以看到出现了一个“Prototyping”的选项,我们可以删除链接,也可以通过“Animation(动画)”设置过渡动画效果,分别是:普通、左滑、上滑、右滑、下滑。其中Target的意思是链接的目标对象。

设置好过渡动画后,我们可以通过点击工具栏的“Preview(预览)”打开预览窗口,通过鼠标点击查看跳转的效果。点击空白区域,会用黄色遮罩提示可点击的区域,这里有个旗子,点击后,就会把当前画板设置为每次预览启动看到的第一个页面。

看到这里,相信大家已经基本了解Prototyping功能是怎么实现的,但是,在实际原型设计中,我们可能还会遇到只能点击某个限定区域来实现跳转,这个时候,之前提及的“Hotspot(热区)”工具就派的上用场了。例如,我们可以点击包括“萌萌”头像、名字在内的大面积区域实现跳转,我们就可以先点击“Hotspot”工具,然后绘制需要点击的区域大小,再链接到其他画板即可。

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”

至于其他优化复制粘贴大型文档的性能、改进EPS导入等优化类的更新,大家可以关注官方的更新日志说明,这里就不一一枚举了。


更多Sketch教程系列文章

用Sketch画出大自然中最美的渐变色

灵活运用Sketch径向渐变绘制立体球

Sketch基础教程:蒙版(Mask)的使用详解

个人精品文章(过万阅读,700+赞)

干货:让你全方位学习成为一名交互设计师(1.6万字诚意之作)

上一篇下一篇

猜你喜欢

热点阅读