分隔線(Dividers)

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

用途

沒有錨點的項(Items without anchors)

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

contact chips contact chips

基于圖片的內容

由于網格列表(grid)本身屬性而造成的視覺效果,這就導致在網格列表中是不需要分隔線來區別子標題與內容的。在這種情況下,子標題與內容間的空白區域就可以分隔每塊的內容了。

contact chips

分隔線的類型

等屏寬分隔線(Full-bleed dividers)

等屏寬分隔線或以用于分隔列表中的每個數據項或者是頁面布局中的不同類型的內容。

contact chips contact chips

內凹分隔線(Inset dividers)

在有錨點元素(頭像或者是圖標)并且有關鍵字的標題列中,我們可以使用內凹分隔線。

contact chips contact chips

子標題和分隔線

在使用分隔的子標題時,可以將分隔線置于子標題之上,可以加強子標題與內容關聯度。

contact chips contact chips

原文:Dividers 翻譯:Kris 校對:huanglizhuo

两码中特期期