flinto导出html,Sketch绝佳搭配!30秒制作交互原型的次时代神器Flinto

编者按:30秒出交互原型,5分钟搞定交互动画!今天@Payshare 给大家安利一款超实用的交互原型制作神器,亮点有3:整体交互原型制作,与Sketch无缝配合,制作速度快快快到难以想象,内附一个教程,不到20秒效果就完成你敢信?来收!

Flinto的前身是一款在线制作原型的工具,通过上传图片,添加热点配合相应的交互动作快速的生成整体原型通过网页或者手机端展示给客户观看,与之前介绍的Briefs非常相似,但Flinto是在线应用。

随着移动设备的普及,Flinto也不断进化,团队开发出了Flinto for mac 版本,截止到现在的版本是Flinto 1.12

3099b5747fd517cea1a0289939bd7646.png

任何工具的出现都是为了提高我们的效率。作为一款交互原型制作软件首先要满足:

可以人机交互

便于设计师与其他人员沟通

减少开发成本

Flinto的一些效果

8586338367cbb688a1080f4b71979223.gif

ec8350a5b97efc4c1262ead23ff8b708.gif

4b443b4fe00c6883197e1e0073fd149c.gif

9492348526f281f3ff16e62448cea4fc.gif

也许我们很难想象,以上的后面三个效果都是在极短的时间内完成的(极短<=5分钟)

目前的Flinto除了拥有透明度变化,XYZ轴旋转,XY轴位移,运动曲线调整,移动端保存预览,等基础功能之外,最大的优点有五个:

整体交互原型的制作

与sketch无缝配合

制作速度快

制作速度真快

制作速度非常快

案例

1f1405e0dd78c089e19ed18d07b9f4e9.gif

下面我们要制作如上图的效果:

首先在sketch中绘制静态效果图:

699b076046d2d64192bce8c612149495.png

2. 利用Flinto插件一键导出到Flinto,点击相应图片添加触发交互的行为,这里是Tap,即单击,新建变化(New transition)

1c6e66d0905005e24d12970d05751913.gif

3. 把背景层透明度调整为0,调整整个图层位置,链接放大图片到小图片,调节运动参数。

727aa6dda6d6f51c70c212b2f5883353.gif

4. 保存动作,选择四张图片成组制作滚动Scroll,添加返回行为,预览效果。

d4d0f4e945d7e8c4310e142740ff84ee.gif

以上的效果我制作原型其实只用了不到20秒。

之所以那么短的时间得益于Flinto的connet layer(类似于Flash的补间动画)的作用,使图层之间的变化可以非常迅速的制作,并且Back link功能使我们可以一键制作原型的返回效果,这两点无疑大大加快了制作速度,并且由New Transition制作的交互动作和connet layer的标签还可以重复使用,总之,难以想象的快。

作者微信公众号:

【优设近期超实用神器合集】

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================

“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。

【特色推荐】

设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/。

设计微博:拥有粉丝量103万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。

设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值