界面图鉴
分割线Divider
分割线就是一条线吗？什么时候该画出来，什么时候只留空白？
用一条细线把相邻内容或操作分成几组，横着隔开段落，竖着隔开工具，让界面更好扫读。
01 · 拆开看看
这一块由什么组成
Divider 来自 divide（分开），也常叫 Separator。它像文章里的段间横线：不装内容，只标出内容之间的边界。样式可以很轻，但方向、长度和留白要说清楚：
线条Stroke
通常是 1px 的细线，颜色比正文轻；横向分上下，纵向分左右。
两端缩进Inset
决定线有多长：通栏铺满，或缩进后与文字起点对齐。
两侧留白Spacing
线与内容之间的距离。水平线留上下间距，竖线留左右间距。
可选文字Label
线中间可放「或」「今天」等短文字，说明两边的关系；普通分割线不需要。
02 · 常见变体
同一个零件，几种摆法
横着隔开上下内容，常见于设置分组、列表和文章段落。
竖着隔开左右操作组，常见于工具栏；要有明确的高度。
中间嵌一句「或」或日期，常见于登录方式切换和消息时间分组。
03 · 火眼金睛
这个设置面板里，哪一处是 Divider？
不是所有边线都叫分割线。点一点，找出把两组设置隔开的那一条。
点一块试试，看看它叫什么
这是标题，用文字说清这一组是什么；Divider 用线标出两组之间的边界。
这是包围账号信息的边框，用来圈定容器；要找的 Divider 在两组内容之间。
就是它！一条细线把账号信息和通知设置分开，不包围内容，也不承担点击操作。
这是触发保存的按钮。普通 Divider 只负责分组，不是可点击或可拖动的控件。
04 · 用与不用
什么时候该上它
- 设置页、菜单里需要明确区分的内容组
- 工具栏中不同用途的操作组
- 登录方式之间的「或」、消息列表里的日期分隔
- 留白和标题已经足够清楚的地方
- 给每一小段内容都画线，让页面变成格子
- 需要拖动调整两侧面板尺寸时——那是 Splitter
05 · 想一想
一道题，检查眼力
设置页中，「账号信息」和「通知偏好」挨在一起，不容易看出分组。怎么改更合适？
对。线标出分组边界，留白提供呼吸空间；组内保持紧凑，关系就清楚了。
线比内容还抢眼了。每一行都切开，反而看不出哪些字段属于同一组。
那是调整面板尺寸的 Splitter，不是普通 Divider。这里需要的是分组，不是新增操作。
06 · 说给 AI 听
让 AI 改它时，这样说
说清位置、方向、线条样式和间距；需要缩进或文字时也一并说明，别只说「加条线」。
在账号信息和通知设置之间加一条水平 divider，1px 浅灰色，上下各留 24px
工具栏的编辑操作和分享操作之间加一条竖向 divider，高 20px，左右各留 12px
邮箱登录和手机号登录之间加一个带「或」字的 divider，文字两边的线等长
列表里的 divider 左侧缩进到文字起点，不要穿过头像；最后一项下面不加线
最容易踩的坑
别把分割线当装饰铺满页面，先看留白能否解决。HTML 的 <hr> 表示主题分隔，纯装饰线用 CSS；有语义的竖向分隔符用 role="separator" 并声明 aria-orientation="vertical"。普通 Divider 不需要进入键盘 Tab 顺序。