格式塔原理源于20世纪初的德国心理学派，其核心理念是 “整体大于部分之和”。在我们感知视觉信息时，大脑会遵循一系列固有的组织原则，主动构建结构、寻找关系，以减少认知负荷。
在UI/UX设计中的核心价值是：
- 预测用户感知：预判用户会如何理解你的界面布局。
- 引导视觉流向和注意力：通过元素组织，主动引导用户视线至关键信息。
- 建立清晰的视觉层次和关系：明确展示哪些元素相关、哪些属于一组、操作的顺序是什么。
- 减少认知负担：让界面更直观、更易于快速理解。
七大核心原则
| 中文 | 英文 | 核心解释与图示联想 | 设计应用举例 |
|---|---|---|---|
| 接近性 | Proximity | 位置靠近的元素会被视为一组。距离的远近直接体现了关联的强弱。 | 卡片中，标题与下方说明文字靠近，与另一卡的标题远离，自然形成分组。表单标签与对应的输入框靠近，避免歧义。 |
| 相似性 | Similarity | 外观相似（如颜色、形状、大小、方向）的元素会被视为一组或具有相同功能。 | 使用相同颜色和样式的按钮表示同一层级的操作；用相同的圆点样式表示列表项；用相同的图标风格表示同一类功能。 |
| 闭合性 | Closure | 大脑倾向于填补空白，将不完整的图形感知为完整的、简单的整体。 | 使用不完整的圆形或线条构成图标，依然能被识别；品牌Logo设计（如IBM、NBA的条纹文字）。 |
| 连续性 | Continuity | 视觉倾向于沿着平滑、连续的路径或方向移动，将元素感知为连续的图形。 | 将图标或卡片沿一条隐形的轴线对齐排列；进度条或时间线的设计；曲线布局引导视觉流。 |
| 主体与背景 | Figure-Ground | 视觉会自动将场景分为主体（焦点）和背景。两者关系必须清晰稳定。 | 模态弹窗浮于变暗的背景之上；导航栏与内容区的区分；按钮与背景的清晰对比。 |
| 共同区域 | Common Region | 位于同一封闭区域内的元素被视为一组。这是对“接近性”的强力补充。 | 用卡片、边框或底色背景来明确划分功能区域；在列表中用隔行变色来区分行组。 |
| 对称性与顺序 | Symmetry & Order | 大脑倾向于将复杂场景简化为对称、有序的形式，认为对称的元素属于同一组。 | 仪表盘布局常采用对称网格；导航菜单项常对称排列；复杂数据的对称可视化呈现。 |
在UI设计中的综合应用
一个优秀的界面设计通常是多个原则协同作用的结果。例如，一个卡片组件：
- 利用共同区域（卡片背景）和接近性（内部元素间距小）明确这是一个独立单元。
- 利用相似性（卡片内按钮样式统一）表明操作项的同级关系。
- 利用连续性（卡片在网格中连续排列）引导用户横向浏览。
文章目录