机器永远无法替代设计师的眼睛

这篇文章共1142字，阅读大约需要5分钟。

前言：

尽信书不如无书，相信设计师们会在实践工作中都遇到过这种情况，就是数值上来看是绝对对齐的，但是视觉上看起来却不平衡。纠结到底是选择绝对对齐，还是手动调整？

看过这篇文章，你就不必再这么绝对的看待对齐这件事了，有些规则制定出来是符合大部分情况的，而制定规则，本质上是为了让设计达到一种平衡、有秩序的美，所以有时候也需要打破规则。

译文：

6年前我作为一个自由GUI设计师步入社会，大概1年前我转行成为了产品设计师，在我的职业生涯中，我遇到过很多这种时候：就是当电脑显示数值绝对平衡时，却并不是我们想要的设计效果。

所有的logo都不是绝对平衡的

-

当我设计一个需要展示很多客户的页面时，我最初的想法是创建一个256*200px的卡片来放置客户logo和公司名称。

当设置为统一的24px高度时，我感觉不到任何吸引力。

我在Sketch里创建可复用的卡片组件，作为一个绝对对齐的基础模块来组织卡片，但是我必须相信我的眼睛，从这些重复的模块中跳出来，达到一个平衡优美的设计。

边界是真实存在的

-

在下面的例子中，肉眼看起来左侧和右侧不是水平居中对齐的，但是Figma里是对称的。

这是因为人眼和机器识别的图片是不一样的，我们看到的是一系列的物体，比如足球，但是电脑识别的是图片的外轮廓，是一个盒子，是所有的在图片中存在的像素，在下面的例子中，这个盒子就是这样的蓝色矩形。

机器能识别到小到人眼可能会忽略的细微像素，机器认为的相等和感观感受到的相等是不一样的。所以我们需要手动调整位置来达到感观平衡。

所以我们接下来：找到这个图像的视觉重心，然后忽略掉一些点，进行调整后如下：

甚至，我们可以擦除底部的一些点，让图像重心正好在视觉重心上。

同样字号的不同字母：手动调整间距

-

举一个logo设计的例子，所有字体都设置为Helvetica Neue 64pt, 字距自动，字与字之间的距离设置为60pt。文字基于网格线中心对齐。

这样完成后，看起来+号前后的空白不一样，感觉+不在中间。

下面，让我们来调整一下：首先是基准线，我会手动调整让每个字母都在中心对齐。

然后，我们通过眼睛去调整+和T之间的间距，将其调整到与I和+相同的距离。

下图是最终的样子，你很容易就能看出哪个是基于绝对数值来设计的。

字体大小：不必纠结到小数点之后

-

当开始设计一个项目时，我经常访问类似于“type-scale.com”的网站，来设置最基础的文字大小，但很多时候，在结束项目时你会发现字体会出现各种小数点。

这时，你需要设计一些核心页面来确定字体大小，然后手动调整进行上下取整，这完全取决于具体项目。已经确定的字体体系要能够适用在不同的场合，比如落地页的字体对比度通常会比产品网站的对比度大。

...

自动化工具为设计师节省了很多时间，但这些工具是用程序语言设计出来的，所以会有数字干扰设计感觉。别忘了，你的眼睛才是最好的设计工具。