Sketch49交互原型新功能测评教程!

昨天,Sketch49新版本发布,小编朋友圈又被刷了一波屏。对于该全新版本,具体有哪些新功能,以及如何使用呢?「10000个知识点」特邀讲师UIBANG-乔帮主连夜做了sketch新功能测评教程,分享给大家,希望可以给予你们帮助。深夜给大家整理了Sketch49版本更新的新功能-交互原型,希望大家能有所收获。下午在圈内微信群里,忽然看到2月28日发布了Sketch49新版本的...

昨天,Sketch49新版本发布,小编朋友圈又被刷了一波屏。对于该全新版本,具体有哪些新功能,以及如何使用呢?

「10000个知识点」特邀讲师UIBANG-乔帮主连夜做了sketch新功能测评教程,分享给大家,希望可以给予你们帮助。

<查看更多乔帮主的设计教程,就订阅「10000个知识点」吧!>

深夜给大家整理了Sketch49版本更新的新功能-交互原型,希望大家能有所收获。

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

UIBANG来和大家一起看看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”功能按钮 

选中画板中的一个对象后可激活“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设计师们可能也不会那么折腾,那么累了!

深夜给小伙伴们做了Sketch49版本新功能的测评教程,希望大家能够关注我们,第一时间Get新技能。

多多点赞 给我补点元气!

附上官网新功能介绍:

https://sketchapp.com/docs/prototyping/


作者:UIBANG-乔帮主

「10000个知识点」特邀讲师

UI中国主页:http://i.ui.cn/ucenter/252247.html

查看更多乔帮主的教程,戳“阅读原文”~

--关于我们---

UI中国 专业用户体验设计平台

主站:www.ui.cn

新浪微博:@UI中国

合作请加微信:18931333875


Sketch49交互原型新功能测评教程!

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

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

相关推荐

  • 用户体验设计专题——前言

    元宵佳节一过,春节假期正式步入尾声,相信大家的工作也已步入正轨。为了感谢大家对我们这个略显晦涩却干货满满的公众号的支持,经过系统梳理,我们归纳总结了9个用户产品设计的基本原理,结合从数千个小流量评估实验中筛选的经典案例予以阐述,在未来两个月的时间里,会逐步分享给大家!废话少叙,步入正题!笼统地说,用户体验(User Experience,简称UX或者UE),是指用户在使用一个产品、系统或者服务时建立起来的纯主观感受。这里我们会关注两个重...

    微信热点 2018-03-02
  • SKETCH教学视频

    则灵君分享的是“静电的sketch设计教室”教学视频,对于新手自学来讲非常的合适,感谢静电,讲解的非常的清晰明了,视频就在这儿,剩下的就需要你付出时间去学习咯,祝大家学有所成!链接: https://pan.baidu.com/s/1iIbE-DI_yHLayj7wue49yQ 密码: mw25·—END—·

    2018-04-20
  • 交互设计 | 做设计你怎能不了解心理学?

    以用户为中心的设计7个原则:(1)应用存储于外部世界和头脑中的知识(2)简化任务的结构(3)注重可视性,消除执行阶段和评估阶段的鸿沟(4)建立正确的匹配关系(5)利用自然和人为限制性因素(6)考虑可能出现的人为差错(7)最后选择,采用标准化今天分享的【主题】什么是无形的设计?【Giver】IHan,自由设计师有形的通常是指硬体的设计,所以像是越来越小的晶片或者你可以做曲面的屏幕之类,那无形的话通常是指它的一些背后的一些科技的发展,或者是...

    2018-05-02
  • 色彩在交互设计中的应用

    UI设计微课堂关注将获得一对一解答,设计、资源、分享😛听说很多同学都置顶了我的公众号这样就能第一时间收到我精选的UI设计精品教程感谢大家的支持!↓↓下方高能↓↓对于交互设计师来说,通常交互原型都做为黑白稿。为什么要做黑白稿呢?那是因为在前期交互设计中,交互设计师为了更专注于产品的流程、跳转,避免前期投入更多的精力在UI效果制作方面。对于很多小公司或小团队来说,通常只有一个设计师或者设计资源很少,设计师拿到需求后,直接就出高保真效果图了(...

    2018-04-24
  • 阿里自研UED计件平台技术解析

    从天猫到菜鸟,从双11到造物节,在阿里巴巴,除了来自集团的UED团队外,还有一支700余人的外包团队,一起创造着阿里视觉神话。阿里的UED外包同学们每年会收到来自阿里巴巴集团50多个业务方提出的十余万外包需求。如何协调外包设计师与需求方之间的配合,并且给到外包同学合理结算价格,成为阿里UED外包管理的一大难点。以往,阿里巴巴也会用一些简单的需求分发系统来应对。但由于实际业务场景的复杂性,需求在分配上无法做到合理与精准。加上缺乏评价和追踪...

    2018-02-01
  • UED沉思录

    Q:设计前期至输出时常见问题及解决思路以下分享,全是血淋淋的教训积累与总结。当然也是这段时间在AJK优秀Leader的带领下成长出来的。Q:设计师存在的表象问题?设计方案缺乏理论系统化因需求而丧失设计原则页面结构较为混乱,映射设计思路不清晰页面设计细节打磨程度较低页面制作时参数命名不严谨输出适配的兼容欠考虑Q:设计的根本目的是什么?解决问题Q:设计需要具备哪些能力?洞察力「发现身边的好设计」分析力「分析需求、解决痛点的思路」匠人精神「设...

    2018-03-15
  • 解密 Facebook 广告业务:用户体验与商业价值的双赢靠什么?

    本文经授权转载自极客公园(id:geekpark)文:宋德胜责任编辑:克里斯「把核心的事情做好,用户增长、收入增加会随之而来」,Facebook 近期在产品上的一些调整恰恰体现了这一想法。当地时间 1 月 19 日下午,扎克伯格在个人的 Facebook 账号上宣布,Facebook将对媒体机构进行评级,并在算法上提高优质媒体的内容在信息流中出现的优先级。公告刚刚发布,《纽约时报》等权威媒体机构的股票应声上涨。无独有偶,扎克伯格发出公告...

    2018-01-30
  • Fitbit:一份用户体验案例研究

    当谈论到锻炼时,这个世界上有三类人:每时每刻都在健身的健康达人;那些一天中全部锻炼内容就是从前门走到车里,每天在沙发看电视的人们;在这两者之间,想变的健康强壮但缺少一些动力去健身房的人(又称在屁股上踢一脚才行动的人)。 我,和我知道的大多数人一样,都是第三种类型的人。我们被称为是

    微信热点 2018-03-31
  • Axure rp视频教程36集,免费!

    1-36集,免费学习~~~点击“阅读原文”或长按下面二维码立即观看视频。对教程有疑问,请咨询微信:13388182428

    2018-04-09
  • 产品学习——用户体验要素

    最近看完了这边和产品相关的书籍——《用户体验要素》,读完之后感觉这本书写的挺好。下面做了一些思维导图,做的比较详细,这样就可以当做是读书笔记了。自己的不足:1,读起来的困难是这本书翻译的不是特别好,所以为了理清楚这个本的脉络,还是花费了比预期要久的时间。2,是第一次使用xmind,在一边做思维导图,一边学习使用xmind上面花费了一些时间。3,是专注度还是不够,集中精力的时间太少了,所以做一件事的时间就会拖的太久。第一章:用户体验为什么...

    2018-02-23