1. 学UI呀-UI设计学习与UI教程网-UIYA.CN首页
  2. 教程
  3. APP设计

用sketch做跳转动效?就这么简单


最近接了一个新项目,负责这个项目的产品先生,以前没有合作过,这次算是首次携手。因为我是中途加入,前面还没有看过资料。据说他用sketch画原型。OK没问题,我觉得应该没影响吧。可是收到他原型的时候我是崩溃的。




密密麻麻的全是线哪。能点击么?我尝试了一下并不能。可是我用鼠标指着线找对应要跳转的界面,眼睛使瞎了是小事,问题是很多交叉的地方,根本捋不清啊。此处有恶龙咆哮的声音。一遍看一边问候我们的产品先生。




结果后来给我演示的时候,竟然是可以预览、点击跳转的。好吧我差点没跳起来。对不起我误会我们的产品大哥了。用了这么久的sketch,竟然不知道这个技能,除了惭愧我还能说什么。接下来就开始虚心向产品大哥请教,现学现卖整理出这个教程?(可能很多人都已经会了,那就算我的学习笔记吧)


交互跳转


这个交互的功能是在sketch49之后才有的,因此首先要版本达标。那么我们的平时工作中除了产品原型可以用的到,做完设计稿来做演示动效也是很方便的,并且相当的易掌握。在这里我用一个简单的案例说明。




假设现在要点击A界面的红色色块,跳转到B界面。应该如何建立链接呢?

首先注意工具栏上这几个按钮的功能作用。这里建立链接可以用Link直接创建,也可以创建热区做跳转。



用Link创建连接

选中色块,点击Link或者在右侧Prototyping点添加,当色块上出现跳转的连接线时,再点击要跳转的界面就可以了。



建立链接的模块在左侧显示链接标识,选择相应模块可以修改交互的属性和方式。




创建热区


点击Hotspot或者使用快捷键“H”呼出热区功能,在要建立热区的位置拉取适合大小的框,然后为热区建立链接。建立链接时,页面顶部左右两侧各有一个小图标,分别可以返回上一页面和直接选择目标页面。




如何预览


做好跳转之后可以直接在sketch里面预览,预览时,点击 Preview 按钮或者使用快捷键 “cmd+P”,进入预览模式。顶部可以选择要浏览的页面,也可以设置起始页面。当点击到未设置链接区域时,页面中会显示橘色不透明框,提示可点击位置。当然也可以连接手机,用Sketch Mirror直接预览。




总结


其实这个功能已经出来很长一段时间了,但是我才刚刚知道并学习。整个操作过程很简单,很容易上手。虽然目前的交互功能还不尽完善,跳转的方式比较单一,但是做一些简单的交互动效还是可以的。在一定的程度上也降低了学习其他交互软件的成本,期待接下来可以更加完善。



海盐社Q3招新,回复数字【2】查看

本文来自:海盐社    作者:山竹屁

文章版权归原作者,内容为网络收集。如有侵权请告知我们并会及时删除。邮箱: hello@sketchui.net