亲密性、相似性与共同区域

先理解这个概念

距离近的元素容易被理解为一组，样式相似的元素容易被理解为同类，边框与背景可以形成共同区域。它们是知觉倾向，不是绝对规则。分组信号相互冲突时，界面会变得费解。

用户会根据距离、外观和边界推测关系。相距更近的标签与值通常被看作一组；使用同样外观的元素通常被理解为同类或具有相同行为。设计失误往往来自信号冲突：空间说它们相关，边框说它们分离，颜色又暗示另一个分类。应让多个线索互相支持。

记住这三个原则

1. 01

   组内距离小，组间距离大。

2. 02

   相同的控件角色保持外观一致。

3. 03

   优先使用间距，必要时再加容器或分割线。

实际设计时，分三步做

1. STEP 01

   标出内容的真实关系，区分同一对象的属性、同类对象和不同任务。先不要画边框。

2. STEP 02

   让组内距离小于组间距离，并将标签靠近它解释的字段。若仍难区分，再加入背景或分隔线。

3. STEP 03

   检查同样外观是否代表同样行为，尤其是标签、可点击筛选项和纯状态标记，避免相似性带来错误暗示。

一个容易理解的例子

空间关系明确表达“这个标签属于哪个字段”。

适用边界与取舍

分组并不要求所有组都有背景块。内容密集时过多嵌套边框会产生噪声。反过来，在复杂工作区中只靠几像素间距也可能不足，应结合清楚的标题。