2017 Material design 第一章第四節《高度和投影》

4、高度和投影（Elevation and shadows）

Material design中的material對象的特性與現實物理世界中的物體特性類似。

在現實物理世界中，一個物體能夠疊在另外一個物體上面，可是物體間不能相互穿過。同時，物體也能投射投影和反射燈光。

Material design借鑑了現實物理世界中物體的特性，並將其運用在虛擬的三維空間裏面的material對象上。這種借鑑現實物理世界的作法不只有利於幫助用戶理解，還能統一各應用間的體驗。

高度（Elevation）
高度的計算方法是從一個material對象的頂面到另外一個material對象的頂面。高度的大小能夠暗示用戶兩個material對象間的距離大小以及投影的深淺。

默認高度（Resting elevation）
全部的material對象在空間中都有其本身默認的高度。在應用中，這些組件（material對象）的默認高度是這樣的，但到了不一樣的平臺或是設備上的時候，默認高度可能就會出現變化。

高度的動態補償（Dynamic elevation offsets）
高度的動態補償就是一個組件（material對象）從其默認高度朝着目標高度所作的位移變化。

高度（Android） （Elevation (Android)）

高度取決於沿z軸兩個面之間的距離，或者說是深度。

說明：
高度（z軸）的測量單位和x、y軸上的測量單位是同樣的，都是dp（density-independent pixels）。由於material的厚度是1dp，因此對兩個material對象間高度的計算是從一個material對象的頂面到另外一個material對象的頂面。
在material對象中，一個子對象的高度與其父對象的高度相關。
下圖是Anndroid應用中的例子。

不一樣參照物下2個material對象的高度

默認高度（Resting elevation）
不管大小，全部的material對象都有一個默認高度，這個默認高度是不會改變的。當一個material對象的高度產生了變化，以後它會立刻回到默認高度。

電腦桌面端（Desktop）的各組件默認高度比下圖所列值小2dp，目的是適應帶鼠標以及非觸摸屏的設備環境。

高度（dp）	組件
24	對話框，選擇器
16	抽屜導航, 右抽屜導航, 模態底部sheet
12	浮動按鈕（FAB）
9	子菜單（每一個子菜單+1dp）
8	底部導航欄, 菜單, 卡片（選擇狀態）, 擡起按鈕 （按下狀態）
6	浮動按鈕（默認狀態）, Snackbar
4	應用欄
3	刷新指示器, 快速入口 / 搜索欄（滾動狀態）
2	卡片（默認高度）＊, 擡起按鈕（默認高度）＊, 快速入口 / 搜索欄（默認高度）
1	開關

組件高度：（Component elevations）
在不一樣的應用中，各組件的默認高度不變。舉個例子，在一個應用中浮動按鈕（floating action button）的默認高度是6dp，到了另外一個應用中同樣也是6dp的默認高度。
在不一樣的平臺和設備中，各組件的默認高度可能不一樣，這取決於人們觀看的距離。舉個例子，由於TV有着比電腦桌面（desktop）更大的屏幕尺寸，因此觀看TV的距離比觀看電腦桌面的距離要更遠。同理，觀看TV和電腦桌面的距離比觀看手機的距離要遠。

高度響應和高度的動態補償（Responsive elevation and dynamic elevation offsets）
一些組件的高度會做響應，換句話說就是當用戶輸入反饋（好比正常狀態、聚焦狀態和點擊狀態）或一些系統事件的反饋時，這些組件的高度會所以而改變。這些組件的高度變化主要是經過高度的動態補償實現。

高度的動態補償就是一個組件（material對象）從其默認高度朝着目標高度所作的位移變化。它能確保各組件變化以及組件類型的一致。例如，全部可點擊的組件被點擊後都會有相同高度的位移變化。

一旦用戶輸入事件完成或者被取消，這些組件就會返回到默認高度的位置上。

避免高度變化衝突（Avoiding elevation interference）
當一個組件的高度在位移變化的時候，有可能會遇到其餘組件也在變化。由於material對象之間是不可以相互穿過的，因此咱們要避免各組件在高度變化的時候發生衝突。

在組件處於相同高度的時候下，組件能夠根據狀況提早移動或者直接消失。舉個例子，浮動按鈕（floating action button，如下簡稱「FAB」）會在用戶選擇卡片（cards）以前消失或移離屏幕，抑或者當snackbar出現時浮動按鈕移動位置。

在佈局層面上，經過設計應用的佈局能夠減小組件間相互衝突。舉個例子，將浮動按鈕（FAB）置於屏幕的一側，當用戶選擇卡片（cards）的時候就不會和浮動按鈕產生衝突。

各組件間高度的對比（Component elevation comparisons）
下圖是各組件間默認高度和高度的動態補償的對比。

在上圖中，只有所列組件高度方面和其之間的對比是肯定的。組件相關的其餘方面和其總體的佈局只做說明參考

以上圖爲例，圖中該應用的頁面佈局裏面包含了卡片（cards）和浮動按鈕（FAB）組件。右邊是該頁面的橫截面圖，其中展現了各組件的高度信息

以上圖爲例，圖中展現了一個被用戶打開的抽屜導航菜單（Nav drawer）。右邊是該頁面的橫截面圖，其中展現了各組件的高度信息

投影 （Shadows）

爲了引導用戶理解material對象的深度和運動方向，投影提供了重要的視覺暗示。投影是惟一可以區分面與面（material對象）之間關係的視覺線索。一個material對象的高度決定了其投影的效果。

沒有投影存在，你根本不清楚浮動按鈕（FAB）和背景是不是分開的。

不可行

雖然有投影存在，咱們也知道浮動按鈕（FAB）和藍色卡片是分開的兩個組件。但由於兩個組件的投影類似，因此會誤覺得兩個組件處於同一高度。

不可行

圖中，浮動按鈕（FAB）的投影比其餘組件的投影更爲柔和且面積更大，這樣咱們很容易就能看出浮動按鈕的高度比藍色卡片的高度要高。

可行

在運動方面，投影不只能爲material對象運動的方向提供視覺暗示，還能展現material對象之間的高度變化（距離增長仍是減小）。

圖中是藍色的material對象的先後變化。由於沒有投影暗示material對象的高度，因此你根本不清楚其尺寸在增長仍是高度在增長。

不可行

圖中是藍色的material對象的先後變化。前者由於投影清晰且面積較小，因此高度較低。後者反之。

可行

圖中是藍色的material對象的先後變化。二者由於投影一致，因此很容易能看出material對象是尺寸在變化。

可行

組件的投影規範
如下是各個組件的投影參考。若是在Material design規範中其餘地方出現了與這些投影參考規範不一樣的組件投影，請與這裏爲準。

應用欄（App bar）
4dp

凸起按鈕（Raised button）
默認狀態（Resting state）: 2dp
按下狀態（Pressed state）: 8dp

在電腦桌面端（desktop）上：
默認狀態：0dp
按下狀態：2dp
點擊查閱關於 凸起按鈕 的更多信息。

浮動按鈕（Floating action button (FAB)）
默認狀態：6dp
按下狀態：12dp

卡片（Card）
默認狀態：2dp
凸起狀態（Raised state）：8dp

在桌面電腦端上的狀況，請前往 內容佈局 查閱更多信息。

菜單和子菜單（Menus and sub menus）
菜單：8dp
子菜單：9dp（每增長一個子菜單+1dp）

對話框（Dialogs）
24dp

抽屜導航菜單和右抽屜（Nav Drawer & Right drawer）
16dp

底部模態sheet （Modal bottom sheet）
16dp
譯者注：
1.sheet是Material design語境中的詞語，能夠粗淺的認爲是「紙片」的意思。若是換成正常的說法應該是對話框的意思，只不過官方爲了配合語境而另做設定。
2.什麼是「模態」，請點擊瞭解

刷新指示器（Refresh indicator）
3dp

快捷入口/搜索欄
默認狀態：2dp
滾屏狀態（Scrolled state）：3dp

Snackbar
6dp
譯者注：一樣是Material design語境中的詞語，很差表達故不作翻譯。

開關（Switch）
1dp

對象關聯 （Object relationships）

對象層級
在一個應用中，你如何去組織對象直接決定了對象移動的時候與其餘對象之間的關係。好比該對象是否可以獨立移動，仍是說移動的時候受到其餘對象約束。

全部對象之間都是以父子關係存在的。「子」級對象從屬於它的「父」級對象。一個對象能成爲整個系統或者另外一個對象的子級對象。

譯者注：這裏討論的對象就是material對象。material對象在「應用」中的表現就是咱們熟知的一個個組件。

關於父-子級對象：
每一個對象都有一個父級對象
每一個對象都有不一樣數量的子級對象
子級對象繼承父級對象的屬性，如位置、選擇、縮放和高度。
跟子對象處於同一層級的子級對象的級別相同。

例外
一些對象從屬的父級對象是root，好比重要的UI組件，它的移動獨立於其餘對象。舉個例子，浮動按鈕不會跟隨滾屏而移動。除此以外，還包括如下組件：

• 側邊導航菜單
• 操做欄
• 對話框

相互做用
一個對象如何做用於另外一個對象，取決於他們在父子層級中的位置。
舉例說明:
子級對象和父級對象在z軸上的距離是最近的；其餘非子級對象不能在父-子級對象之間插入。
一個正在移動的卡片（card）集合，他的全部子級卡片都跟隨着移動。這個卡片集合控制着它的各個子級卡片移動。

擡起按鈕（子級）跟隨父級sheet滾動離開屏幕。

由於整個卡片（card）集合跟隨屏幕滾動而移動，因此其各個子級卡片也會隨着屏幕滾動而移動。浮動按鈕之因此沒有跟隨屏幕滾動，是由於其父級對象沒有所以滾動。

高度如何決定某個對象的高度（即它們在z軸上的位置）取決於你想表達怎樣的內容層級，以及當一個對象須要移動的時候是否獨立於其餘對象。