1. spacing methods
spacing methods使用基線網(wǎng)格彻秆、關(guān)鍵線轻猖、填充和增量間距來調(diào)整比率诸典、容器和觸摸目標(biāo)媒至。
1.1. 基準(zhǔn)網(wǎng)格
1.1.1. 8dp網(wǎng)格
所有組件都與移動設(shè)備粱哼、平板電腦和臺式機的8dp方形基線網(wǎng)格對齊季二。
1.1.2. 4dp網(wǎng)格
組件中的圖標(biāo)、type和某些元素可以與4dp網(wǎng)格對齊揭措。
1.2. 間距方法
間距方法比響應(yīng)式布局網(wǎng)格更精細(xì)胯舷。間距方法是一組關(guān)于如何在layout和組件中放置元素的規(guī)則。
1.2.1. padding
padding是組件和元素之間的空間.
padding指的是UI元素之間的空間绊含。padding是關(guān)鍵線的另一種間距方法桑嘶,以8dp或4dp為增量進(jìn)行測量。
padding可以垂直和水平測量躬充,不需要跨越布局的整個高度逃顶。
1.2.2. Dimensions
Dimensions描述了構(gòu)件的寬度和高度。
Dimensions是指構(gòu)件的寬度和高度充甚。
某些組件(如應(yīng)用程序欄或列表)僅列出元素的高度以政。這些元件的高度應(yīng)與8dp網(wǎng)格對齊。它們的寬度沒有指定伴找,因為它響應(yīng)于視口寬度盈蛮。
1.2.3. Alignment
Alignment在組件中放置元素。
1.2.4. 關(guān)鍵線
關(guān)鍵線是一種對齊工具技矮,可以在布局網(wǎng)格之外一致地放置元素抖誉。它們是垂直線殊轴,顯示元素不與網(wǎng)格對齊時放置的位置。關(guān)鍵線由每個元素與屏幕邊緣的距離決定寸五,并以8dp的增量測量梳凛。
關(guān)鍵線可以在布局中的元素之間創(chuàng)建更多或更少的空間。它們可以根據(jù)斷點范圍進(jìn)行調(diào)整梳杏。
1.3. Containers and ratios
1.3.1. Containers
容器是用來表示封閉區(qū)域的形狀韧拒。容器可以保存圖像、圖標(biāo)或曲面等UI元素十性。
容器可以是剛性的叛溢,并限制其中元素的大小或裁剪【⑹剩或者楷掉,它們可以是靈活的,并且可以擴(kuò)展以支持它們所持有的內(nèi)容的大小霞势。
1.3.2. Aspect ratios
縱橫比是元素寬度與高度的比例烹植。縱橫比寫為寬度:高度愕贡。
要保持布局的一致性草雕,請在圖像、曲面和屏幕大小等元素上使用一致的縱橫比固以。
建議在整個UI中使用以下縱橫比:16:9墩虹;3:2; 4:3; 1:1; 3:4; 2:3
1.3.3. Flexible ratios
靈活的比例大小由布局網(wǎng)格決定:
容器寬度由屏幕布局決定,并會增大以填充最大可用空間
容器高度由容器中圖像的高度決定
使用靈活的比例憨琳,讓內(nèi)容形式?jīng)Q定容器的高度诫钓。
1.3.4. Responsive cropping
要相應(yīng)地顯示圖像,請定義如何在不同的斷點范圍內(nèi)裁剪圖像篙螟。在不同的斷點范圍內(nèi)菌湃,裁剪可以:
保持一個固定的比率
適應(yīng)不同的比率
固定圖像高度
保持一個比率 - 圖像大小可以在分界點范圍內(nèi)保持一個固定比率。
適應(yīng)不同的比率 - 圖像比率也可以通過適應(yīng)不同的斷點范圍而改變遍略。
固定圖像高度 - 圖像大小可以在斷點范圍內(nèi)保持固定的高度和流體寬度慢味。
1.3.5. 觸碰目標(biāo)
觸摸目標(biāo)適用于接收觸摸和非觸摸輸入的任何設(shè)備。為了平衡信息密度和可用性墅冷,觸摸目標(biāo)應(yīng)至少為48 x 48 dp,目標(biāo)之間的空間至少為8 dp或油。
2. Material Design 系列文章
最新更新以及更多Material Design相關(guān)文章請訪問 鵬叔的技術(shù)博客空間-Material Design