具有相似视觉特征的对象最有可能相关 - 或者至少在用户界面设计时应该是应该的。每种类型的UI元素的清晰,始终应用的视觉规则对于帮助人们轻松理解和使用设计至关重要。这是因为每个互动都会为用户开发用户对其他类似元素的期望。

Definition相似原则指出,共享视觉特征的物品被认为与不同的项目相关。

图形显示了一个形状的4×3栅格,其中第一列是3个圆圈,然后是三角形栏,然后是另一栏的圆和最后一列三角形。
This grid of shapes is typically perceived as four columns (rather than three rows, or as a single large group) due to the principle of similarity. Each shape type forms one group.

相似性原则是原始的视觉分组原则之一(以及接近and closure) discovered in the early 20th century by Gestalt psychologists. These psychologists were aiming to understand how people visually perceive the world and decide whether certain elements are part of the same group. Later, more grouping principles (such as公共区域) were added to the original Gestalt list.

该se Gestalt principles can and should be used by visual designers to create usable user interfaces.

使用共享特征表示关系

相似原则简单地说明了这一点当物品共享一些视觉特征时,假设它们与之相关某种程度上来说。这些项目不需要相同,但简单共用至少一个可见性状,如颜色,形状或尺寸被视为同一组的一部分。

该similarity principle is different from several of the other visual grouping principles in that the shared characteristic can尽管分布式安置,但仍有联合元素。In addition, visually similar items may be also part of other location-based groupings. So, while the similarity principle isn’t necessarily the strongest grouping principle as it is often overpowered by proximity or common region, it could be considered the most resilient.

颜色

应用共享颜色表示某些项目与某些项目相关,因此可以同样运行,是强大的。共同点color tends to stand out more prominently than other traits,例如形状,因此可以用来unite elements of different types并使他们沟通,确实是相关的。

图形显示圆形和三角形的4×3网格,中间排全是蓝色的。
颜色is a strong similarity characteristic that can unite elements of varying types. Here, a shared blue color creates the perception of rows, despite the columnar arrangement of shapes.
显示一个4×3栅格的圆形和三角形的3桥,其中顶行包含2个蓝色圆圈,中间列中的第一圆和最后三角形是蓝色的,并且中间三角形和底行中的圆圈蓝色。
颜色继续充当明确的共享性状,即使在不同形状的随机模式中使用的情况下也会产生分组的感知。

In user-interface design,颜色通常用于表示常用功能。例如,使用a是最好的做法单链接颜色as a primary method to communicate to users what is clickable: theshared color allows clickable elements to stand out as a group无论链接在页面上的位置,与默认文本颜色出现的纯非交互式文本相比。此链接颜色应仅保留用于交互式文本和其他可点击元素,因为用户将认为所有共享此特征的项目与相同的方式相关并工作。因此,链接颜色不应用于关键字,不可点罚标题或附近图标,该图标实际上并不可点击。

Screenshot showing a red upload icon centered above a red
Tridute.co:上传图标和Record or Upload videobutton under it shared the same red color and seemed to be a single group. In designs like this, users are likely to assume that clicking either the icon or the button would trigger the same functionality — however, this icon was purely decorative and not clickable.

相同颜色按钮将被视为共享相同的重要性水平。因此,Aseparate color should be reserved for primary calls-to-action to help them stand out among secondary buttons。在下面的示例中,所有按钮Message Center是绿色的,所以用户不得不花时间计算出来,这是提交表单的主要按钮。(除此之外提交button is far from the message area, and, according to Fitts’s law, this lack of proximity will also slow down users.)

屏幕截图显示绿色取消和绿色提交查询按钮在留言中心标题上,以上表单下方的绿色添加附件按钮上方。
提交按钮在Message Center同步银行共享与此相同的颜色Canceland添加附件按钮和混合在这些次要的行动s.

Shape

如前面的示例中所示,形状也可以用于指示分组。在界面设计中,我们经常将相同的矩形形状应用于某些元素,以指示它们是圆形或圆形“丸”形状的所有按钮或风格,以加强其关系。

与矩形过滤器按钮相比,ASOS.com上的产品列表页面上显示用于子类别导航链接的圆形按钮。
ASOS.com上的子类别链接全部都是圆形矩形,以加强其作为组的感知,并将其与导航相似的功能。相反,下面的滤波器的矩形形状用信号通知该组具有不同的功能。

当元素共享形状时,我们可以假设它们是相同的,因此忽略了诸如伴随标签,形状内的小文本的细节,以及表单中的轻微差异。如果元素是有意义的,这可能是有问题的,意味着不同。例如,其中几个图标Productsnavigation within the Makr tablet app were very similar shapes, with two of them being identical. The visual similarity can wrongly communicate that the categories are related — unless it’s purposeful that these categories belong together? There’s a fine line between ensuring that a set of icons appear visually consistent and signaling too strong a relationship between unintended pairs.

屏幕截图显示导航菜单中的各种产品类型的非常类似的图标。
避免使用相同或非常相似的图标来表示不同的类别,因为它们可以错误地信号信号。在Makr应用程序的导航中,两者都使用相同的图标保存日期andRSVPs,另一个非常类似的图标也用于谢谢卡片

同样,我们过去的研究视觉指标作为差异化for items within a list found that users were able to more quickly and accurately find certain items when the indicators had a unique shape — if the indicators appear too similar, it takes longer to scan and find how they differ. For instance, on the Etsy homepage, some products are marked as having free shipping or being a bestseller with similarly shaped indicators. Thankfully the two indicators are at least different colors, and the畅销书指标包括一个小图标,帮助视觉distinguish them as being a different group than theFree shippingitems.

5个产品列表的行在Etsy.com上,其中几个项目被指示为畅销书(以黄色标记)或免费送货(以绿色标记)。
etsy.com:指标Free Shippingand畅销书被封闭了 in rounded rectangles of different colors, and畅销书还包括一个特殊的图标。这些功能使两个指示器易于区分。它们是相同的颜色,这种共享形状会导致它们显得太平,并会慢慢慢下来。

When used well, displaying the same icon repeatedly throughout an interface communicates that these associated elements will function in a similar way. For instance, different icons can signal which menu items are links to landing pages versusexpand an accordionor what links may send users to external sites. In the below example from the Etsy homepage, arrow icons were placed beside a variety of elements to indicate that they were clickable, rather than using a color as the similar trait.

Etsy主页的屏幕截图显示旁边显示的右侧箭头图标,在不同的字体处理中显示几个文本链接。
该arrow icon was similarly placed beside each clickable element. This communicated that they were functionally similar, even though the font treatment differed.

尺寸

大小也可用于信号关系。相似地被视为与之相关的对象,通常共享相同的重要性水平。

3 large black circles randomly arranged among 4 smaller black circles.
该图中的大圆圈可能被视为相关的和属于不同组的相关圆形。

In a user interface, we often use size to emphasize which areas of content or calls to action are the most important. Same size means the same visual prominence, and, all other things being equal, connects all the elements that share that attribute.Using size consistently creates a visual hierarchyand makes pages easy to scan, as people can immediately see and understand these type groupings.

例如,在产品清单页面中,每个单独的产品列表都以相同的大小(以及在相同的形状)。这种一致的视觉样式是告诉我们该区域的所有项目都是产品;共享大小将其与其他不同的UI元素分开。当物品在此列表中以不同的大小或形状出现时,它突出不属于产品分组。例如,在Anthropologie.com上,产品集合的促销显示在单个产品列表的大小的两倍。

Anthropologie.com上的产品列表页面,显示各个产品链接网格中的2个促销项目的2个较大矩形。
产品集合的促销比周围产品列表更大的尺寸,以有效地传达它们是一种不同类型的内容元素。

In contrast, when various types of content are displayed at the same or a very similar size, they are often perceived as being related — even though they are different. This issue commonly occurs in the右轨在网站上,实际内容和外部广告通常以相似的大小显示。因为用户希望在右轨道上看到广告,所以所有内容都受到影响banner blindness那especially whenstyled similarly。这就是我们研究的几个参与者的原因instructional videoscompletely missed the video tutorial showing how to complete this napkin fold on the Martha Stewart website — it was sized exactly like all the display ads surrounding it.

Instructional page on the Martha Stewart website showing a napkin-folding how-to video presented within the right column of the page, styled similarly to the nearby ads.
Users mistook the video in the right rail of this Martha Stewart how-to article as being an ad, because it was sized and shaped similarly to the other ads in that area.

许多其他类似的特征

颜色,形状和大小不是展示相似之处的唯一方法;有许多可视化特征可以利用,以传达某些元素是相关的。相同的字体处理(粗体,斜体等)可以指示文本曲线相关并表示相同类型的信息。类似地,取向甚至运动甚至移动可以发信号信号是属于同一组的元素,并且可能共享常见的含义或功能。相似性原则在视觉设计中是普遍存在的,其效果几乎可以在每个界面设计中看到。

Learn more about visual perception, how it applies to UI design, and other psychology principles in our training course on该Human Mind and Usability