在用户界面设计中，具有相似视觉特征的对象最有可能是相关的——或者至少它们应该是相关的。对于每种类型的UI元素，清晰、一致地应用视觉规则是帮助人们轻松理解和使用设计的关键。这是因为每次交互都会开发用户对其他类似元素的功能的期望。

定义:相似性原则说明具有相同视觉特征的项目被视为比不相似的项目更相关。

显示4×3形状网格的图形，其中第一列是3个圆，接着是一列三角形，然后是另一列圆形和最后一列三角形。
由于相似原则，这种形状网格通常被认为是四列(而不是三行，或作为一个大组)。每个形状类型组成一个组。

相似性原则是一组原始的视觉分组原则(连同接近格式塔心理学家在20世纪初发现的。这些心理学家的目的是了解人们如何视觉感知世界，并确定某些元素是否属于同一群体。稍后，更多的分组原则(例如常见的地区)被添加到原始格式塔列表中。

视觉设计师可以也应该使用这些格式塔原则来创建可用的用户界面。

使用共享特征表示关系

相似性原则简单地说当项目有一些共同的视觉特征时，他们被认为是相关的在某种程度上。物品不需要完全相同，只要简单至少有一个共同的可见特征，如颜色、形状或大小被视为同一群体的一部分。

相似性原则与其他几种视觉分组原则的不同之处在于共享特征可以即使是分布式布局，也要统一元素．此外，视觉上相似的物品也可能是其他基于位置的分组的一部分。因此，虽然相似性原则不一定是最强的分组原则，因为它经常被邻近或共同区域压倒，但它可以被认为是最具弹性的。

颜色

应用共享颜色来表示某些项目是相关的，因此可能会起到类似的作用，这是非常强大的。普通的颜色往往比其他特征更突出，例如形状，因此可以用于统一不同类型的元素并传达他们确实是相关的。

显示由圆形和三角形交替列组成的4×3网格的图形，其中中间一行全部为蓝色。
颜色是一种强烈的相似性特征，它能将不同类型的元素统一起来。在这里，尽管形状呈柱状排列，但共享的蓝色创建了行的感觉。
图示一个4×3的圆和三角形交替列网格，其中顶行包含2个蓝色圆圈，中间列中的第一个圆和最后一个三角形是蓝色的，中间的三角形和在底部行中的圆是蓝色的。
颜色继续作为一种明显的共同特征，创造出一种分组的感觉，即使是在不同形状的随机图案中使用。

在用户界面设计中,颜色通常用来表示常见的功能. 例如，使用单一的链接颜色作为向用户传递可点击内容的主要方法共享颜色允许可点击的元素作为一个组突出与以默认文本颜色显示的纯非交互文本相比，无论链接在页面上的位置如何。此链接颜色应仅保留给交互式文本和其他可单击元素，因为用户会感觉到所有共享此特征的项目都是相关的，并且以相同的方式工作。因此，链接颜色不应用于关键字、不可单击的标题或附近实际上不可单击的图标。

屏幕截图显示了一个红色的上传图标，上面有一个红色的“记录或上传”按钮。
贡：上传图标和录制或上传视频它下面的按钮都是红色的，看起来像是一个单独的组。在这样的设计中，用户可能会认为点击图标或按钮会触发相同的功能——然而，这个图标纯粹是装饰性的，不能点击。

相同颜色的按钮将被视为具有相同的重要性。因此应该为主要的动作调用保留单独的颜色，以帮助它们在次要按钮中脱颖而出. 在下面的示例中，中的所有按钮信息中心是绿色的，因此用户必须花时间来确定哪个是提交表单的主按钮。(此外,提交按钮离信息区很远，而且根据Fitts定律，这种距离的缺乏也会降低用户的使用速度。)

屏幕截图显示在消息中心标题下有一个绿色的取消和绿色的提交查询按钮，表单上方有一个绿色的添加附件按钮，表单下方有。
的提交按钮信息中心Synchrony Bank的颜色与取消和添加附件按钮，并与这些次要操作混合在一起。

形状

如前面的插图所示，形状也可用于表示分组。在界面设计中，我们经常将相同的矩形形状应用于某些元素，以表示它们都是按钮，或将某些类别链接设置为圆形或圆形“药丸”形状，以加强它们之间的关系。

Asos.com上的产品列表页面，显示用于子类别导航链接的圆形按钮，与矩形过滤器按钮相比。
Asos.com上的子类别链接都是圆形的矩形，以加强他们作为一个群体的感知，并传达他们类似的导航功能。相反，下面过滤器的矩形形状表示该组具有不同的功能。

当元素共享一个形状时，我们可能会假设它们是相同的，从而忽略一些细节，如伴随的标签、形状中的小文本和表单中的细微差异。如果元素实际上是不同的，那么这就有问题了。例如，控件中的几个图标产品Makr平板电脑应用程序中的导航形状非常相似，其中两个是相同的。视觉上的相似性可能会错误地传达出类别是相关的——除非这些类别是有目的地属于一起?在确保一组图标在视觉上一致和暗示非有意配对之间的关系之间有一条微妙的界线。

屏幕截图显示导航菜单中用于各种产品类型的非常相似的图标。
避免使用相同或形状非常相似的图标来表示不同的类别，因为它们可能错误地表示关系。在Makr应用程序的导航中，两个应用程序使用了相同的图标保存日期和rsvp，另一个非常相似的图标也被用于感谢卡．

同样，我们过去的研究视觉指示器作为区分器对于列表中的项目，当指示器具有独特的形状时，用户能够更快、更准确地找到某些项目——如果指示器看起来太相似，则需要更长的时间来扫描并发现它们之间的差异。例如，在Etsy的主页上，一些产品被标记为免费送货或具有类似形状指标的畅销产品。谢天谢地，这两个指标至少是不同的颜色，而且畅销书指示符包括一个小图标，以帮助在视觉上区分它们是不同的组免费送货物品。

Etsy.com上的5行产品列表，其中有多个项目显示为畅销书（黄色标记）或免费送货（绿色标记）。
Etsy.com：指标免费送货和畅销书是封闭的 用不同颜色的圆角矩形畅销书还包括一个特殊的图标。这些特征使得这两个指标很容易区分。如果它们的颜色相同，这种共享的形状会导致它们看起来太相似，并会减慢用户的速度。

如果使用得当，在整个界面中重复显示相同的图标，表明这些相关元素将以类似的方式发挥作用。例如，不同的图标可以指示哪些菜单项是指向登陆页面的链接扩大手风琴或者哪些链接会将用户发送到外部网站。在Etsy主页下面的例子中，箭头图标被放置在各种元素的旁边，以表明它们是可点击的，而不是使用颜色作为相似的特征。

Etsy主页的屏幕截图显示了一个右箭头图标显示在几个文本链接在不同的字体处理。
箭头图标同样放置在每个可点击元素的旁边。这表明它们在功能上是相似的，尽管字体处理不同。

大小

大小也可以用来表示关系。大小相似的对象可能被视为相关对象，通常具有相同的重要性。

3个大的黑色圆圈随机排列在4个小的黑色圆圈之间。
图中大的圆圈比小的圆圈更容易被认为是相关的，属于不同的群体。

在用户界面中，我们经常使用大小来强调哪些内容或行动呼吁是最重要的。同样的尺寸意味着同样的视觉突出度，并且，在其他条件相同的情况下，将所有共享这一属性的元素连接起来。使用一致的大小创建一个视觉层次并使页面易于扫描，因为人们可以立即看到和理解这些类型分组。

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

在Anthropologie.com的产品列表页面，在单个产品链接的网格中显示了两个更大的促销商品矩形。
产品系列的促销以比周围产品清单更大的尺寸显示，以有效地传达它们是一种不同类型的内容元素。

相反，当不同类型的内容以相同或非常相似的大小显示时，它们通常被认为是相关的——即使它们是不同的。这个问题通常发生在右舷网站，其中实际内容和外部广告通常以相似的大小显示。因为用户希望在正确的轨道上看到广告，所以那里的所有内容都受到限制横幅失明,特别是当风格类似. 这就是为什么我们的研究中有几个参与者教学视频完全错过了玛莎·斯图尔特网站上展示如何完成折叠餐巾的视频教程——它的大小和周围所有展示广告的大小一模一样。

玛莎·斯图尔特(Martha Stewart)网站上的指导页面，在页面的右边一栏展示了折叠餐巾纸的操作视频，风格与附近的广告相似。
用户误以为这篇玛莎·斯图尔特指南文章右边栏的视频是一个广告，因为它的大小和形状与该区域的其他广告相似。

许多其他相似特征

颜色、形状和大小不是表示相似性的唯一方式；还有更多的视觉特征可以用来传达某些元素是相关的。相同的字体处理（粗体、斜体等）可以表示文本片段是相关的，并表示相同类型的信息。类似地，方向甚至移动都可以表示元素属于同一组，并且可能具有相同的含义或功能。相似性原则在视觉设计中无处不在，其影响几乎可以在现有的所有界面设计中看到。

在我们的培训课程中了解更多关于视觉感知，如何将其应用于UI设计，以及其他心理学原理人类思维和可用性．