用户界面的视觉对齐（处女座福利）

作者最大 原文链接

内容简介

像文章标题一样，本文是“处女座”设计师的福利，主要讲述“如何设计视觉平衡的图标，正确的形状对齐，以及完美的圆角的处理方法。”多图预警！

眼睛是奇怪的器官，他们经常对我们说谎。但是，如果你了解人类视觉感知的特殊性，你可以建立更加平易近人更加清洁的设计。不仅字体设计师可以使用光学技巧来创建可读和平衡的字体，而且交互设计师构建人机交互界面也是十分有帮助的。

1.均衡视觉重量

哪个更大：400像素的平方或400像素的圆？在几何学上，它们的宽度和高度是相等的。但是看下面的图片。我们的眼睛立即发现方块比圆圈重。顺便说一下，与重量相关的词更适合于描述视觉效果。

如果你不相信我们是准确绘制这些形状的，下面是个带参考线和数字的版本。

让我们来看一下一个正方形和一个圆圈的照片。在视觉重量方面，他们是否相等？

对我而言肯定是的。至少很难分辨出哪一个超过另一个。不奇怪，因为我将圆的直径增加了50像素。

为了说明为什么会发生这种情况，我重叠了第一个例子（400像素平方和圆）和第二个例子（400像素平方和450像素圆）的形状。正如下图所示，方格超过圆圈的在“a”区域内，而圆圈超过方格的在“b”区域内。左边图里，方格完全包含圆圈。在右图里，圆圈和方格相平衡；没有一个包含另一个；他们每个都有四个松散的部分。基本上，在右边图重，形状有相似的面积，而它们的宽度和高度是不同的。

在菱形或三角形上我们也可以发现相同的视觉效果。为了在视觉平衡跟方格相平衡，它们应该更宽更高一些，使得它们的面基相似。简单的形状可以通过面基相似的方法达到视觉平衡。

如何在界面中使用这一原理？例如，当你在设计一组图标时，重要的是使它们视觉均衡，图标不会看起来太大或太小。如果我们直接将图标刻在正方形区域，则形状更像方形的图标将会看起来更大。

我建议通过将视觉上较小的图标扩展到在图标区域之外，而视觉上较重的图标在图标区域之间留下一些空间，来补偿不同形状的图标的重量。

下面是视觉平衡的图标。

现在很清楚为什么一个图标区域总是大于一个图标体 —— 只是为了保证非方形图标适合它，并且看起来不要小于方形图标。

最简单检查视觉平衡的测试是模糊icon。如果您的图标变成或多或少相似的斑点，它们具有相同的视觉重量。

但有时我们可以使用现有的图形，例如社交应用里的分享和喜欢。 Facebook和Instagram的图标是平方的，而Twitter由一个鸟圈剪影，Pinterest包围的“P”代表。这就是为什么Twitter和Pinterest图标有点大，所以他们看起来与Facebook和Instagram图标平衡。

视觉平衡问题的另一个例子是与圆按钮一起放置的文本框。如果按钮直径等于文本框的高度，那么按钮对我们的眼睛看起来会更小，但如果你放大一点，整个结构将会变得更加平衡。

但是如果更改按钮的样式，则不需要放大。在下图中，按钮和文本框高80像素，但由于黑色填充强度，右侧的按钮不会看起来小。

熟记于心

1.视觉重量取决于人眼如何察觉物体的大小和显著，并不一定等于其像素大小。
2.圆形，菱形，三角形和其他非方形形状需要更大，以便与方形形状进行视觉平衡。
3.为达到视觉平衡，图标区域需保留一定的空间。对于一组图标来说，这一点至关重要。

2.不同形状的对齐

视觉对齐是视觉平衡和视觉重量均衡的逻辑延续。看下面的条纹。他们看起来长度相同吗？

在像素方面，答案是肯定的。然而，乍一看，下条纹看起来比上方短。

再一张两条纹图。有什么改变？

我对下条进行了视觉补偿。在原有基础增加下面条纹的长度。20像素可以补偿尖峰之间的间隙并使两个形状视觉相等。

而现在有一些更复杂的不同形状条纹的例子。

所以，如果你正在创建一个折叠条纹和文字的海报，或者你在网上商店的产品卡上贴上明亮的“折扣”条纹，请牢记视觉平衡。尖锐的边缘应该比其余的形状长一些，特别是如果它是一个矩形。

那么如何对齐具有背景的纯文本和段落呢？这取决于背景的视觉密度。如果它很轻，可以将突出显示的段落与其余的文本对齐。

由于背景很浅，它不会打断常规的文本流。

不同的方法可以应用于密集的背景。在图片上，黑色背景与其余的文本对齐，而其中的白色文本则以缩进形式放置。

与浅色背景不同的是，黑色具有很大的视觉重量，如果目标是无缝地插入一段，最好是按照下图所示的方式对齐。

相同的原则适用于按钮和输入框一起使用时。当然，这不是一个教条，只是基于视觉的界面版式。

左侧输入框的浅色背景可以超出标签和用户输入。 “发送”按钮的右边缘与输入背景的右边缘不完全对齐，因为按钮较暗，视觉上，更重。

在右侧，输入框具有实体边框，并且我们将它们与标签对齐，而用户输入的文本有缩进。 “发送”按钮有三角形。并将该按钮向右移动，以与上述矩形输入框平衡。

在这里，我们正在逐渐逼近对其的另一层面 — 文本和图标按钮的对齐。看下面的按钮。文本看起来居中，不是吗？

诀窍在于，右边的按钮我把这个文案向左移动了几像素，因为右边是三角形的。此外，箭头状按钮的宽度为40像素，看起来与矩形的相似。

文本按钮不仅具有水平对齐方式，而且还具有字和背景的垂直对齐方式。我说的第一种方法是适用于各种操作系统的，站点和应用程序的界面中。它是基于字体大写字母的高度（所谓的大写字母高度）的对齐方式。它等于“H”或“I”的高度。

基本上，大写字母上方和下方的空白以及按钮的边缘是相等。这是有道理的，因为命令名称通常用标题格式，英文字母有很多的上升 - 上部伸出部分（l，t，d，b，k，h） - 比下降部分 - 较低的悬挂部分（y，j，g， p）。

另一种方法是基于字体的小写字母的高度（所谓的x-height）对齐名称和背景。在衬线体和非衬线界面字体中，保证字体高度等于字母“x”的高度 。

这种方法也是有意义的，因为文本的视觉重量主要集中在放置小写字母的区域中。

这些方法有什么区别吗？是的，有区别。但是，这并不大。

下面比较更多的例子。左列表示的大写字母方法，比较适用于“取消”和“好”更好 - 如此广泛使用的按钮 - 因为“取消”没有下降，“OK”两个字母都是大写。右列中显示的x高度方法，仅适用于“同步”按钮，其名称具有上部和下部突出元素；“取消”和“确定”字似乎放置得太高。

图标按钮的情况略有不同。让我们在一个圆形按钮上放一个流行的“发送”图标。哪个变体看起来更平衡？

希望你已经注意到左边的东西有问题。这是因为不同的对齐方式。左侧图片将icon当作一个矩形。在一定程度上，这是正确的，因为当您向开发人员发送SVG或PNG文件时，它是一个带有icon的矩形纸张。右侧的考虑调整显示了所有锐边使之与圆形按钮背景相等。

如果你为开发人员准备一个文件，您需要预留一些区域，以便他们可以通过中心对齐实现视觉对齐。

与“播放”按钮也是一样。如果直接对齐这些形状 - 圆角矩形和三角形 - 它们会看起来很奇怪。

如果要更好地将三角形放置好，请先做它的外接圆，然后让其与按钮背景对齐。

牢记于心

1.稍微放大具有锋利边缘的形状，以便与相邻的矩形视觉平衡。
2.大写字母高度对齐是在按钮背景上定位按钮名称的有效且广泛使用的方法。
3.将三角形图标正确放置在按钮上的有效方法之一是做它的外接圆，并将圆圈与背景对齐。

3.视觉圆角

什么可以比圆圈更圆？我以前没有想到，但正如我在这篇文章的开头所说，我们的眼睛很奇怪，有时候不会像我们预料的那样感知事物。那么，下面的图片中的哪个圈看起来最圆呢？

我以前问过的人选择集中在3号和4号之间。数字1和2绝对太瘦，5太丰满了。如果我们重叠第3个和第4个圆形 - 一个几何圆圈和一个修改的圆圈 - 我们会发现第4个圆形比第3个圆形更重，因此我们的眼睛会觉得第4个更圆。

为了进一步解释我的意思，我从三种著名的几何字体（Futura，Circe和Geometria）取出“o”字母。鉴于高品质的字体是基于人类的视觉感知而建立的，并且使用复杂的视觉结构系统，我认为它们的圆形看起来比几何圆形更圆形。这些字母不是具有良好的视觉感受吗？

将这些字母与几何圆圈重叠。即使是最为几何的Futura的“o”也有四个伸出的部分。 Circe和Geometria的字母比圆圈更大，但即使他们的高度和宽度相等，我们也可以看到这四个“肚子”好像饿了一样。

所以，从视觉角度来说，修改后的圆圈（右侧）可以看起来比几何图形（左侧）更圆。

我们怎么使用这种现象呢？当然，如果你使用在图形编辑器（Photoshop，Illustrator或Sketch）中使用内置的舍入功能，结果将不如视觉上的效果好。

人眼可以立即检测到直线突然变成曲线的点。而这个突变看起来并不自然。

我考虑到我们的视觉感知来解决这个问题。

这种倒圆具有超出几何圆的额外面积，使线条自然地从直变曲。

只要尝试感受这些四舍五入方法之间的区别。

现在我们可以将这种方法应用于圆角按钮。

我想你可能已经注意到，右边的按钮有更圆滑的圆角，更适合你的眼睛。

与应用程序图标相同相似。一个人不会简单地使用标准的四舍五入来达到一个完美的结果。但在我们潜入这个主题之前，我们来看看两种不同的圆形。

第一个是在sketch中创建的圆角矩形。第二种形状是超椭圆形（superellipse），也称为Lamé曲线。法国数学家GabrielLamé发现，根据所使用的公式可以从四角星得到圆角矩形。

马克·爱德华兹提出了Lamé曲线的公式，形成了光滑和视觉上完美的形状。从iOS 7的图标是基于它的。

后来，这种形状通过添加黄金比例比例和网格来修改，用于指导新图标的设计师，但这是一个不同的故事。

使用超椭圆形状的主要优点是它们更圆润和光滑的外观。另一方面，这些非标准形状难以插入到实际的界面中。应该组合多个SVG，在代码中包含特殊的公式或脚本，或者使用Apple为其应用程序图标使用PNG蒙版。

至于设计过程本身，有一个简单的修复圆角。您需要将可翻转的四舍五入效果转换为轮廓，进入形状编辑模式并手动将曲线手柄彼此靠近。

这种差异对于锐角四舍五入更为生动，这对于绘制视觉正确的路径更加重要。

牢记于心

1.如果你可以轻松地看到直线突然变成曲线的点，这个几何圆角看起来是人造的。

2.视觉正确的圆角需要特殊配方或一些手动调整形状。

其他

有时不太理想的几何方形看起来更方便。你可能会想，“多荒谬的废话！”那么，你如何看待以下的正方形？哪种形状看起来更方？

如果你选择了左边的形状，那你一定能听到准确的视觉感知到的声音。

当我们了解到眼睛对物体的高度比其宽度更敏感时，我个人感到惊讶。它解释了为什么即使在几何字体中，字母“o”总是比几何圆宽，字母“H”的垂直比划总是比水平的更厚。