Divider 分割线

分割线是一个呈线状的轻量化组件,起到分割、组织、细化的作用,用于有逻辑的组织元素内容和页面结构。

判断规则

是否需要明显视觉分组?

是否已有明确视觉差异?

使用间距

使用间距

内容复杂度?

使用间距

模块分割线

复杂

简单

核心原则

*克制美学:只有当间距无法清晰表达层级时才使用 *隐形秩序:分割线永远不能成为界面主角

使用规则

颜色规则

在任何一层上分割线的颜色固定为:line-base

粗细规则

全局使用 0.5 px 粗细分割线

间距规则

分割线上下与内容的间距应严格遵循组件间距

使用场景

宽度规则

分割线何时拉通何时不拉通:当分割线上下的内容为同一模块的内容,则不拉通,和模块保持相同宽度。当分割线上下内容是两个不相关的模块,则分割线使用拉通的样式和屏幕一样宽。

DESIGN

中文