分隔線 (Dividers) 主要用于管理和分隔列表和頁面布局內(nèi)的內(nèi)容，以便讓內(nèi)容生成更好的視覺效果及空間感。示例中呈現(xiàn)的分隔線是一種弱規(guī)則，弱到不會去打擾到用戶對內(nèi)容的關注。

用途

沒有錨點的項（Items without anchors）

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

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）本身屬性而造成的視覺效果，這就導致在網(wǎng)格列表中是不需要分隔線來區(qū)別子標題與內(nèi)容的。在這種情況下，子標題與內(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）

等屏寬分隔線或以用于分隔列表中的每個數(shù)據(jù)項或者是頁面布局中的不同類型的內(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）

在有錨點元素（頭像或者是圖標）并且有關鍵字的標題列中，我們可以使用內(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" />

子標題和分隔線

在使用分隔的子標題時，可以將分隔線置于子標題之上，可以加強子標題與內(nèi)容關聯(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 校對：huanglizhuo