用途:该条目聚焦 UI 设计中的视觉分隔问题,整理边框、分隔线以及其它分隔手法的选择与使用规则,帮助在界面中清晰划分内容层级与分组。
主要能力:给出五种分隔方式及其适用场景——空白间距(默认,适用于多数情况,如区块间距)、背景变化(大区块、明显分组,如交替行色)、边框或线条(空间紧凑、需要清晰界线,如表格行、列表项)、阴影(元素重叠、层级抬升,如表面上的卡片)、色带(强视觉断点、装饰性,如区块分隔)。
边框规则:通常 1px 足够,2px 仅用于强调;使用语义化颜色令牌,如 --color-border-default、--color-border-strong;不要给所有元素加边框,空白往往更合适;样式保持一致,整体实线,虚线仅用于特定含义(如拖拽目标、可选区域);圆角需与系统一致,不要混用直角与圆角边框。
分隔线规则:全宽分隔线用于主要区块切换;内缩分隔线(从边缘缩进)用于相关列表项;垂直分隔线谨慎使用(工具栏分组、分栏面板);不要同时叠加分隔线与间距,二者择一。
适用场景:界面布局、列表与表格、卡片与面板、工具栏分组等需要视觉分隔的设计工作。
限制:资料未提供具体代码示例、安装命令、平台支持、收费方式或效果数据,相关内容暂未提供。