切换·Esc 返回

分割线Divider

按钮与基础样式
用一条线分开两组不同内容

分割线用来提示内容已经进入另一组,适合列表、菜单和信息区块之间的分隔。如果留白已经能表达关系,就不必再画线,避免页面被切得过碎。

什么时候用

  • 区分内容区块:表单分组、文章段落之间
    基本信息
    偏好设置
  • 列表项之间:细线隔开每条,扫读更顺
    登录页设计进行中
    支付流走查已完成
  • 工具栏分组:竖线隔开不同功能的图标
  • 带文字的分割线:“其他登录方式”这种过渡
    微信扫码登录
    其他登录方式
    📧📱

什么时候不用

  • 每行内容都加线:满屏横线,像张 Excel
  • 能用 间距 Space 拉开距离就别画线,留白更干净
  • 线太粗太深,比内容还抢眼
  • 卡片 Card 里面再给每个区域划线,卡片本身就是边界
    项目动态全部
    卡片本身就是边界,里面别再划线
组成结构 · Anatomy
上文内容:基本信息 下文内容:偏好设置 其他登录方式
1线体Line1px、浅灰,存在感越低越好
2文字Text可选,如「其他登录方式」,要弱化处理
常见变体 · Variants
水平分割线Horizontal
上下两块内容不相关时,轻轻隔开
带文字分割线With Text
其他方式
中间要说明过渡,如其他登录方式
垂直分割线Vertical
工具栏里隔开不同功能的图标
虚线分割线Dashed
比实线更弱,用于次要或临时分隔
典型使用场景
设置页分组
账号设置
个人资料林小hu ›
登录密码已设置 ›
通知偏好
邮件通知
浏览器推送
评论列表分隔
林小hu · 2 小时前
这个间距方案我试了,移动端也没问题,可以合入。
陈小机 · 1 小时前
收到,那我下午把组件文档同步更新一下。
编辑器工具栏
B I U 🔗 🖼
登录页“其他方式”
登录 Vibe Coding 图鉴
其他登录方式
📧📱🐧