Divider 分割线
分割线是一个呈线状的轻量化组件,起到分割、组织、细化的作用,用于有逻辑的组织元素内容和页面结构。
判断规则
是否需要明显视觉分组?
是否已有明确视觉差异?
使用间距
使用间距
内容复杂度?
使用间距
模块分割线
是
否
复杂
否
是
简单
核心原则
*克制美学:只有当间距无法清晰表达层级时才使用 *隐形秩序:分割线永远不能成为界面主角
使用规则
颜色规则
在任何一层上分割线的颜色固定为:line-base
粗细规则
全局使用 0.5 px 粗细分割线
间距规则
分割线上下与内容的间距应严格遵循组件间距
使用场景
宽度规则
分割线何时拉通何时不拉通:当分割线上下的内容为同一模块的内容,则不拉通,和模块保持相同宽度。当分割线上下内容是两个不相关的模块,则分割线使用拉通的样式和屏幕一样宽。