Underpinning this spatial model are the concepts of elevation and shadow.
支持空間模型建立的是高度和陰影這兩個(gè)概念。
高度(Elevation)
Elevation is the relative depth, or distance, between two surfaces along the z-axis.
Elevation是兩個(gè)表面在z軸上的相對(duì)距離(單位也是dp)撒犀。
靜止高度(Resting elevation)
All material objects, regardless of size, have a resting elevation, or default elevation that does not change. If an object changes elevation, it should return to its resting elevation as soon as possible.
每一個(gè)元素都有靜止高度创千,或者默認(rèn)高度,這個(gè)高度的數(shù)值是不變的拒担。當(dāng)一個(gè)元素改變了其高度,需要盡快回到默認(rèn)高度攻询。
默認(rèn)高度在不同app之間也是統(tǒng)一的从撼,但同一種組件的默認(rèn)高度在不同平臺(tái)上是不同的(如在TV上的高度要大于在在PC和手機(jī)上)。
動(dòng)態(tài)高度偏移(dynamic elevation offsets)
Some component types have responsive elevation, meaning they change elevation in response to user input (e.g., normal, focused, and pressed) or system events. These elevation changes are consistently implemented using dynamic elevation offsets.
一些組件類(lèi)型擁有響應(yīng)性的高度钧栖,意味著他們可以通過(guò)改變高度來(lái)反饋用戶的輸入或系統(tǒng)事件低零。而組件高度的改變是通過(guò)動(dòng)態(tài)高度偏移來(lái)統(tǒng)一實(shí)現(xiàn)的。
Dynamic elevation offsets are the goal elevation that a component moves towards, relative to the component’s resting state. They ensure that elevation changes are consistent across actions and component types. For example, all components that lift on press have the same elevation change relative to their resting elevation.
動(dòng)態(tài)高度偏移是組件要相對(duì)靜止高度要移動(dòng)到的目標(biāo)高度(理解:移動(dòng)距離)拯杠。這些距離的定義保證了高度的變化在行為和組件類(lèi)型之間是統(tǒng)一的掏婶。例如,所有組件在被按壓時(shí)被提高潭陪,其高度變化是相同的雄妥。
當(dāng)輸入事件完成或被取消的時(shí)候最蕾,組件回到默認(rèn)高度。
避免高度干擾(Avoiding elevation interference)
當(dāng)可以響應(yīng)的組件在產(chǎn)生高度變化的時(shí)候茎芭,可能會(huì)對(duì)其它組件造成高度干擾揖膜。因?yàn)?b>組件是不能互相穿過(guò)的,所以需要用一些方法來(lái)避免高度干擾的問(wèn)題梅桩。
在組件的角度壹粟,可以組件移動(dòng)或消失來(lái)避免(For example, a floating action button (FAB) can disappear or move off-screen before a user picks up a card, or it can move if a snackbar appears)
在布局的角度,可以用布局設(shè)計(jì)來(lái)減少產(chǎn)生干擾的機(jī)會(huì)(For example, position the FAB to one side of stream of a cards so the FAB won’t interfere when a user tries to pick up one of cards.)
陰影(shadows)
Shadows provide important visual cues about objects’ depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object’s elevation determines the appearance of its shadow.
陰影提供了關(guān)于元素的高度和方向性移動(dòng)的重要視覺(jué)暗示宿百。陰影是唯一能表明平面上有多少個(gè)分區(qū)的視覺(jué)暗示趁仙。一個(gè)對(duì)象的高度決定了陰影的表現(xiàn)。
In motion, shadows provide useful cues about an object’s direction of movement and whether the distance between surfaces is increasing or decreasing.
在運(yùn)動(dòng)時(shí)薄啥,陰影提供了關(guān)于對(duì)象的運(yùn)動(dòng)方向以及元素表面之間的距離是否在增長(zhǎng)或縮小的有用提示辕羽。(理解:區(qū)分是否在z軸上運(yùn)動(dòng),是在z軸上正向還是負(fù)向運(yùn)動(dòng))
元素陰影大小參考(跟上文的組件高度值一致)
對(duì)象關(guān)系(Object Relationships)
對(duì)象層級(jí)(Object Hierarchy)
All objects are part of a hierarchy described in terms of a parent-child relationships.
所有對(duì)象都一個(gè)以“父-子”關(guān)系來(lái)描述的層級(jí)體系的一部分铣口。
“父-子”定義:所有的對(duì)象都有一個(gè)父親。每個(gè)元素都可以有任意數(shù)量的兒子觉壶。兒子繼承父親的轉(zhuǎn)換屬性脑题,如位置、旋轉(zhuǎn)铜靶、比例及高度(跟隨父親移動(dòng)和轉(zhuǎn)換)旭蠕。兄弟是指處在同一層級(jí)水平的元素。
例外(Exceptions)
Items parented to the root, such as primary UI elements, move independently of other objects. For example, the floating action button does not scroll with content. Other elements include: an app’s side nav drawer, the action bar, dialogs.
根元素的兒子旷坦,例如基礎(chǔ)UI元素,在運(yùn)動(dòng)時(shí)獨(dú)立于其它對(duì)象佑稠。例如秒梅,浮動(dòng)操作按鈕(floating action button, FAB)不會(huì)隨著內(nèi)容滾動(dòng)。其它類(lèi)似的元素還包括:側(cè)邊抽屜導(dǎo)航(side nav drawer)舌胶,操作條(action bar)捆蜀,對(duì)話框。
交互(Interaction)
How objects interact with one another is determined by their place in the parent-child hierarchy.
一個(gè)對(duì)象如何和另一個(gè)對(duì)象進(jìn)行交互,取決于它們所處的“父-子”層級(jí)位置辆它。
父子之間的z軸距離最小誊薄,沒(méi)有別的對(duì)象可以在父與子之間插入。在一組滾動(dòng)的卡片中锰茉,卡片之間時(shí)兄弟關(guān)系呢蔫,所以它們一前一后地一起移動(dòng)。
高度(Elevation)
How you determine the elevation of objects—their position in z-space—depends on the content hierarchy you want to express and whether an object needs to move independently of other objects.
如何定義對(duì)象的高度——它們?cè)趜軸上的位置飒筑,取決于你表達(dá)的內(nèi)容層級(jí)片吊,以及這個(gè)對(duì)象的移動(dòng)是否需要獨(dú)立于其它對(duì)象。