android 分割线,Android设计规范Material Design-Components(6分隔线)

分隔线(Dividers)

分隔线(Dividers) 主要用于管理和分隔列表和页面布局内的内容,以便让内容生成更好的视觉效果及空间感。示例中呈现的分隔线是一种弱规则,弱到不会去打扰到用户对内容的关注。

用途

没有锚点的项(Items without anchors)

当在列表中没有像头像或者是图标之类的锚点元素时,单靠空格并不足以用于区分每个数据项(原文中使用的是“瓦片”)。这种情况下使用一个等屏宽(full-bleed)的分隔线就会帮助区别开每个数据项目。使其它看起来更独立和更有韵味。

85d20bb7caeda2f8a2f64538916355dc.png 

28647290dfec8adebe9d251aba368956.png

基于图片的内容

由于网格列表(grid)本身属性而造成的视觉效果,这就导致在网格列表中是不需要分隔线来区别子标题与内容的。在这种情况下,子标题与内容间的空白区域就可以分隔每块的内容了。

a5c680be171701b7151124d34aae53e9.png

分隔线的类型

等屏宽分隔线(Full-bleed dividers)

等屏宽分隔线或以用于分隔列表中的每个数据项或者是页面布局中的不同类型的内容。

f2a1fe357c77749706beed5d0978591a.png 

714a772272656135e9027744236378a1.png

内凹分隔线(Inset dividers)

在有锚点元素(头像或者是图标)并且有关键字的标题列中,我们可以使用内凹分隔线。

794beb6ad0e042c1e03428df13b8143d.png 

b8bed879d1dd2f73ec93c43ae383712b.png

子标题和分隔线

在使用分隔的子标题时,可以将分隔线置于子标题之上,可以加强子标题与内容关联度。

70de9bb7dae012aef6bdec5185d156cb.png 

2c7486a24c915ae9d8baf499ffa71fcf.png

非常感谢这些辛苦翻译的小伙伴!!

文章转自:http://design.1sters.com/

=========================关于学ui网=========================

xueui.cn 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值