您的当前位置:首页正文

交互设计师工作二三事(五)——flinto操作过程注意事项

2024-12-20 来源:伴沃教育

简介:

flinto,适合做移动端App demo的付费软件,Mac适用,暂时没有Windows版本。

flinto的界面非常像sketch,所以对sketch用户来说,flinto上手非常快。

预备工作:下载sketch的flinto插件

然后将其装在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基础的同学进行说明的,学习软件最好的方式就是自己动手制作,此文不断更新中,希望给大家能带来些帮助。

显示全文