格式塔感知原则-2:相似性

就格式塔原则而言,相似性原则似乎是最容易掌握的原则之一。它指出相似的事物被认为比不相似的事物更相关。简单吧?然而,作为一名网页设计师,你需要熟悉元素相似的所有方式,这样你就可以在任何给定的情况下使用合适的方法。这是因为不同的相似模式有不同的基础。有些人非常善于交际,而有些人则相对较弱...而且有大背景要考虑。相似原理似乎没有我们想象的那么简单。

相似性是一种强大的交流机制。?它的力量来自于这样一个事实,即它是意义的最基本元素的对应词:对比。在格式塔原则系列的第二部分,我们来研究一下相似性原则,以及如何将它作为一种交流机制应用在网页设计中。

元素可以被认为是相似的,因此以各种方式相互关联。举几个例子?,如颜色、大小、形状、质地、大小、方向等。为了说明这些相似性模式,让我们进行一些基本的评估:

问:上面显示的元素彼此相关吗?

因为上图中的元素之间几乎没有一致性,所以几乎不可能有人注意到任何显著的相似性。因此,这些元素不被认为以某种方式彼此相关。

一些更容易理解的相似之处:

问:上图中的哪些元素看起来是相互关联的?怎么会?

以上很多要素是不同的,但也有相似之处。如果被要求对以上要素进行分类,几乎所有人都会说,形是最具交流性的分类。从形状上看,好像是正方形相互关联,圆形相互关联。应当注意,在这个例子中,提供最强通信的是形状,而不是接近度或大小。

我们稍微改一下,看看我们的认知是怎么被引导的。

问:上图中的哪些元素看起来是相互关联的?怎么会?

你大概已经确定了大方块相互关联,小方块相互关联。大小是一种提供对比的方式,所以大小的一致性可以用来表达关系。

快速浏览下面的图片,然后阅读下面的问题。...

问:上图中的哪些元素看起来是相互关联的?怎么会?

颜色相似(或一致的对比)是表达这种关系的最有力的方式。这也是我们的大脑在理解周围环境时感知到的第一个特征。图案和混乱会掩盖大小和形状,这些特征可能只会发生微小的变化,但颜色可以有效地穿透这些因素。因为这个事实(或者可能因为这个事实),颜色经常被用作传达自然界危险的有力工具。纵观历史,对颜色交流的清晰理解对于人类和其他生物的生存至关重要。

好了,让我们超越简单的生存之道,用这个原理来讨论更多关于网页设计有效性的实际问题。

在设计网页和应用程序时,设计师的工作之一是提供视觉线索,以了解哪些界面元素是相互关联的。这样做是为了让这些页面或应用程序的最终用户或访问者能够快速感知组织并理解设计者创建的内容,从而理解如何使用它们或与它们进行交互。

链接链接

链接使网页和应用程序能够嵌入一些基本的交互。因此,它们必须与周围的其他元素相区别,并且根据相关的上下文,它们必须具有某种程度的意义-明显或稍微明显。但是由于链接* * *共享一个功能,它们通常需要彼此相似(同样,根据上下文)。

在上面的示例中,Douglas Bowman将Stopdesign网站副本中的链接样式设置为蓝色,与文本副本的整体灰色形成对比。根据相似性原理,我们这些能够区分蓝色和灰色的人会自动意识到,所有以这种样式设置的文本都是链接文本。

但并不是所有的链接都必须采用相似的风格才能保持清晰。在我们的认知中,相似性原则与语境有很大关系。例如,AIGA网站使用各种链接样式和颜色以及链接文本样式,都是为了特定的目的:

在这里(上图),我们可以看到文本链接中几种不同类型的相似之处。风格的不同传达了上下文、类别或目的的不同。侧边栏中的链接是蓝色的,并带有下划线,这使得侧边栏和主体之间形成了颜色对比(以及更显著的暖/冷颜色差异的对比)。在主要内容中,有四种颜色的链接。带下划线和不带下划线的单词,常规和斜体,衬线和无衬线字体,粗体和正常粗细,所有大写和大小写混合的单词。

但重要的是,在这个例子中,虽然链接颜色和样式有很多变化,但我们仍然可以快速感知类别提示:

橙色、无下划线、粗体和衬线字体的链接是文章的标题。

浅灰色的链接,所有大写和下划线的无衬线字体都是信息类别。

栗色、带下划线的链接是人或评论。

浅灰色区域中的深灰色、下划线和混合大小写链接是站点类别(在该区域中定义)内的操作。

这一切都是复杂繁琐的,但还是有一定程度的沟通清晰。经过一些扩展和考虑,我相信你会想到应用于链接的相似性原则的各种排列...和其他事情。我相信你能想到将相似性原理应用于链接的各种排列和组合…以及其他事物。

页面内容页面内容

在设计网页内容及其风格时,最重要的任务之一是显示内容关系,即一些内容组件如何相互关联,而较少显示与其他内容元素的关联。这可以用来加强内容层次,用隐含结构代替视觉结构,传达上下文。

在上面的例子中,37signals提供的web应用程序以一致的视觉主题显示在这里。最引人注目的是具有独特形状和调色板的图标,因此我们立即意识到,关于其web应用程序的这四条信息在某种程度上是相关的。如果我们阅读其中的一个例子,比如第一个例子Basecamp,那么我们可以立即假设所有其他以这种方式设计和配置的项目也是37signals提供的web应用程序。在这里,风格和呈现的一致性意味着范畴或语境的一致性。

请注意,应用程序的信息与周围内容之间的强烈对比进一步增强了这种相似性。由于这种对比和相似性,没有必要将这四个元素从周围的内容中“隔离”出来以显示它们的相关性。

在上面的例子中,UX杂志(已经不存在了?)利用相似性原理来传达所有出现在正方形灰色方框中的内容都是文章的引用(链接)。用户体验进一步增强了这样的印象:当光标悬停在这些元素上时,它们的行为是一致的(如下)。

组织机构

感知相似性不仅有助于我们假设布局中的哪些元素是相互关联的,还暗示了基于外观的图案结构,如下所示:

上面的例子展示了一个没有明显分区结构的元素网格。所有的元素似乎都是同等相关的。

上面的例子清楚地表明这种结构是圆柱形的。因为形状一致,所以颜色是这里的交际特征。

在上面的例子中,很明显元素是按行排列的。

上面的例子显示了元素被分为两类,其中灰色方块是相关的,棕色方块是相关的(类似于上面的AIGA例子)。尽管这个例子和前面的例子有完全相同的物理结构,但这两个部分明显不同。

在这些例子中,颜色(或者更基本的,对比度)被用来暗示关系和创造结构。这些例子为网页设计师提供了清晰的体验。在这些体验中,有一个事实是,物理结构并不是描述页面结构和内容关系的必要条件。相反,结构可能仅通过内容的风格和大小的一致性或对比来清楚地暗示。我相信你可以从这些简单的例子中推断出许多经验。

更简单的复杂性更简单的复杂性

像所有的基本思想或原则一样,这是一个非常简单的内容。但是这个简单的原则有着难以置信的深度。事实上,我们已经发现了简单概念的危险之一:如果我们简单地从简单的想法或基本原则中进行推断,我们的努力将永远是糟糕的机制和毫无创意的结果。

如果你经常看我的文章,你会知道我在基础上花了很多时间。然而,不要把你对基本原理的兴趣误认为需要保持设计的基本或简化。基本原理的目的是打开探索概念深度和感知深层细节的大门。没有对(许多)基本原理的敏锐理解,设计师永远无法深入这些领域。?好好学习。

本系列的下一部分将介绍一些定义我们设计的物理页面结构如何创建直接和间接通信的原则。

格式塔知觉原理-1:图形-背景关系

原文?格式塔原理1:图形/背景