关于交互动效视觉设计的些许笔记

1、动效设计的三个原则

有序一致（运动规律、交互与动效的衔接）

产品调性（动效是否符合产品调性？整体稳or惊艳）

愉悦用户（让用户感到愉悦、惊喜、眼前一亮）

2、交互意义

   动效在整体上大部的稳的、简洁的，在细节上是可以风骚的

  要考虑动效对用户使用是否有用，有何交互意义？

例：下拉刷新（也是动效设计的一种设计模式）

    三个状态 ：1、开始下拉

                      2、下拉刷新的条件触发成功 正在刷新

                      3、下拉刷新完成 （下拉刷新效果去掉 同时出现新的内容）

    交互意义：让用户在下拉刷新时 不会焦虑

3、要有原型 

    静态原型、线框图、低保真原型——交互设计师

     可交互原型——动效设计师

动效设计 不是looks like 看起来像

而是how it works 它是如何工作的

放在浏览器／手机中时，是什么样的感觉

4、了解开发

设计之后给开发两份东西：展示稿（ae）和交互原型

dribbble推荐动效团队：yalantis ramotion

要关心动画链的制作，完成第一个动画之后完成第二个，完成第二个之后完成第三个...

例如：iOS 自带的动画语法、知识

        Ios自带的弹性动画、缓动动画、关键帧动画、路径动画、粒子动画、

逐帧动画

安卓 三种：view 补间动画

             property 属性动画

              drawable 逐帧动画

均可添加贝塞尔差值、加曲线

5、了解开发-标注

标注：运动规律、那些值产生了变化（加速减速、变化值）、动效时间

差值器速查应用 

6、了解开发-第三方动画库

iOS第三方弹性demo（cancel animation）、pop弹性demo、spring demo

7、工具思想

8、时间轴工具 

时间与变化／专注效果动画设计师

可添加各种效果 精雕细琢 运动曲线 模拟物理现实。让动效看起来更自然与舒服

所见即所得，所见又不是所得；是效果而不是手机上可交互的

Ae 案例：dribbble   上的sergey valiukh。    cuberto。    jon lewis。

优点：动画曲线 自由度高 

缺点：开发标注成本大 在曲线上与开发自带的曲线契合

9、节点信号流工具

专注逻辑、交互动效设计师

quartz composer （仅次于AE）例：sam thibault。  anton kartashov。 george otsubo

form 例：adam debreczeni。merine。

10、编码实现 

最佳效果、最难学习动效设计师

xcode 例：meng to。yalantis。

android studio 例：john smith。

framer studio 例：jorn van dijk。Jonas treub。jorn van dijk。

11、简单可交互软件

快速实现交互流程视觉、产品、交互设计师

keynote 例：andrew cohen

plxate studio 例：oliur

marvel 例：virgil pana

高保真原型的需求：

效果吸引

非常逼真的交互

定制性非常强

根据实际工作选择工具

12、动态设计流程

交互设计——视觉设计·低保真原型——动态设计——可交互原型——标注——开发