7 动效如何使用？—— 三维空间和运动

为什么动效引人注意？我们是如何通过研究判断距离的？...



真实的物体处在一个三维空间中，伴随时间的变化，位置发生变化形成运动，被我们的视觉捕捉到，形成我们的视觉感受。在第三章《icon与logo设计的原理是什么？—轮廓》的第二节《轮廓为什么如此重要？》中，我们讨论了三维知觉变成“二维”信息进入眼睛的过程，我们的眼睛并不能直接接收三维信息（物体的形象信息和位置信息），而是经过大脑处理形成的“三维”知觉。“三维”视觉的形成有两方面要素，一方面是，依赖双眼和运动完成“立体深度感知”（stereoscopic depth perception），形成“实在”的距离感，可以被称为非图形的深度线索，一方面是“虚拟”的距离感，一只眼睛也可以完成的深度线索，形成“虚拟”的距离感，被称为图形深度线索。

在移动互联网时代，界面设计中越来越多的开始使用动画效果，很多人的第一反映是，动效有趣并且看上去酷炫。那么如何正确的使用动画效果？从真实的运动物体形成的视觉开始，再到UI设计中的动画，让我们一点一点深入这个话题。在本章中有两个重点问题关系到UI设计，1.为什么动画如此引人注意？2.如何通过空间距离表达界面的层次？先从“实在”的距离感开始。

“实在”的距离感，这里的“实在”的意义是我们可以根据这个距离感，进行身体的运动，比如跳过障碍，投篮，射门，必须通过立体深度感知完成。需要双眼完成的非图形深度线索，大概可以分为两个相连续的过程，第一个过程是光线进入人眼后从感光细胞进入神经节细胞的过程，第二个过程是从神经节细胞到V5区的过程，也就是“where”通路。

1.1  第一个过程光线进入人眼后从感光细胞进入神经节细胞的过程可以解释我们预留的第一个问题，1.为什么动画如此引人注意？先看下图，是光线进入人眼后从感光细胞进入神经的过程。除了视锥细胞和视杆细胞两种感光细胞，还有另外四中种细胞参与到视觉信息从外部进入到神经的过程，其中神经节细胞是眼睛最后向大脑传递视觉信息的那部分细胞。



从图的右侧看，Rod代表的是视杆细胞（浅蓝色细胞），Cone代表视锥细胞（黄色细胞），光线刺激二者，经过双极细胞（Bipolar cell，深蓝色细胞），再到神经节细胞（Ganglion cell，紫色细胞），最后从视神经（Optic nerve）进入大脑。我们可以发现这个过程是倒着的，就是说光线先穿过神经节细胞，双击细胞，再到感光细胞，也就是图中的大箭头方向，然后再把整个过程倒回来传入神经，图中大箭头方向内的小箭头方向，这样在神经节细胞汇聚到视神经（Optic nerve）的地方没有感光细胞，就是视觉盲点（blind spot）。我们之所以没有感觉到盲点的存在是因为右眼的盲点可以被左眼看见，反之亦然。

回到感光细胞，观察图片可以发现，非常多的视杆细胞与一个神经节细胞相连（图中很多浅蓝细胞与单个深蓝细胞相连），这种主要与视杆细胞相连的神经节细胞被称为Y型细胞（Y ganglion cell），因为体积较大，也被成为大细胞（Mango cell）,它对运动刺激有敏感反应。只要有一个视杆细胞侦测到光线的变化就会激活相连的双极细胞和Y型细胞，进而刺激之后与之相连的神经细胞，这样与视杆细胞相连的神经细胞就很容易被刺激激活，视觉就捕捉到了“运动”。

这种捕捉不够精确，分布广泛的视杆细胞会形成彼此一致的刺激互相干扰，但是却十分灵敏。视锥细胞的神经获得的信息则会非常精确，视锥细胞与神经节细胞的对应更独立（图中的单个黄色细胞与单个深蓝细胞相连），主要与视锥细胞相连的神经节细胞被称为X型细胞（X ganglion cell）,因为体积较小，也被成为小细胞（Parvo cell）,视锥细胞彼此间获得的刺激差异通过X型细胞更独立的反映到之后的神经细胞上，这样细微的差异就会被大脑识别出来，从下面这幅抽象的图中可以发现其中的奥秘。



假设有三个不同大小的点分别刺激三个视杆细胞或者三个视锥细胞，那么三个视杆细胞形成的刺激是类似的，一个不精确的点，而视锥细胞可以精确的表达三个点大小的不同。再让我们看看这两张图片（第一章《事物看上去为什么是那个样子 —— 临近与捆绑》中使用过）， 第一张是眼睛感光细胞的密度分布（密集的部分主要是是视锥细胞，稀疏的地方主要是视杆细胞），第二张是达到相同的分辨程度图形需要的尺寸。





人的每只眼睛中有1.2亿个视杆细胞和600万个视锥细胞（前者是后者数量的20倍），视杆细胞较多分布在中央凹周边，视锥细胞主要分布在视网膜的中央凹，就是图中小圆圈最密集的地方。从图中我们得知，视锥细胞需要占用大量的与之对应的双极细胞，如果眼睛中都是视锥细胞，那么就需要大量的神经节细胞，与之对应的神经细胞也将大大增加，毫无疑问这会造成大脑过大的负担，而且如此多的神经细胞造成的视觉盲点将更加严重，而如果完全是视杆细胞，那么精细的操作（穿针引线）将无法完成，所以视觉演化的结果就是二者数量相差20倍，视杆细胞占多数，视锥细胞占少数。

这些机制上升到宏观对视觉的影响是什么呢？当有移动物体出现在视野的边缘，视杆细胞快速的侦查到光线的变化，然后大脑感受到刺激，会将眼睛的中心移动到运动的物体上，视杆细胞形成的边缘视觉退居其后，视锥细胞形成的中心视觉介入，这一过程是高度自动化的控制过程。这个也就是人类的先祖在野外险恶的环境中通过余光发现一头野兽或者猎物，然后扭过头仔细辨别的过程。运动的物体刺激着我们的神经，迫使我们将注意力更多的放在移动物体上，这就是动画引人入胜的根本机制。不得不赞叹生物演化的机制，视杆细胞高效的负责“警卫”的工作，视锥细胞仔细的进行“侦查”，最大限度的使用尽量少的认知成本完成对世界信息的捕获。

同时，视锥细胞与视杆细胞密度和功能的差异，形成了我们视觉中的景深，聚焦的物体是清晰的，其余部分变得越来越模糊。

1.2 第二个过程

先让我们重新看一下这个图，这就是V1-V2-V3-V5(MT)—顶叶皮层的枕—顶通路，因为表达空间位置信息，也被称为“where”通路，还有V1-V2-V3-V4—颞下皮层的枕—颞通路，因为表达物体的形状轮廓信息，也被成为“what”通路。这两个通路分别形成了我们视觉中的“在哪”，“是什么”。



观察图例（左上的方块里），找到其中的Motion和Depth在这幅图的位置，我们发现在V1区V2区一直到MT区都有这两个图例的存在，也就说明物体的运动信息和空间深度信息与这两个区相关。那么真实的深度感是如何形成的？这就要细说V1和V2区中的一个重要信息，双眼视差。我们的眼睛获得的视觉信息既然是“二维”的，那么如何有效的辨识距离？这里就依靠一个非常简单的却很巧妙的三角函数关系，tan∠A=x/y，初中数学里的正切函数。如果我们知道公式中∠A和x的值，那么y的值就是确定的，这个巧妙的机制是如何实现的呢？我们先看下三角函数的图，三角形的两个底边顶点相当于我们的双眼，2y相当于我们的两眼瞳距，瞳距是固定的，我们要得知的就是其中x的值。首先我们可以把一个杯子放在眼前，开始要近一些（大致15cm），闭上左眼，用右眼观察，再在相同位置闭上右眼，用左眼观察，这时候我们会感觉到两个眼睛看到的东西是不一样的，而且差异很大。然后，再远一些（大概150cm），同样闭上左眼，用右眼观察，再在相同位置闭上右眼，用左眼观察，眼睛看到的东西还是不一样的，但是差异很小,如下图。那么如果以双眼之间的距离作为2y，x作为我们和杯子的距离，x值发生了变化，x1< x2。∠A伴随距离x的改变在发生变化，∠A1  

    关注 认知与UI设计