重磅！那些骨灰级作品背后的秘密，设计中的通用原则
研习设订阅号
设计干货 杜绝注水
戳一下看视频版
今天要和大家分享的内容，并不是什么设计的技巧，而是一个具有通用性的设计原则。那为什么我们要去学习这些原则呢？那是因为，设计的创作过程是具有明确目的性的，所以它并不像艺术创作那样完全不可描述。在这个过程当中，还是有一部是能够通过科学的方法去量化的。而经过前人经验所总结出来的设计原则，虽然不能明确的告诉我们这个图要放多大，这个字要排在哪。但是，它也会像“通往成功道路上的护栏”一样，去指导我们的设计方向，让我们能够少走一些弯路。而今天我要和大家分享的「格式塔简单原则」，就是这样的一种理论。
首先我们先来介绍一下什么是格式塔。你没有看错，格式塔并不是专门为研究美学而诞生的理论，它的主要研究范畴是认知心理学。但不可否认的是，这个理论确实与设计有着千丝万缕的联系。
这个格式塔理论，最开始就是由这三个创始人建立起来的。中间的胡子大叔叫韦特海默 ，他是格式塔理论的主要代表。而在海默大叔左右两侧的考夫卡和柯勒，这里我们先简单认识一下他们，在后续的内容中我们也还会提到。
他们的主要研究目标就是，解释人类视觉的工作原理。并且他们也真的发现了一些东西。研究结论表明的是，在人类的视觉感知过程里，有一种追求“整体性”的倾向。而这个发现，也就成了格式塔理论的基础。
当你在看一个画面的时候，大脑会自动脑补出那些被覆盖的部分。这些形状在我们眼里永远是一个完整并且简单的整体，而不是一个个互不相关的边和线。因为这样去理解，不仅能让画面看起来更简单，同时也能够减轻大脑的认知负荷。也许你会觉得大脑这样很偷懒，但不可否认的是，这样做确实也能让大脑对信息的处理变得更有效率。
👈 向左滑动查看更多内容
例如，我们面对这样具有叠压属性的版面效果时，其实就并不会担心它被理解成破碎的形象。因为，我们的大脑会自动去脑补那些被遮挡住的部分，这样一来，我们看到的就是两个完整的文字信息了。
得益于人脑这种脑补机制，这也让很多有趣的版面效果也得以成立。比如我们遮挡住人脸的一部分，也并不会影响我们辨认它。因为大脑会去补全。即便是文字信息的局部被遮挡到了，我们也是不用担心它会被辨识错误的。这就像大脑会忽略掉你眼前的鼻子一样。
我们再来看一个标志设计的案例。从这个图形可以大致看出来，这个标志的细节已经是非常精简了。仅仅是大致的轮廓，就能让我们联想到熊猫的形象了。我们将它反白去观察一下，你会发现其实熊猫的头部和背部并没有一个明显的封闭界限。
在设计中运用这个思维的例子还是很多的，比如网易云音乐的首页头图，就采用这种相互遮挡的处理手法。在交互设计里，这样的处理会暗示人们这个部分其实还有内容的，是可以继续点击下去的。
我们看这里他是将模块进行了一个裁剪到页面外的处理，因为只能看到局部，所以我们当然也能把它理解成是一种遮挡。同样的，被遮挡的部分在提醒着我们这一边其实还有更多的内容可以点击。
这里我做了一个对比，尝试了一下不裁剪到页面之外会是什么样的效果。可以比较明显看出来，上方向外传递出的信息好像是只有这么多内容，并且在这样的版面下，模块需要被压缩的很小。
而对比下方的案例，不仅模块能够放的很大，层级和焦点也更突出，它也会向外传递出更多内容的信息，同时也增加了点击的交互动作。
整体性认知可以说是格式塔理论中的一个核心思想，因为它贯穿了整套理论。
就连格式塔这个名字，在心理学领域，也是用来表现“被分离的整体”这一概念的。所以格式塔也常常被翻译成“完形心理学”。
那格式塔既然是一种心理学理论，当然不会只解释视觉范围的现象，其实在思维层面上的行为，也同样基于整体性认知。当然在人们的脑海中，这种认知行为绝对不是集合要素那么简单。确切的说它源于一种“顿悟”。
那什么是“顿悟”呢？为了更方便大家的理解啊，我这里找了两个画面。来让大家体会一下顿悟的感觉。
左图中，在没有事先商量的情况下，小哥哥就很明显的领会到了对面的意思。在看右边，开始看这个小朋友写第一排的数字的时候，有没有很懵逼？但当第二排数字被填写上的时候，有没有一种恍然大悟的感觉呢？
没错，这种心领神会的现象，其实也是一种格式塔，这就是一种知觉上的重组过程。
虽然格式塔理论是心理学领域的研究，但也很早就有迹象表明了，这种理论其实和设计有很强的关联性。甚至连被誉为现代设计发源地的包豪斯，也和格式塔学派具有密切的联系。这或许就是为什么，我们会在构成书中看到格式塔相关的理论原因吧。那么接下来我们就和大家聊一聊格式塔与包豪斯都有过哪些交集。
还记得我们之前说的，那三位格式塔学派的创始人吗？右边的这位小哥，就是胡子大叔的学生。阿恩海姆，这个人也非常厉害，他就是那个将格式塔深入美学和艺术领域的先锋。
阿恩海姆认为视知觉是所有艺术思维的根源。并由此提出了“张力”说，他认为力的结构是艺术表现的基础，而“同形”是艺术的本质。
他的贡献对20世纪证实美学和艺术理论的发展起到重要的作用，可以说是格式塔心美学的代表人物。曾经担任美国美学协会的主席，在后期又被哈佛大学聘为艺术心理学的第一位教授。
包豪斯的教员保罗·克利，早在1925年就知道了 韦特海墨的研究。在保罗·克利、康定斯基与纳吉的教学努力下，包豪斯风格逐渐走向理性主义与构成主义，这也为后来的三大构成奠定了基础。
在1927年左右，阿恩海姆就去访问过包豪斯，并且在自己发表的文章中，对包豪斯表现出各种欣赏，他也曾公然称赞过包豪斯设计的坦诚与透明。
1929年包豪斯曾经还邀请过格式塔理论的创始人 苛勒去校讲座。但遗憾的是，由于行程安排最终是他的学生代替他完成了这项任务。
而其他的包豪斯艺术家对格式塔学派也具有浓郁的兴趣，康定斯基还出席了1930一1931年间由来自莱比锡大学主办的格式塔系列讲座。
康定斯基当然也是一个非常厉害的人，我们今天学习构成中的点线面，其实就是他编写的教学资料。
1926年，《点·线·面》作为包豪斯学院的著作，在慕尼黑出版。同时为庆贺康定斯基的60岁生日，欧洲许多城市为他举办了个展，而保罗·克利 担任了这些展览的介绍工作。
滕守尧先生从80年代开始就将阿恩海姆的美学著作引入到了国内，从80年代开始，很多内地院校的艺术专业里开始涉及到了格式塔心理学的内容，这些在艺术心理学的课程中，或者在一些设计原理的相关书籍中都有体现。
很多艺术家、设计师在创作的过程中借鉴了格式塔的整体性理论和知觉理论，而他们信奉格式塔理论的一个主要原因，也是由于长久以来设计师在工作中，经常会使用的组织原则和页面布局，而这些在精神上得到了科学理论的验证。
格式塔理论在法语中还有个绰号叫“印版的心理学”，这足以说明格式塔与设计的之间的关联是多么密切。
单从设计领域来说，格式塔理在科学的角度为我们提供了一个有效的理论依据，设计不再是盲人摸象，这些明确的原则引导着我们更加精准的达成设计目标。那么在接下来的内容中，我们会详细为大家讲解格式塔原则在设计中的影响与应用。
格式塔理论明确地提出：眼脑作用是一个不断组织、简化、统一的过程，正是通过这一过程，才产生出了易于理解、协调的整体。由此产生出了格式塔的一些基本原则。格式塔理论可提炼出7大原则，这些原则之间相互关联，共同组成了一个完整的格式塔特性。在本节课程中，我们会着重讲解格式塔中的简单原则。
我们眼前所见到的图像，其实是无数抽象化的信息经过大脑处理后的结果。在人眼的认知过程中，大脑会把一个复杂的物体分解并解析成较为简单化的物象来理解，因为这样就可以降低大脑的认知负荷。
为了方便理解，我们来举一个小例子，当你看到画面中的这个图形，你是怎样认知它的？我们会下意识的认为，画面中出现了两个完整的圆角矩形，它们之间只是相互重叠了而已。因为这样理解起来会更简单。
而不是从其它更加复杂的样子去理解它，比如像画面中这些构成样式，在第一时间我们是不会往这方面去想的。
这也就是说，大脑会用最简单的方式去理解眼前的事物，我们会根据自己的视觉经验去主动的补全了文字被遮挡的部分。而不是把它理解成更加复杂的形态，这个例子和之前完形的例子比较类似。
👈 向左滑动查看更多内容
同样的，当我们向左滑动，相信绝大部分人第一眼看到画面，并不是各种花瓣的小细节，而是一个个小鸟的图像。
👈 向左滑动查看更多内容
画面中的海报就是利用了这种认知现象，人物几乎融入到了背景色里，画面给人的第一印象主要就是标题中的关键字母T的形状。向左滑动，这幅画面的十字图形也采用了相同的原理。我们总是会先看到大体轮廓，其次才是去看细节的部分。
这三幅艺术作品，也是利用了这种大脑追求简单的倾向。我们首先会看到三幅人物头像，那其次呢，才是隐藏在细节中的另外一副画作。
对于那些大众普遍认知的事物，其实抛弃掉细节的部分，我们也依然能够很快的辨认出他们。比如画面中的这幅蒙娜丽莎，对人们来说，它几乎已经符号化了。
我们看这两张海报，都是搭建了大致的轮廓而已，即便这样，我们也是能够通过零星的特征判断出这是一幅蒙娜丽莎的。这种技巧，其实在标志设计里也是相当常见的做法。
经过上面的分析，我们大概了解了简单原则的基本概念，那就是人眼总是会将眼前看到的事物，用最简单的方式去理解它们。因为这样能够降低大脑的认知负荷。那么接下来我们就主要围绕着这个原则，看一看它在设计中都有哪些应用吧。
为了方便大家的理解认知负荷这个概念，接下来我们来做一个小游戏。在最短的时间内，你能快速记住画面中都出现了那些文字色彩吗？注意是什么颜色，不是什么字。
你还能记住之前的色彩组合吗？这里我们来公布一下答案。在画面中的三个选项里，A组是正确的。那其实呢，这道题回答错误也是不奇怪的。
因为这个是心理学家，斯特鲁普在1935年做的一个实验，实验结果是，大部分人辨别颜色时，都会受到字义的干扰。这是因为你对文字意义的反应更快，而你识别颜色的反应更慢。
也就是说，我们在阅读文字和说出字体颜色之间，是两个不同的认知过程。这个位置叫做视觉腹侧系统的通道负责处理颜色信息，实现物体方位、长度、宽度、空间频率和色调等信息的加工。
而阅读文字的动作则是颞叶和枕叶的区域负责，因为大脑无法抑制想要读出文字含义的直觉，所以相互产生了干扰。
这里，我们首先给认知负荷下一个定义，它是指人脑在思考、记忆或计算时所消耗的能量负载，简单来说就是烧脑程度。
视觉负荷是指我们浏览一个页面时，人眼所接受到的信息量；动作负荷是指我们的手指翻页、点击或触发的某个按钮的行为。不同的负荷所耗费的脑力资源也不同。从大到小排列依次是认知大于动作大于视觉。
因此，在设计的过程中，设计师们会通过尽量减少视觉要素的干扰，来避免人脑处理那些过度复杂的信息量。在UI或网页、工业设计等领域，增加点击或交互的可选择性，也是减轻大脑思考的有效手段。
正如密斯凡德罗的那句：少即是多。简单原则本身也是视觉传达设计的一种发展趋势。我们纵观平面设计的发展史，无论风格在怎么变化，大的趋势都是由复杂到简洁，由具象到抽象的演变过程。
这是早期的编排设计，我们可以明显的看到，在那个旧时代里的版面设计里，充满了繁杂的装饰性花纹，文字与装饰要素的比重是等同的，甚至有些设计里的花纹看上去有些喧宾夺主的意思。
随着设计的发展与演变，如今的编排设计，早就舍弃掉了复杂的装饰要素，重视结构与功能的思想成为了主流的设计风格。经过简化和梳理后的版面，明显会更加易于传达。
我们将时间追溯到远古时期，那时候的人们就已经开始绘制身边的事物了，抽象思维也从这时开始慢慢发展起来。也正是因为我们具有抽象周围事物的能力，文字和图腾符号才能得以产生。
得益于人脑的抽象能力，像这样细节复杂的相机，我们也可以用简单的轮廓来表达。
比如我们想要绘制一个狮子的标志，首先我们需要了解的就是狮子都有哪些特征。随后呢，抓住这其中的大致轮廓，我们就以把那些细节的毛发部分精简掉。
最后呢，在这个基础上，我们就能够在保留狮子印象的同时，绘制出独具特色的logo图形了。在这个过程中，其实还可以继续精简，我们可以把光影部分也精简掉，用概括性的线条去描绘它。
这个同样是logo由具象到抽象的简化过程，简洁的标志设计不仅更容易让人产生记忆点，同时图形应用的范围也会随之变得更广扩起来，即便缩放的很小，也能让人轻松识别。
如今我们身边耳熟能详的标志设计，它们也都是从复杂的图形逐渐演变成今天这个样子的。
早期的用户界面设计大多采用拟物设计，这样带来的好处是降低了用户的学习成本，只需要通过联想生活中存在的物体就可以大致清楚软件的操作。当用户熟悉了这套交互后，扁平化的趋势也逐渐成为了主流。通过摒弃复杂的修饰，减少不必要的视觉设计要素，降低了界面对内容的干扰。简单直白的传递信息内容，因此设计变得更加注重功能性。
而扁平化的处理也带来了对设计时间以及成本上面的节省。无论是内容加载，还是不同分辨率的适配，都要显得更加方便。
在印刷领域中，名片也是贯彻简单原则的经典案例。作为人际交往的重要工具，名牌自然就需要具备在短时间内迅速传达的属性。所以在设计时我们就需要精简掉所有可能会干扰信息传达的要素。像色彩，图片，花纹等等都是可以被精简的对象。
我们来看这个例子，在这个版面里，文字信息几乎被淹没在杂乱的背景里了。由于复杂的背景在争抢着视线，这也导致了信息的传递也变得非常困难。那我们应该怎样解决这个问题呢？
我们可以通过压暗背景明度的方式，去降低版面中的复杂程度。我们看，现在这个画面是不是好多了。我们还可以继续简化背景，通过模糊的方式，让画面中的文字信息看起来更醒目。
过度的信息宣传，在一些特定的应用场景下可能并不适合。比如在街边的广告牌，可能路过的行人只会去瞟一眼，那么在这样短的时间里，其实更多的信息都是被浪费掉的。
所以解决的方法呢，就是保留那些重要的信息，尽量去精简画面，让人看上去是一目了然的。
因为越简洁的信息，就越容易让人在第一时间理解并吸收。宣传的效果也就越有力度。
在导视设计中，简单原则的力量也是起到了重要的作用，由于它没有繁杂的花纹也没有花哨的字体，所以信息会在最短的时间内就能被人们快速的接收。
我们来看个反例，这是台湾国际机场的导视系统，辨识度就非常低。首先宋体复杂的文字轮廓并不如黑体好辨认，而对于导视系统这类需要被快速辨认的设计场景，黑体简练的外形显然更加适合。
其次，由于灯箱内部打光的问题影响，发光的背景会侵蚀掉宋体的一些衬线并且略显模糊，因此辨识度与显眼程度宋体都会弱于黑体。
在高速公路上的导视牌，如果设计的不够简洁直观，就很可能将车辆引导到错误的方向，甚至会发生危险。
图中展示的是日本的高速公路的字体，与右侧常规黑体的对比，我们可以明显看出，连“海”和“鹰”的笔画都是经过简化处理过的，掌握轮廓与印象才是重点。
构图也是简单原则在设计领域中的一个典型的应用场景。那无论是在编排平面海报还是在拍摄照片，构图的最终目的都是在简少画面中的复杂度，让元素整体呈现出某种规律性的趋势，这样一来所得到的画面不仅能让人们更容易理解，并且也会传递出一定的美感。
这里我用三个比较概括性的分类，来和大家聊一聊设计中的构图。第一种构图样式，就是水平或垂直的构图形式。
我们首先来看这个画面，它的结构还是比较简单的。版面一共被划分成了两个部分，蓝色大字块的区域和绿色小字块的区域。整体上呈现出的是由上至下的构图形式。这样的处理也让画面看起来简洁又富有规律性。
我们在来看这个版面，如果从字号来区分的话，那么画面的左右其实可以看成是两个独立部分构成的整体。小字号与大字号的文字组合在版面中呈现出了一种水平方向上的构图。但如在进一步观察，其实绿色的部分还可以继续划分成垂直方向的构图形式。
那么第二种构图样式，我将它归类成具有倾斜角度的构成。这种构图的特点也是很鲜明的，那就是版面中大部分的元素都是非垂直水平的结构。
👈 向左滑动查看更多内容
我们看这两个海报的共同特征，就是都采用了具有倾斜角度的构图形式。不同点在于，它们的倾斜角度是不一样的。左侧的画面，更接近45°角的倾斜编排，而右侧的画面，倾斜角度在35°到120°左右。由于在单个版面中，大部分的元素都统一了倾斜角度，所以在统一的规律下，画面依然是简洁有力的。
那最后一种构图形式呢，我把它定义成是“占满版心”的构图。它可以是发散的结构，也可以是呈现出S型或者其他的绕排形式。核心的关键点在于，版面中的编排结构是围绕着“占满版心”这个规律去安排的。
我们看这个版面，就是一个典型的“占满版心”样式的构图。我们用色块将它的层级区域框选出来，就能很明显的看出来，版面中的元素构图，采用了从形状上相互呼应的编排结构。整体呈现出一种“占据版心”的构成形式。
不仅仅是构图，保持版面中元素的整体性，也是非常重要的。就像画面中这个七巧板一样，我们一眼就能看出它的构成形状。
我这里拆解了几个版面，我们可以大致来看一下，他们都有哪些结构特征。在版面的排版中，简单原则的作用就是让画面看起来更加简洁明了，所以怎样才能将复杂的信息结构梳理的简单易懂，才是决定传达效率的关键因素。那随着版面结构的变化性越丰富，热闹的感觉也就随之被凸显出来了。而相反，版面中的结构看起来越简单，那它也会给人传递出一种更沉稳的印象。
格式塔理论中的简单原则，在设计中的应用可以说是相当的广泛了，无论是经典的“少即是多”，还是耳熟能详的“奥卡姆剃刀定理”，保持精简几乎成为了优秀设计中的必要条件。那为了更加便于大家的理解，接下来我们进入实例演示的环节。
这一次我们来做一个和食品有关的海报设计，以上是我们寻找到的相关文案和食品摄影。
首先我们将画面中的主角，也就是食品的近景照片置入到版面的中心位置。这里我们保留它这个盘子，那上面的这个铜锣烧，我们替换了一张看起来更有食欲的照片。
大家注意啊，这里因为我们替换了照片，所以铜锣烧和盘子接触部分的光影还是需要重新绘制的。我们再来看，这样是不是就自然多了呢？
我们可以吸取铜锣烧表面的颜色，并且把它填充到背景上。这样一来，背景与和照片之间建立起了一个呼应的属性。
通过费氏数列，我们能够很快的得到一个黄金分割矩形。这里我们将照片上提，将主视觉安排在页面的黄金分割的位置上。在画面的下方，添加商品的名字。这里的字体颜色，我们选择和豆沙馅一样的色彩。同样的，这也是建立呼应关系的手法之一。
在字形的选择上，这里我并不想强调什么文化感，所有我选择黑体，通过笔画的特征与商品的外观产生一定的关联。从古藤堡的视觉图示中，我们可以得知，版面中的阅读逻辑是从左上角到右下角的路径。所以我们可以将需要被记忆的信息安排在这个视觉出口的位置上。比如这里我就安排了品牌的标志。其余的联系信息，我们也一并安排在下方。
为了让画面更有看头，这里我做了一个重复的构成，相对于水平放置，倾斜的构图显然会更有动感。这里，为了保证视觉不会受到周围图像的干扰，我把左右的盘子替换成了“铜锣烧”的假名。由于背后的信息其实主要是起到一个烘托氛围的作用，阅读它的优先级并不高，所以我做了一个图叠字的处理。
接下来我们绘制进一步的网格系统，在留白被规范化的情况下，去安排其它未填入的信息。网格终归只是提供了一个框架，所以元素的具体安排，其实仍然是一个相对主观的问题。那左边填充好后，接下来我们在右边继续加入其他信息。那既然是铜锣烧，铜锣的原始形象当然也是一个具有关联性的元素了。对齐盘子的顶部，我们在版面的右上角加入超柔软这句广告语，那么到这里，信息部分也就基本填充完成了。我们缩小来看一下版面的布局效果。
在版面的底部，可以添加一个纸张的纹理，在加上一些豆沙的原材料，添加阴影后，到这里，这个版面也就差不多完成了。
整体上来说，在倾斜构图的基础上我们又添加了一层占据版心的构图。页面中的元素区块也只有五个层级的变化。
那相同的文案信息，还能做成什么样的版面风格呢？同样的，我们将商品置入到版面中。接下来，我们稍微做一个倾斜的处理，这样能避免它看起开有些呆板的印象。将页面垂直等分成五份，在近似黄金分割的位置上，我们用文字填满它。
这里有一个小技巧，就是我们可以把字体模糊处理，然后通过色阶去调整他们的粗细度。这样就能在得到圆角边缘的同时也能做到字重的统一了。版面中所有的文字，我们都处理成和“铜锣烧”具有关联性的圆润外形。那么接下来我们继续添加其余的内容。
从对角线的交集中，我们能得到绿色的交叉点，画出红色的部分，我们就得到了版面水平方向的黄金分割。依据黄色交叉点画线，我们可以得右下空间中的等分线条。
在视觉的出口处，我们把产品的包装图和价格安排在这个位置上。反方向绘制斜线，得到了黄色的交叉点，我们就得到了一个和右侧分割位置相等的宽度，这里我们安排“超柔软”这句宣传语。
当所有的文字都依照垂直水平的方向编排时，那么那个倾斜的组合，就一定是其中最醒目的元素了。它的加入能打破版面中的秩序，向外传达出一种相对活泼的感觉。作为主角的“铜锣烧”当然不能被文字信息遮挡，这里我们将它置入到顶层。
整体结构确定好后，接下来就是色彩的搭配了。同样的，我们吸取“铜锣烧”的色彩。但这一次我们不直接填充背景，而是找出它的互补色。那么最终，我决定选择这两个颜色作为版面中的组要色彩。黄色填充到“铜锣烧”背后的色块上。蓝色填充到背景上。
接下来，我们来处理“铜锣烧”背后的色块。通过波浪工具，我们能轻松得到一些偶然性的图形，这与铜锣烧的外形很类似。
那么到这里，这个版面也就完成了，我们来分析一下他的结构特征。
版面由五个视觉单元组成，整体呈现出一种从上到下的构图。当然它并不是那么典型，你同样也可以用“占据版面”的构图去理解它。
那么以上就是我们今天教程的全部内容了，最后我们来总结一下。
格式塔虽然是心理学研究，但与设计也具有千丝万缕的联系。从研究来看，人们的大脑似乎更倾向于用整体去理解眼前的事物。而简单的画面，显然会更有利于信息的传播。在简单原则的指导下，设计的过程会变得更加高效率。为了降低认知负荷，我们规范构图、划分层级、精简结构，一切操作都是为了让设计更加简练。那么本期的内容就到这里，感谢你的观看，我是东宁，我们下期见。
往期精彩内容推荐
戳一下看视频