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

定义:相似性原理表示视觉特征相同的物品比视觉特征不同的物品更具有关联性。

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

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

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

使用共享特征表示关系

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

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

颜色

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

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

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

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

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

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

形状

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

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设计，以及其他心理学原理人类思维和可用性．