恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Sketch49 交互原型新功能
0.0°
2018-03-01 原创文章 经验/观点 举报 4188 181 394 44

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


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


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

亮点一:交互原型功能


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

Image title

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


Image title


亮点二:便捷的效果预览


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

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

Image title


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

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

其他更新


· Sketch Cloud 中文件可安装为Libraries

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

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

· 渐变锚点改为单击增加

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

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


Image title


—————————————————————————————————————


交互原型功能教程 


1.页面链接跳转(也就是画板之间的切换)

更新到Sketch49后,在工具栏右侧会发现“Link”功能按钮 


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


Image title


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

Image title


修改页面切换动效


Image title


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


2.如何取消链接操作呢?

选中 原有链接对象-矩形 ,右侧面板中可编辑链接

Image title


或将 Target 修改为 none


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


Image title



3.如何创建热区?

在Sketch中 热区称为 Hotspot ,可以 通过 菜单栏中的 Insert(插入)找到,也可以使用快捷键 H 
在画板内鼠标左键圈出“热区”范围,箭头指向目标画板(页面)

Image title


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


Image title



4.如何预览交互效果?

A.Sketch软件内部预览(黑屏的小伙伴请看文末说明)

连线操作完成后,点击 预览按钮

Image title


Image title



B.Sketch Mirror手机内预览(暂无Android版本,且无法像Principle缓存至手机内离线操作)

打开Sketch Mirror,按照在Sketch内设置的交互操作即可(凌晨亲测)

Image title


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

Image title



C.Sketch Cloud云端团队协作预览

注册/登录 Sketch Cloud

Image title


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


Image title


Image title


邀请项目成员及权限设置


Image title


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


Image title





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


Image title


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


但是暂没有看到官方解释,我也仅仅是个人猜测,也欢迎小伙伴们共同测试留言给我。


最后总结

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


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


多多点赞 给我补点元气!哈哈~滚去睡了~


附上官网新功能介绍:https://sketchapp.com/docs/prototyping/






更新:2018-03-01

收藏

181人已收藏

UIBANG设计教育

uibang.cn 原创UI设计教程

  • 61

    作品

  • 4594

    粉丝

  • 8

    关注

  • 苹果WWDC2019 霓虹灯效果(附视频教程与源文件)
  • 别让你的简历成为HR的“垃圾邮件” !
  • UI设计不“火”了,我还该不该学?
  • 阿里双十一APP图标设计教程

    猜你喜欢

      2018-03-01 原创文章 经验/观点 举报 4188 181 394 44

      Sketch49 交互原型新功能

      0.0°

      你确定要举报Sketch49 交互原型新功能

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年03月01日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      394
      181
      44

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录