Material Design 谷歌設(shè)計語言—— 高度與陰影 之陰影

陰影

陰影為物體的深度和移動方向提供了重要視覺線索。陰影是區(qū)分不同表面的位移視覺線索阳谍。一個物體的高度決定了其陰影的形態(tài)蛀柴。


不正確1:完全沒有陰影螃概,完全沒將漂浮按鈕從背景的表面中區(qū)分出來

不正確2:清晰的陰影表明,漂浮按鈕和藍色頁是獨立的元素鸽疾。但是兩者的陰影太相似吊洼,看起來兩者處在同一高度上。

正確:漂浮按鈕的陰影更柔和制肮,擴散更大冒窍,表明其處在更高的高度上;而藍色頁是陰影邊緣更清晰豺鼻。


在運動中综液,依據(jù)陰影提供的重要視覺線索,用戶能分辨物體的運動方向儒飒,以及不同表面之間的距離是增大還是減小了谬莹。


元素的參考陰影

下面元素陰影應被用作標準參考。


應用條陰影4dp


懸浮按鈕: ?停留狀態(tài)陰影:2dp约素; ? ? ? ? ? 按下狀態(tài)陰影:8dp

在筆記本中届良,懸浮按鈕的高度可以是:

停留狀態(tài)陰影:0dp

按下狀態(tài)陰影:2dp


漂浮按鈕:停留狀態(tài)陰影:6dp;? ? ? 按下狀態(tài)陰影:12dp
卡片:停留狀態(tài)陰影:2dp圣猎;? ? ? 選中狀態(tài)陰影:8dp


菜單和子菜單:菜單陰影:8dp士葫;? ? ? ? 子菜單陰影:9dp (每個分一級子菜單,陰影就增加1dp)


對話框:陰影:24dp


導航欄和右拉欄:陰影16dp


刷新按鈕:陰影3dp


快速輸入/搜索欄:停留狀態(tài)陰影:2dp送悔; ? ? ? ? ?下拉狀態(tài)陰影:3dp


單行元件欄: 陰影6dp


切換按鈕:陰影1dp

物體關(guān)系

物體的層級

如何組織物體慢显,或者說物體的收納,在app應用中決定了物體相對其他物體運動的方式欠啤。物體可以獨立于其他物體運動荚藻,也可能在層級中受制于其他物體。

所有物體在層級關(guān)系中都能用父級和子級來描述洁段∮τ“子”元素在層級中歸屬于“父”元素。所有物體都是系統(tǒng)或其他物體的“子”元素祠丝。

父-子 具體規(guī)則

- 每個物體都有一個父級

- 每個物體可能有若干個子級

- 子級物體從父級物體遺傳外觀特性疾呻,如位置、旋轉(zhuǎn)写半、縮放和高度

- 同層級的物體互為兄弟

例外情況

- 歸屬于系統(tǒng)的子級物體岸蜗,如重要UI元素,可獨立于其他物體運動叠蝇。例如璃岳,漂浮操作按鈕不隨著內(nèi)容滾動而移動。其他類似元素包括:

- 應用的側(cè)邊導航欄

- 操作條

- 對話框

交互

物體在層級關(guān)系中的位置決定了其與其他物體交互的方式

例如:

- 子級物體與父級物體在Z軸上的距離為最小,其他物體無法位于兩者之間

- 在滾動卡片集合中铃慷,所有卡片互為兄弟单芜,串聯(lián)移動∶度撸卡片集合控制了這些卡片的運動缓溅。


卡片隨著卡片集合上下滾動。漂浮操作按鈕保持不動赁温,因為他的父級沒有滾動。

高度

如何規(guī)定物體在Z軸上的高度淤齐,取決于你想表達的內(nèi)容層級股囊,也取決于某個物體是否要獨立于其他物體運動。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末更啄,一起剝皮案震驚了整個濱河市稚疹,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌祭务,老刑警劉巖内狗,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異义锥,居然都是意外死亡柳沙,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進店門拌倍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來赂鲤,“玉大人,你說我怎么就攤上這事柱恤∈酰” “怎么了?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵梗顺,是天一觀的道長泡孩。 經(jīng)常有香客問我,道長寺谤,這世上最難降的妖魔是什么仑鸥? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮矗漾,結(jié)果婚禮上锈候,老公的妹妹穿的比我還像新娘。我一直安慰自己敞贡,他們只是感情好泵琳,可當我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般获列。 火紅的嫁衣襯著肌膚如雪谷市。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天击孩,我揣著相機與錄音迫悠,去河邊找鬼。 笑死巩梢,一個胖子當著我的面吹牛创泄,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播括蝠,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼鞠抑,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了忌警?” 一聲冷哼從身側(cè)響起搁拙,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎法绵,沒想到半個月后箕速,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡朋譬,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年盐茎,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片此熬。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡庭呜,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出犀忱,到底是詐尸還是另有隱情募谎,我是刑警寧澤,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布阴汇,位于F島的核電站数冬,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏搀庶。R本人自食惡果不足惜拐纱,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望哥倔。 院中可真熱鬧秸架,春花似錦、人聲如沸咆蒿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至缭黔,卻和暖如春食茎,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背馏谨。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工别渔, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人惧互。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓哎媚,卻偏偏與公主長得像,于是被迫代替她去往敵國和親壹哺。 傳聞我的和親對象是個殘疾皇子抄伍,可洞房花燭夜當晚...
    茶點故事閱讀 44,614評論 2 353

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