知觉历程使我们能够通过自己的视觉，嗅觉，听觉，味觉和触觉感官来感知世界。尤其是我们的视觉系统，它处理了环境中的大量信息。比起分别感知，大脑的信息组织模式更倾向于将对象和形状转化为可理解的整体来感知。

 

视觉的分组完型法则将这一系列原则解释为人们看待和组织这种强烈视觉刺激的方式。格式塔原则中的相似性和最短距离原则，封闭原则，图形与背景关系原则，连续性和整体性原则都是设计师在组织视觉信息时常用的原则。作为一位视觉与交互设计师，我将这些原则作为在设计元素间构建种种关系和不同的基本规则。了解这些原则的应用方法，明白如何将之应用到自己的设计中会对自己的设计输出质量有很大的提升。

 

在本文中，我们来看看相似性和最短距离原则，通过真实的案例来阐述它们的应用方法，这样你就可以把它们应用到自己的设计中去了。

相似性

格式塔原理中的相似性即视觉上类似的元素更容易被视为相互关联的，而视觉上不同的元素则正相反，相似性可以帮助我们通过元素的色彩，尺寸，形状和方向将有一定关联性的元素组织在一起。

利用色彩来组织关系

相似性受色彩影响很大。如下图所示，不难发现，色彩对元素之间的关系分配有很大影响，即使各元素的形状不同。

利用尺寸组织关系

尺寸也是一个相当重要的因素，我们可以利用尺寸这一属性构建相似性。在下图所示的例子中，虽然形状相同，但尺寸上的相似性导致较大的形状凸显出来并自发地形成一组。

利用形状组织关系

利用相似性进行分组时，形状的权重不言自明，但相较于色彩和尺寸来说，形状这一因素的分组效果较弱。通过下图中的例子不难发现，形状的相似性让我们将元素划分为圆形和矩形的竖列，而不是两种形状交替出现的横行。

利用方向组织关系

可以通过方向进行相似性分组。将下图中的部分矩形旋转 45 度，就会自然而然地形成一个互相关联的独立分组。同周围的形状相比，它们好像是在朝着相同的方向移动。这实际上也涉及了格式塔原理的整体性原则。我们以后会提到这一原则，当然，你也可以在网上搜索到相关内容。这是一个相当迷人的原则，它经常在我们身边出现。

色彩！还是色彩！

正如前文所提到的，色彩对相似性的影响非常大，甚至可以压过其它属性。比如，我们可以利用颜色来覆盖形状构建的相似性关系。如下图，现在我们感知到的是红白相间的行而非圆形和矩形交错的列。试着将下图看做圆形和矩形交错的竖列，虽然可以，但确实有点困难，对吧？

另外，色彩也可以覆盖尺寸的关系。当我们将颜色添加到尺寸相似的案例中时，就构建了两组彼此分离的相似组。现在我们会将红色大矩形和白色大矩形分别作为独立的不相关组别。

这两个例子说明了色彩组织关系的强大效果。尝试在设计中用色彩区分元素，每组的关联性之强一定会令你感到意外。

关于相似性的实践

设计时，我们可以用相似性来表现元素之间的相关性，传达彼此间的组织和关联。比如下面的 Salon 的网站，通过尺寸关联性将内容分为两组，我们可以清晰地感知到两个独立的组别，左侧的“TOP STORIES”和右侧的“MOST READ”。尽管这两部分都提供了相似的功能，即显示供阅读的文章，按尺寸组织内容突出左侧的分组，这样可以引导人们关注 Salon 的头条内容。

与此相对的，Amazon 并未通过相似性重点突出页面中的某个部分，而是通过重复相似的尺寸形状来构建一种相似性，引导我们按行浏览项目。

使用相似的色彩

我们知道，色彩是营造相似性的重要因素，它能够帮助我们组织内容并使之易于理解。在 Cars.com 的案例中，相同的用色可以帮助我们区分标题正文和链接文本。（顺便一提：我曾在 Cars.com 做过交互设计师。）通过对不同元素使用不同颜色，我们希望能够发挥出色彩相似性的作用，对那些蓝色的链接文本也是如此。

最短距离原则

格式塔原理中的最短距离原则表明，相互接近的元素比较远距离的元素相关性更强。与相似性类似，最短距离原则帮助我们通过关联性来组织对象。最短距离原则常常用于表现对象之间的关联性，帮助我们更快更高效地理解组织信息。

 

下图中圆圈的例子可以帮助我们理解最短距离原则是如何对相关性发挥作用的。正如你所见，下图中的圆圈逐渐向外扩散，表现出一种无序的状态，每一个圆圈都可被视为单独的对象。

然而，当圆圈被拉入到一个隐形的空间中彼此相近时，它们就具备了一定的关联性，并且不会再被认为是单独的个体。

 

留白

留白是构造最短距离的宝贵工具。对同一组圆圈添加留白可以帮助我们感知到不同的东西。现在，左图中相近的形状让我们感觉圆圈被分为两列，每列自成一组。而右图中，留白将圆圈划分为两行。在设计中使用留白可以增强分组和元素间的区别。

最短距离原则的效果

最短距离原则的效果之强，足以压过多变的其它因素。要注意，即使色彩和形状等其它属性不同，最短距离原则的效果依旧最强。可以像下图那样尝试一下，就会发现色彩和形状并不会压过留白效果，图中的元素依旧会被视为两个分组。

最短距离原则实践

当我们组织设计中的信息时，可以通过最短距离原则构造元素间的关系来帮助人们理解设计中提供的信息。比如，Apple Store 中的图像就是通过最短距离原则分组的，我们对整体内容的关系进行思考，认为它们之间内容相似并且具有关联性。

然而，当我们去掉中间一列时，就会感受到两个独立的组别，认为它们的内容并不相同。

结合使用相似性和最短距离原则

可以将最短距离原则和相似性原则相结合，打造更稳固的关联性。比如下图中 Amazon 的例子，通过最短距离原则和尺寸的相似性分组，使我们感知到两个独立的分组，同时左侧的组别更加突出。

最短距离原则和层次性

最短距离原则是组织元素层级的好方法。在下图 Crate & Barrel 的例子中，选项通过与常用的标题组合在一起，来构建关系，使浏览和查找信息更加轻松。

总结

了解相似性原则和最短距离原则对设计中各元素关系的影响很重要，这有助于设计中元素的组织性，帮助提高设计的可用性。使用相似性原则和最短距离原则可以构建设计元素之间的关联性和区分度。通过综合调整元素的留白，色彩，尺寸，形状和方向进行实践，可以在元素间构造强烈的关联性。