您现在的位置: 万盛学电脑网 >> 程序编程 >> 网页制作 >> 交互设计 >> 正文

30秒制作交互原型的次时代神器FLINTO

作者:佚名    责任编辑:admin    更新时间:2022-06-22

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

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

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

30秒制作交互原型的次时代神器FLINTO 三联

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

  可以人机交互

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

  减少开发成本

  Flinto的一些效果

8dx20151027
1dx20151027
9dx20151027
7dx20151027

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

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

  整体交互原型的制作

  与sketch无缝配合

  制作速度快

  制作速度真快

  制作速度非常快

  案例

6dx20151027

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

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

5dx20151027

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

4dx20151027

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

3dx20151027

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

2dx20151027

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

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