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

相关推荐

  • 破局在即,用户体验将成银行翻盘利器?

    今年,BATJ纷纷与国有四大行牵手,这种破冰式的历史性合作传递了两个信息,一是专注线上的互联网巨头们开始重视线下场景的价值,这也表明在未来的金融行业中,我们将能看到更多线上线下相结合的产品和服务场景;二是在与互联网巨头的磨合中,银行的角色即将产生质的突破,也彰显了银行在当前金融局势下的求变决心。当然,银行们寻求自我突破的决定必然不是空穴来风。众所周知,在互联网+潮流下,以线下为主的银行们失去了对部分年轻用户的影响力,而且银行基因中强大的...

    2018-03-03
  • UED网站“新视界新体验”运营设计的思考

    2018年3月20号,我们UED网站(ued.z6.gldcg.com)开始首次运营,推送了我们的第一篇文章“新视界新体验——广联达集中采购平台新版设计”,在朋友圈,小火了一把。21号的时候,我对这个事情,又有了新的思考:第一次发文的目的是什么:1、推广我们产品全新界面,新体验;2、推广我们UED的网站;事实上,我们达到了我们的目的,微信群中得到了大家的认可,点赞;朋友圈大家转发和分享;朋友圈留言,要体验我们产品;老客户看到后要求升级产...

    2018-03-22
  • 如果你即将面试交互设计,可以参考一下这篇

    交互设计也是设计类,设计类的面试只要看作品说话而已。但是,偶尔有也会有些面试官完全都不理你的作品,然后会问一些比较宽泛的问题,今天的汇总就是主要针对这部分题目。题目大多都能回答,但是偶尔一个题目打过来还是会有点懵,所以事先做好准备会相对比较好。最最重要的当然是介绍你的作品!介绍你的作品!介绍你的作品!(重要事情说三遍)讲的思路就是你从什么地方找到设计的依据,然后做了什么设计。下面就是面试的其他问题:1、自我介绍。答:(自我介绍算是面试的...

    微信热点 2018-03-25
  • Adobe放大招!Sketch有的功能都上了!

    (本文内容来源知友:不知语冰,感谢~)关于 Photoshop的UI-DNA工具很久就有传闻了!昨天据MICU了解,这个强大的工具终于开放测试啦~~虽然说很多设计师比较推荐sketch,可是这回了不得!sketch有的功能,PS都能实现了!也许有很多同学还不太了解 UI-DNA 是个什么样的工具,说白了,就是 Photoshop 上拥有更强大的属性编辑功能。现在来说说UI-DNA都有神马强大的功能。打开Photoshop 中的UI-DN...

    2018-03-02
  • 交互设计 | UX设计想法表达太难?——试试故事版StoryBoard

    UX设计中一些针对用户调研的方法Workshop、Observation、Interview调研结束后需要将调研结果整合反馈单纯以文字去呈现无法将设计信息最大化故事板、线框图等视觉化的信息传达方式直观准确的解决设计问题下面小编将为同学们详细介绍故事板在交互设计作品集创作中的应用及优点,帮助大家在设计过程中能更高效的完成设计想法的交流和沟通。故事板的应用故事板可看作代表镜头的插画,同学们在设计时需要把图像排列在一起,使自己的设计能够故事化...

    2018-03-17
  • 【干货知识】最全面的交互设计原则和理论汇总(下)

    【点击上方蓝字↑↑↑关注「艺恋优梦」获得每晚推送】防错原则:防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。通过改变设计可以把过失降到最低。该原则最初是用于工业管理的,但在交互设计也十分适用。如在硬件设计上的 USB 插槽;而在界面交互设计中也是可以经常看到,如当使用条件没有满足时,常常通过使功能失效来表示(一般按钮会变为灰色无法点击),以避免勿按。如上图所示极客公园的评论功能快,在留言框没有内容或邮箱格式不正确的时候是无...

    2018-04-11
  • Axure RP 7.0软件安装视频教程

    Axure RP 7.0下载地址:链接:https://pan.baidu.com/s/1eTf0W6Y密码:otr5安装中有问题请咨询私人微信:152374906801、找到AxureRP_Pro_Setup.1415607193.exe鼠标右击以管理员身份选择打开2、点击next3、勾选I Agree,然后点击Next4、点击Browse更改安装路径建议安装到除C盘以外的磁盘,可在D盘或者其他盘创建一个文件夹。然后点击Next5、名...

    2018-03-04
  • 互联网+时代,让用户体验到你的专业性

    物质种类丰富之后,市场要面对的新重点就成了“用户体验”。只有“功能”的商品即使做成百宝箱也只能昙花一现,能够让客户用得舒心用得愉悦才是现代产品的应有魅力。在企业竞相提升体验的大潮中,“别让我等、别让我想、别让我烦”的用户三大心态仍然是大部分厂商的改良依据,然而总有一些人可以在这一基础上做得更加精细周到,成为“体验战”的大赢家。01曾经被无视的用户体验如今是神兵利器在计划经济时代,消费者的选择余地很小,导致了厂商只注重“功能”不注重“体验...

    2018-05-07
  • 基于Axure的移动端APP产品设计规范

    文章结构:① 全局元素与控件设计规范 ② 全局注释规范 ③ 一些基本的产品设计原则一、全局控件元素设计规范我们经常会看到很多产品都有一个标志颜色,来增加产品的辨识度,例如淘宝的橙色,小黄车的黄色等。在产品设计过程中,为了保持视觉的统一性,通常会有一套配色方案,配色方案确定了产品的主色调和辅色调,所有的控件和元素都应用这一套配色来设计。除了配色还有,还有字体元素,按钮元素,以及其他控件元素等,产品设计开始就应该定义好这些基本规范,不仅能保...

    2018-03-04
  • 将Axure移动端原型生成二维码教程(二维码支持微信等app扫描访问)

    使用Axure制作完成移动端原型以后,如果需要在手机上进行演示,该如何进行操作呢?普通的方法就是将原型文件上传到托管平台上面,然后生成一个URL链接发送到手机上用浏览器打开。如果能将URL链接生成一个二维码,直接用微信或QQ等应用直接扫描就能打开原型,这样访问体验能有很大的提升。所以今天这篇分享就是教大家如何将Axure制作的移动端原型生成二维码。下面这个就是我用原型链接生成的二维码图片,直接用微信或QQ扫描这个二维码就能体验到效果。链...

    2018-03-24