看看下图中的条纹。它们看起来一样长吗？
如果您查看像素，那么它们当然是相等的。但从表面上看，下部条带似乎更短。
这里还有两条。嗯，有什么变化吗？
这次我做了光学补偿。简而言之，我稍微移动了底部条带，使牙齿从对齐线突出 20 像素。因此，从视觉上看，条带看起来更平滑。
以下是一些更复杂形状的条纹示例。
因此，如果您将此类文本条用于海报设计，或者说，在在线商店的产品卡上添加明亮的“折扣”色带，请注意视觉平衡。锋利的牙齿应该稍微超出人物，特别是如果人物本身是矩形的。
同样的原理也适用于按钮和输入字段。当然，这不是教条，而是基于我们感知特性的建议。
在左侧的图片中，输入字段具有浅色背景。它可以稍微“爬出”超出字段名称和用户输入的文本对齐的线。至于按钮，它是圆形的，也就是说，理论上应该将它移动到背景边缘之外一点，以便在视觉上平衡它。但是，正如您所看到的，按钮是黑色的，这给了它额外的重量 - 这意味着在这种情况下，您可以简单地将它与矩形背景对齐。 在右侧，输入字段具有清晰的边框。我将字段名称与这些边框对齐，已经输入的文本会稍微缩进。“发送”按钮有一个三角形面，这意味着该按钮需要稍微向右移动以与输入字段的矩形框保持平衡。
现在我们来到对齐的另一个方面——按钮内文本的对齐。查看下图中的按钮。文本似乎居中，不是吗？
诀窍是在右侧按钮上，我将文本稍微向左移动，因为按钮的右边缘是三角形的。有趣的是，虽然箭头按钮宽了 40 像素，但它的光学重量与矩形按钮相同。
按钮内的文本不仅水平对齐，而且垂直对齐。我想向您介绍的第一种方法用于操作系统、网站和应用程序的界面。这是相对于字体大写字母高度的对齐方式：通常是字母“H”或“I”。
本质上，大写字母的上下边缘与按钮的相应边缘之间的间距是相同的。这是合乎逻辑的，因为在英语中，按钮的名称通常用大写字母书写，而在英语字母中，上升到线上方的元素（如 l、t、d、b、k、h）比“悬挂”更多线下方（如 y、j、g、p）。
