當(dāng)在列表中沒有像頭像或者是圖標(biāo)之類的錨點(diǎn)元素時(shí)，單靠空格并不足以用于區(qū)分每個(gè)數(shù)據(jù)項(xiàng)(原文中使用的是“瓦片”)。這種情況下使用一個(gè)等屏寬(full-bleed)的分隔線就會(huì)幫助區(qū)別開每個(gè)數(shù)據(jù)項(xiàng)目。使其它看起來(lái)更獨(dú)立和更有韻味。

http://wiki.jikexueyuan.com/project/material-design/images/components-dividers-items-without-anchor-1a_large_mdpi.png" alt="contact chips" /> http://wiki.jikexueyuan.com/project/material-design/images/components-dividers-items-without-anchor-1b_large_mdpi.png" alt="contact chips" />

基于圖片的內(nèi)容

由于網(wǎng)格列表（grid）本身屬性而造成的視覺效果，這就導(dǎo)致在網(wǎng)格列表中是不需要分隔線來(lái)區(qū)別子標(biāo)題與內(nèi)容的。在這種情況下，子標(biāo)題與內(nèi)容間的空白區(qū)域就可以分隔每塊的內(nèi)容了。

http://wiki.jikexueyuan.com/project/material-design/images/components-dividers-image-based-1a_large_mdpi.png" alt="contact chips" />

分隔線的類型

等屏寬分隔線（Full-bleed dividers）

等屏寬分隔線或以用于分隔列表中的每個(gè)數(shù)據(jù)項(xiàng)或者是頁(yè)面布局中的不同類型的內(nèi)容。

http://wiki.jikexueyuan.com/project/material-design/images/components-dividers-full-bleed-1a_large_mdpi.png" alt="contact chips" /> http://wiki.jikexueyuan.com/project/material-design/images/components-dividers-full-bleed-1b2_large_mdpi.png" alt="contact chips" />

內(nèi)凹分隔線（Inset dividers）

在有錨點(diǎn)元素（頭像或者是圖標(biāo)）并且有關(guān)鍵字的標(biāo)題列中，我們可以使用內(nèi)凹分隔線。

http://wiki.jikexueyuan.com/project/material-design/images/components-dividers-inset-1a_large_mdpi.png" alt="contact chips" /> http://wiki.jikexueyuan.com/project/material-design/images/components-dividers-inset-1b_large_mdpi.png" alt="contact chips" />

子標(biāo)題和分隔線

在使用分隔的子標(biāo)題時(shí)，可以將分隔線置于子標(biāo)題之上，可以加強(qiáng)子標(biāo)題與內(nèi)容關(guān)聯(lián)度。

http://wiki.jikexueyuan.com/project/material-design/images/components-dividers-subheaders-1a_large_mdpi.png" alt="contact chips" /> http://wiki.jikexueyuan.com/project/material-design/images/components-dividers-subheaders-1b_large_mdpi.png" alt="contact chips" />

原文：Dividers 翻譯：Kris 校對(duì)：huanglizhuo

上一篇：自適應(yīng) UI下一篇：滑動(dòng)刷新