(譯)MaterialDesign(四)-Elevation&shadow

其他文章

Material Design中的對象在一定程度上和真實世界的對象很相似勺鸦。

在物理世界中赫冬,物體可以彼此堆疊或固定浓镜,但不能穿過彼此。 對象也投射陰影和反射光劲厌。

Material Design反映了這些特征膛薛,形成了用戶熟悉的空間模型,并且可以在應用中統(tǒng)一風格补鼻。

高度

通過測量一個表面的前面到另一個表面的前面哄啄,元素的高度表示表面之間的距離和其陰影的深度。

靜止高度

所有Material元素都有靜止高度风范,雖然組件在應用中具有一致的靜止高度咨跌,但是他們可能在不同的平臺或者設備上不一樣。

動態(tài)高度

動態(tài)高度偏移是組件相對于其靜止時的位置朝向的高度硼婿。

高度(Android)

高度是在z軸方向兩個Material的表面的深度差或者距離锌半。

特點
  • 在高度的測量時,單位是以與x加酵、y軸相同的與密度無關的像素單位dp拳喻。因為Material元素具有慎對(1px),所以從一個表面的頂部到另一個表面的頂部表示高度

  • 子對向的高度是相對于父對象的猪腕。

靜止高度

所有Material對象,無論大小都有不變的靜止高度或者默認高度钦勘,如果對象改變了高度陋葡,那他應該盡快返回到靜止高度。

下表是各種元素的高度值

高度(dp) 組件
24 Dialog,Picker
16 Nav drawer,Right drawer,Modal bottom Sheet
12 Floating action buttion(FAB-pressed)
9 Sub menu (+1dp for each sub menu)
8 Bottom navigation bar,Menu,Card (when picked up),Raised button (pressed state)
6 Floating action button (FAB - resting elevation),Snackbar
4 App Bar
3 Refresh indicator,Quick entry / Search bar (scrolled state)
2 Card (resting elevation) *,Raised button (resting elevation)*,Quick entry / Search bar (resting elevation)
1 Switch

桌面系統(tǒng)的靜止高度低于列表里所有值2dp彻采,以適應鼠標和觸摸環(huán)境

組件高度
  • 各個組件在程序中保持一致的靜止高度腐缤。例如,F(xiàn)loating Action Bar的高度隨著應用程序的不同而不同肛响。
  • 根據(jù)環(huán)境的改變,組件在不同的平臺和設備上具有不同的高度。例如购笆,電視機具有比桌面更大的深度拢切,因為它具有更大的屏幕并且可以從遠處觀看。同樣,電視和桌面比移動設備的深度更大虎囚。

響應高度和動態(tài)高度偏移

一些組件擁有響應高度角塑,意味著他們可以在響應用戶或者系統(tǒng)的事件時(正常,聚焦和按下)改變高度淘讥。這些高度變化使用動態(tài)高度偏移實現(xiàn)圃伶。

動態(tài)高度偏移是組件相對于組件的靜止狀態(tài)朝向的目標高度。 它們確保高度更改在操作和組件類型之間保持一致蒲列。 例如窒朋,所有在壓力下提升的部件相對于其靜止高度具有相同的高度變化。

如果輸入動作完成或者取消蝗岖,這些組件將回到它的靜止高度侥猩。

避免高度干擾

具有響應高度的部件可能在其靜止高度和動態(tài)高度偏移之間移動時遇到其它部件。 因為Material不能通過其他Material剪侮,組件避免以任何數(shù)量的方式彼此干擾拭宁,無論是基于每個組件還是使用整個應用程序布局。

  • 在組件級別瓣俯,組件可以在他們造成干擾之前移動或者移除杰标。例如,在用戶點擊Cardview時彩匕,F(xiàn)loating Action Bar可以消失或者離開屏幕腔剂,snackbar出現(xiàn),它可以移動驼仪。

  • 在布局級別上掸犬,設計應用布局以盡量減少干擾的機會。 例如绪爸,將FAB定位在Cardvierw區(qū)域的一側(cè)湾碎,使得FAB在用戶嘗試拾取卡時不會干擾。

組件高度比較
image

在此圖中奠货,只有組件的高度尺寸和布局是準確的介褥。 部件的其他尺寸和整體布局僅用于說明。

例子:


image

包含卡片和浮動操作按鈕的示例應用程序布局递惋,以及其沿z軸的其組件高度的橫截面圖

image

一個帶有打開的導航抽屜的示例應用程序布局柔滔,以及沿其z軸的其組件高度的橫截面圖。

陰影

陰影提供關于對象的深度和方向移動的重要視覺提示萍虽。 它們是表示表面之間的分離量的唯一視覺提示睛廊。 對象的高度確定其陰影的外觀。

錯誤
錯誤的做法
沒有陰影杉编,沒有指示FloatingActionBar與背景分離超全。
錯誤
錯誤的做法
陰影表FlaotingActionBar和藍色表是獨立的元素咆霜。 然而,他們的陰影是如此相似卵迂,暗示他們都在同一高度裕便。
正確
正確
較柔和的較大陰影表示FloatingActionBar處于比藍色層更高的高度。

在運動中见咒,陰影提供關于對象的運動方向以及表面之間的距離是增加還是減小的有用提示偿衰。

錯誤
錯誤的做法
沒有陰影指示高度,不能明確表明這個正方形是增加大小還是增加其高度改览。
正確
正確的做法
陰影隨著物體的高度增加而變得更軟和更大下翎,并且隨著高度的降低而變得越來越小。
正確
正確的做法
在這種情況下宝当,一致的陰影幫助用戶理解對象正在改變形狀视事,而不是改變高度。
組件參考陰影

以下組件陰影應用作規(guī)范引用庆揩。 如果以下參考陰影和本規(guī)范中其他地方找到的組件陰影之間存在任何差異俐东,請遵循這些參考陰影。

1.App bar 4dp
image
2.Raised button

Resting state: 2dp
Pressed state: 8dp

For desktop only, raised buttons can have an elevation of:

Resting state: 0dp
Pressed state: 2dp

image
3. Floating action button (FAB)

Resting state: 6dp

Pressed state: 12dp

image
4. Card

Resting state: 2dp

Raised state: 8dp

image
5. Menus and sub menus

Menus: 8dp

Sub menus: 9dp (+1 dp for each sub menu)

image
6. Dialogs 24dp
image
8. Nav Drawer & Right drawer 16dp
image
9. Modal bottom sheet 16dp
image
10.Refresh indicator 3dp
image
11. Quick entry/Search bar

Resting state: 2dp

Scrolled state: 3dp

image
12.Snackbar 6dp
image
13.switch 1dp
image

對象關系

對象層次關系

按鈕隨布局滾動

如何在應用程序中組織對象或?qū)ο蠹隙┥危_定它們?nèi)绾蜗鄬τ诒舜艘苿印?對象可以彼此獨立地移動虏辫,或者由層次結(jié)構(gòu)中較高的對象約束。

所有對象都是根據(jù)父子關系描述的層次結(jié)構(gòu)的一部分锈拨。 這些關系中的每一個中的“子”指的是從屬于其“父”元素的元素砌庄。 對象可以是系統(tǒng)或另一個對象的子對象。

父子關系

  • 每個對象有一個父對象奕枢。
  • 每個對象可以具有任意數(shù)量的孩子娄昆。
  • 子節(jié)點從父節(jié)點繼承變換屬性,如位置缝彬,旋轉(zhuǎn)萌焰,縮放和高程。
  • 兄弟姐妹是同級別層次中的對象谷浅。

例外

Floating Action Bar不隨布局滾動

作為父根目錄的項杆怕,例如主UI元素,獨立于其他對象移動壳贪。 例如,F(xiàn)AB鈕不隨內(nèi)容滾動寝杖。 其他元素包括:

  • 應用程序的側(cè)導航欄
  • 操作欄
  • 對話框

相互作用

對象如何相互交互取決于它們在父子層次結(jié)構(gòu)中的位置违施。

例如:

  • 孩子與他們的父母有最小的z軸分離; 其他對象不會在父對象和子對象之間插入。
  • 在滾動卡集合中card卡是彼此的兄弟瑟幕,因此它們一起移動在一起磕蒲。 他們是控制他們的運動的卡收集對象的孩子留潦。

高度

如何確定對象的高程 - 它們在z空間中的位置 - 取決于要表達的內(nèi)容層次結(jié)構(gòu)以及對象是否需要獨立于其他對象進行移動。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末辣往,一起剝皮案震驚了整個濱河市兔院,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌站削,老刑警劉巖坊萝,帶你破解...
    沈念sama閱讀 222,252評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異许起,居然都是意外死亡十偶,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,886評論 3 399
  • 文/潘曉璐 我一進店門园细,熙熙樓的掌柜王于貴愁眉苦臉地迎上來惦积,“玉大人,你說我怎么就攤上這事猛频∈ū溃” “怎么了?”我有些...
    開封第一講書人閱讀 168,814評論 0 361
  • 文/不壞的土叔 我叫張陵鹿寻,是天一觀的道長睦柴。 經(jīng)常有香客問我,道長烈和,這世上最難降的妖魔是什么爱只? 我笑而不...
    開封第一講書人閱讀 59,869評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮招刹,結(jié)果婚禮上恬试,老公的妹妹穿的比我還像新娘。我一直安慰自己疯暑,他們只是感情好训柴,可當我...
    茶點故事閱讀 68,888評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著妇拯,像睡著了一般幻馁。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上越锈,一...
    開封第一講書人閱讀 52,475評論 1 312
  • 那天仗嗦,我揣著相機與錄音,去河邊找鬼甘凭。 笑死稀拐,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的丹弱。 我是一名探鬼主播德撬,決...
    沈念sama閱讀 41,010評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼铲咨,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蜓洪?” 一聲冷哼從身側(cè)響起纤勒,我...
    開封第一講書人閱讀 39,924評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎隆檀,沒想到半個月后摇天,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,469評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡刚操,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,552評論 3 342
  • 正文 我和宋清朗相戀三年闸翅,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片菊霜。...
    茶點故事閱讀 40,680評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡坚冀,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出鉴逞,到底是詐尸還是另有隱情记某,我是刑警寧澤,帶...
    沈念sama閱讀 36,362評論 5 351
  • 正文 年R本政府宣布构捡,位于F島的核電站液南,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏勾徽。R本人自食惡果不足惜滑凉,卻給世界環(huán)境...
    茶點故事閱讀 42,037評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望喘帚。 院中可真熱鬧畅姊,春花似錦、人聲如沸吹由。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,519評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽倾鲫。三九已至粗合,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間乌昔,已是汗流浹背隙疚。 一陣腳步聲響...
    開封第一講書人閱讀 33,621評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留磕道,地道東北人甚淡。 一個月前我還...
    沈念sama閱讀 49,099評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親贯卦。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,691評論 2 361

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