今天重点来讲讲demo制作软件Flinto的操作,官网地址www.flinto.com,需要翻墙。
简介:
flinto,适合做移动端App demo的付费软件,Mac适用,暂时没有Windows版本。
flinto的界面非常像sketch,所以对sketch用户来说,flinto上手非常快。
预备工作:下载sketch的flinto插件
下载地址https://www.flinto.com/mac_sketch_plugin/
然后将其装在sketch的Plugins > Reveal Plugins Folder中。
导出flinto文件时点击sketch的Plugins > Export as Flinto Document 就行了。需要注意的是默认状态下是将sketch文件中所有artboard都导出,建议分artboard单个导出,边做边改。
使用flinto不久,但是它对于移动端demo制作的方便性是非常显而易见的:
1.flinto制作出sketch的插件,可以将sketch文件导出flinto格式,并保留图层,这也意味着sketch文件中每一个元素都可以在flinto中产生动效;
2.灵活的动效,顺畅的手势(包括常见的上下左右滑动,滚动);
3.用手机下载app可以实现mac与ios同步显示,并且可以将原型分享给他人,其他人只要下载了iOS版本的app就可以直接观看,但是暂时没有Android版本;
4.轻便性操作,以每个画面为单位,进行画面间的跳转(这也是它不足之处,在同一个画面之间的跳转比较难处理)。同一个跳转效果可以重复使用,也可以用reverse功能,进行反转使用,类似于back键。
在使用flinto之前,先要对相对应的sketch文件进行整理,整理的重点在于:
1.保持各个artboard组件名字清晰明了,至少让自己和同事看得懂当前图层是什么作用,当然建议使用英文;
2.保持各个画面之间相同的部件position一致,不然在两个画面之间跳转会出现button跳动的情况;
3.构建好每个画面在自身跳转、画面之间跳转的逻辑关系。
4.同一个画面之间不同的子页面之见,相同的部件要用相同的名字,防止在复用动效的时候出现空的tag,也就是动效出现意外的bug。
用flinto制作demo的过程中需要注意的问题:
1.sketch文件中没有背景的artboard需要添加填充好了的实色背景;
2.背景毛玻璃图片效果需要在图片上进行处理模糊处理,flinto不支持sketch中的background blur;
此文是针对有sketch基础的同学进行说明的,学习软件最好的方式就是自己动手制作,此文不断更新中,希望给大家能带来些帮助。