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

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

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

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

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

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

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

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

格式塔观念

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

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

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

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

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

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

格式塔研究结论

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

1. 简单:

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

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

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

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

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

2. 相似:

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

对应的实例;

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

大小相似:

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

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

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

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

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

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

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

3. 接近:

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

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

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

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

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

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

4. 闭合:

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

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

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

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

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

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

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

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

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

5. 连续:

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

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

连续典型的例子;

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

结语:

以上即是通过格式塔学习后的思考总结,通过这些理论知识的学习减少主工作中的主观臆断,并使设计方案更有依据。另外,格式塔并不局限于视觉研究,推荐ixdc2105年峰会主题演讲《极简设计之路》

这个得学起来!超实用的格式塔原理小科普相关推荐

  1. 什么是usbmuxd? iDevice通过USB与桌面系统通信原理小科普

    转:http://bbs.iosre.com/t/usbmuxd-idevice-usb/1482 os x上,苹果有一个服务,叫usbmuxd,这个服务主要用于在USB协议上实现多路TCP连接,将U ...

  2. 数据可视化原理_格式塔原理是数据可视化的实用方面

    数据可视化原理 Data Visualisation is not just about making good-looking and understandable charts by transf ...

  3. !!! 格式塔原理及应用

    http://blog.myspace.cn/e/405054695.htm 格式塔原理及应用 格式塔心理学派断言:人们在观看时眼脑共同作用,并不是在一开始就区分一个形象的各个单一的组成部分,而是将各 ...

  4. 当心理学遇上设计:格式塔原理是如何服务于设计的?

    以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 我始终坚信,心理学和设计的完美结合可以创造出非常好的用户体验.作为设计师,我们的职业目的就是解决用户需求 ...

  5. 设计师的魔法棒——格式塔原理!

    传智播客( http://icd.itcast.cn/)是一家网页平面设计培训学院,专注于网页设计培训,平面设计培训,fash培训,ui设计培训. 格式塔原理--图形与背景.接近.相似.闭合.连续.简 ...

  6. 如何成为视觉传达的大神——格式塔原理

    想学习更多关于网页前端设计的技巧,网页排版的知识可以去学习一下<欧美范网页设计实战课程>,相信你将会有更多的收获~ 你有没有注意到天空中有一种异常形状的云,类似于熟悉的动物或物体?你有没有 ...

  7. UI设计如何做好排版?你可以学习一下格式塔原理

    格式塔是一种视觉感知的理论,是研究人们视觉如何将元素组织成群体或整体,从而视觉上进行分类,在设计中,我们使用格式原理能使得我们设计更科学性,更具吸引力.通过格式塔效应,去处理设计中的点.线.面.颜色. ...

  8. 【Spring 源码阅读】Spring IoC、AOP 原理小总结

    Spring IoC.AOP 原理小总结 前言 版本约定 正文 Spring BeanFactory 容器初始化过程 IoC 的过程 bean 完整的创建流程如下 AOP 的过程 Annotation ...

  9. 程序执行原理(科普)

    程序执行原理(科普) 目标 计算机中的 三大件 程序执行的原理 程序的作用 01. 计算机中的三大件 计算机中包含有较多的硬件,但是一个程序要运行,有 三个 核心的硬件,分别是: CPU 中央处理器, ...

最新文章

  1. Unity 播放音频文件
  2. keepalived+nginx安装与配置
  3. python与excel表格-xlrd/xlwt - python与excel表格交互
  4. iOS Hacker Xcode使用和内联汇编
  5. php中qq授权登录,ThinkPHP利用QQ互联实现网站第三方登录(QQ登录)
  6. 【数据库学习笔记】——cursor游标对象
  7. NSAttributedStringKey
  8. Spring Cloud与微服务学习总结(9)——Spring Cloud面试题汇总
  9. 敏捷开发系列学习总结(16)——给Scrum Master的十个建议
  10. java jxls_jxls教程
  11. 流媒体基本要点简述:如何在H264数据中获取PTS?
  12. 【转】解决Navicat 报错:1130-host ... is not allowed to connect to this MySql server,MySQL不允许从远程访问的方法 .
  13. The Semantics of Constructors(拷贝构造函数之编译背后的行为)
  14. 论文选题的原则、来源与方法
  15. 抖音上很火的 立方体相册和旋转时钟,基于人脸识别实现程序员的专属相册和专属时钟,包含15套相册模板和9套时钟风格,可以直接替换成自己的图片,部署生成自己的个性化专属相册
  16. 微信发送图片php,PHP怎么实现微信图片上传到服务器?
  17. c语言 上传图片至服务器,JSP+Servlet实现文件上传到服务器功能
  18. 面试技巧: 轻松过关10种方法
  19. 逆战网络连接断开连接服务器超时_《天天逆战》出现网络连接问题解决方案
  20. python 12306登录_python爬虫--模拟12306登录

热门文章

  1. 静态方法和非静态方法的区别JAVA
  2. 微博投放技巧: 如何在微博投放
  3. 欢迎同学们参加新乡学院2019年3D打印暑期夏令营
  4. 导致VC2013编译的DLL在VBA中调用时,提示找不到文件的一种可能
  5. java虚拟机的内存管理
  6. 中间件-------activityMQ整合springboot
  7. 硬盘中单击auto病毒的清理
  8. 12在以太坊上定义智能合约缺陷
  9. 通过两点经纬度信息 计算两点距离(C#语言)
  10. INET的定制使用OMNET++