视觉感知能力的重要性

我们的眼睛很奇怪，常常误导我们。但是，如果你了解了人类视觉特殊性的话，就能灵活运用在设计上了。字型设计师利用视觉技巧创造了很多可读性、平衡性俱佳的字体，而此技巧也同样适用于交互设计。

1920年代，格式塔的视觉感知理论出现了。它解释了我们的眼睛如何处理不同的图像，以及大脑怎样去判断处理。你可能已经对“接近性”或“共同命运规则”等理论有基本了解，本文会重点举例说明，设计师在他们的实际工作中该如何使用感知力。

01 实际测量和视觉感知 

对比下哪个更大：是400px的正方形还是400px的圆圈？从几何学上讲，它们的宽度和高度是相等的，但下面的图片，我们的眼睛却认为正方形是大于圆形的。

我们来实际测量下大小。

再来看一张正方形和圆形的对比图片，就视觉重量而言，它们是否一样？

由于增加了圆型的直径，好像不能快速分辨孰大孰小了，在视觉上会认为两个形状的大小是接近的。

将两组对比过的图形重叠，左侧是同样为400px的形状，正方形的面积大于圆形，这也是为什么我们在视觉上认为方形更大的原因；而右侧我们无法快速分辨，是因为圆和正方形是平衡的且它们的面积相似，只是宽度和高度不同。

菱形或三角形也有相同的效果，为了在视觉上与正方形保持平衡，它们应该更宽更高，以使它们的面积相似。

如何在界面中运用？在创建一组图标时，使它们都具有良好的平衡性非常重要，过于突出或是变小都会影响界面。如果我们直接把图标规矩地摆放在正方线框内，那些近似于正方形的图标，视觉上会变的更大。

比较建议将看着比较小的图标放大至线框外，而大图标则可以与线框间留有些空隙，这样整体来看4个图形的大小是相近的。

图标在视觉上达到了平衡

为什么图标区域会比图标本身大，现在清楚原因了吧？这么做是为了让非方形的图标与方形图标相似，还有一个检查视觉平衡的超简单方法，就是把图标们模糊处理，面积大的图标是最突出的。

有时我们会使用现有图形元素，例如用作共享按钮的社交网络徽标。Facebook和Instagram图标是正方形的，而Twitter是鸟的轮廓，Pinterest则用带圆圈的“ P”表示。仔细观察，会发现Twitter和Pinterest的图标更大，以便它们与Facebook、Instagram的Logo保持平衡。

再举一个例子，将文本框与圆形按钮放置在一起。如果按钮的直径等于文本框的高度，那按钮看起来会更小。当直径由80扩到90px时，整个结构变得更平衡了。

如果更改按钮的样式，则不需要放大。在下图中，按钮和文本框的高度为80px，但是由于黑色填充感强烈，右侧的按钮看着并不失衡。

要点

视觉感知是人眼判断物体尺寸的一种重要方式，物体的像素尺寸或面积不一定是严格相等的；

圆形、菱形、三角形和其他非正方形状需要更高、更宽才能与方形在视觉上保持平衡（调整一组图标时亦是如此）。

02 不规则形状的对齐 

视觉对准是视觉平衡主题的逻辑延续，看下面的条纹，它们看起来像一样长吗?

以像素为单位，答案肯定是一样长的，但乍一看，视觉上觉得第二条线更短。现在将第二条线段拉长20px，使他们在视觉上进行对齐，虽没有按像素长度对齐，但也不显突兀。

那么如何对齐纯文本和有背景的段落？这取决于背景的视觉密度。如果是浅色的，你可以将高亮的段落与文本的其他部分对齐。

虽然背景较浅，但不会打断整体的文字阅读体验。

而黑色背景段落在视觉上很闷重，可以将背景框与其他段落整体对齐，内部白色文本缩进位置，按照图中方式来对齐调整。

相同原理也适用于按钮和输入字段。这并不是死板的规则，在实际应用中，设计师需要基于自身的视觉感知去判断呈现方式。

左侧输入字段的浅色背景可以超出输入标签和用户输入范围。“发送”按钮的右边缘未与输入背景的右侧完全对齐，因为该按钮较暗且从视觉角度看也比较重。

在右边，因为输入区域是实心边框，可以与实心框对齐。“发送”按钮有一个三角形的边。按钮向右移动了一点，以便与上面的矩形输入框保持平衡。

再来看文本和图标按钮的对齐，图中的按钮，是不是都居中？

右侧按钮的边缘是三角形，可以将单词向左位移，使两个按钮在视觉上看起来大小相等。

文本按钮不仅具有水平对齐方式，还有单词和背景的垂直对齐方式，经常在各种操作系统、站点和应用程序的界面中使用，是基于字体大写字母高度的对齐方式。

基本上，大写字母上下的空间和按钮边缘是相等的，因为命令名称通常以标题大小写，并且英文字母具有更多的上升角，上伸出部分（l，t，d，b，k，h）比下垂部分（y，j，g， p）多。另一种方法是使用字体的小写字母的高度来对齐。这种方法也很有意义，因为文本的主要视觉重量集中在放置小写字母的区域中。

这些方法之间有什么区别吗？图中的两种大小写字母对齐方式，有差别但是没有很大。

图标按钮的情况与文本按钮略有不同，在圆形按钮背景里放一个“发送”图标，哪个看起来更加视觉平衡？

左边的图标是有问题的，发生这种情况的原因是对齐方法不同；右边图标的放置方式，使其所有尖锐边缘至圆形按钮背景的距离相等。

如果为开发人员准备文件，则需要保留一些区域说明，以便他们使图标在背景上正确居中。

左侧“播放”按钮也是同样问题，如果圆角矩形和三角形直接对齐，它们看起来会很奇怪。

如果要使三角形的视觉平衡，则在锐角外画出圆形，并使其与按钮背景对齐。

要点

带有尖锐边缘的形状应增大或增长，才能与相邻的矩形对象保持平衡；

带文字的按钮，以大写字母的形式对齐是比较有效的方法。

03 视觉圆角

还有什么比圆形更圆？我以前认为是不存在的，但正如在本文开头所说的那样，人们的眼睛很奇怪，有时感知的东西并不是我们所期望的。下面图片中哪个圆圈看起来最平滑？

很多被问及的人在3和4之间徘徊，觉得1和2太瘦了，5又太胖了。如果把3和4重叠，我们会发现后者比前者更钝一些，我们看着也觉的更平滑。

为了说明我的意思，我从Futura，Circe和Geometria这3种著名的几何字体中选取了字母“ o”。鉴于高质量字体是基于人类的视觉感知构建的，并且使用了复杂的光学构造系统，因此我认为它们的圆形看起来比几何形状更圆。

将它们与几何圆重叠，即使是最靠近几何圆的Futura的“ o”，也有四个突出部分。此外，Circe和Geometria的字母比几何圆宽，虽然它们的高度和宽度都相等，我们也可以看到这四个“肚子”好像吃撑鼓了起来。

因此，从光学角度而言，修改后的圆（右侧）看起来比几何圆（左侧）更“圆形”。

我们如何利用这种现象？当然要进行圆角处理！如果直接将几何圆与直角嵌套，效果并不理想。

人眼会立即察觉出异样——直线突然变成了曲线，而且这种圆形看起来也不自然。

考虑到我们的视觉感知，从标记的这两点去一点点调整。改正后的圆角，使得直线与曲线相交的点没有那么明显了。

几何圆（左）与调整过的圆角对比（右）

我们可以将这种方法应用于圆形按钮设计上，右侧的按钮具有更平滑的转角圆角，同时也让眼睛更加舒适。

应用程序图标也是如此，我们不能光用标准的圆角去做设计。

左边是我在Sketch中创建的圆角矩形，右边是椭圆形，也被称为Lamé曲线。它是由法国数学家加布里埃尔·拉梅（GabrielLamé）发现的，根据公式的不同，它的形状可以从四角星逐渐变成圆角的方形。

马克·爱德华兹（Marc Edwards）提出了Lamé曲线的公式，该公式衍生出了最平滑且视觉上也无可挑剔的形状，从iOS 7开始，苹果便将此形状的图标应用在icon上。

再后来，又添加了黄金比例和网格用来指导设计师更规范地应用。

使用超椭圆等形状的主要好处是它们光滑的外观。另一方面，这些非标准形状很难插入到真实的接口中。你可以组合多个svg，在代码中加入特殊的公式或脚本，或者使用PNG遮罩，就像苹果为其应用程序图标所做的那样。

至于设计过程本身，有一个简单的圆角修复方法：将圆形效果转换为轮廓，进入形状编辑模式，并手动将曲线手柄移动靠近。

与锐圆角相比，椭圆角更加生动，这对于绘制道路或地铁是非常重要的。

要点

几何圆角看起来很不自然，能轻易地看出直线突然变成曲线；

视觉上看起来舒适的圆角，需要特殊的公式或手动调整形状。

／End. 

相关引用
-翻译自原文
https://medium.muz.li/optical-effects-9fca82b4cd9
-图片、GIF来自网络；封面动图 by ILLO
-未经UX Pedia允许不得转载

UX辞典