在某一些方面看起来相似的设计元素（如：相同的颜色、形状或者大小）被认为是相关的，而那些看起来不同的元素被认为属于不同的组

一、什么是相似性法则

相似性法则是格式塔心理学家在20世纪初发现的一组原始视觉分组原则（同类的还有邻近法则和闭合法则）这些心理学家旨在了解人们如何从视觉上感知世界，并确定某些元素是否属于同一组

相似性法则与前两期所讲的“简洁法则”“邻近性法则”一样都属于格式塔原则，如果没有学习的同学可以点下方链接进行学习

设计师都需要知道的设计原则和定律（四）——简洁法则

设计师都需要知道的设计原则和定律（五）——邻近性法则

当我们在进行界面设计时，那些具有相似特征的对象应该是相关的，或多或少都会有关联。因为清晰的UI元素、一致的视觉规范能帮助用户轻松理解和使用你设计的产品

二、相似性法则解析

相似性法则的定义：具有相同视觉特征（颜色、形状或大小）的对象被认为比没有相同视觉特征的对象更有关联性

相似性法则简单来说就是，当对象共享某些视觉特征时，会假定为它们有某种方面相关。这些对象不需要完全相同，只需要共享至少一个可见特征就可以，例如：颜色、形状或大小，满足任意要素的情况下，即可被视为同一组的一部分

1、颜色

运用共享颜色来表示某些对象是相关的，因此这些对象可能具有相似的功能，相同的颜色会比其他相同特征（例如形状）更突出，因此可以运用相同颜色来表现不同类型元素的关联性

如下图所示，尽管从形状的相似性出发它们是四列，但在共享黄色之后，颜色产生了强烈的相似性特征，将不同的元素结合起来了，并让从之前四列的视觉效果，变成了三行的视觉效果

即使在不同的形状中随机使用颜色，颜色依然是一种明确的共性特征，可以创造对分组的感知

2、形状

首先看下面的图片，由于相似性法则的缘故，我们通常认为这是四列，而不是三行，因为我们会将相同类型的形状分成一个组

为什么我们会将上图分成四列而不是三行呢？因为人眼倾向于将设计中的相似元素视为一个完整的图片、形状或者组，即使这些原色是分开的，但大脑还是会把相似性质的元素之间建立联系，使我们在彼此的关系中感知它们，将它们与其他元素区分开来

3、尺寸

大小也可以用来表达关系，大小相似的对象可能被认为是相关的，通常具有相同的重要性级别

与较小的圆相比，上图中的大圆可以被认为是相关的并且属于不同的组

4、其他特征

除了颜色、形状、大小以外还有其他的视觉特征也可以用来传达某些元素的相似性。例如相同的字体大小、字体粗细、斜体字体，可以用来表现当前文本片段是相关的，属于相同类型的信息

类似的还有相同的方向、相同的运动都可以表现出元素属于同一组并且可能具有共同的意义或功能

超市里货架也会根据相似的物品进行分类摆放，物以类聚，人以群分也是在讲相似性法则，总之相似性法则在视觉设计中无处不在，它的效果几乎可以在现在的每一个界面设计中看到

三、举例

1、颜色

在UI设计中，颜色通常用于表示常用功能。例如在UI设计中使用单一链接颜色作为向用户传达可点击内容的主要方法，共享颜色允许可点击元素作为一个组突出显示，不管链接在页面的什么地方，与默认文本颜色相比共享颜色的链接元素会让用户感知元素是可点击的交互式文本

这个链接颜色应该只为交互式文本和其他可点击元素使用，因为用户会感觉到所有共享这个颜色特征的对象都是相关的并且拥有相同的功能

因此链接颜色不应用于关键词、不可点击的标题或者是它附近不可点击的图标上

上图中上传图标与下面的上传照片或拍照的按钮共享了相同的蓝色，看上去是一个组。这样的设计会让用户认为点击上面的图标和点击按钮触发的功能是一样的，然而这个图标只有装饰性，点击没有任何交互效果

2、形状

如前面的插图所示，形状可以用来表示分组

在UI界面设计中，我们经常将相同的矩形应用于某些元素用来表达它们都是按钮或将某些类别链接设置为圆形以加强它们之间的关系

上图的分类标签都是使用的圆角矩形，用来加强它们之间的群体感知，并传达它们与导航类似的功能

但是，在相似之中也是有界限的，例如我们一个操作流程上的图标设计，有几个图标形状非常的相似，其中还有相同的

那么相似性法则可能会错误的传达类别相关的信息，所以在确保一组图标在视觉上看起来一致之外，还要确保它们不要太过于一样，否则反而带来反作用

3、大小

在UI设计中，我们也会经常使用大小来强调哪些区域或号召性用语是最重要的

相同大小意味着相同的视觉突出度，并且在所有其他条件相同的情况下，连接了共享该属性的所有元素

使用大小始终如一地创建视觉层次结构并使页面易于浏览，因为用户可以快速看到并理解这些类型分组

例如，在产品列表页面中，每个单独的产品列表都以相同的大小（和相同的形状）显示

这种一致的视觉样式告诉我们，该区域的所有项目都是产品；共享大小将其与其他不同的 UI 元素分开。当一个项目在此列表中以不同的尺寸或形状出现时，它会突出显示不属于产品组

例如我们在逛商城时，广告位的尺寸与产品的尺寸是存在大小差异的

四、总结

1、视觉上相似的元素被认为是相关的

2、颜色、形状和大小以及方向和运动都可以表明元素属于同一组，并且可能具有共同的含义或功能

3、确保链接和导航系统在视觉上与普通文本元素区分开

Powered by Froala Editor