VOCABULARY / 词条
接近律
Proximity
位置接近的元素容易被感知为一组;间隔较大的元素容易被感知为分组不同。
可操作示例 · 虚构产品 FIELDNOTES
联系人信息
只改变组间距;标签与语义分组保留。
识别特征
- 组内紧密
- 组间更疏
- 间距与语义关系一致
概念边界
距离是分组线索之一,不替代语义标题、表单标签和正确的阅读顺序。
什么时候考虑它
- 组织标签与字段、相关操作、信息组
- 希望减少不必要的分隔线
什么时候慎用
- 用距离暗示实际上不存在的关系
- 把无障碍语义分组全部交给留白
取舍
视觉分组简洁,但过度压缩会造成误读与触控困难。
条件规则 · 编辑建议
当对内容分组建议让组内与组间距离不同,并保留语义标签。
相关词条
瑞士国际主义 ↗可以配合 · 排版使用留白分组
间距可辅助表达关系。
识别优于回忆 ↗可以配合 · 组织可见选项
选项可见后仍需清晰分组。
来源与支持范围
定义参考以上来源;数字界面示例、选择建议、条件关系及配方由本样例编辑,尚未经用户研究验证。
类型扩展与实现说明
能力标签只描述本演示;应用到产品时仍须重新验证。
{
"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"
]
}