每周设计赏析 #6

上周在研究院做了一次关于交互设计的分享，里面提到了一些交互规范和元素移动的规则，很多同学对这个话题感兴趣，会后和我做了一些交流，这里我再稍微展开讲讲这个话题。

目前产品在交互中运用动画已经是很平常的事情了，但是其效果却千差万别，用户很容易就能感知到质量的差别，那么这种质感的差异到底是怎么形成的呢？总结起来有12条原则，这期我先讲讲前4条和一些相关知识，下期再说后面8条。

在这之前，我觉得有必要普及一些相关知识。

1. 实时交互vs延时交互

实时交互是指用户直接操作某个元素，延时交互是指元素的动作发生在用户操作之后，这个区别很重要，在之后的12个原则里面帮我们做一些决定。会看两个简单的例子：

实时交互

延时交互

移动元素从4个方面提升产品易用性

期望值

期望分为两部分，一是用户如何认知一个物体，二是这个物体本身如何运动。从设计师的角度，我们尽量缩小两者的差异，换言之，尽量让用户的体验尽量贴近他们的预期。

延续性

这个属性对操作流程和总体体验都适用，大致可以分为同一场景内部的延续性和不同场景之间切换的转换延续性。

叙述性

这个属性是指一系列线性的事件组成的一个框架对用户体验产生的影响.

联系

不同的空间，时间，结构关系对用户的认知、决定产生的影响.

12个元素移动的原则

这张表介绍了元素移动的各个属性和用户体验各维度之间的关系。

原则1：渐入渐出（Easing）

这个效果更加符合人们的习惯认知，下面这两个移动效果帧数相同，并且总的时间耗费是一样的，但是第一个给人的感觉很“拖沓”，第二个给人感觉很活泼迅捷，这种差异就是渐入渐出造成的。值得注意的是，渐入渐出的时机比较讲究，太快感觉不出来，太慢显得笨重，具体的调校需要根据元素和整体UI调整。

原则2：前置/后置 迟延（Offset & Delay）

这种先后顺序其实是在帮助用户建立叙述性的思维，看下面这个动画，明显上面两个元素是同一组，可能是一些不可交互的文字或图片，而第三个是单独的，可能是一个跟前面内容相关的按钮。在用户还没看到这些元素之前，设计师已经通过移动效果帮他们做了区分，这样可以大大降低认知成本。

再看一个反例，下面这个静态界面告诉用户图标按钮是浮在背景之上的，用户可以假设所有的按钮都是分开做不同事情的。但是看看这些按钮移动的效果，按钮是逐行出现，给用户的感知是一行是一组相关联的按钮，同时这些按钮的标题又延迟出现，感觉标题和按钮不是一个整体，容易让人误解。

原则3：亲近原则

亲近原则可以很好的把多个元素串联起来，看下面这个例子，物体的大小和位置构成了明显的亲近关系，用户很自然的就能明白两者的关系。大小，透明度，位置，旋转角度，形状，颜色等等这些属性都可以把元素联系起来构成亲近关系。

这里表情竖轴切换和圆环的横轴移动构成了亲近关系，这个原则一般适用于实时交互。

这种关系还有两种衍生，延迟亲近关系和反向亲近关系，看下面两个例子

原则4：形变

可以创造一种视觉和逻辑上的延续性，某种程度上形变是最显而易见又深入人心的原则，它非常容易吸引用户的注意力。下面这个按钮的形变过程给用户一种进度暗示，用户可以很清楚的了解整个提交过程的状态变化。

未完待续。。。