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

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

小刀

Read more posts by this author.

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus