常见问题金海电子
新闻在线
当前位置:金海电子 >> 新闻在线 >> 常见问题 >> 浏览文章
常见问题

设计中的格式塔原理

标签:设计,中的,格式,原理 发布时间:2024年04月16日 阅读:485次
14

在视觉征象中,“团体大于部分之和”。格式塔理论包括一系列基本概念。格式塔原理几乎适用于所有与视觉有关的领域,但它与UI设计的关系尤其密切。
5条最实用的格式塔原则
1954年,这时离Wertheimer谛视交叉道口的旌旗灯号灯已经曩昔了几十年,Rudolf Arnheim 却根据本身对格式塔原理的理解写了一本书《艺术与视知觉》。设计师Carolann Bonner也曾指出 格式塔理论的5条最常用的原则:
1.相似法则
2.图形-背景关系法则
3.组织法则
4.闭正当则
5.延续法则
下面我们就来一个一个探究这些法则。

1.相似法则
我们倾向于把表面相似的物体归为一类。
这对于极其看重信息传播时效网页设计而言是个特别很是有效的启示,你可以通过创建一系列表面近似的图形来敏捷而直接地传达出它们的功能或目的。

设计中的格式塔原理

正如在上图(设计工作室Green Chameleon的页面)中看到的,导航图标看起来虽然各不雷同。但因为这些导航图标在颜色,大小不锈钢垃圾桶,排列上的近似性,用户会将它们默认为统一级别的导航功能。这一导航模式分外适用于组织竖排的导航图标,由于它可以在不捐躯导航功能的情况下,很直观地把各个导航图标的功能表达清楚。
设计师假如能善用这一法则的话,就可以更有用地传达信息和节约页面空间,从而为用户提供更好的使用体验。

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

设计中的格式塔原理

·稳固型 — (左)可以很显明地看出,圆形是图像,而灰色空间是背景。
·可逆型— (中心)空间与背景可以相互转换,整个页面显得十分有灵动之感。
·模糊型— (模糊型) 图片与背景的界限模糊不清网站seo优化,观看者必要自行诠释空间与背景的关系。

设计中的格式塔原理

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

设计中的格式塔原理

而电影宣传网站Tannbach处理图形-背景关系的手法就更为玄妙。
为了凸起电影中的人物关系,这个页面的设计师采用了模糊背景的体例来强化页面中的两小我物。通过对色彩和排版的巧妙运用,左上角的“互动区”成为了事实上的“一级图形”,而页面中的那一对男女则成为“次级图形”。如许一来,用户既能敏捷辨认出页面中的人物,同时也能够理解如何使用网站的导航。

3.组织法则
即便是表面不同的东西,也可以通过肯定的安排使它们更为接近。根据格式塔原理,至少有两种方法可以增强事物的相似性:
· 闭合状况将不同的事物集中置于肯定的界限内,也会给观看者造成一种“同等”的印象。
· 密集状况即便是不同类型的事物,当距离很密集的时候也会具有某种似性。

设计中的格式塔原理

上面这张Facebook的截图就表现了闭合状况与密集状况的作用。
整个正文部分–题目,照片,说明,评论等等—都是在统一个方框里,与灰色的背景形成对比,这一点既表现了闭合状况淄博网站建设,也表现了图形-背景关系。在正文部分中,“赞”“评论”“分享”等功能选项离得很近,更不用说笔墨大小,颜色等细节的近似度了。
这么做还有一个理由,就是为了点击方便,由于这种体例可以把用户与供用户点击的目标之间的距离拉得更近。

4.闭正当则
前面我们提到过格式塔原理中的“详细化”征象,闭正当则其实就是这种征象的详细表现。我们的大脑能主动通过添加界线来补全不完备的图像。设计师可以行使这条法则去创作貌似残缺不全的图形,在这条法则的引导下,设计师还可以尽情创作出典雅的极简主义作品。
我们以下面Abduzeedo网站的截屏为例来详细分析一下。虽然构成页面的三部分内容之间并没有明确的界线,但图片的排列体例让观看者在大脑中主动形成了某种“网格”。因此,观看者会把页面内容看成是自力的三列,而不是一个紊乱的团体。

设计中的格式塔原理

闭正当则也适用于交互设计中。

设计中的格式塔原理

设计师Carolann Bonner诠释说,在Urban Outfitters页面中,通过行使闭正当则,他帮助用户省略了一些不需要的步骤,使“添加到购物袋”这一操作变得更为顺利。请点击GIF动画查看用户点击“添加到购物袋”之后的操作步骤:
1.原来“添加到购物袋”按钮中的笔墨会变成“已添加”。
2.“购物袋”旁边的物品数量会随之更新。
3.同时,购物袋选项下会出现一个小小的方形窗口,以视觉情势再次确认用户已购买的物品。
如许,用户不用再去打开购物车确认已添加的物品。通过省略操作步骤南宁代办公司,整个互动过程变得更为顺畅兴奋。

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

设计中的格式塔原理

在上面的图中,观看者会看到一条直线和一条曲线而不是一条弯曲的黑线和另一条弯曲的红线。这说明在视觉中,目光的连续性已经超过了颜色造成的差异。
这意味着,在用户看来,处在统一条直线或曲线上的物体是高度近似的。
这一点在导航按钮的设计中表现得再显明不过,用户一样平常会把统一个水平线上的图标默认为是统一个级别的操作。
下面的截图取自CreativeBloq, 网站,用户可以很直观地理解最上面的一排导航与网页内容的类型有关。而第二行的导航与内容的条款有关。网站不用专门指出它们的不同,由于根据连续法则,用户可以本身辨认得出它们的差异。

设计中的格式塔原理


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

电话:4000-340-360 传真:4000-340-360 邮政编码:215000
地址:南京市 旧学前45号 中联大厦 405室