格式塔原则解释了人如何把零散元素看成一个整体。用在UI设计中，它帮助用户判断“哪些内容属于同一组”“哪个按钮作用于这部分内容”“操作完成后应该看哪里”。设计时先用距离表达关系，再用一致的形状和容器强化关系，比给每个模块都加边框更清楚。
如果界面元素已经齐全，却仍显得散乱，可以在墨刀设计中保留同一份文字与字段，制作两种分组方案，比较读者是否能正确理解内容归属。先改变关系表达，再决定是否需要更多装饰。
格式塔原则解决什么，为什么留白也能表达含义
看一张报销申请单，用户不会先逐个数输入框。他通常先扫到“费用明细”“发票附件”“审批去向”，再进入其中一组填写。标题、距离、背景与对齐共同决定了这次扫描。如果一个错误提示离下一行更近，用户可能修改错字段；如果“删除附件”与整页“提交审核”并排放在底部，两个动作的作用范围也容易混淆。
格式塔不是一张强制打分表，也不是“用完六条原则就能做出好设计”。它描述视觉组织的倾向。界面里的文字、业务规则与实际行为仍须正确：看起来像同一组的控件，最好确实共同完成一件事；看起来能点击的对象，也应提供相应操作。
| 原则 | 读者容易形成的理解 | 适合检查的UI问题 |
|---|---|---|
| 接近 | 靠得近的内容关系更紧 | 标题属于哪段、错误对应哪个字段 |
| 相似 | 外观相似的对象可能有相似功能 | 链接、按钮、状态标签是否混淆 |
| 共同区域 | 同一边界里的内容属于一组 | 表单分区、卡片、批量操作的作用范围 |
| 良好连续 | 倾向沿平顺的方向继续阅读 | 对齐、步骤条、跨列内容的阅读顺序 |
| 闭合 | 会补全部分缺失的形状 | 图形识别与适量简化，不能用来隐藏关键操作 |
| 图形与背景 | 把突出对象与背景分开 | 弹窗、选中态、当前任务与底层页面 |
接近：先把标题、字段和反馈放到正确的一组
“近”是相对关系，不是某个固定像素。标签与它的输入框应比它与下一个字段更紧密；小节标题与下方内容的关系，应比与上一个小节更强。NN/g的接近原则说明将空间距离视为理解相关性的重要线索。
以报销表为例，费用类型、发生日期、报销金额共同描述同一笔费用。发票上传与发票抬头属于附件信息。可以先用灰度块分出这两组，再设置组内与组间间距。不要把所有输入框都拉成同样距离的一条长队，最后靠标题颜色提醒读者分组。
具体试做时，可以先设标签到输入框8、字段组之间20、主要区域之间32作为起点。这只是这张表的起始方案；加入两行帮助说明后，要再检查视觉关系。真正需要保持的是“组内紧、组间松”，不是任何场景都机械使用同一组数字。
错误信息要紧跟对应字段。报销金额填入负数时，提示“金额需大于0”应留在金额组内；上传失败则放在附件项附近。整页顶部可以总结错误，但不能只在顶部写“填写有误”，让用户逐个猜。详细间距命名和组件约束可结合UI间距规范继续整理。
相似：同一套视觉语言，要对应同一种含义
同为蓝色、同样带下划线的文字容易被理解为链接；同一形状的按钮容易被理解为同类操作。这种预期一旦形成，就不宜随意打破。相似原则适合检查“样式一致，但行为是否一致”。
报销单里，“查看附件”和“查看审批规则”都进入补充信息，可使用同一类文字链接。“已上传”只是状态，就不应画成相同链接。如果“提交审核”与“保存草稿”都使用强强调色，用户需要读完两段文字才能重新判断主次；此时可将提交设为主要按钮、保存设为次要按钮，表达本页的核心进程。
相似也不能取代文字。“已批准”和“待审批”若只靠绿点与黄点区分，对颜色不敏感的用户会失去线索。保留明确状态文字，图标或色彩作为辅助。需要进一步处理颜色、键盘和错误反馈时，可参考UI无障碍设计方法。
检查组件时可以将所有同样式对象摆在一张画布上，问两个问题：它们是否具有相同的交互身份；同一种身份是否又出现了三套互不关联的外观。前者避免误导，后者减少学习成本。不要为了“每块都不一样”而让导航、标签和按钮失去共同规则。
共同区域：容器要说明归属，不能只是多一层方框
把标题、内容和操作放在同一容器内，会强化它们属于同一对象的感觉。它适合信息密集、单靠留白不容易分辨的页面。NN/g的共同区域原则也提醒，边框过多会增加视觉杂乱。
报销页可分成“费用明细”“发票附件”“审批去向”三个区域。“删除附件”放在附件行中，只作用于这一项；“撤销报销申请”若确有业务需要，应在整张申请的层级表达，不能借用附件的局部按钮。共同区域首先解决作用范围，而不是把每一个输入框重新装进卡片。
容器内外也可能出现冲突：一个下拉面板从“费用类型”打开，视觉上却覆盖到“审批去向”标题旁。读者需要通过触发控件、弹层位置、阴影层级和选中状态理解归属。若关联不清，优先调整弹层定位与标题，再考虑加颜色；不要让背景颜色替业务关系做解释。
对于表格，行的背景可以帮助横向跟读，而列的对齐用于比较同一字段。两种关系可以共存，不必选择“只有行”或“只有列”。但每个单元格都套卡片会把整行拆碎。设计容器前，先确认读者是在比较对象，还是阅读一个对象的完整说明。
连续、闭合与图底：让注意力走到正确位置
连续：对齐服务于阅读，不只是整齐
金额列靠同一基线和方向排列，便于纵向比较；同一行的标题、辅助说明与按钮保持清楚关系，读者才不必在页面里来回找。步骤条如果从“填写”走向“确认”再到“提交”，线和节点应表达这条路线。不要让装饰线在节点附近交叉，使无关模块看起来也属于流程。
宽屏两列变手机单列后，原来的阅读路径可能被打散。费用组里的帮助信息应随该组移动，而不是所有帮助统一堆到页面底部。布局变窄时，要重新检查顺序与归属，不能只把原来两个容器上下叠起来。
闭合：可以简化轮廓，不能让用户补全缺失的信息
闭合有助于理解不完整的轮廓，在图标或装饰图形中能减少线条。但“用户会自动补全”不意味着可以省略表单标签、截断关键金额或隐藏提交按钮。读者能识别一个轮廓，与能猜到操作规则，是两回事。
比如上传区可以用轻量的虚线边界表达一个区域，但仍要显示“添加发票”及支持的输入提示。若只有一个不完整矩形，用户不一定知道能否点击、拖入或粘贴。必要信息应写出来，视觉简化不能把任务交回给读者猜测。
图形与背景：当前任务突出，底层位置仍可理解
提交确认弹窗出现时，标题、金额摘要与确认按钮成为当前任务；遮罩降低底层内容竞争。同时应保留足够环境信息，让人知道自己仍在这张报销单中。弹窗里的“返回修改”应回到当前填写状态，而非另开一张空表。
选中行、拖拽对象和聚焦输入也涉及前景与背景。高亮要与选择范围一致：选了一个附件，就不要让整个申请单都呈现“已选中”的强背景。实际键盘焦点、读屏顺序与弹窗关闭规则还需在交互说明和实现中对应，单靠一张静态图无法表达全部行为。
一张报销表怎么改：先修关系，再精调样式
从同一份内容出发，建立两个画板：原方案保留字段挤在一起、按钮集中底部的布局；新方案只修改分组、距离、对齐和按钮层级。先不更换配色和插图，这样更容易判断改善来自哪里。
- 写出三组任务。费用明细回答报销什么和多少；附件区回答凭什么报销；审批去向回答谁来处理。字段无法归组时，先检查业务信息是否放错位置。
- 确定局部与全局动作。添加、查看、删除发票留在附件区；保存草稿和提交审核属于整张表。将每个动作的作用对象标在画板旁。
- 用留白做第一轮分组。先去掉多余边框，观察标题是否容易归属、帮助说明是否贴近字段。只有仍难区分的区域再加背景或容器。
- 加入两条变化。让发票名换成两行，再加入一条上传失败。检查新增内容是否推开下一组，局部操作是否仍跟随对应附件。
- 重排手机方案。依次展示费用、附件、审批，帮助和错误随字段移动；主操作置于可找到的位置，并检查键盘出现时的空间。
将两份方案交给未参与排版的人，不提示设计原则，直接问：“这条错误属于哪里？”“删除会影响一张发票还是整份申请？”“保存后是否已经送审？”如果对方理解与业务规则不一致，就回到距离、样式或容器的具体线索修改。这里观察的是理解过程，不必给整个界面套一个笼统的美观分数。
几种原则发生冲突，先让真实关系胜出
两个红色按钮可能因为相似而被看成一类，却分别属于相距很远的区域；容器也可能将距离很近的两个字段隔开。不要背诵一条“某原则永远更强”的排序。要问：在当前任务中，用户最需要看见哪种关系，其他线索是否在支持它。
如果同一个“删除”样式在附件行和整页工具栏都出现，样式可以保持危险动作的一致性，但文字、位置与确认信息必须说明不同作用对象。如果一组字段需要紧挨另一组才能比较，可用清楚的分区标题保留两组身份，不必为了分组把它们隔得过远。
最终交付可以留下三项简短说明：内容分组、动作范围、窄屏重排顺序。把这些说明与墨刀画布中的对应区域放在一起，下一位设计师或研发接手时，才知道哪些视觉关系需要保留，哪些只是当前方案的样式选择。
