Material Design中的分隔線設計

分類:設計 時間:2016-09-24

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

1.子標題和分隔線

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

2.沒有錨點的項

當在列表中沒有像頭像或者是圖標之類的錨點元素時,單靠空格并不足以用于區分每個數據項。

這種情況下使用一個等屏寬的分隔線就會幫助區別開每個數據項目。使其它看起來更獨立。

3.等屏寬分割線

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

4.內凹分割線

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

ADVERTISEMENT

5.基于圖片內容

這種情況圖片與圖片之間會產生空隙,這個時候則不需要采用分割線,加上并沒有產生分割線本身的作用,反而會影響美觀.

另外在平常分隔線的使用中需要注意一些細節,比如分隔線的顏色、粗細都會影響到整體的美觀度.

最后分享幾張Facebook 和 INS 里沒用分割線的頁面。

其實只要同類型的內容之間的距離分割適當,也不會影響用戶的閱讀,反而從視覺上來看顯得更簡潔明了.

希望分割線的使用能給大家帶來一定的幫助.


Tags: MaterialDesign

文章來源:http://www.ui.cn/detail/172039.html



相關文章