眼见为"心"——探寻人眼机制与交互设计的深层联系

看了不少的设计理论，很好奇为什么会有这样的设定，除了通过不断的观察总结出现的现象之外，更深层的原因是什么呢？在一些文章中也了解到一个概念——『地缘政治』，介绍了地理因素（人文地理、自然地理）如何形塑政治与国际关系，并形成了一门学科。同理，人类这么多形形色色的特点，跟人体本身的生理构造也必然有着很大的关联。这也许对于加深理解各种设计理论会有帮助。

眼睛如何看见物体

人类的眼睛结构

人类眼睛由眼球、眼睑、泪器、眼肌和视神经组成，其中眼球壁分为纤维层（角膜、巩膜）、血管层（虹膜、睫状体、脉络膜）和视网膜层（视网膜）。眼球内部有房水、晶状体和玻璃体，它们共同聚焦光线，通过视网膜将光信号转化为电信号，再由视神经传至大脑进行视觉处理。

人眼能看到物体，是整个眼睛各个部分共同协调的结果，其中的黄斑区（macula）是视网膜中央一个重要的椭圆形区域，负责接收高精度的视觉信息，尤其是在阅读、驾驶等需要精细视觉的活动中发挥着核心作用。黄斑因含有叶黄素等黄色素而得名，其最中心区域是负责锐利中央视觉的中央凹。

光线由瞳孔进入眼睛，通过晶状体进行聚集后落入视网膜，光线的焦点会落入黄斑区的中央凹中，再由感光细胞对这些光信号进行转换。这里的感光细胞主要分为两种，视锥细胞和视杆细胞，分别负责感知颜色和感知灰度。

通过对视网膜上这两种细胞数量的统计，可以看到负责感知颜色的视锥细胞主要分部在中央凹之中，而视杆细胞则分部在两侧。因此，如果从单一时间点上来看，我们眼睛看到的界面应该是中央清晰且颜色丰富，越往外越模糊且颜色越不明显。

这可能比较反直觉，但从生理结构上来说，理论上的结果应该是这样。有一个实验可以来验证这一点。上面的图中应该有同学注意到了，人眼中有一个区域叫视神经盘，是视网膜神经纤维的汇集处，也就在眼底形成了一个没有视觉细胞的『洞』，也叫『盲点』。

顾名思意，在『盲点』中是看不到东西的。不对啊，如果眼睛中有一个区域看不到东西，为什么我平时没发现？这也正好能说明，为什么眼睛生理结构推导出来的结果是反直觉的。通过下面这个实验，可以让你看到这个『盲点』的存在。

可以找一张白纸（如A4纸），在左右两边分别画两个点，然后遮住一只眼，用另一只眼去看。如果是左眼，就看着右侧的点（右眼就看左侧的点），移动纸与眼的距离，注意眼睛保持不动，有某一个距离（约50厘米左右）上会发现另一侧的点消失了。

如果你在电脑上看，也可以打开上面这张图，用右眼盯着红色加号，移动头与屏幕的距离，约50～60厘米的位置，右侧的飞机会消失。

原理就是『飞机』的投影正好位于『盲点』之上，于是就『消失』了。那为什么平时我们并不会为此感到困扰呢？同样从生理上的解释就是，『盲点』正好位于另一侧眼睛的视野之中。

而且，除了『盲点』在另一侧眼睛的视野中这个原因之外，眼球是可以转动的，头部也可以转动，所以这个『盲点』的影响也就变得不明显了。

这里带来一个新的问题，虽然眼球可以转动，但眼睛的生理结构同样注定了这个转动是有限制的，于是就有了这个图。分别为水平角度

和垂直角度

知道这些有什么用？

不知道大家有没注意到这个现象，电脑的屏幕越来越大了，但网站的内容宽度却没有跟着变宽。是为了兼容旧的屏幕吗？

正常使用显示器的距离约50～60厘米，结合眼睛视野的角度

就可以大约计算出最舒服的阅读尺寸，具体可以看《页面内容最大宽度推导》

不知道是有意的设计，还是巧合，不少网站的内容宽度都在这个范围内。

眼睛的运作方式

前面知道了眼睛看到的画面是这样的（其实只要你专心盯着一个位置，就能感觉到类似中心区域清晰，四周模糊的现象）

看起来是点状的，既然是点状，那平常我们是如何看清世界的呢？没错，可能不少同学都知道，叫『扫视』。不是那个『扫射』，但也差不多，从一个位置开始，往另一个位置移动，只要速度够快，连起来就是完整的画面了（电视机的原理）。

方向

从一个位置移动到另一个位置，那就会有方向。

但大多数时候人眼并不是逐字进行阅读的，而是『跳着』。通过眼动仪可以得到左右眼在阅读一段文字时的移动轨迹。

这些视觉焦点的轨迹被称为视觉流。

从视觉流中发现了这么一个阅读特征

左侧的长图是文章的完整内容，右侧是阅读的视觉流，可以发现基本集中在前两到三屏的距离，后面就读不下去了。

这与《界面设计模式》中的『即时满足』、『满意即可』，没有耐心阅读长文等心理特点十分符合。

由于视觉流是通过眼动仪测试得到的，而测试用的界面则是设计的结果，于是我也在想，是因为排版问题，所以观众会这样看？还是因为观众这样看，所以排版才变成这样？

来看几张图，注意体会眼睛的移动

仔细感受下，目光是会受排版影响的

14世纪西方活字印刷术的发明人约翰•古腾堡提出的一种普避适用的阅读规律。

在超过130,000次的注视中，用户 80% 的时间都在关注左侧的内容。这也进一步说明了虽然屏幕越来越宽，但内容却并不是越宽越好。

颜色

人眼的另一大特点是『颜色』的感知

做过体检的同学对这种图应该并不陌生，利用不同颜色的排版来检验人眼对颜色的识别度

为什么需要对眼睛进行检查呢？

颜色是由视锥细胞负责的，视锥细胞又可以分为三组，分别负责红、绿、蓝三种颜色。

这三组里任何一组或以上的视锥细胞发育时有问题，就会导致『色盲』。是指能看见及辩别颜色的能力低于常人的状况。色盲目前是无法在生理上治愈的。

人类的色盲率相当高，十二分之一的高加索人（8%），二十分之一的亚洲人（5%）和25分之一的非洲男性（4%）是所谓的“红绿”色盲。它比AB血型更常见，据统计，平均每12名男性中就有1人有某种形式的色盲，每200名女性中就有1人，占人口的4.25%。

麦当劳每天为300万色盲客户提供服务。亚马逊每天超过110万客户是色盲。所以在设计上，往往需要考虑这一因素。

除此之外，颜色也会影响人的情绪，在不同的文化背景下，颜色会代表不同的含义。

动态

人眼还有一个重要的特点，就是对动态物体的捕捉

对于『动态物体』的敏感，来源于对『危险』的警觉。因此，会动的物体总会更容易引起人的关注。

小结一下，人眼的动作方式，一是通过扫视进行信息的收集，通过颜色、形状等进行物体的识别，对动态物体敏感

眼见非脑见

我们常说“眼见为实”，实际是真是这样吗？来看一个例子

先来画一个卡尼萨三角

脑补——预测看见什么

你能看到中间的三角形吗？

可以发现，我们并没有画中间的三角形，但我们还是能看到三角形。很显然，我们看到了一个实际上不存在的图形。 这个能力能够让人类可以快速阅读和更高的兼容性

这些现象的总结可以了解一下《格式塔原理》

在视觉设计中被广泛应用

注意力——看向哪

来看一个短片

可能觉得这个短片平平无奇，如果你稍稍留意一下，探长的衣服颜色变了，前景桌子上的花变了，地毯变了……

事实上，短片中有21处变化，只是一开始被忽略了。但当你知道了这些之后再回过头去看，应该就能找到这些变化了，这又是为什么呢？

再来看一个短片，这次需要你来帮忙算一算穿白衣服的人一共传了多少次球

有人看到猩猩了吗？当你认真在计算传球次数时，很可能就会忽略无关的事物，同一时间能处理的事件的数量和复杂程度，与认知负荷息息相关

认知负荷——看到什么

当需要处理复杂问题时，认知负荷就会变得很高，当高到一定程度时，最直接的处理就是“放弃”，这个大家在生活中可能都所体会。

最后，如果大家对相关内容感兴趣，推荐阅读这几本

感谢阅读

《眼见为心——探寻人眼机制与交互设计的深层联系》 from GhostZhang