2015 App 动效总结

去年年初给自己立下一个目标,希望自己能在新的一年做一些新的动效。作为一名热爱动效的攻城狮,每次看到 Dribbble 上的大神上传了很酷很炫的动画,就不由羡慕起来。虽然自己也有很多想法,但受限于自己的技术和时间,最开始只能从 Dribbble 上已有的动画寻找灵感。

第一个激发我灵感的大概是当时 Path 的 Menu 动效。而真正开始做的时候,是看到这篇教授如何转变三明治按钮动画的 Blog 。这篇 Blog 主要讲了如何实现Dribbble上的三明治开关按钮。博主写的很详细,从描述按钮的线条变换开始,到如何使用 Sketch ,再到用 PaintCode 绘制线条,最后到具体的实现过程。即使如此,但作为攻城狮,要在画图工具上画出漂亮的线条,还是需要很多技巧。不过还是完成了 Dribbble 上另一个类似的动画,po到我的 Instagram 上了。

15年算是向设计和交互迈出了一小步,在几个项目里也和客户交流了怎样加入动画让 App 更流畅更易用,不单是美观性和艺术性。希望在2016步子再迈大一点。

进入正题,今年看了一些 Apple WWDC 的老视频。WWDC2014年的视频里介绍了App设计中的动画效果。大概分三部分:

什么是动画

1. 随时间而改变。

2. 不是屏幕层级和结构的替代。

3. 实用性

FeNO值表格 for 医疗项目肺乐

4. 艺术性

流动的试管 for 医疗项目肺乐

为什么使用动画

1. 直观地引起注意

类似 Tumblr 的添加按钮

添加新任务或问题 for 云介理财项目

2. 面向用户

3. 连接用户的行为

下拉加载效果 for 公司社交平台项目

怎样制作交互原型

  1. 制作(Make)
  2. 展示(Show)
  3. 改进(Learn)
  4. 循环 1->3

两周年纪念动画 for 风起科技

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.