用途:这是一个关于视觉组织原则的技能,帮助设计者运用“共同区域法则”(Law of Common Region),通过共享边界或背景把元素归为一组,使用户理解哪些元素属于同一整体。
主要能力:讲解共同区域法则的原理——被同一边界包围或置于同一背景上的元素会被感知为一组,即使彼此距离并不近;容器是最强的分组信号之一。技能还对比了“接近法则”与“共同区域法则”:前者靠空间距离,开销为零,适合大多数布局分组;后者靠共享边界或背景,带有视觉重量,适合需要更强或更明确边界的场景,如卡片、面板、侧边栏、标签页、模态框。建议先用接近法则,当接近法则不足或分组边界需要显式表达时再引入共同区域。
应用场景:卡片用于界定独立条目;侧边栏用背景或边框分隔导航与内容;模态框或抽屉用表面层级表示独立任务上下文;表单分区用背景或分隔线划分长表单中的逻辑组;表格行用悬停或选中背景表示整行是一个单元;标签组用胶囊背景让每个标签成为独立对象;工具提示用容器边界区分浮层与页面内容。
限制与注意事项:并非每个分组都需要容器,到处使用卡片会削弱层级;嵌套共同区域会产生视觉噪音,嵌套深度建议不超过两层;仅为装饰而加的边框会增加杂乱,若接近法则已能表达分组,边框就是多余的。最佳实践包括:在设计系统内保持容器圆角、内边距和阴影一致;使用能达成目的的最弱容器,优先背景、其次边框、最后卡片表面;确保共同区域在低对比度或深色模式下依然有效;除非要建立层级(如面板分区内的卡片),否则不要在同一分组上冗余地同时使用接近法则和共同区域。
使用方式:资料未提供具体安装命令或调用步骤,暂未提供。