1. Introduction

我們挑戰自己，只為給用戶創造一種新的視覺設計語言，不但綜合了過去優秀設計所遵循的經典原則，同時也融合了科技的創新與無限可能。這就是材料設計。這份說明是動態文檔，我們不斷完善材料設計的細節和設計原則，文檔會隨之更新。

Goals

創造一種新的視覺設計語言，不但綜合了過去優秀設計所遵循的經典原則，同時融合了科技的創新與無限可能。

開發一個單一的基礎系統，在不同平臺不同尺寸設備上提供統一的體驗。移動規范是基礎的，但觸摸、聲音、鼠標和鍵盤都是首選的輸入方式。

Principles

Material is the metaphor

材質隱喻是理性控件和動機系統的統一理論。（A material metaphor is the unifying theory of a rationalized space and a system of motion. ）材料以觸覺現實為基礎，靈感來自于紙和墨水的研究，但技術先進，為想象力提供施展空間。

材質的表面和邊緣為我們提供了視覺線索，告訴我們它根植于現實。使用與觸摸類似的屬性幫助用戶迅速理解功能啟示。

Bold，graphic and intentional

Motion provides meaning

2. Environment

材質設計是一個三維設計環境，包含了光線、材質和投影。

所有材質的物體都有X、Y、Z三個維度

所有材質的物體都固定的Z軸位置

主光線產生方向性陰影，環境光線產生淡陰影。

材質厚度： 1dp

陰影：材質層疊，并存在高度差的時候，出現陰影

陰影的機理

3D World

材質環境是一個三維空間，意味著所有物體具有X、Y、Z三個維度。Z軸垂直于顯示平面，Z軸正方向指向觀察者。每一片材質占據Z軸上的一個位置，沿著Z軸有1dp的厚度，相當于在像素密度160的屏幕上1像素的厚度。

在網頁上，Z軸是用于層疊顯示而非透視。通過巧妙地控制Y軸來仿真3D世界。

3D space with x,y,z axes

Light and Shadow

在材質環境中，虛擬光照照亮設計場景。主光線創造方向性陰影，而環境光線從各個角度創造軟陰影。

材質環境中的陰影由兩類光源投影而來。在Android開發中，光源被Z軸上各個位置的材料薄片遮擋時，產生陰影。在web上，陰影僅僅通過操作Y軸來刻畫。下面的例子展示了卡片高度為6dp時的情形。

光照及陰影示意

3. Material Properties

材質本身有不可改變的特點和固有的行為表現

理解這些材料的品質會幫助你利用與材質設計一致的觀點去操控材質。

材質的特性：

• solid，固體
• Occupies unique points in space：占據空間中的特定位置
• Impenetrable：不可穿過
• Mutable shape：形狀可變
• Changes in size only along its plane：僅在自己的平面上發生形變
• Unbendable：不可彎曲
• Can join to other material：可以連接其它材質
• Can separate，split and heal：可以分裂、復原
• Can be created and destroyed：可以被創造亦可被消滅
• Moves along any axis：沿著任何一個軸移動

Physical Properties

材質有不同的X和Y維度（用dp來衡量）以及統一的厚度（1dp）

材質厚度示意

不同材質元素之間在Z軸方向的相對提升自然會導致陰影出現。

正確陰影展示

錯誤陰影展示

內容可以以任何形式和顏色在材質上顯示，內容不會增加材質的厚度。

內容與材質的關系

內容的行為獨立于材質，但受到材質邊界的約束。

內容受材質邊界的約束

材質是固體。輸入事件不能穿越材質。

輸入事件不能穿越材質

多個材質元素不能同時占據空間中的同一位置。

層疊材質

材質不能穿越其它材質。

Transforming material

材質形狀可以改變。

材質只在自己所在的平面上延展、收縮。

材質不能翹曲或折疊。

材質翹曲

多片材質可以連接在一起成為單片材質。

材質分裂后可以恢復。

Movement of Material

材質在環境中可以隨時被創造或消滅。

材質可以沿著任何坐標軸運動。

z軸的移動是用戶與材質交互后的典型結果。

4. Elevation and Shadows

材質設計中的物體具備與真實物理世界物體相似的性質。

物理世界中，物體可以堆疊或附著在另一個物體上，但不能穿越彼此。物體同樣也會投射陰影或反射光線。

材質設計保留了這些特點，以構成一個用戶熟悉的空間模型，可以在不同APP之間統一運用。

• Elevation：相對高度
  度量從一個物體表面到另一物體表面的距離，一個元素的相對高度表示了其表面到它投影之間的距離

• Resting Elevation：固定高度
  所以的材質元素尤其固定的高度。雖然各種組件在不同APP之間的高度一致，但他們在不同平臺和設備上的高度不同。

• Dynamic Elevation Offsets：動態高度偏移
  動態高度偏移是組件移動的目標高度，相對于其固定狀態而言。

Elevation （Android）

高度是兩個表面之間沿著Z軸方向的相對距離或深度。

說明：

• 高度以與X軸、Y軸相同的單位測量，常用單位是density - independent pixels（dp）。因為材質元素有厚度（所有材質都是1dp厚度），高度以一個物體表面到另一個物體表面的距離來衡量。

• 子物體的高度是與父物體的相對高度。

下面的圖和數值是Android應用中的情形。

高度和相對高度

Resting Elevation

所有的材質物體，無論尺寸如何，都有固定高度，或不會改變的默認高度，它應該盡快回到其固定高度。

桌面的固定高度比列表中的數值低2dp，以容納鼠標和無法觸摸的環境元素。

list 1

list 2

Component Elevation：組件高度

• 組件在不同APP之間有相同的固定高度。比如，浮動操作按鈕的高度在不同APP中一致。
• 組件在不同平臺和設備上有不同的固定高度，取決于環境的高度。例如，電視與電腦桌面相比具有更大的深度，因其有更大的屏幕以及用戶從更遠的地方觀看。類似的，電視和電腦桌面與手機相比，有更大的深度。

Responsive elevation and dynamic Elevation offsets

一些組件類型具有響應式的高度，即它們依據用戶的輸入或系統事件（如，普通狀態、獲取焦點、按下）改變高度。這些高度的變化使用動態高度偏移來實現。

動態高度偏移是組件移動的目標高度，相對于其固定狀態而言。它們保證不同操作和組件類型具有一致的高度變化。比如，所有的組件按下后改變同樣的高度，與其固定高度相比。

輸入事件取消或結束后，組件回到其固定高度。

Avoid component interference

擁有響應式高度的組件在其固定高度和動態高度偏移之間移動時可能會與其他組件相遇。由于材質不能穿越其它材質，組件無論如何也要避免和其它組件發生干涉。( Because [material cannot pass through other material, components avoid interfering with one another any number of ways, whether on a per-component basis or using the entire app layout.)

在組件層面，當發生干涉時，組件可以移動或去除。比如，當用戶選擇卡片時，浮動按鈕會消失或移出屏幕，或者當snack-bar出現時發生移動。

在整體布局層面，設計APP布局時要盡量減少發生組件干涉的概率。例如，可以將浮動按鈕放置在卡片流的一邊，如此一來，當用戶選擇其中一個卡片時就不會和浮動按鈕發生干涉。

Component elevation comparisons

下面的圖比較了各組件的固定高度和動態高度偏移。

Shadows

陰影提供了關于物體深度和方向性運動的重要視覺線索。陰影是表現兩個物體表面分離程度的唯一視覺線索。物體的高度覺得了陰影的外觀。

陰影外觀給出物體的高度信息

在運動中，陰影提供了有關物體運動方向的有用信息，告知用戶兩個表面之間的距離是增大還是減小。

陰影的變化展示高度的變化

Component reference shadows

以下組件的陰影應該被當做標準參考使用。如果后續的參考陰影出現不一致的地方，或文檔中其它地方的組件陰影與這里沖突，以這里的參考陰影為準。

APP Bar：4 dp

APP Bar的高度

Raised Button：上浮按鈕
固定狀態：2 dp
按壓狀態：8 dp

桌面上，上浮按鈕高度為
固定狀態：0 dp
按壓狀態：2 dp

上浮按鈕

Floating action Button：浮動按鈕
固定狀態：6 dp
按壓狀態：12 dp

浮動按鈕

Card：卡片
固定狀態：2 dp
上浮狀態：8 dp

卡片

Menu and sub menus：菜單和子菜單
菜單高度：8 dp
子菜單高度：9 dp（子菜單比父菜單加 1 dp）

菜單和子菜單

Dialog：對話框
對話框高度：24 dp

對話框

Nav Drawer and Right Drawer：導航抽屜和右側抽屜
高度：16 dp

導航抽屜

Modal bottom sheet：模態底部表單
高度：16 dp

模態底部表單

Refresh indicator：刷新指示器
高度：3 dp

刷新指示器

Quick entry/Search bar：快速輸入或搜索欄
固定狀態：2 dp
滑動狀態：3 dp

快速輸入或搜索欄

Snackbar：小訊欄
高度：6 dp

小訊欄

Switch：開關
高度：1 dp

開關

Object Relationships

Object hierarchy

你如何組織、歸集物體，決定了他們在APP中如何與其它物體發生聯系。物體可以獨立于彼此移動，也可以受高層級物體限制。

所有物體都是層級關系中的一部分，這種層級關系以父子關系來描述。在這些關系中，“子”是指附屬于“父”元素的元素。物體既可以是系統的“子”元素，也可以是其它物體的“子”元素。

父 - 子說明：

• 每個物體均有一個“父”元素
• 每個物體有任意數量的“子”元素
• 子元素從父元素那里繼承了可變化的屬性，如位置、旋轉、尺寸和高度
• 兄弟元素是在同一層級上的物體

Exceptions

以根為父元素的物體，如基本的 UI 元素，獨立于其它物體移動。例如，浮動按鈕不會隨內容一起滾動。其它類似元素包括：

• APP的側邊導航抽屜
• 操作欄
• 對話框

Interaction

物體如何與其它物體交互取決于他們在父子層級中的位置。例如：

• 子元素與父元素之間具有最小的Z軸間隔，其它物體無法插入父子元素之間。
• 在可滑動的卡片集合中，各個卡片是彼此的兄弟元素，所以他們一個接一個地串聯移動。他們是卡片集合物體的子元素，卡片結合物體控制他們的運動。

Elevation

物體的高度，即他們在Z軸的位置，取決于你想傳達的內容層級以及物體是否需要獨立與其它物體運動。

5. What's new

參見鏈接：Material Design重要更新說明