UI设计中的动效怎么交付给开发

  • A+
所属分类:经验思维

本文来源: 公众号 - UX小学, 共 1042 字

大家都知道,移动界面设计中,优秀的动效总能较好的吸引用户注意力,缓解因信息加载带来的焦虑,提升用户体验,拿到更高的业务价值。那么这些酷炫的动效,怎么交付给开发效率最高呢?恰好小编认识个朋友对动效这块刚好较为擅长,所以今天特地请他来给大家简单分享下。

首先,咱们常见的UI动效分两种,一种为时间轴动效,这种动效往往不受外界因素影响,从头播到尾,没有手势等联动效。如常见的图标动效,Banner动效以及一些酷炫的loading等时间轴动画。比如目前线上支付宝首页的双十二动效,就是最好的时间轴动效例子,效果清晰明了。

UI设计中的动效怎么交付给开发

所以像这样的,使用Gif或 Lottie者来实现就可以啦,个人推荐使用Lottie,用AE插件Bodymovin轻松就能导出了。目前网易、淘宝、京东、支付宝里都有大量的 Lottie应用场景,这也是主要因为使用Lottie还原效果好,不容易出BUG性能也更稳定,这点秒杀GF。其次还有些APNG、SVGA、也都是时间轴的动效导出文件,原理差不多就不拆来讲了。

UI设计中的动效怎么交付给开发

不过有意思的是,最近支付宝设计团队还搭建了一个 Lottie动效库"玛良”,轻松就能配置一个 Lottie动效了,这个大家都可以去体验使用下。

UI设计中的动效怎么交付给开发

刚说了第一种时间轴动效,那么第二种则是会与手势及状态相关联的联动动效。这个通常实现需要通过 Native原生或者CSS绘制实现,更多的是作为框架层及容器层的变化,比如常见的页面组件弹出,信息抽屉下拉,不同层级的过渡跳转等系统型动效。一般这样的,可能更多的需要输出高保真的Demo以及标注详细的动画参数,像时间、元素变化值、速度曲线、运动轨迹等计算公式,都需要统一输出的文档,这样开发才能实现你想要的效果。

UI设计中的动效怎么交付给开发

而制作高保真demo的专业工具通常除了AE外,其实还有 Principle、 Origami以及Framer JS,这里个人推荐使用 Origami,实现效果精致,还能调用手机陀螺仪、相机、震动、声音等系统接口,实现出来的demo与最终实现效果基本没有差异。而且由于实现逻辑与开发是一样的,所以最后开发拿到你的工程文件也能很快上手,甚至不需要你标注了。

UI设计中的动效怎么交付给开发

PS:动效这块的输出确实还挺复杂的,涉及到很多技术方面的知识,如果对这块不了解的可能大家会看的比较迷迷糊糊。另外针对本文中看不懂的,可以多看些资料,深入研究,毕竟本文也只是讲个大概。

最后不知道大家对动效的兴趣如何,如果兴趣度比较高,针对这块后面,本站会尽量多收集一些优质文章,关于怎么做动效,动效怎么导出,怎么适配开发,低成本完美还原。



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: