用户界面中的视觉效果

如何得到视觉平衡的图标,正确的形状对齐以及完美的圆角。图文并茂的讲解。

2019年2月21日

我们的眼睛是一个奇怪的器官,经常对我们“说谎”。但如果你知道人类视觉的感知特性,你就能设计出人性化、干净利落的设计。字体设计师不仅利用视觉技巧来创建易读的、平衡的字体,而且对于构建人机交互的界面设计师也很有帮助。

20世纪20年代,格式塔视觉感知理论发展起来。它解释了我们的眼睛如何处理不同的图像,以及我们的大脑如何理解它们。你可能已经听说过“接近原则”或“共同命运法则”。本文引用格式塔理论的一些观点,强调实际问题而不是科学理论。下面是关于该话题的推荐资料清单。

1.测量尺寸和视觉尺寸

一个400像素的正方形和一个400像素的圆形哪个更大?从几何的角度讲,它们的宽度和高度是相等的。但是看看下面的图片。我们的眼睛立刻察觉到方形大于(视觉重量)圆形。


这是带指南(标尺)的版本。


让我们再看一张正方形和圆形的照片。就视觉重量而言,它们(正方形和圆形)是相等的吗?

至少很难立刻分辨出哪一个更重(视觉重量)。这并不奇怪,因为我增加了圆的直径。

我将第一个和第二个示例中的形状重叠。在左侧,400像素正方形的面积大于400像素圆形。这就是为什么我们看到它在视觉上更大。在右边,圆和正方形是平衡的。基本上,它们的面积相似,但宽度和高度不同。

我们可以在菱形或三角形上看到同样的效果。为了在视觉上与正方形保持平衡,它们应该更宽更高,这样它们的面积才会相似。基于面积的方法非常适合简单的形状。

如何在界面中使用这种特点? 例如,当你创建一组图标时,重要的是要使它们均衡,以便没有图标突出太多或看起来太小。 如果我们直接将图标放入方形区域,则像方形的图标看起来会更大。

我建议,允许视觉上较小的图标展出在图标本身区域(绘制区域)之外,以及视觉上较重的图标和图标本身区域(绘制区域)之间留一些空间来补偿不同形状图标的重量。

一些在视觉上平衡的图标。

现在很清楚为什么图标区域总是比图标主体大 – 只是为了允许非方形图标适合它并且看起来不小于方形图标。

检查视觉平衡最简单的方法就是使图标变得模糊。如果你的图标变成或大或小相似的斑点,那么它们有相同的视觉重量。

但有时我们使用现有的图形,例如,用作分享和点赞按钮的社交网络徽标。Facebook和Instagram的图标是方形的,而Twitter则以鸟的轮廓表示,Pinterest则以环绕的“P”表示。这就是为什么Twitter和Pinterest图标要大一点,这样它们就可以与Facebook和Instagram图标保持平衡。

视觉平衡问题的另一个例子是与圆形按钮放在一起的文本框。 如果圆形按钮的直径等于文本框的高度,圆形按钮看起来会比较小。 当圆形按钮放大一点时,整个结构会变得更加平衡。

但是如果你改变圆形按钮的样式,(圆形按钮)就不需要放大了。在下面的图片中,圆形按钮和文本框的高度都是80像素,由于圆形按钮有黑色填充,所以右边的结构(视觉重量)会更平衡。

谨记

  • 视觉重量是指从人们的视角看到的意义上的物体大小,它不一定等于物体的像素大小或面积。
  • 圆形、菱形、三角形和其他非方形形状需要更高或更宽才能与方形形状进行视觉平衡。
  • 图标区域应该为视觉平衡保留一些空间。这对于一组图标非常重要,它们应该看起来一致(视觉重量)

2.对齐不同的形状

视觉对齐是视觉平衡主题的逻辑延续。看看下面的条纹。它们看起来一样长吗?

像素方面,答案是肯定的。但仔细一看,下面的条纹看起来比上面的短。

再看另一张图片上的两条条纹,有什么变化吗?

我对下方条纹应用了视觉补偿。 允许尖峰超过上方条纹20像素,是补偿尖峰之间的间隙并使两个形状在视觉上看起来相等。

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

因此,如果您正在制作带有折叠条纹和文字的海报,或者您在网上商店的产品卡上放置了鲜艳的“折扣”条纹,请注意使它们在视觉上平衡。 锋利的边缘应该超出其他形状,尤其它是一个矩形。

那么如何对齐有背景的纯文本和段落呢?这取决于背景的视觉密度。如果颜色较浅,可以将突出显示的段落与其他文本对齐。

由于背景是浅色的,所以它不会中断正常的文本流。

密集背景可以使用不同的方法。 如图,黑色背景与上下文本部分对齐,而白色文本则使用缩进形式放置。

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

同样的原理也适用于按钮和输入栏。当然,这不是固定的教条,只是基于人类视觉感知的建议。

左侧输入字段的浅色背景可以超越输入标签和用户输入。“发送”按钮的右边缘与输入背景的右边缘没有对齐,因为按钮颜色较暗,从视觉上看较重。在右边,输入具有实线边框,我将它们与标签对齐,而用户的输入在框内有缩进。“发送”按钮有一个三角形的边。将按钮向右移动一点,以便与上面的矩形输入字段保持平衡。

在这里,我们将进一步讨论对齐-文本和图标按钮的对齐。看看下面的按钮。文本看起来是居中的,不是吗?

诀窍是,在右边的按钮上,我将单词向左移动了一点,因为右边缘是三角形的。此外,箭头状按钮宽40像素,视觉效果与矩形按钮相同。

文本按钮不仅要水平对齐,字和背景还要垂直对齐。我想介绍的第一种方法是在各种操作系统、网站和应用程序的界面中使用。它是基于字体大写字母高度的对齐方式(即所谓的大写字母高度)。它等于“H”或“I”的高度。

基本上,大写字母和按钮边缘的上下空间是相等的。这是有意义的,因为命令名通常写在标题框中,英文字母的升部(字母中向上突的部分)(l, t, d, b, k, h)比降部(字母中向下突的部分)(y, j, g, p)多。

另一种方法是使用字体小写字母的高度(所谓的x-height)对齐名称和背景。在sans和sans serif界面字体中,它等于字母“x”的高度,这并不奇怪。

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

这些方法之间有什么区别吗? 是的,有区别。 并没有那么大。

下面是更多的比较示例。对于“取消”和“OK”(它们是如此广泛使用的按钮),用左列表示的上限高度方法无疑更好,因为“取消(cancel)”没有下划线,而“OK”都是大写。右列所示的x-height方法仅适用于“Sync”按钮,该按钮的名称同时包含一个升部(字母中向上突的部分)和一个降部(字母中向下突的部分);“取消(cancel)”和“OK”两个词似乎放得太高了。

图标按钮的情况与文本按钮略有不同。 让我们在圆形按钮背景上放置一个流行的“发送”图标。 哪一种看起来更平衡?

希望你注意到左边的有点问题。这是因为不同的对齐方式造成的。左侧是处理矩形图标的方式,在某种程度上,是正确的,因为当你将SVG或PNG文件发送给开发人员时它是在平面上的一个矩形表单。右边展示了图标所有的尖头边缘都与圆形按钮背景的距离相等。

如果你为开发人员准备了一个文件,那么您需要预留一些区域,以便他们可以将图标在背景上以视觉方式居中。

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

如果想让三角形的视觉位置看上去更好,请环绕它并将环绕形成的圆圈与按钮背景对齐。

谨记

  • 带锐边的形状应该更大或更长,便于与相邻的矩形保持平衡。
  • 对齐大写字母是在按钮背景上定位按钮名称的有效方法。
  • 在按钮上正确定位三角形图标的有效方法之一是环绕它并将环绕后得到的圆与背景对齐。

3.视觉圆角

什么比一个圆更圆?我以前认为什么都没有,但正如我在本文开头所说的,我们的眼睛很奇怪,有时感知到的东西并不像我们预期的那样。那么,下图中哪个圆看起来最平滑呢?

我之前问过的人会在数字3和4之间选择。数字1和2肯定太瘦了,5太胖了。如果我们把第三个和第四个重叠——一个几何圆和一个修正后的圆——我们会发现后者比第一个稍微重一些,因此,对我们的眼睛来说更平滑。

为了说明我的意思,我从三种著名的几何字体——Futura、Circe和geometry——中选取字母“o”。鉴于高质量的字体是建立在人类视觉感知的基础上,并使用复杂的视觉结构系统,我认为它们的圆形形状看起来比几何形状更圆。这些字母你看上去会有不舒服的体验吗?

让它们与几何圆重叠。即使是最几何化的Futura的“o”也有四个突出的部分。此外,Circe和几何形的字母比圆形更宽,但即使它们的高度和宽度相等,我们也能看到这四个“肚子”,好像它们饿了,吃得太饱了(比几何圆宽)。

所以,从视觉上来说,一个修改过的圆(右侧)比一个几何的圆(左侧)看起来更“圆”。

我们如何利用这种现象?当然是圆角!如果在常用的图形软件(Photoshop、Illustrator、Sketch)中使用自带的圆形形状,那么在视觉效果上就不是很好。

人的眼睛会立即发现直线突然变成曲线的地方。这种圆角看起来不自然。

考虑到我们的视觉感知,我修正了这个问题。

这种圆角在几何圆之外有一个额外的区域,使得直线与曲线的交点不引人注意。

试着感受一下这些圆角之间的不同。
现在我们可以将这种方法应用于圆形按钮。

你可能已经注意到,右边的按钮有更平滑的圆角,看起来更舒适。应用程序图标也是如此。我们不能简单地使用标准的圆角来获得完美的结果。但是在我们深入讨论这个话题之前,让我们先来看看两个不同的圆角矩形。

第一个是圆角矩形,我在Sketch中创建的。 第二种形状是超椭圆,也称为拉梅(Lamé)曲线。 它是由法国数学家加布里埃尔·拉姆(Gabriel Lamé)发现的,根据公式的不同,可以从四角星到形状看起来像圆角正方形。

Marc Edwards提出了拉梅(Lame)曲线的公式,得到了一个光滑的视觉完美的形状。iOS 7的图标就是基于此。

后来这个形状被修改,添加了黄金比例和网格来引导图标设计师,但这是另一个故事。

使用像超椭圆这样的形状的主要好处是它们的光滑外观。另一方面,这些非标准形状很难插入到真实的界面中。你应该将多个svg组合起来,在代码中包含特殊的公式或脚本,或者使用PNG遮罩,就像苹果对其应用程序图标所做的那样。至于设计过程本身,有一个简单的圆角修复。您需要将可转换的圆角效果转换为轮廓,进入形状编辑模式,并手动将曲线控制柄彼此靠近。

在绘制道路或地铁方案时,圆角显得尤为重要。

谨记

  • 几何上的圆角看起来很假,因为你可以很容易地看到直线突然变成曲线的点。
  • 视觉上正确的圆角需要特殊的公式或手动调整形状。

收获

有时一个不理想的几何正方形看起来更方形。你可能会想,“多么荒谬的废话?”那么,你觉得下面的方块怎么样?哪个形状看起来更方?

如果你选择了左边的形状,你就能听到你公正的视觉感受的声音。

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

推荐阅读

这篇文章对这个主题的理解有限,因此我鼓励你继续探索它。这是一个关于格式塔心理学的起源和它的最初想法的文章和书的列表。

原文链接:https://medium.muz.li/optical-effects-9fca82b4cd9a

翻译:闫麒麟

编辑:闫麒麟

责编:王扬

发表评论

电子邮件地址不会被公开。 必填项已用*标注