|
一篇关于格式塔原理在视觉设计方面的讲解，获得UI设计师Showrinrin Barua的翻译授权后加入一些个人的理解，延伸到更广的设计领域。 第一眼看到上面的图片你想到了什么，是一张人脸还是一棵大树？相信80％的人都会将它看成人脸，因为这是我们大脑运作的基本原则——“先看物体的整体，再看事物的各个部分”，这就是格式塔心理学——其中的一小部分原理运用。 从根源上来说，格式塔（Gestalt）是心理学领域的一个学派，在1912由德国心理学家韦特海默提出，被广泛用于社会行为研究、侦探破案、医学治疗，游戏设计等等各个领域，不过，这些都和今天要说的没关系，哈哈！ 今天主要讲一讲在视觉层面上格式塔原理对设计的影响，以及“设计师如何通过这些原理做出酷酷的东西”～ 在视觉设计上，格式塔原理也叫作“完形原理”，没错！！就是那个曾经让我们深恶痛绝的完形填空的那个完形！ 格式塔原理指出在视觉层面上“整体先于部分”，这就是为什么大部分人将上面的图片看作人脸，而不是图标；简单来说，一个面容再精致的女士，站在百米开外，你也只能看到她曼妙的身姿而已； 所以在设计与美术领域常常有打草稿和画线框这些先整体后局部的操作，这不仅是流程需要，同样也有它的科学依据。 所以我们看到的不是简单的一棵大树，而是能够感知到人脸的轮廓，这句话就是格式塔这本“九阴真经”心法的总纲，并由此引申出7个原则应用在视觉设计上： 1、封闭原则（Closure） 2、接近原则（Proximity） 3、相似原则（Similarity） 4、共同区域原则（Common Region） 5、主体-背景原则（Figure-Ground） 6、焦点原则（Focal Point） 7、连续性原则（Focal Point） emmm，听起来有点难懂，让我们用更接地气的语言，一一解读。 壹| 封闭原则-用简单代替复杂这是人脑最常见的运作方式，当我们看到造型结构复杂的视觉元素时，大脑就会从已有的图库中自动搜索类似的图案，然后相匹配，所以我们会将复杂的造型识别得更简单，即“用简单代替复杂”！ 不仅如此，这个原理还适用于填充空缺的图形，我们的大脑能够自动填补空缺的部分，然后生成一个你熟悉的图案，这就是为什么我们能从这些空缺的图案里识别到出老虎和足球； 设计应用：这个原则应用得最多的就是品牌的Logo设计和UI界面的图标设计； 来自dribble设计师AfshinT2y《天气图标系列》 ①在设计手法上，通过用简洁流畅的线条，表现出造型丰富的图形，辅助以黄金比例进行切分，经典耐看； ②在设计内涵上，反向运用格式塔，让小图形拥有大意义，比如看到天气图标，就能读懂天气状况这些细节； 贰| 接近原则-是兄弟就挨近点我们的大脑会自觉地将视觉上靠得近的物体看做一个组，而将靠得远的两个物体自动分离开来，通过这组示例图片，相信你会有比较清晰的理解； 在这里我们用两种方式排列盒子，同样数量的方块，我们会觉得左边扎堆的一组，而另一边则是分散的三组； 即便我改变了左边方块组颜色，因为挨得近的关系，我们还是会认为这是同一组，最多是组内发生了变化，可见距离分布在排版中对于元素展示和信息罗列的重要性； 设计运用：购物网站里的商品展示就充分用到接近原则。每个产品的图片、名称、价格、折扣都呈现在同一个组里，但是由于间隔，你仍旧能够清晰地区分开两个产品；
而在版式设计中，我们会将图文信息以不同形状，颜色，大小分组展示，这样在视觉层次上会有明显区分，也更易于阅读；比如在下面这组海报（2018年草莓音乐节），元素以组的形式分布在海报中的各个位置，形成不同大小的视觉层次，让我们能够依次看到主要信息、次要信息、辅助信息等内容，这也是设计者希望我们看到的信息顺序；
叁| 相似原则-相似元素创造整体感本·施耐德曼在UI设计经典作——《Designing The User Interface》里说过：“在界面设计中，要采取一致的行动顺序;在提示、菜单和主屏幕中应该使用相同的设计语言，并且始终保持一致的颜色、布局、大小写、字体等”。 因为我们的大脑会将视觉属性相似的物体分成一个组，视觉属性主要指的是：大小、颜色、形状、方向等，再具体一些甚至可以是图标的圆角，元素的纹理共用，字体设计中的衬线装饰等等；
设计运用：相似原则的正向运用就是整体设计，比如游戏网页的整体形式感塑造，品牌官网的整体品牌调性等等；相同的元素，颜色等等等等；
通过提取游戏内的元素移植到页面设计中，是游戏网页设计常用的思路，能够快速建立熟悉感与游戏代入感；而相似原则的反向运用就是设计焦点的创造，那是稳重求变，点睛一笔，我们会在后文提到。 肆| 共同区域原则-给我一个封闭的空间共同区域指的是，当元素处于一个封闭区域内，会被判定为同一组的，这么听起来，似乎和临近原则有点类似，那共同区域原则和临近原则共同作用于设计中会发生什么呢？
不用担心它们会相互制约，相反地，共同区域和临近原则常常同时存在并且相互辅助的，上面的图形边框和阴影组成了共同区域，尽管所有的卡片都遵循了临近原则（卡片之间的距离是一样的），但我们可以在每一张卡片的内部制作不一样的内容。 设计应用：这一点上，用得最多的是卡片UI模式，明确定义一个空间区域，通过不同的信息组合为成为一个完整的卡片，既增强了设计的层次结构，有助于促进信息识别；
伍| 主题背景原则-设计中的主角与配角这是一个比较容易理解的原则，并且经常与封闭性原则共同使用，它指的是正元素（需要关注的元素）和负空间（背景）之间的关系。就如同我们看电影一样，当我们看到一张图片时，首先会区分开背景和主体，这样才能确定什么是需要关注的。人们是通过聚焦于前景或者背景来感知物体的。 为了突出登录界面就应用了主体与背景关系原则。在这张图片中较小的区域（登录界面）就被当做了主体。同时为了突出登录界面，背景的亮度也刻意调低了。
再比如比你看到下图的时候，你第一眼看到的是一个苹果。但是当你把注意力放在背景（黑色的部分）的时候，你会发现一个乔布斯的剪影。
设计应用：主体与背景的原理应用极其广泛，从电影文学创作的主角&配角，摄影中的主体&背景，延伸到平面设计中的正负形，不胜枚举，且看几个海报案例：
这两张精心设计的正负形海报，缺少了正形-主体，那作品的主题就表达得不明确，没有了负空间，那设计就少了一丝回味，“正形是值得关注的主体，而负形也是设计师精心安排的设计彩蛋。 陆| 焦点原则-人群中最靓的那个仔它指的是我们的眼睛会快速捕捉到和周围不一样的元素。
换个栗子，下图中，你第一个注意到一定是那个红色的方块，因为红色方块跟其他的元素明显不同。
在一定程度上，焦点原则就是相似性原则的逆向运用，在相似的元素组中异军突起，想不引起你的注意都难； 设计应用：在设计中你应该见得特别多了，将关键设计点安排在最希望被你看到的地方，比如“下载按钮”“立即购买”“免费报名”这些设计点，通过引起受众的注意，达到设计目的；
2019年LOL世界赛页面 柒| 连续性原则-通通连起来连续性原则的意思是有规律的元素排列，会比杂乱无章的摆放看上去联系更紧密 下图中能看出，排成直线的小红点看起来比随机摆放的小红点更具有相关性；我们的大脑倾向于将连续的形体看成某种形状，从而帮助我们通过解读信息与构图。
设计运用：连续性原则运用得最多的就是轮播页面的设计，它可以帮助我们的眼睛顺利地穿过页面，大大地提高易读性。 以下图为例，Lflix（线上观影网站）就在它们的电影宣传轮播界面应用了连续性原则。界面连续的效果是通过裁剪掉半张靠近窗口的海报来实现的，引导用户左右滑动，搜索更多影片资源，这个原则还经常被应用于网站的轮播、广告、滑动窗口中。
写在最后 这些其实都是长期以来存在于我们脑中的认知，优秀的设计作品正是调动了大脑潜在的积极性，从而与我们产生共鸣，格式塔原理正是这些认知的总结,因为个人工作的缘故，这里的视觉设计主要指的是UI、平面、网页、插画等个人相对熟悉的领域； 它在设计上的运用基本上讲的都是我们如何进行视觉认知的，可能你已经知晓了某个原则的具体用法：比如在名片设计中，你能够清晰地将信息分组对齐排列，那就再好不过了，也不必在意这个原则具体叫什么，你甚至可以自己命一个名称，毕竟“名可名，非常名”，在本篇文章中，我们探讨了了格式塔原则中的其中七个原则： ●封闭原则指的是尽管图案有缺失的部分，我们的大脑会基于固有的图像库来对复杂图案进行识别。 ●临近原则指的是距离上挨得近的元素看起来会比离得远的部分联系更紧密。 ●相似性原则指的是具有相同设计属性（大小、颜色、纹理、形状或者方向）的物体组合更容易创造整体感。 ●共同区域原则指的是在闭合空间内的物体看起来是被分为一组的。 ●主体与背景关系原则指的是作为观者在认知物体的时候会去关注它的前景和背景。而作为设计师，在设计主题与背景的时候要更加的花心思，将设计核心设置为主角。 ●焦点原则指的是我们的眼睛能够快速捕捉到与周围元素不一样的元素。 ●连续性原则指的是有规律的元素排列会比没有排列规律的元素看起来联系更加密切，更有利于浏览阅读。
并且在优秀的设计作品中它们从来都不独立存在，往往在一个作品中有多个原则体现；当然我很清楚这只是格式塔心理学的冰山一角，对原理的解释不够全面，但是希望这几个点能够指引我们去更好地读懂设计，去发现和创造出更棒的设计作品，Adios～ |
|
|
