Material Design基礎(chǔ) - spacing methods

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

3. 參考文檔

Material System - layout spacing method

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末寞忿,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子顶岸,更是在濱河造成了極大的恐慌腔彰,老刑警劉巖叫编,帶你破解...
    沈念sama閱讀 212,222評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異霹抛,居然都是意外死亡搓逾,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,455評論 3 385
  • 文/潘曉璐 我一進(jìn)店門杯拐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來霞篡,“玉大人,你說我怎么就攤上這事端逼±时” “怎么了?”我有些...
    開封第一講書人閱讀 157,720評論 0 348
  • 文/不壞的土叔 我叫張陵顶滩,是天一觀的道長余掖。 經(jīng)常有香客問我,道長礁鲁,這世上最難降的妖魔是什么盐欺? 我笑而不...
    開封第一講書人閱讀 56,568評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮仅醇,結(jié)果婚禮上冗美,老公的妹妹穿的比我還像新娘。我一直安慰自己着憨,他們只是感情好墩衙,可當(dāng)我...
    茶點故事閱讀 65,696評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著甲抖,像睡著了一般漆改。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上准谚,一...
    開封第一講書人閱讀 49,879評論 1 290
  • 那天挫剑,我揣著相機與錄音,去河邊找鬼柱衔。 笑死樊破,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的唆铐。 我是一名探鬼主播哲戚,決...
    沈念sama閱讀 39,028評論 3 409
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼艾岂!你這毒婦竟也來了顺少?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,773評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎脆炎,沒想到半個月后梅猿,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,220評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡秒裕,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,550評論 2 327
  • 正文 我和宋清朗相戀三年袱蚓,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片几蜻。...
    茶點故事閱讀 38,697評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡喇潘,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出入蛆,到底是詐尸還是另有隱情响蓉,我是刑警寧澤,帶...
    沈念sama閱讀 34,360評論 4 332
  • 正文 年R本政府宣布哨毁,位于F島的核電站枫甲,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏扼褪。R本人自食惡果不足惜想幻,卻給世界環(huán)境...
    茶點故事閱讀 40,002評論 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望话浇。 院中可真熱鬧脏毯,春花似錦、人聲如沸幔崖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,782評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽赏寇。三九已至吉嫩,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間嗅定,已是汗流浹背自娩。 一陣腳步聲響...
    開封第一講書人閱讀 32,010評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留渠退,地道東北人忙迁。 一個月前我還...
    沈念sama閱讀 46,433評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像碎乃,于是被迫代替她去往敵國和親姊扔。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,587評論 2 350

推薦閱讀更多精彩內(nèi)容