邻近法则是什么？为什么在UX设计中重要？

When建立和设计网站, you might have a lot of questions about what colors to use, how to arrange elements, and more. The good news is you don’t have to guess. Instead, you can rely on psychology to help you make visually appealing designs.

心理学中的一组原则 - 被称为格式塔定律 - 描述了人们如何看待周围的物体。这些法律在user experience (UX) design。这y ensure your visitors can understand what they’re seeing, find what they’re looking for quickly and easily, and take action.

Let’s take a closer look at these laws as a whole, then hone in on one: the law of proximity.

Gestalt Laws

Gestalt laws are a set of principles in psychology based on the idea that humans have a natural inclination to perceive patterns in the world around them. Psychologists Max Wertheimer, Wolfgang Köhler, and Kurt Koffka argued that this was an innate disposition of the human mind. Based on this foundational belief, they created a set of principles to explain how people organize and interpret visual data.

由于每个原则旨在描述人们如何从周围的疾病中订购，因此德国心理学家将其命名为“格斯塔尔特”定律 - 这是德语“统一整体”。

让我们简要地定义以下五个主要原则。

接近

这law of proximity states that objects placed in proximity to one another will be seen as a group rather than as individual parts. For example, Univer’s logo is made up of 25 distinct icons. But because they are placed in close proximity, you recognize the whole “U” figure.

图像源

相似

相似定律指出，当对象看起来相似时，它们将被视为一个对象或同一组的一部分。Sun Microsystems的徽标是相似定律的一个很好的例子。您没有看到八个不同的U形图，而是四次就认为“太阳”一词，字母“ S”分为两个部分。

图像源

关闭

According to the law of closure, people fill in missing information or gaps in order to see an object as a whole. For example, when looking at the World Wildlife Fund’s logo, your brain will naturally perceive the cluster of black shapes set against a white background as a panda.

图像源

Continuity

l的连续性定律描述了对象ook different but are similarly aligned will be perceived as a whole. For this to be effective, the eye must move naturally from one object to the other without something breaking the continuity. Mastercard’s logo is a great example since the eye easily moves from one interlocking circle to the other thanks to the overlapping orange region.

图像源

图

这law of figure-ground describes how the human eye can separate an object (or figure) from the surrounding area (or ground). The ad for Melbourne’s 2007 Food & Wine Festival applied this principle to emphasize both food and wine. Below you can perceive the white fork as the figure against the black backgroundand黑葡萄酒瓶在白色背景上。

图像源

让我们仔细研究以下这些原则中最受欢迎的一项。

Below is an illustration of the law of proximity.

根据这个原则,你会察觉到three rows of shapes on the left as belonging to one group, despite the fact that some are different colors. And you’ll see the row of shapes on the right as belonging to a separate group, despite the fact that they are the same size and color as the majority of shapes on the left.

那是因为左边的三行形状靠近在一起，而右侧的一排形状则远远。

让我们仔细研究该法律在UX设计中的应用。

Law of Proximity UX

Applying the law of proximity in UX designs is easy. Basically, just place related elements near each other and unrelated elements apart from each other. Usingwhitespace分组或单独元素是关键。

例如，在Web表单中，应将标签放置在靠近输入字段的情况下，以便用户了解其相关性。这Bootstrap formbelow is easy to understand and complete.

这form below is more difficult to understand because of the large chunk of white space between the label and input field for email address. Most users will likely be able to figure it out and fill in the text field correctly, but it will require more cognitive resources.

让我们看看下面的更多示例。

Law of Proximity Examples

You can see the law of proximity applied to most web pages, apps, remote controls, business cards, and other interfaces and designs. Let’s take a look at some examples below.

导航栏

图像源

Most导航菜单provide simple examples of the law of proximity in action. Take the example above. Notice that the primary navigation items are spaced evenly apart. Then, there’s a chunk of whitespace before the search, login, and cart buttons. This lack of proximity helps to indicate to website visitors that these three items aresecondary navigation items。

Product Page

图像源

产品页面也是邻近定律的好例子。请注意，在上面的“产品”页面中，每种产品的图像，星级评级，标题，价格和“添加到购物车”按钮都处于近距离状态。这向读者传达了所有这些信息与一种产品有关。然后使用Whitespace将一种产品与另一种产品分开。

bob官网官方网站新闻通讯选择加入表格

图像源

You can see the law of proximity applied in mostnewsletter opt-in forms也是。在上面的示例中，由于输入字段和“订阅”按钮的接近度，用户毫无疑问，当他们输入电子邮件地址并单击按钮时会发生什么。

网站Footer

图像源

网站footers通常说明邻近定律。良好的接近性使用本质上意味着应将徽标和品牌价值分组在一起，应将联系方式分组在一起，社交媒体配置文件应分组在一起，等等。在上面的示例中，请注意大多数项目如何在三个标题下组合在一起：帮助，法律信息和关注我们。

网站设计中邻近法

从导航菜单到网络形式到几乎所有之间的所有内容，邻近定律经常在网络设计中应用。当您将相关内容分组在一起时，它可以帮助用户更好地了解他们的关联。这可以使用户更容易消化内容或在您的网站上采取行动。