ps教程_设计教程_ps素材_设计素材_小憩设计
  • 欢迎来到小憩设计!

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

时间:2020-12-16 07:27:50 作者:小憩设计 来源:网络

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

Sketch49 交互原型新功能,对于 UI 设计师们来说是不是新福利呢?我们一起看看!

看到2月28日 Sketch49 新版本发布的消息,打开了官网看到了最新的版本更新视频,确实还是挺激动的。UIBANG 来和大家一起看看 Sketch49 的版本更新了哪些新功能吧。

一、交互原型功能

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

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

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

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

二、便捷的效果预览

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

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

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

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

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

三、其他更新

  • Sketch Cloud 中文件可安装为 Libraries。
  • 增强复制粘贴大型文档性能。
  • 改进  EPS/SVG 格式文件 导入。
  • 渐变锚点改为单击增加。
  • 图层列表拖入画板内不再是位图。
  • 优化缩略图性能新增原型设计模板及修复已知 Bug。

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

四、交互原型功能教程

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

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

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

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

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

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

修改页面切换动效。

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

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

2. 如何取消链接操作

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

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

或将 Target 修改为 none。

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

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

3. 如何创建热区

在 Sketch 中 热区称为  Hotspot ,可以通过菜单栏中的 Insert(插入)找到,也可以使用快捷键 H。

在画板内鼠标左键圈出「热区」范围,箭头指向目标画板(页面)。

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

在自定义工具栏中可以为「热区」添加快捷入口。

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

4. 如何预览交互效果

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

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

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

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

打开 Sketch Mirror,按照在 Sketch 内设置的交互操作即可。

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

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

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

Sketch Cloud 云端团队协作预览 

注册/登录  Sketch Cloud。

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

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

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

邀请项目成员及权限设置。

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

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

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

五、Sketch49 预览窗口「黑屏」怎么回事?

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

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

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

六、总结

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

欢迎关注作者微信公众号:「UIBANG」

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

「Sketch实用教程」

  • 《简单实用!七步学会用 Sketch 搭建复杂表格》
  • 《提高沟通效率!帮设计师记录修改位置的Sketch插件PinLog》
  • 《实用全面!教你用Sketch Libraries构建组件库/设计体系》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com

相关推荐

  • 动漫风格专题之标题设计
    动漫风格专题之标题设计
    想要做一个广告标题,尤其是动漫游戏类的,真的没想象中那么容易。当你在字体库里一个个切换,最终选择到了一款很合适的字体,你以为非常完美了!但其实,你与大师的距离还......下面我们就来看看动漫风格专题之标题设计的一些案...

  • 质感创作技巧制作毛衣,玩具熊或者更多萌哒小物件~!(AI+PS教程)
    为节日主题制作应景温馨萌哒的道具,少不了绒毛玩偶织线围脖之类小物件。运用好质感技巧能让它们拥有足够的真实感,更加能让小物件生动有趣使整个画面变得满满都是萌萌哒。此篇AI+PS教程提供制作思路,让大家可以了解到质...
  • edeea3ef944d349482de
    为什么又多了一個像素?(设计经验谈)
    对于平面设计师及插画工作者来说,Illustrator是再好用不过的工具了。Illustrator 最大的优点在于可以轻易将图形量化并修改、以及可以在完成制图后再来考虑大部分的「后端」问题,比如说图档输出尺寸、分辨率等等。 但是...
  • mobeimo1
    童趣大风车(ai教程)
    以下为童趣大风车ai教程。在本教程中,你将学习如何用ai创建一个丰富多彩的螺旋桨风车。 对于初学者,你将学习如何建立一个简单的网格,以及如何创建使用基本的工具和效果。同时你将学会如何使用混合模式和外观面板中的图...
  • 画一套亮闪闪的扁平风格宝石图标第2篇(AI教程)
    接上一篇继续教大家制作不同样式切面的宝石。不过因为此教程是由完整文章分三期为大家整理翻译,很有可能因此会让部分同学感觉内容上有一些断篇儿,所以建议大家在学习之前最好回顾一下教程一的内容。传送门由此去: 画...
  • mobeimo1
    AI画个简单贝壳(AI教程)
    夏天来了,暑假来了,大海我们来了。好吧,暂时到不了海边的,先来画个贝壳沾点海风的气息吧。 1.新建一个空白文档。然后去“编辑>首选项>常规>键盘增量设为1px”以及“单位”选项卡的单位如图所示。我通常会使用这些设置,因...
  • 撸友们,快来撸个LOL风格的字体图标吧~!COME ON!(PS+AI教程)
    撸友们,快来撸个LOL风格的字体图标吧~!COME ON!(PS+AI教程)
    暴雪公司的作品一直是游戏精品的代表,就算你不是撸粉儿,但也一定听过他们的大名。至少就连没玩过撸啊撸的小编也听说过很多因它而生的美好情缘的故事。嘿嘿,闲扯了这么多,不过今天的主题却不是撸LOL,而是仿照LOL的UI设计风...
  • 画一套亮闪闪的扁平风格宝石图标第1篇(AI教程)
    画一套亮闪闪的扁平风格宝石图标第1篇(AI教程)
    这是一篇来自于国外网站的教程,作者一次讲了6种扁平风格的宝石图标画法,绘图思路几乎相差不多。但因为原文篇幅较长,所以小编将准备分三期与大家分享。如果喜欢的话,可以随时关注我们后继的更新。 1. 制作一个漂亮的闪...

设计教程热门

mobeimo1

童趣大风车(ai教程)

edeea3ef944d349482de

为什么又多了一個像素?(设计经验谈)


质感创作技巧制作毛衣,玩具熊或者更多萌哒小物件~!(AI+PS教程)

动漫风格专题之标题设计

撸友们,快来撸个LOL风格的字体图标吧~!COME ON!(PS+AI教程)

热门文章

ps cs6怎么抠图覆盖?

" />

ps cs6怎么抠图覆盖

ps抠图后怎么拉出来

怎么用ps软件修图?

" />

怎么用ps软件修图

怎么ps腹肌?

观察原" />

怎么ps腹肌

ps怎么取消合并的图层?

<" />

ps怎么取消合并的图层

psd格式怎么改成jpg?

" />

psd格式怎么改成jpg

ps扣出来的图怎么缩小?

<" />

ps扣出来的图怎么缩小

ps软件怎么制作1寸照片?

" />

ps软件怎么制作1寸照片

ps软件怎么扣人像部分?

<" />

ps软件怎么扣人像部分

ps怎么p身份证号码数字?

" />

ps怎么p身份证号码数字