一起學習 Material Design 01

Material Design （下稱MD） 在今年4月更新了一波，所以重新研究了下，順便把之前的學習筆記整理了一下，搞了個精簡版 MD 文檔出來，希望對大家有用。MD 指南中文版請查看：Material design 中文文檔，指南，翻譯

Chapter 1：Material Design

Material Design 通過構建系統化的動效和空間合理化利用，並將兩個理念合二為一，構成了實體隱喻。（Jimmy：注意 MD 的關鍵就在於動效與空間利用。）

1. 環境

Material design 是一個包含光線、材料和投射陰影的三維環境。這意味著每個對象都有 x、y、z 三維坐標屬性，z 軸垂直於顯示平面，並延伸向用戶視角，每個材料都有 z 軸厚度，標準是 1dp，相當於一個屏幕密度為 160 的設備上的一像素。在網頁上，z 軸被用來分層而不是為了視角。3D 空間通過操縱 y 軸進行模擬。

材料環境中的所有陰影都是由這兩種光投射產生的，陰影是光線照射不到的地方，因為各個元素在 z 軸上佔據了不同大小的位置，遮住了這些光線。在網頁上，陰影的實現是在 y 軸上使用多重陰影。下面的案例中，卡片的高度是 6dp。

2. 材料

2.1 物理屬性

• 材料是固態的，輸入事件不能穿透材料。

• 多個材料元素不能同時出現在同一空間的相同位置。

• 材料之間不能相互交叉，即材料不能從另一個材料中穿過。（Jimmy：你可以將 MD 里的材料理解成實心材料）

2.2 材料轉換

• 材料可以改變其形狀。

• 材料智能在當前所在平面內伸縮。

• 材料不能彎曲或摺疊。

• 多片材料可以互相組合

• 分割後，材料可以復原。例如，如果你從一片材料中移動了其中一部分，這部分材料會重新回到那片材料中，恢復成一整片材料。（Jimmy：我把 MD 里的材料都想像成一種特別的木板，它們有厚度，非常硬無法彎曲和摺疊，但是你可以把它們切割和拼接，同時他們還可以變形伸縮。）

2.3 材料的移動

• 材料可以在環境中的任何地方自動創建或銷毀（消失）。

• 材料可以沿著任何軸移動。

• Z 軸的運動通常是用戶和材料交互的結果。（Jimmy：這裡的交互有點擊、長按等。例如：點擊材料，相當於在 Z 軸上施加了壓力，Z 軸距離就變小了。）

3. 層次和陰影

3.1 海拔高度

海拔高度是相對深度或距離，是兩個表面在 Z 軸上的距離。海拔高度的測量單位是與密度無關的像素（dp）。因為材料元素有厚度（所有材料都是 1dp 的厚度），所以海拔高度被用來測量兩個表面的頂部之間的距離。 （Jimmy：如下圖所示，左側兩個材料間的海拔就是 6 dp）

組件的海拔高度對比：