视觉调整－设计师 vs. 逻辑

视觉调整－设计师 vs. 逻辑

   译自：Optical Adjustment

   在我早期的设计当中，我靠Photoshop或CSS来告诉我正确与否。如果两个形状在Photoshop标示对齐了，那么它们就是对齐的；如果两个不同的形状是同样的尺寸，那么事实就是如此；如果两个颜色有着相同的十六进制值，那它们看起来就是相同的颜色。

   这似乎是合乎逻辑的，但这确是个错误的工作方式。

   软件的计算方式是理性的，但是软件却没有考虑人对形状，颜色，尺寸的感知——也就是说软件无法理解物体在上下文中的视觉语言，或者人是如何对物体进行感知的。

   人类的非理性思维可以看到并理解电脑无法理解的上下文，因此我们需要决定物体关系在视觉上是否正确。理解这些微妙的不同并知道如何去调整，可以让一个好的设计师更优秀——很少有人主要到它们被调整了，但是如果不调整大多数人又会注意到。

   来让我们看看这几个例子。

对齐＋视觉权重

   仅靠宽，高，以及坐标X，y值，电脑没法精确的指导物体的视觉重量。作为设计师我们需要对此进行一种叫做视觉调整的补偿。

   播放按钮中的三角形是居中的？错。在圆中居中画一个三角形，看起来是不平衡的。

左侧播放图标看起来是居中的，但是它在矩形中却是不居中的。

   “正确”的播放图标并没有显得不平衡，然而它很明显偏移了中心很多，而不是一点点。为什么？视觉权重。视觉权重或者重量重心偏左一点，这就造成了视觉上的不平衡，就是它实际上并没有。

   解决这个问题，我们需要手动推动三角形直到它看起来居中。

   对于颜色的视觉调整就更加微妙。再次强调的是，这是关于物体的重量，以及颜色的多少。

   总结来说，图标的填充色和文字都是同样的绿色，但是其中的一个比另一个看着要亮一点。

左边的图标和文字使用相同的颜色，左侧的使用不同的颜色。为了做到相同的视觉感觉，我在sketch中加深了文字“HSB”值。

   这看来很微妙，但是你可以看到图标比文字看起来颜色深一点。要调整它，要么让图标变亮或者让文字变的暗一点——我建议你选择那个能够让你达到Web内容无障碍指南的颜色。

我推荐在你的设计中使用HSB | HSL值，除去其他优势，这样可以使用“L”和“B”来快速调整颜色的亮度。

   规模时我们大脑对于物体包含字体尺寸的感知。当我们看到同样120 × 120px的矩形要比圆形大。所以为了视觉平衡，需要将圆放大一点。

左侧都是120 × 120px，圆看着小点，右侧的圆126 × 126px，这样才能和方形看着一样大。

   就像我们所有的视觉调整一样，这个也很微妙，但是这些调整能够让设计看起来正确。这是一个微调的元素——上下增加了1px直到它感觉正确。

注意曲线上下的狄多点已经高于X字高，低于基线，同样的你可以看到7个字母。

   这在字体设计中很常见，字母曲线可能会超过大写字母高度低于基线等。如果你使用Garamond字体写一行，然后在基线和X字高，你会发现曲线会超过这两条线。如果这些超出不存在，你就会发现这些字母相对于旁边的字母显得太小。

   最后一个例子可以很明显说明视觉调整的必要性：当大写的文字和正常文字一起的时候，大写文字远比正常文字要突出很多，因此需要视觉调整。

上面的大写文字远比旁边文字大，下面的小写文字调整到2倍才让其视觉上平衡。

   除非设计上特意为了突出大写文字，大写文字需要减小大小，譬如16px到14px或者12px到11px。

   当设计大型项目的时候，这些细小的调整叠加最终就会影响到网站整体的观感。如此对细节的关注才能让好的设计变棒！

   一旦这变成工作流程的一部分，减小文字2px或者推动三角形10px来达到视觉正确需要时间，当这就造就了设计的像素完美。

   电脑或者甚至是人工智能(AI)都无法理解一小块设计中的上下文环境，因此它们不能像设计师一样做出精确的视觉调整。等到电脑可以在孤立设计的上下文设计语言中做出理性的判断，我们才能在复杂设计中历它的判断。

   我们不能期望电脑替我们完成所有的工作，我们应该依赖我们的眼睛和我们的直觉。设计师每天锻炼自己的直觉，我们应该相信这些直觉，尽管电脑告诉我们不要相信。

建议继续学习：