视觉设计课程之一是使所有内容完美对齐,连贯且平等。听起来合乎逻辑。排列合理且平衡的设计应该在我们的视线范围内。它将被视为更有组织性和专业性。任何设计软件和CSS代码甚至都可以派上用场,并为您调整所有内容。但是,人们观看和处理图像的方式并不总是与数字所说的相吻合。对于您的计算机而言,看起来似乎完全对齐和平衡的东西可能看起来并不相同。作为设计师,我们在设计用户界面时应考虑到这一点。我们不能完全相信计算机会为我们调整它。这可能是AI无法在设计工作中替代人类的原因之一。虽然,这可能只是时间问题……
 
因此,在决定最终的视觉设计决策时,除了必须遵循所有设计规则外,我们还必须相信自己的眼睛和直觉。这些示例说明了如何通过视觉上纠正它来使您的设计更好,并且确实使开发人员在此过程中感到不安。
 
排版对齐
 
老实说,要使排版在网络展示上完美,是有些困难的。字距调整和文本对齐基于指标,并且使用CSS进行修复需要大量的工作或外部JS插件。整个垂直布局非常动态,元素之间的间距往往不一致,因此几乎不可能保持完美的基线。我无法告诉您一个简单的魔术CSS技巧即可解决所有问题。因此,我不会为您提供任何代码解决方案,而是要专注于使设计视觉上完美的概念。我确定您会找到一种在此处和此处进行CSS调整的方法。在工作中发现的最常见问题之一是“ 超调 ”左对齐的文本。较小的文字并不是真正的问题,但大而粗的标题则更为明显。
 
让我们看一下这个向左对齐的大标题:

左对齐大标题

可以看到,在默认浏览器的显示中,“ T”字母从边缘移了几个像素以进行视觉校正,但是相对于该文本块中的其他字母而言,这实际上没有任何意义。
 
该如何解决?
 
首先,将所有字母对齐到左边缘。然后,请注意,“ G”与“ H”和“ T”不对齐,但实际上距边缘有几个像素。对于字母具有尖锐边缘或指向左侧的线(例如T,V,W,X,Y和Z)的情况,也可以这样做。如果第二行恰好以小写字母开头,那么将“ T”移到边缘之外将完全使它在视觉上更好,如下所示:

大小写字母左对齐

让我们看另一个示例来演示字母之间的关系。将“ W”从边缘移了几个像素,以使下一个单词更好地平衡。

平衡左对齐

 
但是,这一切都变得更加复杂,因为如果我们切换这两个词并将“ W”放在“ E”之后的第二行中,则情况会有所不同:

不同排列左对齐

不能仅仅假设以'W'开头的所有行都应该偏离边缘。这完全取决于与其他字母的关系。那是我们必须相信自己的眼睛和直觉的地方。确实,这里没有一个规则可以普遍应用。一切取决于文本大小,字体样式,字体粗细,字体和使用的字母。对设计而言感觉良好的一切都是正确的方法。现在让我们看一下中心对齐:

居中对齐

第二句以句点结尾。它使该行更长,并且浏览器严格根据长度对齐文本。但是,平衡点并不完全在这句话的中间。因此,必须将上面的线向左移动几个像素才能使您的视觉满意。当您添加引号和衬线字体时,这一点尤其重要,例如:

衬线字体居中对齐

并且,如果要将引号向左对齐,则应将左引号留在边缘之外,以创建更好的视觉外观和流程:

加引号文字对齐方式

自古腾堡出版第一本印刷书籍以来,悬挂标点符号一直存在,但后来我们忘记了它,因为计算机需要更简化的方式在屏幕上显示文本。是时候该养成一些良好的排版习惯了,但是同样,它通常需要一些CSS工作,因此不能怪任何人忽略这样的细节。最好至少在固定的首页或登录页面标题上进行优化,以给访问者留下良好的第一印象。另外,如果要设计印刷品,横幅,书的封面或海报,那么绝对可以完全掌控一切,没有任何借口!
 
不均匀的间距是完美的
 
使用CSS可以更容易地解决间距问题,但是仍然没有许多设计人员和开发人员关心将其视觉上正确。从各个方面使用相同的填充非常诱人,因为它很容易做到,甚至看起来是正确的选择。毕竟间距应该相等,对不对?但是,我们的眼睛看不到它。再次,让我们看一些示例:

不均匀的间距

 
因此,这里有两个带有全大写标签的按钮。第一个在文本周围的所有边上具有相等的间距,但从视觉上看似乎有点偏离。乍一看,您可能会感到一种错觉,即文本下方的间距大于其上方的间距。当您查看带有指导原则的图像时,您不会看到。为了从视觉上纠正它,从底部开始将间距减小了2个像素,并在每一侧将水平间距延长了5个像素。现在比例要好得多,而且还不够完美。这并不总是规则,因为这可能会因字体,字体粗细,大小等而有所不同。看一下相同的按钮:

不同文字内容对齐

在这种情况下,垂直平衡会更好,因为小写字母会使您的视线更多地吸引到文本基线。所做的唯一调整是在左侧和右侧添加了额外的填充,以保持更好的视觉比例。您可以用较大的文本框以类似的方式校正间距:

文本框间距调整

如果您决定将所有间距都保持在线框周围,那么这没什么问题,但是与减小垂直内部间距的线框相比,它看起来有些偏离。另外,请记住,底部间距应从文本基线开始测量,而不是从下降位置开始。这就是为什么底部填充可能比顶部填充小一点的原因。
 
另一个示例是在框中放置图标:

视觉平衡

如果遵循指南,则左侧的图标看起来很好。一旦将其关闭,就会有一种错觉,就像该图标实际上偏离中心一样(请参阅其下面的小图标)。但是,右侧的图标已向下移动了几个像素,并且在没有指导的情况下看起来要好得多。因此,正如所看到的,真的必须比您想像的多信任您的眼睛。本文可能使您有些混乱,并且您将永远不会再以相同的方式看待间距和对齐方式。也许您已经跳到您的设计项目,并将所有间距向左右移动了几个像素。
 
视觉调整在设计上并不是什么新东西。这个主题还有很多。