格式塔原理举例

格式塔原理举例

【篇一:格式塔原理举例】

有些理论性的知识,每次阅读,都有新的感受。正所谓书读百遍,

其意自己见。被理论洗脑,也是件极其有趣的事情。理论知识能解

决我们凭感觉评判一个设计好坏的问题。比如我们常评价说一个页

面太散。甚至单单觉着看着不舒服。却无法告诉设计者改进的方法。我们先来回顾一下格式塔相关的一些理论知识。下面的内容来源于

网络,整理于此,有空常看看。

格式塔是德文gestalt的译音,意思就是“模式、形状、形式”。格式

塔是一个著名的心理学派,基于这个学派的格式塔视觉原理还有一

个小名:完形心理学。核心理论:人们总是先看到整体,然后再去

关注局部,人们对事物的整体感受不等于局部感受的加法,视觉系

统总是在不断的试图在感官上将图形闭合。

1.在一个格式塔(即一个单一视场,或单一的参照系)内,眼睛的能力

只能接受少数几个不相关联的整体单位。这种能力的强弱取决于这

些整体单位的不同与相似,以及它们之间的相关位置。

2.格式塔中的视觉关系

和谐 harmony

变化 changes

冲突 conflict

混乱 confusion

和谐 harmony

组成整体的每个局部,它们的形状、大小、颜色趋近一致,并且排

列有序,这时产生整体视觉感官就是“和谐”。

和谐来自所有局部的感官接近

变化 changes

在“和谐”的基础上,局部产生了形状、大小、颜色的变化,但这种

变化没有改变所有局部的同一性质,这就是“变化”。

变化来自和谐基础上局部的外观改变

冲突 conflict 的来源

在“和谐”的基础上,局部不仅仅产生了形状、大小、颜色的“变化”,

而且产生了性质上的改变,与整体中的其他局部“格格不入”。

冲突来自某个局部与整体其他部分性质的格格不入

混乱 confusion 的来源

整体当中包含太多性质不相关的局部,视觉系统很难判断出整体到

底是什么,这个时候就产生了“混乱”。

大量局部互不相干,让视觉系统看不懂整体,无法接受整体,你能

马上说出图中是什么嘛

格式塔视觉流程

眼脑作用是一个不断组织、简化、统一的过程,正是通过这一过程,才产生出易于理解、协调的整体。

观看这张图的时候,你先看到了什么,后看到了什么

下面我们举例讲解格式塔视觉原理的具体应用。

格式塔视觉原理的应用

官方:格式塔学派最基本的规则是

蕴涵律(pr??gnanz)

闭合律law of closure

相似律law of similarity

相似律接近律law of proximity

对称律law of symmetry

连续律law of continuity

格式塔原理在视觉设计中的应用形式包括:删除、贴近、结合、接触、重合、格调与纹理、闭合。下面我们详细举例描述。

删除

删除就是从构图形象中排除不重要的部分,只保留那些绝对必要的

组成部分,从而达到视觉的简化。

去掉那些与保留内容无关的设计元素

简洁来自于删除原理,视觉的删除来自对内容的精选;判断那些是必

要内容,哪些是非必要内容,保留与必要内容有关的视觉单元,其

他的可以删除。

贴近

当各个视觉单元一个挨着一个,彼此靠得很近的时候,可以用“贴近”这个术语来描绘这种状态,通常也把这种状态看作归类。

海报的设计使用贴近原理,将

信息分组,让人感觉通透、有条理、不拥挤。

将表达同一信息,或者意义相近的设计元素,按照贴近关系进行设计;视觉系统可以非常容易的区分各个部分的内容,突出了整体中的

小集合,让重点内容更被关注。设计师根据贴近原理给页面的视觉

单元以4个比较大的集合那些老练的视觉设计师非常善于使用辅助

线和栅格系统对复杂的设计元素进行分类,最后达到视觉的统一。

接合

在构图中,结合就是指单独的视觉单元完全联合在一起,无法分开。这可以使原来并不相干的视觉形象自然而然地关联起来。

将熊猫的黑眼圈与狼的脸结合在一起,实现异形同构

简单的说:“结合”就是把一块嚼过的口香糖用电熨斗熨在衣服上,

让它们无法分离。

比如常用的一种设计手法——异形同构:把两种或几种不同的视觉

形象结合在一起,在视觉表达上自然而然地从一个视觉语义延伸到

另一个视觉语义。将a的标志性特征嫁接到b上,改变b的非特征

性特性。

接触

接触是指单独的视觉单元无限贴近,以至于它们彼此粘连。这样在

视觉上就形成了一个较大的、统一的整体。接触的形体有可能丧失

原先单独的个性,变得性格模糊。

溅落的饮料与杯子接触,融合为一个视觉整体

接触与结合的区别是:接触的两个视觉单元仍然是相对独立的,而

结合的两个视觉单元再也无法分开。视觉设计中相互接触的不同形

状的单元形在视觉感受上是如此相近,在视觉上融为一体(而实际上

是相互独立的)。

重合

“重合”是“结合”的一种特殊形式。

绝对伏特加的广告,将品牌与各种事物进行了视觉重合

如果所有的视觉单元在色调或纹理等方面都是不同的,那么,区分

已被联结的原来各个视觉单元就越容易;相反,如果所有的视觉单元

在色调或纹理等方面都是一样的,那么,原来各个视觉单元的轮廓

线就会消失,从而形成一个单一的重合的形状。

重合各个不同视觉形象的时候,如果我们看到这些视觉形象的总体

外形具有一个共同的、统一的轮廓,那么这样的重合成功了。

格调与纹理

“格调”与“纹理”是由大量重复的单元构成的。两者的主要区别在于

视觉单元的大小或规模,除此之外,它们基本上是一样的。

这种格调叫做“初夏的杨树林”

格调是视觉上扩大了的纹理,而纹理则是在视觉上缩减了的格调。

因此,在不需要明确区别的情况下,我们可以同时解释格调和纹理。这种纹理叫做“濒海红树林”

当数量很大,以至不能明显地看出单独视觉单元时,这种现象就可

能发生,比如透过窗户看到的不远处的树林是足够大的,可以构成

一种格调;但是,如果在飞机上俯瞰一整片树林,恐怕就只能将其作

为一种纹理来看了。

闭合

有一种常见的视觉归类方法基于人类的一种完形心理:把局部形象

当作一个整体的形象来感知。这种知觉上的特殊现象,称之为“闭合”。简单的说:“闭合”就是不在视场中展现设计的全貌,而只给关

键的局部,让人们通过完形去延伸和理解整体,比如“一叶知秋”

使用了闭合原理的设计总给人以巨大的想象空间

当然,我们由一个形象的局部而辨认其整体的能力,是建立在我们

头脑中留有对这一形象的整体与部分之间关系的认识的印象这一基

础之上的。

如果某种形象即使在完整情况下我们都不认识,则可以肯定,在其

缺乏许多部分时,我们依然不会认识。如果一个形象缺的部分太多,那么可识别的细节就不足以汇聚成为一个易于认知的整体形象。而

假如一个形象的各局部离得太远,则知觉上需要补充的部分可能就

太多了。在上述这些情况下,人的习惯知觉就会把各局部完全按其

本来面目当作单独的单元来看待。

(以上内容,来源于网络,为了以后查阅方便,整理摘录在日志中,请围观者不要介意)

小结

我们有时候说页面看起来不舒服,为什么会这样呢?

确切的信息分级、分组

拿到设计需求,首先对理解内容,信息分级。正确把握主次很重要。为了排版美观,把次要信息放大,确忽略了主要信息,呈给受众,

违背了受众心理预期,这样不管怎么看都不会舒服。有时候把页面

中的中文,全换做英文,看着就舒服多了。这是因为,对非飞母语

的识别性语言,受众理解文字信息的能力降低,第一眼先关注的是“点、线、面”,受众偏向于欣赏画面,而不是信息。但是换做母语

之后,受众更容易受文字信息的吸引。如果设计师对内容的理解和

受众对文字信息的需求偏差较大,就会产生不舒服的感觉。对于以

文字信息传递为主的设计品,这种影响尤为明显。以后找到合适的

例子,贴张图上来。这就是为啥但是页面设计一定要有主次,并且

要控制信息组。“人们总是先看到整体,然后再去关注局部”先关注

整体,即我们平时说的第一印象。“在一个格式塔(即一个单一视场,

或单一的参照系)内,眼睛的能力只能接受少数几个不相关联的整体

单位。”所以要对信息进行分组,并缩减信息快的数量。用受众很轻松、很快的理解整体。

把握变化与和谐

在设计中,我们经常使用“完形,阴阳形,变异”的创意手法,但是

发现,结果却总不令人满意。

这是什么字?看不明白!

为什么这个字体大家都不认得?变形太过了。对原有特性保留越多,辨识度越高。首先,三个字要拉开

距离。其次,拉开距离后,就不能共用“横向”笔画。看看修改之后是否好多了。

【篇二:格式塔原理举例】

看了那么多的科普文章,仍然不懂?有这篇就够了!想要在界面排版、网页设计中让整体视觉井然有序,舒服协调,就是必须掌握的

知识咯,今天的教程用深入浅出的方式给同学们科普以及在设计上

的运用,包含大量实例,新手也可以轻松看懂!

在界面排版,网页广告设计等视觉传达设计工作中,视觉上的画面

琐碎,零散,信息混乱无序总是视觉设计师无可避免的问题。

视觉的整体感做不好,会给人不舒服,不协调的心理感受。这些问

题来自人们的主观感受(“不舒服”,“奇怪”),通常难以描述清楚。同时,设计师们也意识到:表现作品的整体感与和谐感是十分重要的。无论是设计师本人或是观者,都不欣赏那种混乱无序的形象。

但是,“有毛病,不舒服,奇怪”等直观感受的词汇却很难帮到设计

师修改方案。设计师需要明确的知道“why”

多年以来,心理学家们一直想确定,在知觉过程中,人的眼和脑是

如何共同起作用的?而视觉感知,是其中的重点。

格式塔理心理学述及了这样一个观念,即人们的审美观对整体与和

谐具有一种基本的要求。简单地说,视觉形象首先是作为统一的整

体被认知的,而后才以部分的形式被认知,也就是说,我们先“看见”一个构图的整体,然后才“看见”组成这一构图整体的各个部分。

我们可以从格式塔中了解到视觉形象对人的心理影响,这里也包括

了对界面,广告等视觉信息的感知;

网上有许多格式塔文章,但观念不尽相同。在这里写下我并不成熟

的思考,欢迎大家拍砖斧正;

格式塔观念格式塔心理学派断言:人们在观看时,眼脑并不是在一

开始就区分一个形象的各个单一的组成部分,而是将各个部分组合

起来,使之成为一个更易于理解的统一体。此外,他们坚持认为,

在一个格式塔(即一个单一视场,或单一的参照系)内,眼睛的能

力只能接受少数几个不相关联的整体单位。这种能力的强弱取决于

这些整体单位的不同与相似,以及它们之间的相关位置。如果一个

格式塔中包含了太多的互不相关的单位,眼脑就会试图将其简化,

把各个单位加以组合,使之成为一个知觉上易于处理的整体。如果

办不到这一点,整体形象将继续呈现为无序状态或混乱,从而无法

被正确认知,简单地说,就是看不懂或无法接受。格式塔理论明确

地提出:眼脑作用是一个不断组织、简化、统一的过程,正是通过

这一过程,才产生出易于理解、协调的整体。

格式塔理论和研究述及了这样一个观念,即人们的审美观对整体与

和谐具有一种基本的要求。简单地说,视觉形象首先是作为统一的

整体被认知的,而后才以部分的形式被认知,也就是说,我们先“看见”一个构图的整体,然后才“看见”组成这一构图整体的各个部分。注:本段文字摘自百度文库《及应用》

整体的统一感知:大脑会将复杂的视觉内容简化为容易理解的整体,如图所示;

那么,怎样的视觉表达,使人们更容易理解,更协调,易于人们接

受呢?

请看下面格式塔的研究结论。

格式塔研究结论创始人提出的5项基本法则:

1. 简单:

“我们的眼睛在观看时,眼脑并不是在一开始就区分一个形象的各个

单一的组成部分,

而是将各个部分组合起来,使之成为一个更易于理解的统一体。”

个人认为:简单原理暗合构图法则,例如最常见的三角形构图,均

衡构图,对阵构图,向心式构图(圆形)、

对角线,x型,构图等,其目的都是为了在复杂的信息环境中,构建

更易懂的整体。

三角形,x形,斜线在运动广告中经常用到,均衡适合电商产品展示,产品图片+文字;

2. 相似:

“我们的眼睛很容易关注那些外表相似的物体,且不管它们的位置是不是相邻,总是把它们联系起来”

对应的实例;

从上面的实例可以看出,色彩的差异心理感受更强烈,

大小相似:

根据相似原则,那个方案更合理?

利用色彩的相似,电梯提示合理优化方案。

(注:此范例来自ixdc2015高峰会《极简设计之路》);

根据酷友的反馈,增加电梯案例说明:

我的理解,黄色代表危险,根据相似率,建议人站的位置如果也用黄色,用户也许会困惑,黄色的脚印能踩吗?

中间那个方案,使用了不同颜色,既表明危险的地方,也表明安全的位置,非常容易分辨,似乎是合理的,但为什么一定要传达危险的信息呢?一定要强调“不能”的行为呢?

是否只强调正面的引导就好?感觉第3个方案提示会更友好;

3. 接近:

“单个视觉元素之间无限接近,视觉上会形成一个较大的整体。距离近的单个视觉元素会溶为一个整体,

而单个视觉元素的个性会减弱;”

整体看来,距离近的关联紧密,距离远的形成各自独立的组…

整体上单个圆的特征已不明显,但圆球之间的接近组合形成了清晰的矩形整体

利用接近原则,信息组之间用留白区分,页面元素会更简洁,阅读信息时的干扰也少,相近信息的关联也更紧密;

相同的信息展示,大家觉得哪种形式更合理?

4. 闭合:

“人们在观察熟悉的视觉形象时,会把不完整的局部形象当作一个整体的形象来感知,这种知觉上的结束,称之为闭合。如果局部形象过于陌生或者简略,则不会产生整体闭合联想。”

形状闭合:大脑会将形状趋于完整的形状闭合,多使用在字体,图形设计中;

“负形闭合”:画面中的负形(留白)会形成用户熟悉的形象,被当做整体感知。

但有时并不直观,需要多花费精力领悟,多用在logo,海报等艺术设计中;

“经验闭合”:数字化界面不断进化,迫使人们不断累积新的认知习惯,更简洁的闭合呈现利于内容的传达,

右图是形状闭合,左图是利用人们已有的实际经验,

用更少的视觉元素表达,减轻人在图形识别上的精力消耗,

经验闭合需要关注到趋势变化;

注:“形状闭合”,“负形闭合”,“经验闭合” 分类纯属个人见解,欢迎拍砖。

5. 连续:

“人的视觉有追随一个方向的延续,以便把元素联接在一起,使它们看来是连续向着特定的方向;

连续与闭合并存的情况很多,为了好区分,放一个闭合的例子做比较;”

连续典型的例子;

通常,2种或以上的规律会同时存在,例如数据可视化,同时用到了连续+闭合;

======================================

【篇三:格式塔原理举例】

相关文档
最新文档