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.

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万字诚意之作)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,258评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,335评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,225评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,126评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,140评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,098评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,018评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,857评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,298评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,518评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,400评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,993评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,638评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,661评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2 352

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,064评论 25 707
  • 我坐在船头,故事翻着书, 云彩在船底踱着碎步。 左边耳朵唱着歌, 右边耳朵轻和。 蜡笔在纸上画下音乐, 把信交给白...
    Mr李密斯阅读 304评论 0 0
  • 第一眼看你时你还是笑着的金灿灿的脸庞白色柔软的睫毛你散发的热量就像一片片温暖的羽毛轻轻落在我的肩膀许是我不小心偷看...
    虎尾兰守望者阅读 162评论 0 1
  • 焦点少年班 骑天大胜坚持分享83天2017-10-11 我很喜欢的文章摘抄
    骑天大胜阅读 147评论 0 0