视觉感知在UI中的应用

我们的眼睛很奇怪，经常误导我们，这是因为我们的视觉系统是由暴露在外的眼球，视神经和视觉皮层所组成。我们的眼睛是外部图像进入视觉系统的第一个环节，光学信号在视网膜上被转换成电信号，通过视神经传入视皮层的神经元海洋之中。眼球是一部全自动聚焦成像图像采集系统，在性能上超越目前世界上任何一部数码相机。眼球上即使很小的损伤都会引起严重的视力问题，最普遍的就是近视眼、老花眼。还有些类似错觉感觉的疾病，如有些人眼睛由于玻璃体浑浊而出现「飞蚊症」，还有些人由于视网膜上缺乏相应的感光色素细胞而出现「色盲」或者「色弱」。这些病理性的异常都会对患者的正常生活产生严重的影响。

除了有眼部问题的人，绝大多数人的眼睛都是正常的。之所以会产生视觉错觉，是因为人们的主观感觉与图形的物理参数出现了不匹配的现象。那么为什么在错觉图形的条件下我们无法真实地感知外部图像呢？难道这是我们的视觉皮层在进化中出现的漏洞？关于这个问题，目前还没有一个统一的解释。

我们已知外部世界的图像通过眼睛的折光系统投射到视网膜上这一步骤是十分忠实于光学原理的。但是当外部图像在视网膜上被转换成电信号并进入大脑之后，皮层对于图像信息进行了进一步的解读。这种解读模式，在经过了亿万年的进化之后，必然是以一种最「接地气」、最「懂」这个世界的方式进行的。

我们的视觉系统作为一种进化的产物，初次遇到这样的图形会用它固有的方式去理解，就会出现类似「理解偏差」的现象，是我们的大脑进化不够完美而出现的 bug。

比如由于红绿拮抗神经元的存在，导致红花衬托在绿叶上面格外鲜艳、红橙色的果实在自然界中占据大多数；由于我们的大脑会存在「填补效应」，一个人的身体被遮挡住了一部分，我们并不会认为这个人的身体少了一块；由于大脑中存在专门负责面部识别的脑区，人们对于脸部识别更加敏感。

图形背景理论格式塔心理学的另一项原理。它是由丹麦现象学家Edgar Rubin（1886-1951）首次提出的。经典的例子就是这个...

基本上，我们似乎有一种天生的倾向，即将图像的一个方面视为人物或前景，而将另一方面视为地面或背景。这里只有一幅图像，但是，通过改变我们的视点，我们可以看到两种不同的事物。似乎甚至无法同时看到它们！但是，格式塔原则绝不限于感知-这就是它们最初被注意到的地方。

有什么能比圆角更圆？我曾经也以为没有。但如同我最开始说的，我们的眼睛是是非常不可思议的，有时候它不会像我们所以为的那样传递信息。所以，下面那张图看起来更圆？

我之前问过的人大多会选择3或者4。1和2明显太瘦，5则显得太丰满，如果将3和4重叠在一起——会发现一个是几何意义上的圆形一个是优化过得圆形，第二个比第一个视觉上会稍微重一点，因此也看上去更圆一点。

为了进一步的说说明这是怎么回事，我排列了字母O在三种著名的的几何字体的情况——Futura，Circe和Geometria。这样高质量的字体是基于人类的视知觉优化的，并且运用了复杂的系统来优化视觉上的感受，希望它们的圆看上去比几何圆形更圆。这些字母有让你的眼睛更愉悦么？

如果在它们上面叠加一个几何圆形，即使是最接近几何圆的Futura也有四块超出几何圆形的地方。此外，Circe和Geometria的字母则在宽度上也比几何圆形更宽，及时他萌和真正的几何圆形有同样的高度和宽度，也能看到有四块炒出来的“小肚腩”，看上去像吃多了一样。

所以从视觉感知上来说，经过优化的圆形（右边的）会比一个几何圆形看上去更圆。

那我们能怎么利用这一现象呢？当然是用在圆角中！如果直接用软件中默认的圆角工具—PS,AI,Sketch等…结果可能在视觉感知上不来说并不太好。 

人的眼睛能立马看出来直线在哪里突然转成曲线，这样的圆角看上去并不太自然。

 考虑到我们的视觉感知能力，我修复了这个问题。

这样的圆角在传统几何形圆角的基础上有一块额外的区域，来确保直线和曲线交界的地方不会那么明显。

尽可能体验一下两种不同处理方式的区别吧，看下图。

现在可以将这种方法应用到圆形的按钮中了。 

相信你已经注意到右边一列的按钮看上去有更顺滑的圆角，而且视觉效果更好。

APP的icon同理。我们不会简单的直接使用默认的几何圆角就能得到完美的结果。在深入讨论这个问题之前，让我们看一下两种不同的圆角形状：

第一个是在Sketch中创建的圆角矩形，第二个则是“超椭圆”，也被叫做Lame曲线。是被一个叫做Gabriel Lamé的法国数学家基于数学公式从一个类四角星的形状变化而来的，看上去更圆。

Marc Edwards使用Lame的曲线创造除了一个顺滑的视觉效果完美的形状。从IOS7开始的ICON就是基于这个形状。

 

后来这个形状加上了黄金比例和网格，来指导设计师设计新的ICON。

使用超椭圆的好处是能看上去更加的圆润。另一方面，这些非标准的形状要应用在实际的屏幕中是比较麻烦的。一方面要结合各种SVGs文件，一方面也需要加载一些公式和脚本或者是像APPLE处理APP ICON一样用PNG蒙版的方式。

对于设计过程本身来说，有一个简单的处理方法。只需要双击进入可调整贝塞尔曲线的状态，手动将两个圆角的控制杆拉近一点即可。 

这样的效果在尖锐的角上会更明显，这在画线路或者是地铁路的时候很重要。

ps：几何圆角看上去很生硬是因为人能轻易的分辨出直线和曲线交界的地方；

          视觉效果完美的圆角需要特殊的公式或者手动调整一些细节

有时候一个不是完全准确的方形看上去会更“方“一点。你可能会觉得这有点胡说八道。所以你觉得下面哪个方形更”方“？

 如果你选择左边的形状，那你可能完全相信自己的视觉感知能力。

惊讶于人的视觉系统对物体的高度的感知敏感度会强于对宽度的敏感度。这就解释了为什么基于几何形状的字体，字母”O“通常会比实际的几何形状要宽，字母”H“的垂直高度通常比实际几何形状的要细。

参考文献

巴里·史密斯（Barry Smith），“ 格式塔理论：哲学论文 ”，1988年。对格式塔理论的起源和哲学方面的深入研究。

史蒂文·莱哈尔（Steven Lehar），“ 头脑中的世界：意识意识机制的格式塔观 ”，2002年。这本书解释说，我们看到的不是现实世界，而是大脑中的反映。

詹姆斯·吉布森（James J. Gibson），《视觉世界的感知》，1950年（扫描副本，有些图像质量低下）。这本书展示了大脑中的物理过程如何影响我们看待世界的方式。

詹姆斯·吉布森（James J. Gibson），“ 视觉感知的生态方法 ”，1979年。（有关关键思想的文章，可在线获得。）

George Boeree，“ 格式塔心理学 ”。格式塔思想的简要历史。

格式塔心理学创始人的传记：Max Wertheimer，Kurt Koffka和WolfgangKöhler。

Slava Shestopalov，https://medium.muz.li/optical-effects-9fca82b4cd9a。