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

相关推荐

  • 当售电开始谈“用户体验”

    [图片]   现在,很多售电公司打着“增值服务”的噱头来签客户,承诺给客户绝对满意的用电服务,但现在很多用户却反映:售电公司并没有兑现签合同时所承诺的很多增值服务,用户蒙受损失。即使仅仅只是部分售电公司的原因,但是这样下去,增值服务这手好牌迟早会被打烂,增值服务的说服力会也来越低

    微信热点 2018-02-14
  • 进入第四个模块——用户体验。

    之前三个模块,我们希望解决的问题是你能够情绪纠偏、认知纠偏,不再只从原生感受上来看问题。接着我们讲的是建设系统的能力的用户体验。厚积薄发,“厚积”是系统能力,“薄发”是表面的呈现,就是用户体验。同维度竞争的时候,用户体验更是最核心的竞争力。用户体验第一课用户体验的五层要素《用户体验要素》这本书里提到:“用户体验的要素,来自5个层次的层层选择与叠加建设。”这五层分别是:感知层;角色框架层;资源结构层;能力圈范围层;战略存在层。1、最核心的...

    2018-02-05
  • UED专访 | 魏娜:设计由情感而生

    📌 编辑 | Belinda.L《漂亮的房子》播至第三阶段,福鼎站的房子即将展现在观众面前,UED采访了“小溪家”的建筑师魏娜,探寻项目背后的情感设计。魏  娜WEI 建筑设计创始合伙人、主创建筑师魏娜于2013年发布过一条微博,感谢UED杂志的建筑师赠刊上精心的小细节。而她与UED的缘分其实从更早之前就已开始了。UED杂志特别赠刊烫印有建筑师姓名 ©魏娜“从2009年我们事务所刚刚成立的时候,UED就开始给予我们很大的支持,在这近9年...

    2018-02-02
  • 百度贴吧体验升级背后的故事,用户洞察与交互升级

    作者:百度UXC随着产品的发展和用户群体的演变,用户对产品的认知也在发生变化,当用户认知和产品形象发生偏差时,体验升级就势在必行了。而用户对产品的认知大概体现在视觉感受(品牌形象)和使用感受(交互操作)上。对此我们从用户出发寻找设计上的突破口。洞察用户让设计有的放矢视觉感受对于大多数人是一种难以言说的东西,难以通过简单的方式得到答案。面对这个问题,我们选择迎难而上,通过精巧的实验、可视化的方式来解决,邀请用户与设计师一起,参与到品牌升级...

    2018-01-30
  • 对交互设计的思考(译文)

    本文是一篇译文,介绍了国外设计师对于交互设计师的现状和他认为的理想状态的思考。老外的思路还是比较清奇的,在这里介绍给大家。数字革命对于有好奇心的人来说就像是淘金热。没有人知道数字媒体究竟是什么,但它实实在在的深刻影响着我们的生活。 它是一个新的未知的领域,等待用新的艺术形式,设计和方式来填充,以更好地了解这个世界。然后,世界就变成了下面这样:这是怎么回事?1.基于技术思维的交互设计交互设计从数字技术革命中应运而生。所以就像工程师一样,设...

    2018-02-02
  • 交互设计 | 这到底是交互设计还是黑科技?

    Create Your Difference.           by CYD01能看透你的灯光今天创艺典与你分享的交互装置不再是学习你、跟随你的灯光装置了无论你怎么装高冷当面瘫今天的它能把你扒光把你一览无余地看透我觉得你必需服Aura这是Aura,一个视听和互动装置它解读和翻译人类的情感,然后将其转化成发光窗帘光的强度、形状和颜色会随着人情绪的变化而精确地改变这样的绿,或许代表了平静而这位哥们儿的绿,恕我直言,或许是一种失恋的绿这样...

    2018-04-30
  • 现阶段用户体验最完美的混合动力 试驾新款比亚迪唐100

    以上汽车你体验过开一天车只花4元么?你体验过地板油加速无声无息么?你体验过用车供电吃电火锅开Party么?你体验过下大雨没带伞直接把车遥控过来么?你体验过车外雾霾爆表你却淡定自若么?你体验过下坡行驶续航里程却越来越多么?你体验过开个三月车却用不到100元油费么?今天这个车让我们知道到了答案!话说以前以上君并没有太关注过新能源车型,总感觉没有乐趣,但是真正开上贴近生活以后才发现插电混动是真的实用。YishangAuto第一眼看到唐100就...

    2018-04-07
  • 欧洲刮起性爱机器人风,用户体验称比真人舒服;马化腾减持腾讯200万股,套现超6.4亿港元 | 早报

    语音版早报9.109月10日邦妹读新闻来自创业邦00:0004:09不可不知1、马化腾减持腾讯200万股 套现超6.4亿港元香港交易所资料显示,马化腾于9月5、6及7日,连续三天合计减持腾讯200万股,每股平均价介于321.64港元至323.521港元之间,持股量由8.71%降至8.69%,合共套现逾6.4亿港元。此时正值腾讯股价高点。马化腾今年4月连续4天减持,套现42.27亿元,其今年已合共套现近46亿元。2、传WePhone开发者...

    2018-01-31
  • 交互设计 | 张艺谋这样玩儿

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

    2018-03-06
  • AI 交互设计怎么做?谷歌详解自家 AI 相机设计思路

    文 | 何忞来自雷锋网(leiphone-sz)的报道雷锋网按:日前谷歌在其官网发布博文,文中详细介绍了 AI 相机 Google Clips 的一些设计思路。雷锋网将其编译如下正如过去曾经发生过的移动革命以及再之前的网络革命一样,机器学习正在让我们反思、重构、重新审视我们生活中已经拥有的一切。在 Google 用户体验(UX)社区中,我们开始了一项名为“以人为本的机器学习(HCML)”工作项目,来指导和帮助我们重构世界。站在这样的视角...

    2018-02-03