Material design 中的對(duì)象與現(xiàn)實(shí)生活中的對(duì)象具有相似的性質(zhì)。在現(xiàn)實(shí)生活中,不同對(duì)象可以被堆積或粘貼起來(lái),但是不能彼此交叉。對(duì)象自身塑造了自己的陰影并返回自己的光影。
依據(jù)這些性質(zhì)所構(gòu)造出來(lái)的空間模型對(duì)于用戶來(lái)說(shuō)是非常熟悉的,這一模型也可以被長(zhǎng)期應(yīng)用于移動(dòng)應(yīng)用當(dāng)中。支撐這一空間模型的正是“高度”(Elevation)和“光影”(Shadows)這兩個(gè)概念。
高度(安卓)
陰影
元素關(guān)系
高度是在 Z 軸上兩個(gè)不同平面之間的一種相對(duì)深度或距離。
詳述:
這里是一些與安卓應(yīng)用相關(guān)的圖表和數(shù)據(jù)。
陰影影響
為自定義元素定義“陰影”
http://wiki.jikexueyuan.com/project/material-design/images/3_1.png" alt="" />
兩個(gè)對(duì)象間的多種高度度量
所有 Material 對(duì)象除去大小之外,還有一個(gè)“靜止高度”,或者稱“默認(rèn)高度”,它是不會(huì)變化的。當(dāng)一個(gè)對(duì)象的高度產(chǎn)生變化時(shí),它將會(huì)盡快恢復(fù)到自身的靜止高度。
某一元素類型的靜止高度在移動(dòng)應(yīng)用中是一個(gè)常量。(比如,F(xiàn)AB 高度不會(huì)在某一個(gè)應(yīng)用中是 6 dp 而在另一個(gè)應(yīng)用中是 16 dp)
一些元素類型擁有感應(yīng)高度,也就是說(shuō)它們會(huì)根據(jù)用戶的輸入(比如常規(guī)的、關(guān)注的和壓制的)或系統(tǒng)事件來(lái)改變高度。這些高度的變化會(huì)通過(guò)動(dòng)態(tài)高度偏移而不斷生成。
動(dòng)態(tài)高度偏移是某一元素移動(dòng)的目標(biāo)高度,它與該元素的靜止?fàn)顟B(tài)有關(guān)??梢源_定的是高度的變化在事件和元素類型中是持久發(fā)生的。比如說(shuō),所有通過(guò)按壓來(lái)提升的元素相對(duì)于其靜態(tài)高度來(lái)說(shuō)都具有相似的高度變化。
一旦輸入事件完成或被取消,那么元素將會(huì)恢復(fù)到它的靜止高度上。
處于感應(yīng)高度的元素當(dāng)它在靜止高度與動(dòng)態(tài)高度偏移之間移動(dòng)的時(shí)候可能會(huì)遇到其他的元素。由于 Material 不能相互交叉,沒(méi)有任何一種方式能夠讓元素之間產(chǎn)生沖突,無(wú)論是基于均元素基礎(chǔ)(per-component basis)還是通過(guò)使用完整應(yīng)用布局。
在某一個(gè)元素水平上,元素可以在它們產(chǎn)生沖突之前提前移動(dòng)或被移動(dòng)。比如說(shuō),一個(gè)“浮動(dòng)動(dòng)作按鈕”(FAB)可以在用戶選擇一張卡片之前消失或移出屏幕,或者它也可以在某一個(gè) “snack bar” 出現(xiàn)時(shí)移動(dòng)。
在布局水平上,你需要通過(guò)設(shè)計(jì)你的應(yīng)用布局來(lái)將產(chǎn)生沖突的機(jī)會(huì)降到最低水平。比如說(shuō),可以通過(guò)將 FAB 置于某個(gè)卡片流的一端來(lái)避免當(dāng)用戶嘗試獲取某個(gè)卡片時(shí)所產(chǎn)生的沖突。
http://wiki.jikexueyuan.com/project/material-design/images/2_0_1.png" alt="" />
http://wiki.jikexueyuan.com/project/material-design/images/2_0_2.png" alt="" />
下面的圖表對(duì)比了多種元素的靜止高度和動(dòng)態(tài)高度偏移。
http://wiki.jikexueyuan.com/project/material-design/images/3_2.png" alt="" />
在這一圖表中,只有高度的尺寸和元素布局是精確的。其他尺寸和整體的元素布局只是為了說(shuō)明而列出的。
http://wiki.jikexueyuan.com/project/material-design/images/3_3.png" alt="" />
一個(gè)包含卡片和FAB應(yīng)用布局的實(shí)例與它在Z軸上元素高度的橫截面圖表。
http://wiki.jikexueyuan.com/project/material-design/images/3_4.png" alt="" />
一個(gè)包含開(kāi)放導(dǎo)航抽屜的應(yīng)用布局實(shí)例與它在Z軸上元素高度的橫截面圖表。
“陰影”提供了對(duì)象深度和方向性移動(dòng)的重要視覺(jué)線索。它們是唯一一種標(biāo)示不同平面之間分離程度的視覺(jué)線索。某一對(duì)象的“高度”決定了其具體“陰影”的表現(xiàn)形式。
http://wiki.jikexueyuan.com/project/material-design/images/3_5.png" alt="" />
否。一旦沒(méi)有了陰影,沒(méi)有什么可以標(biāo)示浮動(dòng)動(dòng)作按鈕是從背景層分離出來(lái)的。
http://wiki.jikexueyuan.com/project/material-design/images/3_6.png" alt="" />
否。卷曲的陰影說(shuō)明浮動(dòng)動(dòng)作按鈕與“藍(lán)層”(blue sheet)是兩個(gè)分離開(kāi)來(lái)的元素。然而,由于它們的陰影非常的相似以至于會(huì)被誤認(rèn)為它們?cè)谕桓叨壬稀?/p>
http://wiki.jikexueyuan.com/project/material-design/images/3_7.png" alt="" />
是。更柔和、更大的陰影說(shuō)明浮動(dòng)動(dòng)作按鈕相比于擁有更卷曲陰影的“藍(lán)層”(blue sheet)處于更高的高度之上。
在運(yùn)動(dòng)中,陰影提供了關(guān)于某個(gè)對(duì)象移動(dòng)方向以及不同平面之間距離是否正在增加或減少的有用線索。
http://wiki.jikexueyuan.com/project/material-design/images/3_8.png" alt="" />
否。如果沒(méi)有一個(gè)陰影來(lái)說(shuō)明高度,那么就不能明確一個(gè)方形到底是它的自身尺寸在增加還是它的高度在增加。
http://wiki.jikexueyuan.com/project/material-design/images/3_9.png" alt="" />
是。當(dāng)某一個(gè)對(duì)象的高度增加時(shí)其陰影會(huì)變得更柔和、更大,當(dāng)其高度減小時(shí),陰影會(huì)變得更卷曲。
http://wiki.jikexueyuan.com/project/material-design/images/3_10.png" alt="" />
是。在這一實(shí)例中,連貫的陰影幫助用戶明白某一個(gè)對(duì)象看起來(lái)好像是它的高度在增加其實(shí)是它的形狀在改變。
下面的元素陰影應(yīng)被用于標(biāo)準(zhǔn)參考。如果在說(shuō)明中涉及任何關(guān)于下面的參考陰影和元素陰影的不同情況出現(xiàn),那么都?xì)w于參考陰影。
應(yīng)用條
4dp
http://wiki.jikexueyuan.com/project/material-design/images/3_11.png" alt="" />
浮動(dòng)按鈕
靜態(tài):2dp
敲擊狀態(tài):8dp
http://wiki.jikexueyuan.com/project/material-design/images/3_12.png" alt="" />
浮動(dòng)動(dòng)作按鈕(FAB)
靜態(tài):6dp
敲擊狀態(tài):12dp
http://wiki.jikexueyuan.com/project/material-design/images/3_14.png" alt="" />
卡片
靜態(tài):2dp
選中狀態(tài):8dp
http://wiki.jikexueyuan.com/project/material-design/images/3_16.png" alt="" />
菜單和子菜單
菜單:8dp
子菜單:9dp(為子菜單增加 1dp)
http://wiki.jikexueyuan.com/project/material-design/images/3_18.png" alt="" />
對(duì)話框
24dp
http://wiki.jikexueyuan.com/project/material-design/images/3_19.png" alt="" />
導(dǎo)航抽屜和右抽屜
16dp
http://wiki.jikexueyuan.com/project/material-design/images/3_20.png" alt="" />
底部單頁(yè)
16dp
http://wiki.jikexueyuan.com/project/material-design/images/3_21.png" alt="" />
刷新按鈕
3dp
http://wiki.jikexueyuan.com/project/material-design/images/3_22.png" alt="" />
快速查詢/搜索條
靜止?fàn)顟B(tài):2dp
滾動(dòng)狀態(tài):3dp
http://wiki.jikexueyuan.com/project/material-design/images/3_23.png" alt="" />
Snackbar
6dp
http://wiki.jikexueyuan.com/project/material-design/images/3_25.png" alt="" />
切換按鈕
1dp
http://wiki.jikexueyuan.com/project/material-design/images/3_26.png" alt="" />
你怎樣去組織在某一應(yīng)用中的對(duì)象或?qū)ο蠹先Q于它們?cè)鯓右罁?jù)其他對(duì)象來(lái)移動(dòng)。對(duì)象可以獨(dú)立自主地移動(dòng)或在受到比它更高層次對(duì)象限制的條件下移動(dòng)。
所有對(duì)象都是以“父-子”關(guān)系描述的層級(jí)體系的一部分?!白印痹卦谶@一關(guān)系體系中代表它們“父”元素的下級(jí)元素。對(duì)象可以是這一系統(tǒng)的“子”元素或其他對(duì)象的“子”元素。
“父-子”元素說(shuō)明:
項(xiàng)目以根元素為父元素,比如主 UI 元素,它們相比于其他對(duì)象來(lái)說(shuō)會(huì)自主移動(dòng)。比如說(shuō),浮動(dòng)動(dòng)作按鈕不會(huì)與內(nèi)容一起轉(zhuǎn)動(dòng)。其他元素包括:
某個(gè)對(duì)象與其他對(duì)象交互的方式由它們?cè)凇案?子”層次中所處位置決定。
比如:
你會(huì)如何確定某些對(duì)象的高度(即它們?cè)?Z 空間的位置)取決于你想描述的內(nèi)容層次以及某一個(gè)對(duì)象是否需要相對(duì)于其他對(duì)象自主移動(dòng)。
隨著父表的移動(dòng),升高的按鈕(它的子元素)會(huì)伴隨著它移出屏幕。
隨著卡片集合卷出了屏幕,它的子卡片也會(huì)隨之卷出屏幕。浮動(dòng)動(dòng)作按鈕保留在某一地點(diǎn)因?yàn)樗母冈貨](méi)有被卷動(dòng)。