设计源于生活，本文通过生活视角溯源格式塔原理，从生活到界面设计感受格式塔原理应用在方方面面。

一、什么是格式塔原理

格式塔即Gestalt，是德语中“形状”和“图形”的意思。是基于心理学对人类视觉系统的研究，人类的视觉系统自动对视觉输入构建结构。

最重要的格式塔原理有：接近性原理、相似性原理、连续性原理、封闭性原理、对称性原理、主体/背景原理、共同命运体 原理。

下面将进行详细分述

视觉会把互相靠近的物体看成一组，反之则不是。

下方示意图中A被看作三排，B被看作三列

【 生活中】

无论是在看阅兵还是军训，我们都有所经历，左右间距为一拳，前后间距为一臂。

列与列之间的间距远大于每个人之间的间距，互相靠近的则被看作一列。

（图片来源于网络，仅供交流学习）

【界面设计中】

个人中心中，同一组信息之间的间距远小于不同组，下图中我们明显可以感知到7组由图标和文字组成的信息。

（图片来源于网络，仅供交流学习）

建议

设计过程当中可以控制元素与元素之间的间距，从而对元素进行视觉分组，就像排队一样，有利于元素排列更有规律，主次分明，易于用户获取信息。

视觉会把相似的物体看成一组，反之则不是

下方示意图中颜色相似的被看成一组，颜色较深的两个圆被看作一组

【 生活中】

大家都玩过跳棋，在全部棋子形状相同的情况下，通过颜色进行阵营区分。相同颜色的棋子很容易区分被分为一个阵营。

（图片来源于网络，仅供交流学习）

【界面设计中】

下图中01、02、03三个图标区域呈现不同的图标样式，通过样式的相似性进行了合理分组，体现了个人中心图标的强弱层级。

建议

设计过程当中可以通过制造相似性，包括：颜色、形状、格式、质感等，使某些对象在视觉上成组。

视觉倾向于感知连续性，而不是零散的事物

下图中我们更倾向于把图形看作为两条不同颜色的线交叠，甚至是一个X。而不是一条浅色线段，两条深色线段

【 生活中】

被切开的水果我们依然可以感受到完整的样子，一看便知这是一个完整的橙子被切开之后的样子

（图片来源于网络，仅供交流学习）

【界面设计中】

利用连续性原理，我们将上图中的会员等级曲线看成是完整的曲线，而不是两段不同颜色的曲线

利用连续性，下图中依然可以感受到完整的一盘食物

（图片来源于网络，仅供交流学习）

建议

设计中可以利用连续性原理，只露出部分元素暗示完整元素，或用连续性来暗示走向趋势等。

视觉会将敞开的图形封闭起来，从而感知完整的物体

下图中我们不会将其看作三段曲线，而是很容易感知到是一个圆

【 生活中】

划分停车位的时候，即使不画出四面封闭的四边形，我们依然可以感知到完整的四边形车位

（图片来源于网络，仅供交流学习）

【界面设计中】

下图中的断点式icon设计，即使图形没有完全连续，我们依然可以感受到完整的图形

（图片来源于网络，仅供交流学习）

建议

设计中可以利用封闭性原理合理删减、断点等方式增加设计感、丰富度，强化页面趣味感、精细度

视觉会将复杂物体解析为符合对称规律的更简单的物体，从而降低复杂性

我们可以很快感知到下图是两个圆交叠，而不是其他更复杂的图形，因为一对圆的复杂度远小于其他

【 生活中】

河对岸的房子倒影在水面上，我们通常会最快地自动解析出水平的对称线，将其视为上下对称的两组房子

（图片来源于网络，仅供交流学习）

【界面设计中】

下图的网页排版，我们的视觉自动梳理出了左右对称的规律，即使左右的颜色并不一样，也有其他小字信息干扰。但对称的解析方式极大地降低了页面的复杂性

（图片来源于网络，仅供交流学习）

建议

设计中复杂图形可以通过简单图形复用得出，降低视觉理解难度。复杂的排版中可以制造对称性，从而降低页面的理解成本。

视觉将聚焦部分解析为主体其余解析为背景，或改变焦点时呈现不同的主体

大的矩形和圆形交叠时，我们倾向于把小的看作主体，矩形则视为背景。

【 生活中】

下图中将深色区域视为主体时我们看到了建筑，把浅色视为主体时我们看到了五角星，在五角星中我们把美队看作主体，天空看作背景

（图片来源于网络，仅供交流学习）

【界面设计中】

下图中弹窗的出现转移了页面的主体

（图片来源于网络，仅供交流学习）

建议

可以通过控制主体与背景，改变用户视线焦点，从而起到引导用户视觉的目的。

一起运动的物体被感知成一组或彼此关联

下图中三个运动的小球被看作一组

【 生活中】

舞蹈表演中，通向运动的舞蹈演员被我们归位同一组

（资料来源于网络，仅供交流学习）

【界面设计中】

背景的文字拥有一致的运动速度，因此原本零散的文字在动效过程中被我们视为同一层元素

（资料来源于网络，仅供交流学习）

建议

设计中不仅可以通过接近性、相似性，还可以通过同样的动态特征将物体成组，减少视觉凌乱感。

Powered by Froala Editor