干货!Sketch49交互原型新功能大解析

2月28日发布了Sketch49新版本的消息,笔者打开了官网看到了最新的版本更新视频,确实还是挺激动的。觉得Sketch按照这样的发展趋势,马上就能“统一六国”了,哈哈。一起来看看Sketch49的版本更新了哪些新功能吧!(先看介绍,使用教程在后面哦!)亮点一:交互原型功能画板(Artboards)和热区(Hotspot)链接实现页面间的跳转,实现动态交互原型(类似交互软件Marvel中的热区链接 )Sketch49版本中的交互原型预览...

2月28日发布了Sketch49新版本的消息,笔者打开了官网看到了最新的版本更新视频,确实还是挺激动的。觉得Sketch按照这样的发展趋势,马上就能“统一六国”了,哈哈。



一起来看看Sketch49的版本更新了哪些新功能吧!(先看介绍,使用教程在后面哦!) 


亮点一:交互原型功能

画板(Artboards)和热区(Hotspot)链接实现页面间的跳转,实现动态交互原型(类似交互软件Marvel中的热区链接 )


干货!Sketch49交互原型新功能大解析


Sketch49版本中的交互原型预览图(话说这线条敢不敢再乱点,页面多了眼会瞎么?相比之下Principle还算很好了)我觉得这也是Sketch需要解决的一个使用体验问题,期待后续版本可以有好的解决方案。

干货!Sketch49交互原型新功能大解析

亮点二:便捷的效果预览

设计制作的交互原型,可以通过三种方式预览查看:

1.Sketch软件内部预览(类似于Principle中的预览窗口,或xcode中的模拟器)

干货!Sketch49交互原型新功能大解析

2.Sketch Mirror内实时预览,(USB连接或同局域网内预览操作)


3.Sketch Cloud内实时预览,(登录Sketch Cloud后可将项目文件上传至官方云端,实现在线多人预览,并可进行讨论。)

其他更新

  • Sketch Cloud 中文件可安装为Libraries

  • 增强复制粘贴大型文档性能

  • 改进 EPS/SVG格式文件 导入

  • 渐变锚点改为单击增加

  • 图层列表拖入画板内不再是位图

  • 优化缩略图性能新增原型设计模板及修复已知Bug

干货!Sketch49交互原型新功能大解析

交互原型功能教程


1. 页面链接跳转(也就是画板之间的切换)
更新到Sketch49后,在工具栏右侧会发现“Link”功能按钮 


干货!Sketch49交互原型新功能大解析


选中画板中的一个对象后可激活“Link”按钮(仅选中画板无法创建链接)


干货!Sketch49交互原型新功能大解析


创建Link链接后,我们会发现Sketch左侧图层 矩形上的变化(多了一个曲线箭头,表示有链接)

干货!Sketch49交互原型新功能大解析


修改页面切换动效:

干货!Sketch49交互原型新功能大解析

从左至右分别是:无 、向左切换、向右切换、向上切换、向下切换 (第一个版本可能比较保守,没有太多动效选择) 

2. 如何取消链接操作呢?
选中 原有链接对象-矩形 ,右侧面板中可编辑链接 

干货!Sketch49交互原型新功能大解析

或将 Target 修改为 none


检测页面逻辑可以通过查看跳转目标验证


干货!Sketch49交互原型新功能大解析


3. 如何创建热区?
在Sketch中 热区称为 Hotspot ,可以 通过 菜单栏中的 Insert(插入)找到,也可以使用快捷键 H  

在画板内鼠标左键圈出“热区”范围,箭头指向目标画板(页面)

干货!Sketch49交互原型新功能大解析


在自定义工具栏中可以为“热区”添加快捷入口

干货!Sketch49交互原型新功能大解析


4. 如何预览交互效果?

A. Sketch软件内部预览(黑屏的小伙伴请看文末说明) 
连线操作完成后,点击 预览按钮 

干货!Sketch49交互原型新功能大解析

干货!Sketch49交互原型新功能大解析


B.Sketch Mirror手机内预览(暂无Android版本,且无法像Principle缓存至手机内离线操作) 
打开Sketch Mirror,按照在Sketch内设置的交互操作即可。

干货!Sketch49交互原型新功能大解析


当忘记操作热区时,会有红色线框提示:

干货!Sketch49交互原型新功能大解析


C. Sketch Cloud云端团队协作预览 
注册/登录 Sketch Cloud 

干货!Sketch49交互原型新功能大解析


登录后可将当前项目上传至Sketch Cloud云端

干货!Sketch49交互原型新功能大解析

干货!Sketch49交互原型新功能大解析


邀请项目成员及权限设置

干货!Sketch49交互原型新功能大解析


上传成功后可查看当前原型项目

干货!Sketch49交互原型新功能大解析


Sketch49 预览窗口“黑屏”怎么回事?

干货!Sketch49交互原型新功能大解析


笔者也遇到了这个问题郁闷了很久,找了几个小伙伴一起帮忙测试,发现疑似是OS X版本导致,我MacBook PRO(10.12.6 )可正常预览显示。家中的iMAC(10.13.3)却一直无法连接。


但是暂没有看到官方解释,我也仅仅是个人猜测。

最后总结

本次Sketch更新的力度还是很大的,能看得出它在移动端设计上越加强大,真希望有一天能“统一六国”,UI设计师们可能也不会那么折腾,那么累了!

为了您更好的学习体验,在此占用您5分钟的时间,请您通过填写问卷,协助在线教育平台美啊(http://meia.me)改进和完善我们的工作。为了感谢您的配合,完成问卷可获得美啊赠送的50元课程代金券,还有机会获取设计师礼包哦~点击“阅读原文即可参与~

干货!Sketch49交互原型新功能大解析

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35685/

(0)
交互精选交互精选
上一篇 2018-03-06
下一篇 2018-03-07

相关推荐

  • 怎么设计出好的用户体验

    今天跟大家分享的这话题是大家在做产品的过程中可能谈的最多的话题,我一定要有好的产品的体验。首先大家要明白什么叫好的用户的体验,这个一定要有一个定位,所谓的这个用户是真实的使用用户还是你自己。有的时候我们把这个用户简单定义为产品经理或者公司的ceo,或者是公司的负责人。但首先要问一下,你是不是最终的用户,如果只是满足你个人的想法,那这上面会有很多的问题,所以一定要满足真实用户的体验。基于这样的前提下我们再考虑什么叫好的用户体验。我觉得好的...

    2018-02-19
  • 【用户体验】“互联网+”如何提升用户体验?

    “你兜售的虽然是产品,但真正能使你获益的却是服务”。为何这样讲?众所周知,顾客就是上帝。在今天,用户体验越来越多的被提及,产品得到了更多的外延及扩展,已经不再局限于产品本身的价值,而有了更多的后续价值和服务的依托。注重交付的每个环节的规范与体验,这让卖点从产品本身逐渐渗透到整个产品的生命周期中,用户对品牌的认识也开始从产品蔓延到店面、店员、交易流程是否顺畅、售后服务是否及时到位等诸多层面。换句话说,产品是基础,而优质的服务可以帮助企业赢...

    2018-03-03
  • 抖音|如何提升广告的用户体验

    最近发现越来越多的人开始分析抖音这款产品。小编接触抖音时间也蛮久了,到现在成为年轻人的标配。今天小编就来跟你唠唠抖音那些事儿。douyin抖音·  正·  文·  来·  啦·从产品的冷启动,到现在的野蛮成长期,抖音这款产品变化不得不说变化很大,当时的抖音很纯净,并没有什么广告,当然这也是符合产品生命周期的特性。以前的抖音技术流占据了大部分江山,如今的抖音变成了生活小百科,网红商品的发源地,产品内容标准也在随着产品所处的阶段在变化。如今...

    2018-05-05
  • 交互设计之寻求设计需求点

    交互设计师如何进行设计需求分析?首先看交互设计的职责,协助产品经理进行需求分析,进行交互稿绘制,与视觉设计师对接。交互设计必须懂得进行需求的分析,不仅仅是用户需求,还有业务需求的分析,也就是来自产品的诉求,企业做这个产品的目的是什么。因此一个方案如果不能满足业务需求、用户需求和一个好的用户体验,那么它就不是一个好的方案。在这篇文章主要介绍的是如何进行需求分析和关键因素分析,找到设计的需求点。在这里主要分为了四个步骤:分析业务需求、分析用...

    2018-04-30
  • 异常逻辑梳理与数据处理

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Dschinghis KhanDschinghis Khan - Siegerehrung作者:Glen公众号:更冷吃到老玩到老的故事冰山:异常逻辑梳理也许你用了九牛二虎之力,终于把产品的主流程梳理清楚了,但是你看到的只是产品冰山海面上的那10%,剩下的90%是海面下各种情况的异常逻辑。➀ 10%的冰山和90%的冰山任何一个产品功能逻辑,都分为主逻辑和异常逻辑。产品经理们当然要花...

    2018-04-08
  • UI交互设计只需掌握这3点

    说到交互设计,就不能不提需求,因为所有的交互设计的工作都是基于需求,这也是交互设计的第一个着力点。因此,只有深刻理解需求以后,才有可能做出好的交互设计。举一个饱含血泪的例子:在做一个项目的过程中,有一个需求是要将一个应用的数据展示做一下调整,使之能够查看在三个月之内的该数据。当时,自以为已经很了解需求,只是将时间限制放开到三个月,同时,数据的展示限制在一个月内。也就是说,可以查看三个月内任意小于三十天的时间段。优点是:1)满足了需求;2...

    2018-02-27
  • 【18应届报考北师大map用户体验方向】经验分享贴

    BNU学习小组互助互帮,轻松考取北师大,我们团队致力于为报考北师大MAP心理学专业的学弟学妹提供最精准的专业课辅导,官方微信:yanni513351。QQ:2194691060。专业课方面:普心、社会心理学我主要是看书背知识点,这两门课不难理解,看书熟悉内容以后将知识点背熟就可以,另外要通过做题检验自己的程度。测量心理学、实验心理学和统计心理学这三门课注重理解,尤其是统计心理学,要将每个知识点弄懂是什么意思,再做题巩固。而实验心理学重点...

    2018-04-15
  • 稳健中求发展,中普集团兼顾合规安全与用户体验

    互联网金融行业在中国发展已有十余年,金融市场几经波折后进入合规发展阶段,2018年可谓是监管最为严格的一年,优胜劣汰,有实力的平台纷纷积极拥抱监管,合规运营。中普集团作为科技金融的重要践行者和普惠金融的倡导者,一直坚持“合规”运营这一核心宗旨,自成立起就坚持依法合规,诚信为本,全心全意为用户和社会着想。从2017年的金融工作会议召开以后,合规备案是整个行业最为关心的问题,也是各大平台稳健发展的核心要务。中普集团认为,现阶段平台除了要积极...

    2018-04-07
  • 产品经理需要用心做好的交互体验——权限获取

    满城尽带黄金甲里,有句台词说得好,“朕给你的,才是你的,朕不给你,你不能抢”。用户给APP授权了,APP才能使用,直接索取或者暗度陈仓,效果往往会适得其反。今天就让小Q讲讲她的交互心得吧~很多APP会在初次使用的过程中直接弹框索取权限,这确实是最简单的实现方式,但被拒的可能性也最大。另外一类APP会在询问时通过一些小技巧变着法的诱导用户点击“允许”。实现成本不会比第一种高出很多,但获取授权的几率会增大。还有一种APP,会等用户用到相关功...

    2018-01-30
  • 用户体验要素

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放HaloBeyoncé - I Am...Sasha Fierce用户体验为什么如此重要说到我们所使用的那些产品和服务,我们对它们的感情可谓是爱恨交加,它时而令我们备受鼓舞,时而令我们感到泪丧,它使生活变得简单,又使生活变得复杂,它使我们变得疏远,又使我们更加亲近,即使这样,我们还是不得不每天都和不计其数的产品和服务打交道,当产品满足了人们的需要时,它的制造者应该备受赞扬,反正,...

    2018-03-24