用途:使用接近性与间距,把相关元素在视觉上归为一组,并与无关组区分开。类型为生成加评估。
输入:元素清单、关系映射(哪些元素应归在一起)、元素当前间距。输出:用于体现关系的间距建议,以及对当前分组的通过/不通过评估。
主要能力:依据接近性原则调整间距,使组内元素比组间元素更靠近。判定标准方面,通过(分组良好)包括:相关元素间距小(8-16px);无关组间距更大(24-48px);表单标签贴近其输入框(4-8px);区块清晰分隔;空间层级为组件内最紧、组件间较松、区块间最松。不通过(分组差)包括:各处间距一致;标签远离输入框;相关元素视觉上脱节;无关元素过近;用边框而非空间来分组。
间距层级:组件内(标签加输入框)4-8px;相关组件之间16-24px;区块之间32-64px;主要页面区域之间64-96px。
常见分组模式:表单字段为标签到输入框,间距4-8px,之后16-24px;卡片为页眉到内容到页脚,内部内边距16-24px;列表项之间8-12px;按钮组主次按钮之间8-12px;区块之间48-64px。
常见失败模式与修复:处处等距,应收紧组内、扩大组间;标签漂移(标签距输入框20px以上),应减到4-8px;区块挤压,应在主要区块间加48px以上;依赖边框,应改用空间;卡片堆叠,卡片间应加16-24px间隙。
前提:已定义间距系统,内容已按逻辑分组。依赖:apply-consistent-spacing(使用间距刻度)。
示例评估:输入为含标题、标签、输入框、区块标题的表单,评估为部分通过,建议标签到输入框4px、输入组之后24px、区块标题上边距48px、区块内字段间16px。
限制:资料未提供具体平台、安装方式、收费或价格信息。