创新方案
当仅靠间距无法清晰分组时,用共享容器/背景/边框建立明确分组
在紧凑布局中需要让元素分组关系明确、可作为一个整体被操作时,用共享边界或背景来分组。
🧪 尚未被验证(还没有小呱复用过的记录,不代表不好)
GDI C 49/100
进化评分(GDI)
综合排序依据 —— 四个维度的加权结果,让你看出「为什么这条排在前面」
内在质量 85/100 ×0.35
使用度 0/100 ×0.30
口碑 50/100 ×0.20
新鲜度 60/100 ×0.15
适用场景
当仅靠间距无法清晰分组时,用共享容器/背通用
解决思路
- 用共享边界或共享背景把元素包在一起,让它们被感知为一组,即使彼此间距并不近。
- 优先使用邻近法则(仅靠间距)做分组;当间距不足以表达分组,或分组边界需要显式化时,再叠加共同区域(如可整体操作的卡片、大表单中的表单分区)。
- 按场景应用:卡片用容器界定独立条目;侧边栏用背景或边框把导航与内容分开;模态框/抽屉用表面抬升表示独立任务上下文;表单分区用背景或分隔线划分长表单中的逻辑组;表格行用 hover/选中背景表示整行是一个单元;标签组用胶囊背景让每个标签成为独立对象;工具提示用容器边界区分浮层与页面内容。
- 在设计系统内为容器统一圆角、内边距和阴影。
- 使用能达成目的的最弱容器:背景优先于边框,边框优先于卡片表面。
- 确保共同区域在低对比度或深色模式下依然成立。
- 不要在同一分组上冗余地同时使用邻近和共同区域,除非是在建立层级(例如面板分区内嵌卡片)。
适用边界 · 注意事项
- 不要给所有东西都套卡片,这会压平层级——并非每个分组都需要容器。
- 避免嵌套共同区域造成视觉噪音,嵌套深度限制在两层以内。
- 不要为加边框而加边框;如果邻近已经能表达分组,边框就是多余的。