视觉偏差

在早些时期，我还是作为一名设计师的时候，依靠photoshop和css（层叠式样式表）来告诉我设计中的对与错。例如，如果photoshop表明两种形状分别对齐了，那么它们看起来就是对齐了；如果两种颜色具有相同的十六进制值，那么它们也看起来有相同的颜色了。

这其实不是一种正确的工作方式，尽管它可能看起来这么的合乎逻辑。

在我们工作的计算机中，它们是理性的，但是正因为如此也就会忽视人类感知形状、颜色和大小，也就意味着它们无法结合上下文中的对象，进行相互理解，也代表着一个整体视觉中，由于上下语言和对象无法理解，而无法完成这种整体性。

在视觉偏差中是否正确与否，这是由一个人非理性情感决定的，正是因为如此计算机也就无法做出正确的判断了。当我们了解到这种细微差别之后，并知道如何调整，那么才能算的上一名更加优秀的设计师，相信这点很少有人会注意到吧！

现在让我们来看看实际例子吧！

1.视觉权重

设计软件无法精确的推测出有重量的物体，它们只能依靠例如：宽度、高度或者是x/y轴位置，作为设计师，就需要进行一些视觉偏差的调整来弥补这方面的缺失。

例如在下面播放器图标上，三角形是否居中对齐到外围的圆环，事实上并没有。现在我们在播放器上绘制矩形，可以看到是偏离中心的。

播放按钮

虽然右边的图标中三角形没有偏离中心，但是我们看到第四个就会明显感觉到不是一点点的偏差，这是就是视觉重量造成的，因为三角形的重量集中于左侧，就是产生重心偏移，即使这不是一种错觉。

为了解决上面的问题，只需要动手微微向右移动三角形，直到视觉上看，位于中心。

2.颜色

例如，上面同一绿色可能用于实心图标或者是文字，其中一个看起来就显得稍微“轻”。

这是一种潜移默化的，可以看到：图标比文字更重。要做一些调整，使图标的颜色变浅，文字的颜色变的暗一些，可以使用HSB模式，能够非常方便直观。

3.比例

我们的大脑是如何感知形状和文字大小的呢？答案是比例。如果我们考虑下面圆形和方形：一个是120px120px的正方形，和一个120px120px的圆，可以看到正方形比较大些。

大小变化

其他的调整也会是潜移默化的，经过这种微调有助于整体设计看起来更加完美，因此这种调整非常的细微上下轻微1像素左右。

例如下面例子中，在那些弯曲的字母下降或上升中，存在一个基准，如果写Garamond字体，就会发现一行字母和绘制的一条基线与高度设置，而如果那些没有超过中间线的字母就会显得偏小，因此会向上偏移1-2像素，从而整体上更加稳定，而不会显得太小不太搭配了。

4.大写文字

接下来我们看看设置大写字母时的情况，对其进行一些视觉偏差的调整是非常有必要的，由于大写字母比标准情况下的字母要更加突出，因此需要进行调整。

当然除非我们的设计目标就是要突出大写的字母。例子中的大写减小两个像素就可以看到和标准一样大小。

在对一个接口进行设计时，每个细微的设计细节加起来，都将会影响网站的整体感觉，因此细节对于设计有着很重要的地位。而一旦它变成工作流程的一部分，对于那些一两像素的变化，将会让设计变得更加完美。

由于相关的设计软件无法理解一个设计作品的背景状况，就会导致不能正确的调整，而对于这些，设计师是可以做到的。另外也说明设计中不能完全依赖于计算机，这需要我们自身的经验积累的感觉，设计师由此就需要时刻训练自己的直觉。

作者：Luke Jones

https://medium.com/@lukejonesme/optical-adjustment-b55492a1165c#.rmqa0cer3