一篇详述UI动画背后的认知原理
一 UI动画的构成维度
要说明动画的认知原理，首先要从感性的角度对UI动画的分类进行整理，UI动画由三个基本的维度所构成：
1.空间：动画中两个或多个物体间的空间关系发生变化，或观察者的坐标系发生变化，运动物体变形有限；
2.时间：动画中根据时间变化，物体按照特定维运动，并且伴有速度变化，运动物体变形有限；
3.物体形态：动画以物体形变为主要表现方式。所有UI动画基本都必须涉及到这三个维度，那么就可以用这三个维度作为基准对UI动画进行细致的分类。
遮蔽/高斯模糊/半透明
动画的主要特征是近处的物体遮蔽远处的界面。
覆盖
上一层界面覆盖下一层界面。
维度折叠
按照维度轴线旋转折叠界面。
镜头缩放
模拟用户与UI界面的位置变化。
父子级映射
绑定在一起的视觉元素与其余元素有相对位移，伴有部分物体的形变。
第二类： 观察者位置发生变化的。
视差
前后层级移动的速度具有差异。
缓进/缓出
模拟物体因惯性受到重力加速或减速，或受水平力的加速减速。
补偿
相关元素的位移或变化是逐次展开的，补偿式的。
弹筋效果
模拟具有弹性的物体，一般用在位移动画的结尾。
变形
物体形态的变化。
数值改变
以数字的不同速率的变更表示动画，数字变化的速率可以根据进位不同，或者在起始阶段出现加速或减速。
蒙版
下层界面的展示受到上层界面展示范围的控制。
克隆
单个元素变化为近似的多个元素。
UI动画有两个基本的作用：
1.交代前后场景的变化过程，直接表达层级的空间结构
比如上述涉及空间维度变化的动画，包括遮蔽/高斯模糊/半透明、覆盖、维度折叠 、镜头缩放、父子级映射、视差动画。这些动画的基本作用都是以空间的变化过程来交代页面的信息层级，引导用户理清交互的逻辑。
2.吸引用户的注意力
比如上述涉及时间维度变化的动画，包括缓进/缓出、补偿、弹筋效果动画，这些动画通过运动速度的差异与变化细节来吸引用户注意界面。
涉及物体形态变化的动画的作用分为两种，一种依旧是单纯的吸引用户注意，如变形、数值改变动画，通过不变化属性的元素的形态改变过程吸引用户注意；另一种则是两种目的的综合作用，如蒙版与克隆动画，在交代页面逻辑关系的同时吸引用户的注意。
我们可以直观的感受到UI动画引人注意的魅力，那么为什么UI动画如此的“抓眼球”？这背后有什么深刻的原理？
为了回答这个问题，我们先要了解我们的眼睛，我们的视网膜上有两种感光细胞，一种是视锥细胞对辨识色彩更敏感，另一种是视杆细胞对明暗变化更敏感，但是这两种细胞并不是平均分布的。
视觉中心凹附近感光细胞密集且以视锥细胞为主，可以让我们在注意力集中的时候，在视野的中心看到清晰的物体，但是它的问题是我们的视野周边的感觉能力非常糟糕，如下图：
如果在视野的周边出现了一个运动的物体，模糊的视野周边没办法清晰的告诉我们这个运动的物体是猛兽还是猎物，也没办法吸引我们的注意，这将使我们面临生存的威胁或者失去一顿晚餐，还好，视觉对运动物体有一种特殊的处理机制，这就是上丘投射参与的反射性注意。
视觉周边感光细胞稀疏且以视杆细胞为主，这样的结构可以保证周边的视野信息被看到，但看到了不等于获得注意，大脑还需要一套机制保证运动物体可以获得注意，这就涉及到上丘的对眼动的影响。
视觉信息的神经信号在传递的过程中一部分会进入上丘，投射在上丘上， 如果投射的信息带有运动的特征，就会引起上丘相应的反应，进而引起眼运动，如下图：
视觉信息在上丘的投射与眼睛的运动存在对应关系，
当我们扫视屏幕的时候眼睛的关注点和上丘的拓扑投射一一对应
当视野中哪个地方出现了运动物体的时候，眼睛就不不自主的移动向运动物体，把视野中心从其它地方移向运动物体。在上丘的参与下，处理视野周边信息的视杆细胞高效的用来“警卫”，处理视野中心信息的视锥细胞仔细的用来“侦查”。当视野周边出现新的变化的视觉刺激，比如一只远处奔跑的野兽，视杆细胞首先获得刺激，同时根据拓扑映映射，上丘激活眼部肌肉，使眼球移动，使视觉焦点移向运动物体，视杆细胞形成的边缘视觉退居其后，视锥细胞形成的中心视觉锁定运动的野兽，详细辨别是食物还是危险。人类的先祖在野外险恶的环境中通过视野的余光发现一头野兽或者猎物，就是这个过程的结果，现在我们可以把这套机制的原理用来制作UI动画。
如果您想了解更多UI设计背后的认知原理，我向您推荐《UI设计与认知心理学》，为您揭开UI设计后更多的奥秘：
UI设计与认知心理学
Powered by Froala Editor
努力生活，努力设计
1
作品
1
粉丝
0
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册