详细解析设计界的格式塔原理小科普

2016-02-16 19:39 20 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享详细解析设计界的格式塔原理小科普的教程,热爱PS的朋友们快点看过来吧!

【 tulaoshi.com - 平面设计 】

看了那么多的格式塔科普文章,仍然不懂?有这篇就够了!想要在界面排版、网页设计中让整体视觉井然有序,舒服协调,格式塔就是必须掌握的知识咯,今天的教程用深入浅出的方式给同学们科普格式塔原理以及在设计上的运用,包含大量实例,新手也可以轻松看懂。

在界面排版,网页广告设计等视觉传达设计工作中,视觉上的画面琐碎,零散,信息混乱无序总是视觉设计师无可避免的问题。

视觉的整体感做不好,会给人不舒服,不协调的心理感受。这些问题来自人们的主观感受(不舒服,奇怪),通常难以描述清楚。

同时,设计师们也意识到:表现作品的整体感与和谐感是十分重要的。无论是设计师本人或是观者,都不欣赏那种混乱无序的形象。但是,有毛病,不舒服,奇怪等直观感受的词汇却很难帮到设计师修改方案。设计师需要明确的知道WHY

多年以来,心理学家们一直想确定,在知觉过程中,人的眼和脑是如何共同起作用的? 而视觉感知,是其中的重点。

格式塔理心理学述及了这样一个观念,即人们的审美观对整体与和谐具有一种基本的要求。简单地说,视觉形象首先是作为统一的整体被认知的,而后才以部分的形式被认知,也就是说,我们先看见一个构图的整体,然后才看见组成这一构图整体的各个部分。

我们可以从格式塔中了解到视觉形象对人的心理影响,这里也包括了对界面,广告等视觉信息的感知;

网上有许多格式塔文章,但观念不尽相同。在这里写下我并不成熟的思考,欢迎大家拍砖斧正;

格式塔观念

格式塔心理学派断言:人们在观看时,眼脑并不是在一开始就区分一个形象的各个单一的组成部分,而是将各个部分组合起来,使之成为一个更易于理解的统一体。此外,他们坚持认为,在一个格式塔(即一个单一视场,或单一的参照系)内,眼睛的能力只能接受少数几个不相关联的整体单位。这种能力的强弱取决于这些整体单位的不同与相似,以及它们之间的相关位置。如果一个格式塔中包含了太多的互不相关的单位,眼脑就会试图将其简化,把各个单位加以组合,使之成为一个知觉上易于处理的整体。如果办不到这一点,整体形象将继续呈现为无序状态或混乱,从而无法被正确认知,简单地说,就是看不懂或无法接受。格式塔理论明确地提出:眼脑作用是一个不断组织、简化、统一的过程,正是通过这一过程,才产生出易于理解、协调的整体。

格式塔理论和研究述及了这样一个观念,即人们的审美观对整体与和谐具有一种基本的要求。简单地说,视觉形象首先是作为统一的整体被认知的,而后才以部分的形式被认知,也就是说,我们先看见一个构图的整体,然后才看见组成这一构图整体的各个部分。

注:本段文字摘自百度文库 《格式塔原理及应用》

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

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

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

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

格式塔研究结论

创始人提出的5项基本法则:

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

1. 简单:

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

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

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

个人认为:简单原理暗合构图法则,例如最常见的三角形构图,均衡构图,对阵构图,向心式构图(圆形)、

对角线,X型,构图等,其目的都是为了在复杂的信息环境中,构建更易懂的整体。

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

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

2. 相似:

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

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

对应的实例;

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

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

大小相似:

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

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

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

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

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

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

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

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

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

3. 接近:

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

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

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

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

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

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

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

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

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

4. 闭合:

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

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

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

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

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

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

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

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

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

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

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

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

5. 连续:

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

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

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

连续典型的例子;

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

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

详细解析设计界的格式塔原理小科普,PS教程,图老师教程网

结语:

以上即是通过格式塔学习后的思考总结,通过这些理论知识的学习减少主工作中的主观臆断,并使设计方案更有依据。另外,格式塔并不局限于视觉研究。

来源:https://www.tulaoshi.com/n/20160216/1572679.html

延伸阅读
标签: PS PS基础
当我第一次使用Photoshop的时候,我直奔滤镜菜单,想要研究一下这些可以做出很多绚丽效果的非常棒的功能。在这些菜单里,我第一次看到了这个名字:置换。我将滤镜挨着试了一遍后最终又到了置换。 这到底是个什么东东?在毫不犹豫地点击之后,呈现在我眼前的是一个充满陌生参数的奇怪的对话框。 我随意调整置换滤镜的默认参数,图片竟然...
什么东西都离不开基础,建房子需要地基,解方程式需要先学会乘法表,唱歌需要先会哆、来、咪。页面设计也同样需要基础,这个基础就是平面构成。 网页设计风格种多样,除去一些场景化设计和给力的素材支持,剩下的就全靠平面构成和排版了。刚开始接触网页设计的时候,常常会钻到某个局部中去,页面风格还没出现,就开始做字体细节,结果可想而知...
移动设备现在是网络浏览的主力之一,如何在寸金寸土的界面上做好用户体验是很多设计师头疼的问题。今天腾讯游戏高级设计师结合多年经验+几款热门APP的界面,总结出小屏设计5个实用的招式,UI设计师们赶紧收藏起来吧。 wayne :1997年,那是一个春天,有一位老人在南海边画了一个圈,这个圈就画在咱大深圳!画圈的人是小平同志。 2014年,还是...
标签: PS PS基础
本教程主要使用Photoshop详细解析匹配颜色工具的原理教程,一秒就可以快速的调出漂亮色调,今天P大点S老师的一个基础教程,全面细致地讲解Photoshop里面一个非常厉害的命令:匹配颜色(match colour),教程不仅特别具体,而且颜值相当高,想彻底学会这个功能,那么这篇教程大家必须要学习的。 首先,既然要用到匹配颜色,这个命令,那就首先要...
标签: PS PS基础
样图: 1.色阶是什么:色阶就是用直方图描述出的整张图片的明暗信息。如图 从左至右是从暗到亮的像素分布,黑色三角代表最暗地方(纯黑),白色三角代表最亮地方(纯白)。灰色三角代表中间调。 大家可以看到,我这张相片暗部像素少,亮部像素也少,那么就是灰蒙蒙的,就是说对比度较低的照片。同理,其他的形式大家可以去推测,这里就不一一...

经验教程

66

收藏

84
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部