Design Vocabulary设计词汇 · 样本集 01

VOCABULARY / 词条

接近律

Proximity

加入比较 +

位置接近的元素容易被感知为一组;间隔较大的元素容易被感知为分组不同。

可操作示例 · 虚构产品 FIELDNOTES

联系人信息

联系人
出行偏好

只改变组间距;标签与语义分组保留。

识别特征

  • 组内紧密
  • 组间更疏
  • 间距与语义关系一致

概念边界

距离是分组线索之一,不替代语义标题、表单标签和正确的阅读顺序。

什么时候考虑它

  • 组织标签与字段、相关操作、信息组
  • 希望减少不必要的分隔线

什么时候慎用

  • 用距离暗示实际上不存在的关系
  • 把无障碍语义分组全部交给留白

取舍

视觉分组简洁,但过度压缩会造成误读与触控困难。

条件规则 · 编辑建议

当对内容分组建议让组内与组间距离不同,并保留语义标签。

相关词条

瑞士国际主义 ↗可以配合 · 排版使用留白分组

间距可辅助表达关系。

识别优于回忆 ↗可以配合 · 组织可见选项

选项可见后仍需清晰分组。

来源与支持范围

NN/g · Proximity: Gestalt Principle ↗

相近元素被感知为同组,分离元素被感知为不同组。

检索日期:2026-09-15

定义参考以上来源;数字界面示例、选择建议、条件关系及配方由本样例编辑,尚未经用户研究验证。

类型扩展与实现说明

能力标签只描述本演示;应用到产品时仍须重新验证。

{
  "evidenceType": "感知原则的设计解释",
  "limit": "本样例不测量认知效果,不规定普适像素值。"
}
完整 Agent 条目 JSON
{
  "id": "proximity",
  "type": "principle",
  "name": {
    "zh": "接近律",
    "en": "Proximity"
  },
  "aliases": [
    "Gestalt Proximity",
    "邻近原则",
    "接近原则"
  ],
  "granularity": "component",
  "intents": [
    "organize-content",
    "reduce-complexity"
  ],
  "tags": [
    "分组",
    "间距",
    "格式塔",
    "视觉关系"
  ],
  "definition": "位置接近的元素容易被感知为一组;间隔较大的元素容易被感知为分组不同。",
  "boundary": "距离是分组线索之一,不替代语义标题、表单标签和正确的阅读顺序。",
  "signature": [
    "组内紧密",
    "组间更疏",
    "间距与语义关系一致"
  ],
  "when": [
    "组织标签与字段、相关操作、信息组",
    "希望减少不必要的分隔线"
  ],
  "when_not": [
    "用距离暗示实际上不存在的关系",
    "把无障碍语义分组全部交给留白"
  ],
  "tradeoff": "视觉分组简洁,但过度压缩会造成误读与触控困难。",
  "comparison": {
    "focus": "哪些元素属于一起",
    "mechanism": "空间距离影响感知分组",
    "cost": "需同时保持可读与可操作空间"
  },
  "sources": [
    {
      "id": "nng-proximity",
      "title": "NN/g · Proximity: Gestalt Principle",
      "url": "https://www.nngroup.com/videos/proximity-gestalt/",
      "claim": "相近元素被感知为同组,分离元素被感知为不同组。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/videos/proximity-gestalt/",
        "status": "available",
        "checkedAt": "2026-09-15T18:06:38.122Z",
        "jobId": "spn2-19740bf6dfe1a4e8f37e30e90cfb4429eb70518d",
        "url": "https://web.archive.org/web/20260915180752/https://www.nngroup.com/videos/proximity-gestalt/",
        "timestamp": "20260915180752"
      }
    }
  ],
  "relations": [
    {
      "target": "swiss",
      "kind": "composes_with",
      "condition": "排版使用留白分组",
      "reason": "间距可辅助表达关系。",
      "basis": "editorial"
    },
    {
      "target": "recognition",
      "kind": "composes_with",
      "condition": "组织可见选项",
      "reason": "选项可见后仍需清晰分组。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "对内容分组",
      "instruction": "让组内与组间距离不同,并保留语义标签。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "principle": {
    "evidenceType": "感知原则的设计解释",
    "limit": "本样例不测量认知效果,不规定普适像素值。"
  },
  "demo": "proximity",
  "version": "0.1.0",
  "editorialStatus": "sample-reviewed",
  "requirements": [],
  "demoCapabilities": [
    "keyboard",
    "reduced_motion"
  ],
  "implementationNote": "能力标签只描述本演示;应用到产品时仍须重新验证。",
  "searchTerms": [
    "grouping",
    "spacing",
    "Gestalt",
    "visual relationships"
  ]
}