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

toc

• 对齐＋视觉权重
• 颜色
• 规模
• 大写文字

对齐＋视觉权重

仅靠宽，高，以及坐标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）都无法理解一小块设计中的上下文环境，因此它们不能像设计师一样做出精确的视觉调整。等到电脑可以在孤立设计的上下文设计语言中做出理性的判断，我们才能在复杂设计中历它的判断。

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