elevation

在 Material Design 中，Elevation 用於表達 Surface 的高度，以凸顯視覺層級和空間感。
Measuring elevation
- Elevation 是兩個 surface 在 z 軸上的相對距離，此距離的衡量方式為兩個 surface 在 z 軸上的 density independent pixel (dp)，而描繪 elvation 的方式是透過 shadow

• 描繪 elevation 的方式除了 shadow 外也可以透過填充不同的顏色或透明度來達到，然而卻不能表達各個 surface 間相對高度的程度

  

  （透過不同填充顏色表達不同高度）

  

  （透過透明度表達不同高度）

• Elevation System

  • 在 Material Design 中所有的 components、surface 都有 elevation
  • elevation 有三項功用：
    • 凸顯兩個 surface 的前後順序，如 App Bar 會在內容前面，而不會受到滾到影響。
    • 凸顯 surface 的空間感，例如 floating action button 的影子代表他遠離了背後的 card。
    • 提高較高的元件的視覺層級，吸引注意力，例如彈跳視窗，對話框（dialog）等

• 所有元件都有各自初始的 elevation: resting elevation

• Change elevation

  • 當進行互動時，元件的 elevation 會從 resting elevation 移動至預設的 dynamic elevation offsets，當互動結束時會回到 resting elevation
  • elevation 更動時可能會與其他元件衝突，此時是可以暫時移動並非重點的元件，避免衝突發生，讓畫面簡單化。

• 要成功描繪 elevation，surface 需要可以表達下列三點特點

  • surface edge：凸顯每個 surface 的邊界外圍，透過 UI 中不同部分分成可辨識的元件來表達 surface 的結束與另一個 surface 的開始，Material Design 中的 surface 使用 shadow 來達到，另外也可以透過不同的顏色或透明度達到。
    • 不同 surface 顏色需有充分的對比，才能夠做出區隔。
  • surface 之間的重疊，無論是在靜止狀態或是動畫進行中，表達了兩個 surface 的不同 elevation，高的 surface 有著較高的 z 值並且在介面上會在較低 elevation 的 surface 前方。
  • 與其他 surface 的 z 軸距離，表達不同 surface elevation 的差異，可以透過調暗背景或是使用 shadow，調暗背景的方式可以表達明顯大量 elevation 差異但缺乏對不同 surface 的針對性。

• 動畫可以突現 elevation 的差異，其中動畫包含

  • 改變 shadow 大小和模糊程度
  • 展現重疊
  • Pushing 其他元件
  • Scaling 元件
  • Parallax 利用不同速度達成視差（越高越近移動較慢，越遠移動較快）

• elevation 可以用於表達內容的重要性，較高的內容可能代表他可以操作較低的內容（floating action button）、吸引注意力（dialog）或是較為重要因此需要較高的層級。反之若內容在同一個平面上則代表有相同的重要性

• Default elevation
  

• Reference

  • https://material.io/design/environment/elevation.html