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在用戶嘗試拾取卡時不會干擾。
組件高度比較
在此圖中奠货,只有組件的高度尺寸和布局是準確的介褥。 部件的其他尺寸和整體布局僅用于說明。
例子:
包含卡片和浮動操作按鈕的示例應用程序布局递惋,以及其沿z軸的其組件高度的橫截面圖
一個帶有打開的導航抽屜的示例應用程序布局柔滔,以及沿其z軸的其組件高度的橫截面圖。
陰影
陰影提供關于對象的深度和方向移動的重要視覺提示萍虽。 它們是表示表面之間的分離量的唯一視覺提示睛廊。 對象的高度確定其陰影的外觀。
錯誤的做法
沒有陰影杉编,沒有指示FloatingActionBar與背景分離超全。
錯誤的做法
陰影表FlaotingActionBar和藍色表是獨立的元素咆霜。 然而,他們的陰影是如此相似卵迂,暗示他們都在同一高度裕便。
正確
較柔和的較大陰影表示FloatingActionBar處于比藍色層更高的高度。
在運動中见咒,陰影提供關于對象的運動方向以及表面之間的距離是增加還是減小的有用提示偿衰。
錯誤的做法
沒有陰影指示高度,不能明確表明這個正方形是增加大小還是增加其高度改览。
正確的做法
陰影隨著物體的高度增加而變得更軟和更大下翎,并且隨著高度的降低而變得越來越小。
正確的做法
在這種情況下宝当,一致的陰影幫助用戶理解對象正在改變形狀视事,而不是改變高度。
組件參考陰影
以下組件陰影應用作規(guī)范引用庆揩。 如果以下參考陰影和本規(guī)范中其他地方找到的組件陰影之間存在任何差異俐东,請遵循這些參考陰影。
1.App bar 4dp
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
3. Floating action button (FAB)
Resting state: 6dp
Pressed state: 12dp
4. Card
Resting state: 2dp
Raised state: 8dp
5. Menus and sub menus
Menus: 8dp
Sub menus: 9dp (+1 dp for each sub menu)
6. Dialogs 24dp
8. Nav Drawer & Right drawer 16dp
9. Modal bottom sheet 16dp
10.Refresh indicator 3dp
11. Quick entry/Search bar
Resting state: 2dp
Scrolled state: 3dp
12.Snackbar 6dp
13.switch 1dp
對象關系
對象層次關系
按鈕隨布局滾動
如何在應用程序中組織對象或?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)以及對象是否需要獨立于其他對象進行移動。