分割线Divider
按钮与基础样式用一条线分开两组不同内容
分割线用来提示内容已经进入另一组,适合列表、菜单和信息区块之间的分隔。如果留白已经能表达关系,就不必再画线,避免页面被切得过碎。
其他登录方式
什么时候用
- 区分内容区块:表单分组、文章段落之间基本信息偏好设置
- 列表项之间:细线隔开每条,扫读更顺登录页设计进行中支付流走查已完成
- 工具栏分组:竖线隔开不同功能的图标
- 带文字的分割线:“其他登录方式”这种过渡微信扫码登录其他登录方式
组成结构 · Anatomy
上文内容:基本信息
下文内容:偏好设置
其他登录方式
1线体Line1px、浅灰,存在感越低越好
2文字Text可选,如「其他登录方式」,要弱化处理
常见变体 · Variants
水平分割线Horizontal
上下两块内容不相关时,轻轻隔开
带文字分割线With Text
其他方式
中间要说明过渡,如其他登录方式
垂直分割线Vertical
✎⬇
工具栏里隔开不同功能的图标
虚线分割线Dashed
比实线更弱,用于次要或临时分隔
典型使用场景
设置页分组
账号设置
个人资料林小hu ›
登录密码已设置 ›
通知偏好
邮件通知
浏览器推送
评论列表分隔
林小hu · 2 小时前
这个间距方案我试了,移动端也没问题,可以合入。
陈小机 · 1 小时前
收到,那我下午把组件文档同步更新一下。
编辑器工具栏
B
I
U
🔗
🖼
↩
登录页“其他方式”
登录 Vibe Coding 图鉴
其他登录方式
📧📱🐧