#我是一個(gè)可愛(ài)的搬磚工系列# 嘗試對(duì)照英文翻譯學(xué)習(xí)MD的組件設(shè)計(jì)忙厌,借此加深各種組件的應(yīng)用~
Material Design鏈接:Material Design——Dividers
?分隔符是一條細(xì)線,用于對(duì)列表和布局中的內(nèi)容進(jìn)行分組。
一、用法
分隔符將內(nèi)容分成清晰的組。
△ 原則
· 細(xì)小的?分隔符在布局中應(yīng)該是明顯的,但不是刺眼的
· 次要的?只有在使用空格不能分隔元素時(shí)才應(yīng)使用分隔符
· 稀疏的?謹(jǐn)慎使用分隔線來(lái)創(chuàng)建分組而不是單獨(dú)的項(xiàng)目
△ 類型
左:全屏分割線——?將內(nèi)容分成多個(gè)部分并跨越布局的整個(gè)長(zhǎng)度 ;右:?插入分隔線 ——插入分隔符分隔相關(guān)內(nèi)容瓤漏,由與應(yīng)用欄標(biāo)題對(duì)齊的元素瞄準(zhǔn)。
左:中間分割線——中間分隔符與空間相關(guān)的內(nèi)容颊埃,并以布局或列表為中心?蔬充;右:分隔符可以與子標(biāo)題配對(duì),以幫助定義內(nèi)容分組班利。
二饥漫、分類
△ 全屏分割線
全屏分割線分隔部分的內(nèi)容, 如:
· 分隔列表和布局元素
·?指示元素可擴(kuò)展的位置
左:當(dāng)列表沒(méi)有錨定元素 (如圖標(biāo)) 時(shí), 間距可能不足以分隔內(nèi)容。全屏分隔線可以幫助分隔單個(gè)平鋪罗标;右:?導(dǎo)航抽屜中的全屏分割線庸队。
△ 插入分割線
嵌入分割線分離相關(guān)內(nèi)容,例如電子郵件線程中的電子郵件闯割。它們應(yīng)該與錨定元素一起使用彻消,如圖標(biāo),并與應(yīng)用程序欄標(biāo)題左對(duì)齊宙拉。
左:插入分割線宾尚;右:?當(dāng)有錨定元素(如圖標(biāo))時(shí),使用插入分割線。
左:選用插入分割線進(jìn)行分組煌贴;右:?不要用插入分割線分割單獨(dú)個(gè)體御板。
△? 中間分割線
分割線也可以放置在布局的中間。它們最適合于分離相關(guān)內(nèi)容牛郑,例如收據(jù)上的價(jià)格怠肋。
左:中間分割線上方嵌入標(biāo)題;右:全屏分割線上方嵌入標(biāo)題淹朋。??
△ 帶標(biāo)題的分割線
分割線可以與子標(biāo)題配對(duì)笙各,以識(shí)別分組內(nèi)容。在子標(biāo)題上方放置分割線瑞你,以加強(qiáng)子標(biāo)題與內(nèi)容的連接酪惭。
左:中間分割線上方嵌入標(biāo)題希痴;右:全屏分割線上方嵌入標(biāo)題者甲。??
END.THANKS FOR YOUR READING~
如有不當(dāng),還請(qǐng)多多指教~