分割线Divider
你可能会说
上下两块内容太挤了，中间加一条淡淡的线隔开。
分割线是用细线分开相邻内容分组的视觉元素订单摘要与收货地址之间可用分割线提示信息组已经变化。留白足以分组时不必加线，避免把页面切成许多碎块。
你可以这样告诉 AI Agent
请减少设置页的线条：账号、安全、通知主要用标题和块间距分组，只有边界仍不清楚时加一条浅色分割线。不要给每行都画线；检查分组在深色模式和手机端仍能识别。
什么时候用
- 区分内容区块：表单分组、文章段落之间基本信息偏好设置
- 列表项之间：细线隔开每条，扫读更顺登录页设计进行中支付流走查已完成
- 工具栏分组：竖线隔开不同功能的图标
- 带文字的分割线：“其他登录方式”这种过渡微信扫码登录其他登录方式
组成结构 · Anatomy
上文内容：基本信息
下文内容：偏好设置
其他登录方式
使用细线和低对比颜色，避免抢过内容
可选，如「其他登录方式」，要弱化处理
常见变体 · Variants
水平分割线Horizontal
上下两块内容不相关时，轻轻隔开
带文字分割线With Text
其他方式
中间要说明过渡，如其他登录方式
垂直分割线Vertical
✎⬇
工具栏里隔开不同功能的图标
虚线分割线Dashed
比实线更弱，用于次要或临时分隔
典型使用场景
设置页分组
账号设置
个人资料林小hu ›
登录密码已设置 ›
通知偏好
邮件通知
浏览器推送
评论列表分隔
林小hu · 2 小时前
这个间距方案我试了，移动端也没问题，可以合入。
陈小机 · 1 小时前
收到，那我下午把组件文档同步更新一下。
编辑器工具栏
B
I
U
🔗
🖼
↩
登录页“其他方式”
登录 Vibe Coding 图鉴
其他登录方式
📧📱🐧
延伸阅读 · 权威出处
快速练习