爱情诗句
当前位置:首页 > 爱情诗句 > 列表页

格式塔原理 [设计中的格式塔原理]

泥巴往事网  发布于:2018-08-15  分类: 爱情诗句 手机版

在视觉现象中,“整体大于部分之和”。格式塔理论包括一系列基本概念。格式塔原理几乎适用于所有与视觉有关的领域,但它与UI设计的关系尤其密切。

5条最实用的格式塔原则

1954年,这时离Wertheimer注视交叉道口的信号灯已经过去了几十年,Rudolf Arnheim 却根据自己对格式塔原理的理解写了一本书《艺术与视知觉》。设计师Carolann Bonner也曾指出 格式塔理论的5条最常用的原则:

1.相似法则

2.图形-背景关系法则

3.组织法则

4.闭合法则

5.连续法则

下面我们就来一个一个探讨这些法则。

1.相似法则

我们倾向于把外观相似的物体归为一类。

这对于极其注重信息传播时效网页设计而言是个非常有用的启示,你可以通过创建一系列外观近似的图形来迅速而直接地传达出它们的功能或目的。

设计中的格式塔原理1

正如在上图(设计工作室Green Chameleon的页面)中看到的,导航图标看起来虽然各不相同。但由于这些导航图标在颜色,大小,排列上的近似性,用户会将它们默认为同一级别的导航功能。

这一导航模式特别适用于组织竖排的导航图标,因为它可以在不牺牲导航功能的情况下,很直观地把各个导航图标的功能表达清楚。

设计师如果能善用这一法则的话,就可以更有效地传达信息和节约页面空间,从而为用户提供更好的使用体验。

2.图形-背景关系法则

在用户看来,页面中的元素要么是图形,要么是背景。Steven Bradley总结出了三种类型的图形-背景关系, 如下图所示:

设计中的格式塔原理2

·稳定型 — (左)可以很明显地看出,圆形是图像,而灰色空间是背景。

·可逆型— (中间)空间与背景可以相互转换,整个页面显得十分有灵动之感。

·模糊型— (模糊型) 图片与背景的界限模糊不清,观看者需要自行解释空间与背景的关系。

设计中的格式塔原理3

Moddeals网站采用是一种较为经典的图形-背景关系。当页面中的广告浮现时,网页的其余部分就变变暗,自动转化为背景。在这种情况下,用户依然可以拖动页面,然而广告还是会作为独立于背景的一部分停留于原处。

设计中的格式塔原理4

而电影宣传网站Tannbach处理图形-背景关系的手法就更为微妙。

为了突出电影中的人物关系,这个页面的设计师采用了模糊背景的方式来强化页面中的两个人物。通过对色彩和排版的巧妙运用,左上角的“互动区”成为了事实上的“一级图形”,而页面中的那一对男女则成为“次级图形”。这样一来,用户既能迅速辨认出页面中的人物,同时也能够理解如何使用网站的导航。

3.组织法则

即便是外观不同的东西,也可以通过一定的安排使它们更为接近。根据格式塔原理,至少有两种方法可以加强事物的相似性:

· 闭合状态将不同的事物集中置于一定的界限内,也会给观看者造成一种“一致”的印象。

· 密集状态即便是不同类型的事物,当距离很密集的时候也会具有某种似性。

设计中的格式塔原理5

上面这张Facebook的截图就体现了闭合状态与密集状态的作用。

整个正文部分–标题,照片,说明,评论等等—都是在同一个方框里,与灰色的背景形成对比,这一点既体现了闭合状态,也体现了图形-背景关系。在正文部分中,“赞”“评论”“分享”等功能选项离得很近,更不用说文字大小,颜色等细节的近似度了。

这么做还有一个理由,就是为了点击方便,因为这种方式可以把用户与供用户点击的目标之间的距离拉得更近。

4.闭合法则

前面我们提到过格式塔原理中的“具体化”现象,闭合法则其实就是这种现象的具体体现。我们的大脑能自动通过添加界线来补全不完整的图像。设计师可以利用这条法则去创作貌似残缺不全的图形,在这条法则的指导下,设计师还可以尽情创作出典雅的极简主义作品。

我们以下面Abduzeedo网站的截屏为例来具体分析一下。虽然构成页面的三部分内容之间并没有明确的界线,但图片的排列方式让观看者在大脑中自动形成了某种“网格”。因此,观看者会把页面内容看成是独立的三列,而不是一个混乱的整体。

设计中的格式塔原理6

闭合法则也适用于交互设计中。

设计中的格式塔原理7

设计师Carolann Bonner解释说,在Urban Outfitters页面中,通过利用闭合法则,他帮助用户省略了一些不必要的步骤,使“添加到购物袋”这一操作变得更为顺利。请点击GIF动画查看用户点击“添加到购物袋”之后的操作步骤:

1.原来“添加到购物袋”按钮中的文字会变成“已添加”。

2.“购物袋”旁边的物品数量会随之更新。

3.同时,购物袋选项下会出现一个小小的方形窗口,以视觉形式再次确认用户已购买的物品。

这样,用户不用再去打开购物车确认已添加的物品。通过省略操作步骤,整个互动过程变得更为顺畅愉快。

5.连续法则

这个法则认为,当用户的目光沿着一系列物体移动时,脑中会形成一个逐渐增强的“定势”。这个法则使设计中线条的地位显得格外重要。

设计中的格式塔原理8

在上面的图中,观看者会看到一条直线和一条曲线而不是一条弯曲的黑线和另一条弯曲的红线。这说明在视觉中,目光的延续性已经超过了颜色造成的差异。

这意味着,在用户看来,处在同一条直线或曲线上的物体是高度近似的。

这一点在导航按钮的设计中体现得再明显不过,用户一般会把同一个水平线上的图标默认为是同一个级别的操作。

下面的截图取自CreativeBloq, 网站,用户可以很直观地理解最上面的一排导航与网页内容的类型有关。而第二行的导航与内容的条目有关。网站不用专门指出它们的不同,因为根据延续法则,用户可以自己辨认得出它们的差异。

设计中的格式塔原理9

结语

理解和掌握格式塔法则能让你更有效地控制网页的设觉效果,从而创造出 风格更和谐的网页设计, 同时也能更有效地将你的信息传达给用户。我建议你在自己的设计实践中综合运用上面提到的各种法则,你会发现,不久之后,你的网页设计水准会跃上一个新层次。

本文已影响

格式塔原理 [设计中的格式塔原理]