VOCABULARY / ENTRY
Proximity
proximity
Elements close together tend to be perceived as a group; greater separation suggests different groups.
Interactive specimen · Fictional product FIELDNOTES
Contact information
Only group spacing changes; labels and semantic groups stay intact.
Recognizing it
- Smaller gaps within a group
- Larger gaps between groups
- Spacing reflects semantic relationships
Concept boundary
Distance is one grouping cue. It does not replace semantic headings, form labels, or a correct reading order.
When to consider it
- Organizing labels and fields, related actions, or information groups
- Reducing unnecessary divider lines
When to be cautious
- Suggesting a relationship that does not actually exist
- Relying entirely on whitespace for accessible semantic grouping
Tradeoff
Visual grouping is economical, but excessive compression can impair reading and touch interaction.
Conditional rules · Editorial advice
When Grouping contentRecommendedDistinguish within-group and between-group spacing, and retain semantic labels.
Related entries
Swiss / International Typographic Style ↗Works with · Grouping typography with whitespace
Spacing can help express relationships.
Recognition Rather Than Recall ↗Works with · Organizing visible options
Visible options still need clear grouping.
Sources and what they support
NN/g · Proximity: Gestalt Principle ↗
Nearby elements are perceived as belonging together; separated elements are perceived as different groups.
Retrieved: 2026-09-15Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.
Type extensions and implementation notes
Capability tags describe this specimen only; verify the implementation again in a real product.
{
"evidenceType": "A design interpretation of a perceptual principle",
"limit": "This specimen does not measure cognitive effects or prescribe universal pixel values."
}Full Agent entry JSON
{
"id": "proximity",
"type": "principle",
"name": {
"zh": "接近律",
"en": "Proximity"
},
"aliases": [
"Gestalt Proximity",
"邻近原则",
"接近原则"
],
"granularity": "component",
"intents": [
"organize-content",
"reduce-complexity"
],
"tags": [
"grouping",
"spacing",
"Gestalt",
"visual relationships"
],
"definition": "Elements close together tend to be perceived as a group; greater separation suggests different groups.",
"boundary": "Distance is one grouping cue. It does not replace semantic headings, form labels, or a correct reading order.",
"signature": [
"Smaller gaps within a group",
"Larger gaps between groups",
"Spacing reflects semantic relationships"
],
"when": [
"Organizing labels and fields, related actions, or information groups",
"Reducing unnecessary divider lines"
],
"when_not": [
"Suggesting a relationship that does not actually exist",
"Relying entirely on whitespace for accessible semantic grouping"
],
"tradeoff": "Visual grouping is economical, but excessive compression can impair reading and touch interaction.",
"comparison": {
"focus": "Which elements belong together",
"mechanism": "Spatial distance influences perceived grouping",
"cost": "Must retain enough space for reading and interaction"
},
"sources": [
{
"id": "nng-proximity",
"title": "NN/g · Proximity: Gestalt Principle",
"url": "https://www.nngroup.com/videos/proximity-gestalt/",
"claim": "Nearby elements are perceived as belonging together; separated elements are perceived as different groups.",
"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": "Grouping typography with whitespace",
"reason": "Spacing can help express relationships.",
"basis": "editorial"
},
{
"target": "recognition",
"kind": "composes_with",
"condition": "Organizing visible options",
"reason": "Visible options still need clear grouping.",
"basis": "editorial"
}
],
"rules": [
{
"when": "Grouping content",
"instruction": "Distinguish within-group and between-group spacing, and retain semantic labels.",
"strength": "recommend",
"basis": "editorial"
}
],
"principle": {
"evidenceType": "A design interpretation of a perceptual principle",
"limit": "This specimen does not measure cognitive effects or prescribe universal pixel values."
},
"demo": "proximity",
"version": "0.1.0",
"editorialStatus": "sample-reviewed",
"requirements": [],
"demoCapabilities": [
"keyboard",
"reduced_motion"
],
"implementationNote": "Capability tags describe this specimen only; verify the implementation again in a real product.",
"searchTerms": [
"分组",
"间距",
"格式塔",
"视觉关系"
]
}