干货!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

相关推荐

  • 无障碍的交互设计,需要做到这7点

    先从字面上来理解何为“无障碍”。生活中许多场所中,除了供给正常人使用的区域外,还有一些针对工作人员、特殊人员(残障人士、老弱病残、孕妇等)的无障碍通道/设施,比如:机场、地铁、厕所、展会等。无障碍设施/通道是能够兼容普通人员和特殊人员共同使用的,且相对来说使用起来更为便捷、直接、且省时省力。-交互中的无障碍需要考虑到哪两方面?-那么交互中的无障碍又有哪几层含义呢?从常规的使用人群来看,首先要满足普通人群使用。其次,当一个优秀产品具有一定...

    2018-03-31
  • 交互设计测试评估

    - END-作者  Rachel Xu欢迎将文章分享至朋友圈,拒绝转载~VUI进化论达尔文老爷爷说,你的语音交互设计该进化了~长按指纹 > 识别图中二维码 > 添加关注不关注,怎么进化~

    2018-04-18
  • 尼尔森十大交互设计原则的实际应用解析

    Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则被称为“启发式”,因为它们是广泛的经验法则,而不是特定的可用性指导原则。因此,我们不能把它上升为一种标准,而是应该当做一种经验来学习,然后跟现实中的设计结合来使用。接下来,作者通过一些具体的实例来跟大家深度解析尼尔森十大交互设计原则在设计中的用法。Jakob Nielsen(雅各布·尼尔森)是毕业于哥本哈根的丹麦技术大学的人机交互博士,他拥有79项美国专利,专利主要涉及让互联...

    2018-02-16
  • 交互设计 | 张艺谋这样玩儿

    3 月 4 日,张艺谋导演的观念演出《对话·寓言 2047》在上海大剧院正式演出。在连演两场之后,他们将移师广州和杭州,共同组成《对话·寓言 2047》第二季的演出。尽管被称为第二季,但此次演出的内容与去年 6 月在国家大剧院上演的第一季大体相似。开场仍旧是 71 岁的蒙古族老人其布日一边编织着麻绳,一边唱着悠扬的蒙古长调。背景中,美国先锋艺术家 Daniel Wurtzel 利用空气动力学原理,让一块云纱在舞台上翩翩飞舞。在这个段落之...

    2018-03-06
  • Sketch迎来重大更新,叫板PS爸爸?

    11月8日晚,Sketch 悄悄的更新至 Sketch 41。至此3X系列已经离我们而去,4X系列正式到来!在此次更新中,还是有不少惊喜的。今天一一做个盘点。全新 LogoSketch 拟物化黄色钻石 Logo 已经成为历史。新Logo 顺应了设计潮流,简化色彩并弱化光影关系。不过有一点令我很在意,就是新Logo的倒角处理(面与面之间的接缝)。之前的Logo倒角很锋利,有种割破手的感觉,典型的 2D 图形拼接效果;新Logo倒角光滑,做...

    2018-04-26
  • AxureUX电商平台WEB端交互原型模板正式发布

    01作品信息作品名称:AxureUX电商平台WEB端交互原型模板作品类型:模板类发布日期:2018-02-25最新版本:v1.0主要适用:Web端软件版本:Axure 8.0文件大小:13MB作品编号:TEM006作品售价:¥169.00详细介绍及演示:http://www.axureux.com/home/templateswebec.html复制以上链接在浏览器打开或点击文章底部阅读原文,建议在电脑上查看原型演示。02作品介绍本作品...

    2018-03-04
  • 干货时间|交互设计线上讲座内容回顾总结

    学艺术的大表姐带你走上艺术留学的不归路Hello~Everybody~上礼拜元宵节的结束宣告着新的一年的真的要开始了!这下我们也再没有借口偷懒了小伙伴们要用新的节奏开始奋斗啦~2018,告别懒惰,发愤图强吧!!最怕的就是:“比你优秀的人还比你努力!”当然为了给大家缓冲的时间大表姐特意送上年前的交互设计分享讲座的干货回顾总结对交互设计感兴趣的同学,可千万不能错过接下来的内容了~并且还能拓宽自己的艺术设计领域想了解更多关于英美交互院校、专业...

    2018-03-09
  • 19.怎样绘制用户体验的地图 | 打造产品思维30讲

    19.怎样绘制用户体验地图来自时间前哨00:0015:06这一节讲用户体验地图和用户故事。用户体验地图就是通过画一张图,用一种讲故事的方式,从一个特定用户的角度出发,记录下他与产品或者服务进行接触、进入、互动的完整过程。开始做产品经理的人容易犯的错误,就是用管理员的视角来规划产品。我经常看到这种全局型的产品设计图,复杂、全面、没重点,这肯定是错的。我一般会告诉这种产品经理,请按照一个用户使用的路径,把这个产品设计图再画一遍。从一开始用户...

    2018-03-20
  • 结合实际案例,一篇看懂用户体验五个层次

    ♝点击上方“交互设计学堂”关注我们,送电子书看过了很多描述用户体验五个层次的文章,但感觉很多都浅尝而止,今天我特地结合了十来个案例对用户体验进行了一次相对全面的阐述,希望大家在阅读时也能够同样寻找相关产品进行比照和论证,想必会更有收获。概要用户体验设计就是“以用户为中心的设计”,即创造“每件事都按照正确的方式在工作”的用户体验,让用户宾至如归,就像《Don’t make me think》里提到的“这会让用户觉得自己更聪明,更能把握全局...

    2018-04-10
  • Axure优雅装逼指南:开启原型高颜值形态

    作者寄语 / 一直想写的Axure小技巧分享,终于动手写了。望能对亲有所帮助,文笔粗糙请谅解。内容目录:啥是高保真原型?简单说明原型Axure可以画出什么水准的高保真?给示例,开启装逼模式特殊的技巧:核心内功:目标清晰/理解设计规范画图习惯:像素对齐/用浅色/上素材啥时候上高保真?:适用场景 and 不适用场景啥是高保真原型?啥是原型,从事互联网研发体系的同学,肯定非常熟悉,特别是产品岗同学。如果不是,那如下简单讲原型和高保真原型的:原...

    2018-04-28