2-3 What:Elevation & Shadows

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)。

錯(cuò)誤垦页,沒(méi)有陰影不能表達(dá)藍(lán)色雀费、白色、紅色代表的元素是分離的
錯(cuò)誤痊焊,藍(lán)色的和紅色陰影相似盏袄,表達(dá)不了它們?cè)诓煌母叨?/i>
正確,更柔和的陰影表達(dá)了紅色的按鈕在比藍(lá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)

錯(cuò)誤垄惧,沒(méi)有投影區(qū)分不了元素是在形變還是在改變高度
正確刁愿,陰影變得更柔和說(shuō)明元素的高度在增加,反之高度在減少
正確到逊,投影沒(méi)有變化說(shuō)明元素在改變形狀而不是改變高度

元素陰影大小參考(跟上文的組件高度值一致)

對(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ì)象。

滾動(dòng)時(shí)FAB固定不變协屡,因?yàn)镕AB的父親根元素沒(méi)有滾動(dòng)俏脊,而卡片內(nèi)的按鈕會(huì)跟隨卡片滾動(dòng)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市肤晓,隨后出現(xiàn)的幾起案子爷贫,更是在濱河造成了極大的恐慌,老刑警劉巖补憾,帶你破解...
    沈念sama閱讀 218,858評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件漫萄,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡余蟹,警方通過(guò)查閱死者的電腦和手機(jī)卷胯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)威酒,“玉大人窑睁,你說(shuō)我怎么就攤上這事】拢” “怎么了担钮?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,282評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)尤仍。 經(jīng)常有香客問(wèn)我箫津,道長(zhǎng),這世上最難降的妖魔是什么宰啦? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,842評(píng)論 1 295
  • 正文 為了忘掉前任苏遥,我火速辦了婚禮,結(jié)果婚禮上赡模,老公的妹妹穿的比我還像新娘田炭。我一直安慰自己,他們只是感情好漓柑,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布教硫。 她就那樣靜靜地躺著叨吮,像睡著了一般。 火紅的嫁衣襯著肌膚如雪瞬矩。 梳的紋絲不亂的頭發(fā)上茶鉴,一...
    開(kāi)封第一講書(shū)人閱讀 51,679評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音景用,去河邊找鬼涵叮。 笑死,一個(gè)胖子當(dāng)著我的面吹牛丛肢,可吹牛的內(nèi)容都是我干的围肥。 我是一名探鬼主播,決...
    沈念sama閱讀 40,406評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼蜂怎,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼穆刻!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起杠步,我...
    開(kāi)封第一講書(shū)人閱讀 39,311評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤氢伟,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后幽歼,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體朵锣,經(jīng)...
    沈念sama閱讀 45,767評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年甸私,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了诚些。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,090評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡皇型,死狀恐怖诬烹,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情弃鸦,我是刑警寧澤绞吁,帶...
    沈念sama閱讀 35,785評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站唬格,受9級(jí)特大地震影響家破,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜购岗,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評(píng)論 3 331
  • 文/蒙蒙 一汰聋、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧喊积,春花似錦烹困、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,988評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至溶弟,卻和暖如春女淑,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背辜御。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,101評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工鸭你, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人擒权。 一個(gè)月前我還...
    沈念sama閱讀 48,298評(píng)論 3 372
  • 正文 我出身青樓袱巨,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親碳抄。 傳聞我的和親對(duì)象是個(gè)殘疾皇子愉老,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評(píng)論 2 355

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