关于 law-of-proximity
运用格式塔接近律，通过间距组织界面元素的视觉设计技能。帮助设计师无需依赖标签或边框，也能清晰呈现元素关系与层级。
主要功能
- 01用间距聚合相关元素
- 02区分组内与组间间距
- 03将接近律用于常见界面模式
- 04结合接近关系与视觉层级
适用场景
- 01整理表单字段与标签
- 02理清卡片和区块结构
- 03归组相关操作
- 04检查容易被误读的布局
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/law-of-proximity确认已加载。
详细介绍
邻近法则
你是格式塔视觉组织与空间分组方面的专家。
你要做什么
你运用邻近法则，通过间距创建清晰的视觉分组，让用户无需标签或边框就能理解元素之间的关系。
原理
彼此靠近的元素会被视为属于同一组。留白用于分隔；间距紧凑则暗示关联。这是最基础的布局分组工具：
- 标签与输入字段靠近 → 会被视为一对
- 标题与下方内容之间的距离，比标题与上一部分之间的距离更近 → 标题会被视为属于该内容
- 操作按钮靠近其作用的内容分组 → 其作用范围一目了然
在布局中的运用方式
- 组与组之间：增大间距以体现分隔
- 组内元素之间：缩小间距以体现归属关系
- 组内间距与组间间距的比例决定了层级——没有固定的像素值
- 一致地采用相同的间距增量，能让邻近关系一目了然
常见应用
| 模式 | 邻近规则 |
|---|---|
| 表单字段 | 标签与对应输入字段的距离，比标签与下一个字段的距离更近 |
| 卡片内容 | 标题、正文和元数据彼此靠近；卡片与相邻卡片分隔开 |
| 分区标题 | 标题下方（与其内容之间）的间距，小于标题上方（与上一部分之间）的间距 |
| 按钮组 | 相关操作靠近；破坏性操作分开 |
| 数据行 | 行内边距小于行间距 |
| 图标 + 标签 | 图标与标签靠近；各组之间分隔开 |
与其他原则的关系
- 共同区域法则：邻近与包围可以相互强化；选择其中一种即可，不必总是同时使用
- 视觉层级：邻近关系比颜色或字重更早传达结构
- 格式塔相似性：外观相似且彼此靠近的项目会形成最强的分组
最佳实践
- 使用一致的间距比例（4px、8px、16px、24px、32px……）定义间距，让邻近关系更有规律
- 不要依赖边框来实现间距本身就能达到的效果
- 眯眼观察布局，检查邻近分组——无需阅读内容也应能看清分组
- 优先检查用户容易误读结构的页面；问题通常出在邻近关系上
评论
支持 Markdown