就格式塔原则而言，相似性原则似乎是最容易掌握的原则之一。它指出相似的事物被认为比不相似的事物更相关。很简单吧？然而，作为一名web设计师，你需要熟悉元素相似的所有方式，以便你可以在任何给定的情况下运用合适的方法。这是因为不同的相似性模式建立基础不同。有些交际性很强，有的却相对比较弱...还有要考虑的大背景。相似性原则似乎并不像我们想象的那么简单。
相似性是一种强大的交流机制。 它的力量来自于这样一个事实，即它是the most fundamental element of meaning: contrast的对应词。在格式塔原则系列的第2部分，Let's研究相似性原则，以及如何将它作为一种交流机制应用到Web设计工作中。
基本原理 Fundamentals
可以通过各种方式将元素视为相似并因此相互关联。举几个🌰，比如颜色，大小，形状，纹理，尺寸和方向。 为了说明其中一些相似性模式，let's做一些基本评估：
Q：上图显示的元素是否相互关联？
由于上图各元素之间几乎没有一致性，几乎不可能有人会察觉到任何显著的相似性。因此，这些元素不会被认为是以某种方式相互关联。
更容易理解的一些相似性：
Q：上图哪些元素看似相互关联？ How？
上面的许多元素之间都有不同，但也有相似之处。 如果要求对上述元素进行分类，几乎所有人都会说，按形状是最强交际的分类。 从形状上看，似乎正方形彼此相关，圆形彼此相关。 需要注意的是，在这个例子中，是形状，而非接近或大小，提供了最强交际。
Let's 稍微改变一下，看看我们的认知是如何被引导的。
Q：上图哪些元素看似相互关联？ How？
你很可能已确定大方块彼此相关，而小方块彼此相关。 大小是一种提供对比度的方法，因此可以利用大小的一致性来表示关系。
快速浏览下图，然后阅读随后的问题...
Q：上图哪些元素看似相互关联？ How？
颜色的相似性（或一致的对比度）是表示关系的最有力方式。这也是当我们大脑在理解周围环境时，首先感知到的特征。模式和混乱会掩盖大小和形状，这些特征可能只有微小的变化，但颜色可以有效地穿透这些因素。由于这一事实（或可能作为这一事实的原因），色彩在自然界中经常被用作一种强大的危险传达工具。纵观历史，对色彩交流的清晰认识对于人类和其他生物的生存至关重要。
Okay，让我们超越单纯的生存之道，用这个原则来探讨更多有关Web设计有效性的实际问题。
相似性在Web设计中的影响力 The power of similarity in web design
在设计网页和应用程序时，设计师的工作之一就是提供可视化的线索，以了解哪些界面元素相互关联。 这样做是为了使这些页面或应用程序的最终用户或访客可以快速感知组织、了解设计者创建的内容，从而明白如何使用或与之交互。
链接Links
链接使得web页面和应用程序能够内嵌一些基本交互。因此，必须将它们与周围的其他元素区分开来，它们必须根据相关的上下文具有某种程度的显著性——明显或是稍显。但由于链接共用一个功能，所以它们通常需要互相相似（同样，根据上下文）。
在上面的示例中，Douglas Bowman将Stopdesign网站的副本中的链接样式设置为蓝色，与正文副本的整体灰色形成了对比。 根据相似性原则，我们这些能够区分蓝色和灰色的人会自动地认识到，所有以这种样式设置的文本都是链接文本。
但并不是所有的链接都必须采用相似的样式才能保持清晰。在我们的认知中相似性原则与上下文是有相当有关联。例如，AIGA网站使用各种链接样式和颜色以及链接文本样式，全部是为了特定目的：
在这里（上图），我们可以看到文本链接中几种不同类型的相似性。 样式上的差异传达了语境，类别或目的上的不同。 侧边栏中的链接是蓝色并带有下划线，这使得侧边栏和主体之间形成颜色对比（且是暖色/冷色差异的更显著的对比）。 在主要内容中，有4种颜色的链接。 带和不带下划线，常规和斜体，衬线和无衬线字体，粗体和正常粗细，全大写和大小写混合单词。
但重要的是，在这个例子中，尽管链接颜色和样式有很多变化，我们还是可以快速感知类别提示：
·橙色，无下划线，粗体，衬线字体的链接是文章标题
·浅灰色，全大写，带下划线无衬线字体的链接是信息类别
·褐红色，带下划线的链接是人物或评论
·浅灰色区域内的深灰色，带下划线，大小写混合的链接是站点类别（在区域中定义）内的操作
这一切是复杂且繁琐的，但也还是有一定程度的交流清晰度。 经过一些延伸和考虑，我确定您会想到应用于链接...和其他事物的相似性原理的各种排列。我相信你能联想到将相似性原则应用于链接…和其他事物的各种排列组合。
页面内容Page content
在设计网页内容及其样式时，要做的最重要的工作之一就是展示内容关系，即某些内容组件之间如何相互关联，而与其他内容元素之间较少关联。 这可以用来强化内容层次结构，用隐含的结构替换视觉结构，并传达上下文。
在上面的示例中，37signals提供的web apps在这里使用一致的视觉主题显示。最引人注意的是具有独特形状和调色板的图标，因此我们立即意识到有关其web apps的这四个信息以某种方式相关。如果我们阅读其中一个例子，比如第一个例子Basecamp，那么我们可以立即假设（正确地）以这种方式设置样式和配置的所有其他条目也是37signals提供的web应用程序。在这里，样式和展示的一致性意味着类别或上下文的一致性。
请注意，apps的信息与周围内容的强烈对比进一步增强了这种相似性。由于这种对比和相似性，就没有必要在结构上把这四个元素与周围内容进行“隔离”来显示它们的相关性。
在上面的例子中，UX杂志（现已不存在？）的主页使用了相似性原则来传达所有出现在正方形灰色边框框中的内容都是文章的引用（链接）。用户体验进一步增强了这种印象：当光标悬停在这些元素上时，这些元素的行为都是一致的（下图）。
组织Organization
感知相似性不仅有助于我们假设布局中哪些元素彼此相关，而且还暗示了基于显现的模式的结构，如以下所示：
上面的例子显示了一个元素网格，其中没有明显的分区结构。所有的元素似乎都是同等相关的。
上面的这个例子清楚地表明这个结构是列式的。由于形状是一致的，色彩是这里的交际特征。
在上面的这个例子中，很明显元素按行排列。
上面的例子显示出元素被分为两类，其中灰色方块相关，棕色方块相关（类似于上面的AIGA例子）。即使这个例子和所有先前示例有完全相同的物理结构，这两个部分是明显不同的。
在这些例子中，颜色（或者更基础讲，对比度）被用来暗示关系并创造结构。这些例子为web设计师提供了明确的经验。在这些经验中有一个事实是，物理结构对于描述页面结构和内容关系不是必需的。反而可能仅通过内容的样式和尺寸的一致性或对比度来清楚地暗示结构。我相信你可以从这些简单的例子中延伸推断出许多经验。
更简单的复杂性More simple complexity
像所有基本思想或原则一样，这是非常简单的内容。 但这个简单的原则却具有不可思议的深度。事实上，我们发现了简单概念的危险之一：如果我们仅从简单思想或基本原理进行简单推断，那我们的努力将永远沦为拙劣的机制和毫无新意的结果。
如果你经常看我的文章，你就会知道我花了很多时间在基础知识上。但是，不要把对基本原理的兴趣误认为设计必须保持基本化或简单化。基本原理的目的是打开探索概念深度、感知深层次细节的大门。如果对（许多）基本原理没有敏锐的理解，设计师将永远无法深入这些领域。 Study hard.
本系列的下一部分将涉及一些原则，这些原则定义了我们设计的物理页面结构如何创建直接和间接交流。
网友评论