怎样通过格式塔原理帮助网页设计
在视觉现象中,“整体大于部分之和”。格式塔理论包括一系列基本概念。格式塔原理几乎适用于所有与视觉有关的领域,但它与UI设计的关系尤其密切。
5条最实用的格式塔原则
1954年,这时离Wertheimer注视交叉道口的信号灯已经过去了几十年,Rudolf Arnheim 却根据自己对格式塔原理的理解写了一本书《艺术与视知觉》。设计师Carolann Bonner也曾指出 格式塔理论的5条最常用的原则:
1.相似法则
2.图形-背景关系法则
3.组织法则
4.闭合法则
5.连续法则
下面我们就来一个一个探讨这些法则。
1.相似法则
我们倾向于把外观相似的物体归为一类。
这对于极其注重信息传播时效网页设计而言是个非常有用的启示,你可以通过创建一系列外观近似的图形来迅速而直接地传达出它们的功能或目的。
正如在上图(设计工作室Green Chameleon的页面)中看到的,导航图标看起来虽然各不相同。但由于这些导航图标在颜色,大小,排列上的近似性,用户会将它们默认为同一级别的导航功能。
这一导航模式特别适用于组织竖排的导航图标,因为它可以在不牺牲导航功能的情况下,很直观地把各个导航图标的功能表达清楚。
设计师如果能善用这一法则的话,就可以更有效地传达信息和节约页面空间,从而为用户提供更好的使用体验。
2.图形-背景关系法则
在用户看来,页面中的元素要么是图形,要么是背景。Steven Bradley总结出了三种类型的图形-背景关系, 如下图所示:
·稳定型 — (左)可以很明显地看出,圆形是图像,而灰色空间是背景。
·可逆型— (中间)空间与背景可以相互转换,整个页面显得十分有灵动之感。
·模糊型— (模糊型) 图片与背景的界限模糊不清,观看者需要自行解释空间与背景的关系。
Moddeals网站采用是一种较为经典的图形-背景关系。当页面中的广告浮现时,网页的其余部分就变变暗,自动转化为背景。在这种情况下,用户依然可以拖动页面,然而广告还是会作为独立于背景的一部分停留于原处。
而电影宣传网站Tannbach处理图形-背景关系的手法就更为微妙。
为了突出电影中的人物关系,这个页面的设计师采用了模糊背景的方式来强化页面中的两个人物。通过对色彩和排版的巧妙运用,左上角的“互动区”成为了事实上的“一级图形”,而页面中的那一对男女则成为“次级图形”。这样一来,用户既能迅速辨认出页面中的人物,同时也能够理解如何使用网站的导航。
3.组织法则
即便是外观不同的东西,也可以通过一定的安排使它们更为接近。根据格式塔原理,至少有两种方法可以加强事物的相似性:
· 闭合状态将不同的事物集中置于一定的界限内,也会给观看者造成一种“一致”的印象。
· 密集状态即便是不同类型的事物,当距离很密集的时候也会具有某种似性。
上面这张Facebook的截图就体现了闭合状态与密集状态的作用。
整个正文部分–标题,照片,说明,评论等等—都是在同一个方框里,与灰色的背景形成对比,这一点既体现了闭合状态,也体现了图形-背景关系。在正文部分中,“赞”“评论”“分享”等功能选项离得很近,更不用说文字大小,颜色等细节的近似度了。
这么做还有一个理由,就是为了点击方便,因为这种方式可以把用户与供用户点击的目标之间的距离拉得更近。
4.闭合法则
前面我们提到过格式塔原理中的“具体化”现象,闭合法则其实就是这种现象的具体体现。我们的大脑能自动通过添加界线来补全不完整的图像。设计师可以利用这条法则去创作貌似残缺不全的图形,在这条法则的指导下,设计师还可以尽情创作出典雅的极简主义作品。
我们以下面Abduzeedo网站的截屏为例来具体分析一下。虽然构成页面的三部分内容之间并没有明确的界线,但图片的排列方式让观看者在大脑中自动形成了某种“网格”。因此,观看者会把页面内容看成是独立的三列,而不是一个混乱的整体。
闭合法则也适用于交互设计中。
设计师Carolann Bonner解释说,在Urban Outfitters页面中,通过利用闭合法则,他帮助用户省略了一些不必要的步骤,使“添加到购物袋”这一操作变得更为顺利。请点击GIF动画查看用户点击“添加到购物袋”之后的操作步骤:
1.原来“添加到购物袋”按钮中的文字会变成“已添加”。
2.“购物袋”旁边的物品数量会随之更新。
3.同时,购物袋选项下会出现一个小小的方形窗口,以视觉形式再次确认用户已购买的物品。
这样,用户不用再去打开购物车确认已添加的物品。通过省略操作步骤,整个互动过程变得更为顺畅愉快。
5.连续法则
这个法则认为,当用户的目光沿着一系列物体移动时,脑中会形成一个逐渐增强的“定势”。这个法则使设计中线条的地位显得格外重要。
在上面的图中,观看者会看到一条直线和一条曲线而不是一条弯曲的黑线和另一条弯曲的红线。这说明在视觉中,目光的延续性已经超过了颜色造成的差异。
这意味着,在用户看来,处在同一条直线或曲线上的物体是高度近似的。
这一点在导航按钮的设计中体现得再明显不过,用户一般会把同一个水平线上的图标默认为是同一个级别的操作。
下面的截图取自CreativeBloq, 网站,用户可以很直观地理解最上面的一排导航与网页内容的类型有关。而第二行的导航与内容的条目有关。网站不用专门指出它们的不同,因为根据延续法则,用户可以自己辨认得出它们的差异。
结语
理解和掌握格式塔法则能让你更有效地控制网页的设觉效果,从而创造出 风格更和谐的网页设计, 同时也能更有效地将你的信息传达给用户。我建议你在自己的设计实践中综合运用上面提到的各种法则,你会发现,不久之后,你的网页设计水准会跃上一个新层次。
格式塔美学是什么?
这种事还是自己弄比较好吧,给你介绍几本资料书:朱光潜谈美学 美学散步 西方美学史 中国美学十五讲这些都是精品书,就算自己不看了,留给周围的人或者后人看,也是一件大功德的事.pirate28O1!…
格式塔是什么?
格式塔是一个德文单词的音译.那个词翻译成汉语之后的意思是具有一定内部结构的整体.在汉语中没有完全对应的词汇,所以就直接用音译了.有些人进行意译的时候把它译作完形.格式塔作为一个概念是德国的一个心理学流派提出来的,那个学派就叫做格式塔学派,楼上提到的阿恩海姆就是格式塔学派的一个重要代表人物.异质同构理论是格式塔心理学的一个重要观点,但楼上说的异质同构是格式塔心理学的核心这不够准确,格式塔心理学最主要的代表人物也不是阿恩海姆,而是魏特海默(也有译成韦特默的).
到底什么是UI设计规范
UI 设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计,也叫界面设计。UI 设计分为实体 UI 和虚拟UI,互联网说的 UI 设计是虚拟 UI, UI 即User Interface(用户界面)的简称。
UI 设计师的职能大体包括三方面:一是图形设计,软件产品的产品“外形”设计。二是交互设计,主要在于设计软件的操作流程、树状结构、操作规范等。三是用户测试/研究,这里所谓的“测试”,其目标恰在于测试交互设计的合理性及图形设计的美观性,主要通过以目标用户问卷的形式衡量 UI 设计的合理性。
UI设计目前的前景还是很不错的,很多企业都缺少 UI设计师。而且可以看到的是,现在社会的发展,更多的智能机和智能机器人研发出现,这些都离不开UI 设计师。所以说 UI 设计的是很有前途的,是不会失业的。而且 UI 设计门槛不高,要入门也不难的。
从工作内容来说,UI 设计在当前的互联网领域、科技领域可以说无处不在,
好的 UI 设计能够明显提升用户的使用体验,从而给产品带来更多的附加值,所以UI 设计对于互联网产品是非常重要的。目前 UT 设计通常分为两个大的工作方向,一个是交互设计,另一个是视觉设计。
总的来说,UI 设计相比较于编程而言,还是非常适合大众学的并且就业前景很广阔。学完 UI 设计,能获得一份稳定而又不失乐趣的工作,同时有利于追求更高品质的生活,在艺术领域可以获得更多的启迪。
如何选择UI 界面布局样式
从七个方面说明UI界面应注意的一些常见的问题.一、空间的摆放一致.二、UI布局尽量符合格式塔原理中的接近性,即相互靠近的控件看起来尽量使一组.三、用结构来提高用户浏览长数字的能力,比如关于金额的表示,一般为2,548,125.00…
UI界面设计要注意哪些问题(必看) –学UI网
一、空间的摆放一致. 二、UI布局尽量符合格式塔原理中的接近性,即相互靠近的控件看起来尽量使一组. 三、用结构来提高用户浏览长数字的能力,比如关于金额的表示,一般为2,548,125.00元,其中的“,”符号的分割,方便用户清晰快速…
格式塔与图式有什么区别?
“格式塔”(Gestalt)一词具有两种涵义.一种涵义是指形状或形式,亦即物体的性质.例如,用“有角的”或“对称的”这样一些术语来表示物体的一般性质;以示三角形(在几何图形中)或时间序列(在曲调中)的一些特性.在这…
到底如何看待Material Design设计
“Material”中文译为“材料”,它代表着物质的组成成分,如果放在手机系统设计中,这个词会让人很容易的联想到手机系统的界面风格设 计,比如拟物和扁平风格.不过此次谷歌的Materi…
UI设计如何巧妙的利用视错觉
表象和格式塔有什么区别?
格式塔德文单词音译词翻译汉语意思具定内部结构整体汉语没完全应词汇所直接用音译些进行意译候译作完形格式塔作概念德理流派提派叫做格式塔派楼提阿恩海姆格式塔派重要代表物异质同构理论格式塔理重要观点楼说异质同构格式塔理核够准确格式塔理主要代表物阿恩海姆魏特海默(译韦特默)