返回知识库

产品与设计 · 视觉基础

亲密性Proximity

用距离表达关系:相关元素靠近成组、无关元素拉开分隔,靠间距分组而非框线,让眼睛按组扫描。

联程行程单:让登机口回到所属航段

先看真实票面,再把等距信息按航段归组;时间、登机口与座位会直接靠近各自的航段。

真实物件:一张上海经首尔到札幌的联程行程单。默认每行等距,旅客看不出两个登机口各属于哪一段。

! G24 / G115 归属不清
旅客 PASSENGERLIN / XIA
SKYLINE
BOARDING TRIP
出发PVG上海浦东
01
转机ICN首尔仁川
02
到达CTS札幌新千岁

上海 → 首尔

起飞
08:10
登机口
G24
座位
18A

首尔 → 札幌

起飞
12:40
登机口
G115
座位
22F
等距排列:登机口与航段难以配对SEQ 042

失败状态:所有行间距相同,G24 和 G115 像两条孤立数据;旅客必须来回核对航段。

从票面里读出的三条原则

亲密性用距离告诉眼睛“谁和谁是一组”,不是给所有内容再套一层框。

  • 组内要近:航段名与它的时间、登机口、座位形成连续的小节奏。
  • 组间要远:两个航段之间的停顿必须明显大于组内距离,归属才不会串线。
  • 先用空白分组,再决定是否需要边框;颜色和容器只能加强,不能代替距离关系。

什么时候要调亲密性

当用户问“这条说明属于谁”“这个按钮操作哪一块”或必须逐行核对归属时使用;只有单一对象时不必硬分组。

适合

行程单、订单摘要、报名确认、设置页、表单错误提示与卡片操作区等多组信息。

不能单独解决

距离能表达归属,却不能决定谁最重要或边线是否整齐;还需层级与对齐配合。

怎么从归属排出距离

先说清关系,再选一套组内/组间节奏。

  1. 给每条信息找主人:说明、状态与操作分别属于哪个对象。
  2. 让同组距离保持紧凑,组间空白至少明显高一档,不用所有层级都画框。
  3. 遮住分组标题,请另一人复述归属;说错就回调距离而不是继续加颜色。

同一行程单:正例与反例

目标相同,只改变组内与组间距离是否有差异。

正例 · 一段航程形成一个阅读停顿

航段名和它的起飞、登机口、座位靠近;两段之间留下更大的空隙。

结果:不依赖框线,也能立即说出 G115 属于第二段。
反例 · 所有行都等距

每条信息间隔相同,G24 离下一航段和上一航段一样近。

后果:距离没有表达关系,旅客只能逐项核对。

快速自测

注册表单中“密码至少 8 位”的说明应该放在哪里?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。