对格式塔原则的认知2——相似性

原作者：Andy Rutledge ( 2009/6/26 )

翻译：醉小帅 （2015/08/26）

（ PS ：这是我翻译的第二篇外文，如有不恰当的地方，希望各位谅解！）

随着格式塔原则的发展，相似性原则似乎成为了其中最容易掌握的一个！相似性说明了相似的事物比那些不相似的事物更具关联性。这么简单！真的是这样吗？然而，作为一名网页设计师，其实你得熟悉的在任何情况下让元素更具相似性，并选出正确的加以利用。这是因为不同的相似，模式其实是不同的，一些模式有很强的共通性，而有一些在这方面则表现得差强人意。而且还得具体情况具体分析，相似性原则似乎也并不是我们所想的那么简单！

相似性是一种强有力的沟通原理。它的强大源自这样一个事实：它和大部分含义共同的基本元素——对比是相当的。在格式塔原则系列的第二部分，让我们一起来检验相似性原则，来看看它是怎么在网页设计工作中作为一门交流性原理起作用的！

基本原则

这儿有所有类型的使得元素能够看起来相似即相关的方式。这些类型包括颜色、大小、形状、文字 、尺寸和定位的相似性，这里仅举这几例。为了说明这些相似性模式中的一些情形，让我们（对下面的例子）做一些基础性的评价吧！

上面的这些元素是说明了相似性呢？还是没有说明相似性？

因为上面的这些元素中几乎没有一致性，它们其实并没有表现出相似性。结果就是，这些元素在任何方面都没有表现出有关联的地方。

让我们更容易的来了解一些相似性：

上面的哪些元素是有关联的？怎么关联的？

在上面的许多元素都是存在差异的，但是也有一些具有相似性。如果要求我们将上面的元素进行分类，几乎任何人都能够根据最明显的共通性，也就是形状来进行分类。按照形状来进行分类，那就是方形的彼此是相关联的，把它们归为一类，圆形的是相关联的的归为一类。这很重要！在这个例子中通过形状来指出，而不是相近性质或者是大小，体现出了最明显的相关性。让我们做一点点的改变，然后看看我们的观念是怎样引导我们的。

上面的这些元素是哪一个是相关联的？是怎样关联的？

在所有的可能性中，你已经做出了选择，也就是大的正方形彼此是相关联的，小的正方形也是相关联的。大小也是作对比的

一种方式，因此大小的一致性也是能够用来表示关系的。

快速的扫过下面的图片然后阅读后面的问题 …

     上面的这些元素哪些是彼此有关联的？是怎样关联的？

颜色的相似性（或者说是统一的对比）是最直接的表露关系的方式。这也是我们大脑理解我们周边的环境的时候，在我们的观念中首先表现出来的特征。式样和混乱能够混淆大小和形状，并且这些特征也仅仅只有微小的差别。但是色彩能够有效的过滤掉这些因素。因为这样一个事实（或许可能是因为这个事实的原因），色彩在自然界中是应对危险的有力的讯号工具。纵观历史，持有对色彩的有效的沟通性的观念，已经成为人类生存和其他有机体生存至关重要的一环。

好了，让我们从纯粹的幸存话题中转移开，来看看更多实在的运用相似性这一原则而在网页设计中起到有效作用的实例。

网页设计中相似性的作用

在设计网页和应用中，任何设计师的工作的一部分就是提供视觉提示给彼此相关联的连接元素。这样做就是为了使这些页面或者应用的用户在最后能够快速的注意到组织和理解设计师做过什么以便他们知道怎样使用和（连接元素）交流。

链接

    链接能够使网页和应用实现一些基本的内部交流。它们必须和周围的其它元素区分开来，而且它们必须稍微明显点 ——

高度或轻度明显（根据相关的情景）。但是鉴于链接分享的是一个普遍性的功能，它们通常需要彼此有相似性（再强调一次，根据情景）。

技术盲

一些读到页脚的人会注意到我将网页跳转到了WordPress。然而这个并没有通过我的预服务的可动类型来得到提升，很大程度上是因为有难度和有挫折，在我妥协之后我就已经尝试过提升MT。另外，我开始使用WordPress是在一年多以前在dougandcam.com这个我的另一个个人网站上。事实上，如果你去访问我的网页，你就会发现我的很多的设计和内容同这个网页的很相似。这种设计其实是一个机会能够详细的记录下我在D&C上做过什么，D&C是WordPress的摇篮，在这里（D&C）我能够了解到它的模板系统和句法机构是怎么样的。最后，我想说WordPress，因为我对它很熟悉，而且我已经迷恋上这种动态的类型 。无意冒犯我在Six Apart的朋友们，(我认为你)WordPressd 的发展似乎正在以更快速的步伐进行着。而且它更多的适合直线型的正像我现在所做的一样。

在上面的这个例子中，Douglas Bowman 已经将他的Atopdesign的页面的复印稿的链接样式设计成了蓝色，和他的整个灰色的主体复印稿不一致。通过这个相似性原则，我们中一些人谁能够快速的从灰色中分辨出蓝色，辨别出在这个页面中的所有文本都是链接文本。

    但是也没有必要将所有的链接都做成相似的样式就为了显得清晰。相似性原则在我们的观念中是相当的依赖于环境的。举个例子，AIGA这个网页就使用了很多种链接样式和颜色以及链接文本样式——这些所有的链接都指向一个特殊的目标。

在这儿（上面的图片），从上面的文本链接中，我们能够看到几种相似性。在样式、上下文、类别和目的上的差异。在边栏和主题之间，边栏的链接做了下划线和做成了蓝色以显示颜色的区别（甚至更多的差别上可以讲到冷暖色调的区别）。在主要内容中，有四种不同颜色的链接；有无下划线，正规和斜体，衬线和无衬线字体，特别加粗的和正常加粗的，全大写的和混合式的。

 这个例子中，重要的是什么？那就是无论怎样，除了许多链接颜色和式的不同，我们仍然能够快速的识别出是哪一类的（链接）。

 黄色，无下划线，粗体，衬线字体链接，是作为文章标题。

 灰色，全大写，下划线无衬线字体链接，到信息类别。

 红色，下划线链接到个人评论。

 灰色，下划线，混合大小的链接包括浅灰色的区域到一个网页类别的动作（在区域内定义）。

 有这些挺复杂也挺混乱的。但是除了复杂外还是有一些清晰的地方的。经过一些推论和思考之后，我确信你能想到所有种类的相似性原则的置换应用到链接上。

页面内容

当设计和制定网页样式内容的时候，我们要做的最重要的一份工作就是现实内容关系 —— 一些内容是怎样彼此相关的并且与其它一些内容元素不相关的。这样做能够凸显内容层级，用含蓄的结构替换视觉性的结构，一般情况是上下文交流。

     在上面的例子中，这个网页应用也就是37signals提供被使用一致的视觉主题所展示出来。最明显的是使用在图标上的分明的形状和色板。因此我们马上意识到它们的网页的APP在某些方面这四点信息也是类似的 。那么，果我们接着读到这些例子中的一条，说到Basecamp中最好的一个，我们马上就能假定（或确切的说）使用这种方式的所有的有样式并且已经配置好了的进入口也是靠这37signals 所提供的。这儿的样式和指示说明的统一性和种类或者上下文要保持一致。

得注意到这里的相似性是APP的信息和这个周边的内容是通过强烈的对比得到加强体现的。因为对比和相似没有必要从结构上通过周边的内容中的四个元素来显示它们之间的亲密度。

在上面的例子中，UX Magazine的主页（现在已经不存在这个网页了？？）使用相似性原则去连接所有出现在方框里，灰色边框的方框里的元素到文章上面。印象通过用户体验得到了提高：当光标提留在这些元素上方的时候这些所有的元素都有着一致的行为。（图片在下面）

     组织性

   感知相似性不仅能够帮助我们假定在布局中什么元素与另外一个元素相关，同时也能够展示基于浮动按钮的结构，下面就是一个范例：

上面的例子展示的是一网格没有明显分隔结构的元素。所有的这些元素似乎都是平等相关的。

   上面的例子清晰的表明了采用的是分栏的。因为形状是一致的，颜色在这儿就成了交流的桥梁。

   在上面的例子中，我们能够清晰的看到，这些元素被排列成了水平行。

上面的例子表明了元素被分成了两个类别，所有的灰色方框都是相关的和所有的棕色方框也是相关的(类似AIGA上面的例子)。这两个部分区分的很清楚，尽管这个例子 ——以及这部分之前的一个例子——都确实有相同的物理结构。

在这些例子中，颜色（或者更多从根本上，对比方面）已经奔使用来表明关系和创建结构。这些例子为网页设计师提供了清晰的课程。在这些课程中呈现出的事实是：物理结构对网页设计结构和上下文关系式没有必要的。相反的，一种可能是独自依靠一致性或者样式的对比和内容的范围来清晰度展示结构。我确信你能够从这些简单的例子中推想出许多的范例。

更简单的复合物

   像所有基本的想法和原则一样，这是非常简单的东西；与此同时，这个简单的原则有着几乎难以理解的深度。事实上，我们发现了简单概念中危险的一个；如果我们仅仅从简单的想法和基本的原则中想象一个简单的猜想。我们的努力将会永远得到笨重的机制和平庸的成果。

如果你定期的跟着我的文章，你就会意识到我花了很多的时间详细的说了很多根本性的东西。如果没有，那么，在根本原则上误解兴趣有一个建议就是设计必须保持根本性和简洁性。基本原则的目的就是去拓宽概念的深度，有少许的提升。没有根本原则的精深理解，设计师将会与所谓的深度渐行渐远。努力学习吧！