动效是对于行为的设计

我们平时所说的UI设计，大多数指的都是对整个应用程序界面的设计，所呈现的信息是静态的，这样子的设计是对于“状态”的设计。设计师们去设计每个页面的不同的状态，然后呈现给用户。而触发状态的操作就被称作行为，动效设计师就是通过动画效果去引导、响应用户的行为，联系界面之间的元素，从而在用户的交互行为上提升用户的体验。
　　前段时间看到了国外medium上面的一片关于动效设计原则的文章，写作者是一位在五年时间内为四十多个国家和上百个顶尖机构提供咨询服务的动效设计师。文章总结了一些利用动效设计去提升用户体验的设计原则，一共总结了十二条原则。相较于Google与苹果提供的动效设计规范，这篇文章更为精炼，所提出的规则也更为普适，下面我就分别介绍一下这十二条设计规范。

　　

1. 原则1：缓动

　　所有展示时效行为的界面元素（无论即时还是非即时），都需要缓动。缓动可以加强体验中的自然感，并创造出符合用户预期的连续性。 　　

2. 原则2：偏移与延迟

　　让用户在看清楚之前，就感受到眼前的东西是什么，它们之间是如何区分的。这种功能非常有帮助。在用户看清楚出现的元素之前，设计师已经通过这种时间上的差别说明了元素之间的分离关系，而无需通过视觉上的强烈对比来向用户介绍界面上的元素。

3. 原则3：父子关系

　　这个概念我第一次接触是在AE——一款影视特效制作软件中，大致的概念就是子对象跟随父对象变化，共享包括缩放、位置、不透明度之间的属性。父子关系常用来表示两个对象之间的关系，以增强可用性。例如，当用户操作一个元素的时候，另一个元素也跟随着用户的操作而变化，用户会知道这两个元素是关联在一起的。通过父子元素属性之间不同的响应关系，父子关系的动效被分成了“直接继承”、“延迟继承”、“逆向继承”

4. 原则4：形变

　　形变的效果应该算是动效里面最容易被识别的一种了，毕竟一个正方形变成了一个圆形这样的，傻子都能看的出来，实在是太引人注目了。形变对于用户体验提升的作用是在一个元素功能发生改变的时候，利用连贯的状态的改变抓住用户的注意力，使得这个元素的内涵更好的被用户感知与记忆。

5. 原则5：值变

　　值变顾名思义，就是数字与文本的的改变，而且是动态的改变。比如说，如果一个值是直接进行改变，那么用户无法体会到数值的动态特征，无法明确体会到这个值变化背后的含义。速度数值的快速变化让用户和这个速度直接建立起了关系，设计师不是直接抛出一个数字给用户去感受，而是让这个值以它特有的特征去展示给用户看。

6. 原则6：遮罩

　　遮罩的概念类似与PS中的蒙版。不同于静态设计中遮罩是用于辅助设计的，在动效设计中遮罩的变化配合背景的运动，既没有让用户丢失视觉上的焦点，也让app状态的改变变得更加的流畅自然。在不改变元素内容的情况下，通过遮罩来改变元素本身，是相当不错的动效设计技巧。

7. 原则7：覆盖

　　用堆叠元素的相对位置来描述他们的扁平空间关系。在iOS 7推行扁平化设计后，元素之间的相对关系变得有些模糊，如果设计师的功力不强，有些用户会分不清元素之间的层级关系。Google的MD对此的解决方法是用带有Z轴的卡片作为内容的载体，卡片的阴影作为层级之间的区别。动效设计的这条原则则是使用了层级之间的覆盖向用户传递了元素之间的Z轴关系。

8. 原则8：复制

　　当新的元素从已有元素复制出来时，用连贯的方式。
　　当新元素从现有的元素上被创造出来的时候，设计师首先需让用户感知到有“生产”这个变化的发生，其次需要将用户的焦点从现有元素转椅到新元素上。所以这就需要已有元素的动画（吸引注意力），新元素更强烈的复制动画（转移焦点）

9. 原则9：景深

　　允许用户瞥得到非主要元素或场景。
　　iOS中又一个可以算是苹果标志性的元素，也就是毛玻璃。利用毛玻璃这个元素，用户既可以把焦点放在毛玻璃上，同时也能看到这一层级下面的元素。（实际上毛玻璃最先被用于微软的Vista系统，最新的流畅设计体系也有对于景深的运用，不过被官方称作亚克力，虽然感觉效果差不多）
　　与遮罩元素相同，景深也是可静可动的，设计师可以使用景深原则来在用户体验中提供一个全局或客观的视图。

10. 原则10：视差

　　“视差”在动效体验原则中描述的是界面元素以不同的速度运动。
　　在保留设计完整性的前提下，视差原则有利于让用户聚焦于主要操作和内容。一般来说，两个速度相同的物体，靠近自己的那一个运动的快一点，远离自己的那一个运动的慢一点，设计师可以利用这个现象来提醒用户界面中什么元素比较重要需要用户产生交互。不同于景深，视差不需要刻意去遮挡背景元素，并且获得超越平面设计的层次感。

11. 原则11：翻转

　　通过具有空间架构的描述方式来表现新元素的产生与离场。
　　用户体验的关键在于连续性和对元素的掌控度。界面上的一个元素，突然凭空消失了，这算怎么回事呢？焦点的突然丢失，会带来体验上的慌张感，这时候就需要翻转来进行元素缓慢的离场。翻转又分为三种：折叠翻转、浮动翻转、对象翻转。

12. 原则12：滑动变焦

　　用连续的空间描述来引导界面元素和空间
　　（感觉是个炫技的动效，比较全局，适合于app间转场，不适合界面的局部动效）
　　然后我仔细看了一下他所给出的动效设计的例子，对于这些原则，前十条我的确是挺赞同的，后面的翻转和滑动变焦则有些不赞同。元素翻转我除了在Flipboard红版报，在其他的app中还真的没有看到过。而Flipboard也是为了更加模拟出杂志翻页时的效果，暂时也没看出来还有什么其他的交互上的考虑，所以翻转这点我持保留态度。治愈原则12，同样我除了在iOS的解锁动画上看过，也没有在其他地方碰到（且那个效果在iOS 7刚出来的时候，也有用户投诉说太炫了造成不适感）。感觉除了营造空间感之外也没有什么作用。