Skip to content

1.4 Motion Design 设计 - 标注 - 开发流程

MartinRGB edited this page Sep 20, 2016 · 1 revision

一、评估

首先要评估界面是否要添加动画。

如果动画能够起到指引、优化使用感受的作用,则考虑添加动画。

二、概念收集

首先根据界面的风格和布局,想象出出几种动画的可能性 —— 更为重要的是,你要想象出你的动画会给你的用户怎样的操作方式和感觉,记住那个感觉。

然后在 DribbbleBehanceVimeoGithubAppealingcapptivate.co等网站上寻找灵感,可以建立 MOOD BOARD 来收集灵感

三、绘制草图

无论是转场还是动画,大部分都是根据界面布局而进行相应的变化,拿出纸笔,在笔记本上,先把自己的概念进行草图草图绘制。

可以绘制出以下几个要素:

  • 动画变化
  • 流程
  • 手势

也可以用简单工具Marvel Invision做些简单原型快速测试想法。

四、快速设计

使用AE设计来实现概念和想法是较为快速的做法,挑选1~3种想法,进行设计。

AE快速设计时,先不用考虑开发实现问题,尽最大可能进行概念常识,并实现最舒服的动画曲线和效果。

如果效果比较单一,没有流程化操作,可以考虑直接跳到原型工具进行设计。

五、原型设计

当手里有了1~3种概念演示后,这时候可以使用原型工具进行设计。

充分考虑手势、层级、判定条件等因素,并将这些记录下来。

做完原型后,尽可能多的让其它人使用,根据他们的感受进行修改甚至推倒重来。

六、标注

如果各方面没问题后,根据交互原型和演示视频进行动画标注。

要提供配图、演示视频、标注三个文件给开发者,并与开发者关于这一效果进行沟通。

六、开发

设计者可以与开发者一同寻找有借鉴价值的第三方库,分析之后进行使用。

设计者还需要与开发者一同调节交互效果和动画参数

七、测试

通过代码实现后,要多进行测试,看是否有问题出现,以便改正。

八、迭代

如果以后还有其它功能需求加入,或者风格改动,可以进行动画迭代,从第一步重新思考。

(九、案例研究)

如果有空,还可以进行案例研究,自己分析自己的设计成果的起因、背景、概念、过程,以便其它项目中进行借鉴。