在我的设计之旅的早期，我完全依赖 Photoshop 和 CSS 中的标准设计并制作。如果 Photoshop 说两个形状是对齐的，那么它们就是对齐的。如果两个不同的人物大小不同，那它就是不同的。如果两种颜色具有相同的十六进制代码，那么它们看起来就是一样的颜色。

这种方法在我看来是合乎逻辑的，但事实证明它是错误的。

程序执行的计算是合理的，但程序无法考虑人类对形状、颜色和大小的感知。此外，程序无法理解对象之间的关系、它们在整体视觉环境中的位置，或者一个人将如何感知这个对象。

非理性的人类思维决定了一个物体在光学上是否正确，因为我们可以看到并理解上下文，这与计算机不同。了解这些细微的差异并能够弥补它们是让优秀设计师变得更好的原因，因为只有少数人会注意到更正，但许多人会看到错误。

让我们看几个说明性的例子。

对齐+视觉重量

计算机无法确定一个物体相对于其他物体的视觉重量。它只能计算对象在 XY 轴上的宽度、高度或位置。设计人员有时必须通过所谓的光学补偿来对此进行补偿。
图标内的三角形与圆心对齐，对吗？错误的。如果我们在三角形顶部画一个矩形，我们会看到它没有居中。

在这种情况下，出现了三角形的视觉权重。其区域的很大一部分位于左侧，这会产生三角形不在中心的视觉错觉。

为了解决这个问题，我们需要手动移动三角形。

颜色

颜色的光学补偿不太明显。但即使在这种情况下，这一切都与物体的光学重量有关。
如果您对图标和文本使用相同的绿色阴影，则文本看起来会暗一些。

为了避免不同的光学权重，您可以使图标更亮或使文本更暗。

规模

比例是我们的大脑感知物体大小的方式，包括文本。例如，一个 120x120px 的正方形比一个 120px 的圆要大，所以需要把圆做大来补偿。

与其他调整相比，颜色变化是一种微调。但即使将对象的大小更改 1 个像素，也可以极大地改进您的设计。

大写字母

需要进行更正的最后一个示例是在标准文本旁边使用大写文本。标题文本比标准文本更明显，因此需要偏移。

在完成一个成熟的项目时，即使是很小的变化也会影响对画面的整体感知。将优秀设计与优秀设计区分开来的是对细节的关注。

计算机甚至人工智能都无法理解给定设计的背景，因此它们无法做出设计师可以做出的改变。我们在设计时必须依靠我们的眼睛和直觉。