1. Introduction

我們挑戰(zhàn)自己础钠，只為給用戶創(chuàng)造一種新的視覺(jué)設(shè)計(jì)語(yǔ)言蒸走，不但綜合了過(guò)去優(yōu)秀設(shè)計(jì)所遵循的經(jīng)典原則，同時(shí)也融合了科技的創(chuàng)新與無(wú)限可能玖瘸。這就是材料設(shè)計(jì)。這份說(shuō)明是動(dòng)態(tài)文檔檀咙，我們不斷完善材料設(shè)計(jì)的細(xì)節(jié)和設(shè)計(jì)原則雅倒，文檔會(huì)隨之更新。

Goals

創(chuàng)造一種新的視覺(jué)設(shè)計(jì)語(yǔ)言弧可，不但綜合了過(guò)去優(yōu)秀設(shè)計(jì)所遵循的經(jīng)典原則蔑匣，同時(shí)融合了科技的創(chuàng)新與無(wú)限可能。

開(kāi)發(fā)一個(gè)單一的基礎(chǔ)系統(tǒng)，在不同平臺(tái)不同尺寸設(shè)備上提供統(tǒng)一的體驗(yàn)裁良。移動(dòng)規(guī)范是基礎(chǔ)的凿将，但觸摸、聲音价脾、鼠標(biāo)和鍵盤(pán)都是首選的輸入方式牧抵。

Principles

Material is the metaphor

材質(zhì)隱喻是理性控件和動(dòng)機(jī)系統(tǒng)的統(tǒng)一理論。（A material metaphor is the unifying theory of a rationalized space and a system of motion. ）材料以觸覺(jué)現(xiàn)實(shí)為基礎(chǔ)彼棍，靈感來(lái)自于紙和墨水的研究灭忠，但技術(shù)先進(jìn)，為想象力提供施展空間座硕。

材質(zhì)的表面和邊緣為我們提供了視覺(jué)線索弛作，告訴我們它根植于現(xiàn)實(shí)。使用與觸摸類似的屬性幫助用戶迅速理解功能啟示华匾。

Bold映琳，graphic and intentional

Motion provides meaning

2. Environment

材質(zhì)設(shè)計(jì)是一個(gè)三維設(shè)計(jì)環(huán)境，包含了光線蜘拉、材質(zhì)和投影萨西。

所有材質(zhì)的物體都有X、Y旭旭、Z三個(gè)維度

所有材質(zhì)的物體都固定的Z軸位置

主光線產(chǎn)生方向性陰影谎脯，環(huán)境光線產(chǎn)生淡陰影。

材質(zhì)厚度： 1dp

陰影：材質(zhì)層疊持寄，并存在高度差的時(shí)候源梭，出現(xiàn)陰影

陰影的機(jī)理

3D World

材質(zhì)環(huán)境是一個(gè)三維空間，意味著所有物體具有X稍味、Y废麻、Z三個(gè)維度。Z軸垂直于顯示平面模庐，Z軸正方向指向觀察者烛愧。每一片材質(zhì)占據(jù)Z軸上的一個(gè)位置，沿著Z軸有1dp的厚度掂碱，相當(dāng)于在像素密度160的屏幕上1像素的厚度怜姿。

在網(wǎng)頁(yè)上，Z軸是用于層疊顯示而非透視顶吮。通過(guò)巧妙地控制Y軸來(lái)仿真3D世界社牲。

3D space with x,y,z axes

Light and Shadow

在材質(zhì)環(huán)境中，虛擬光照照亮設(shè)計(jì)場(chǎng)景悴了。主光線創(chuàng)造方向性陰影，而環(huán)境光線從各個(gè)角度創(chuàng)造軟陰影。

材質(zhì)環(huán)境中的陰影由兩類光源投影而來(lái)湃交。在Android開(kāi)發(fā)中熟空，光源被Z軸上各個(gè)位置的材料薄片遮擋時(shí)，產(chǎn)生陰影搞莺。在web上息罗，陰影僅僅通過(guò)操作Y軸來(lái)刻畫(huà)。下面的例子展示了卡片高度為6dp時(shí)的情形才沧。

光照及陰影示意

3. Material Properties

材質(zhì)本身有不可改變的特點(diǎn)和固有的行為表現(xiàn)

理解這些材料的品質(zhì)會(huì)幫助你利用與材質(zhì)設(shè)計(jì)一致的觀點(diǎn)去操控材質(zhì)迈喉。

材質(zhì)的特性：

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

Physical Properties

材質(zhì)有不同的X和Y維度（用dp來(lái)衡量）以及統(tǒng)一的厚度（1dp）

材質(zhì)厚度示意

不同材質(zhì)元素之間在Z軸方向的相對(duì)提升自然會(huì)導(dǎo)致陰影出現(xiàn)。

正確陰影展示

錯(cuò)誤陰影展示

內(nèi)容可以以任何形式和顏色在材質(zhì)上顯示岁歉，內(nèi)容不會(huì)增加材質(zhì)的厚度得运。

內(nèi)容與材質(zhì)的關(guān)系

內(nèi)容的行為獨(dú)立于材質(zhì)，但受到材質(zhì)邊界的約束锅移。

內(nèi)容受材質(zhì)邊界的約束

材質(zhì)是固體熔掺。輸入事件不能穿越材質(zhì)。

輸入事件不能穿越材質(zhì)

多個(gè)材質(zhì)元素不能同時(shí)占據(jù)空間中的同一位置非剃。

層疊材質(zhì)

材質(zhì)不能穿越其它材質(zhì)置逻。

Transforming material

材質(zhì)形狀可以改變。

材質(zhì)只在自己所在的平面上延展备绽、收縮券坞。

材質(zhì)不能翹曲或折疊。

材質(zhì)翹曲

多片材質(zhì)可以連接在一起成為單片材質(zhì)疯坤。

材質(zhì)分裂后可以恢復(fù)报慕。

Movement of Material

材質(zhì)在環(huán)境中可以隨時(shí)被創(chuàng)造或消滅。

材質(zhì)可以沿著任何坐標(biāo)軸運(yùn)動(dòng)压怠。

z軸的移動(dòng)是用戶與材質(zhì)交互后的典型結(jié)果眠冈。

4. Elevation and Shadows

材質(zhì)設(shè)計(jì)中的物體具備與真實(shí)物理世界物體相似的性質(zhì)。

物理世界中菌瘫，物體可以堆疊或附著在另一個(gè)物體上蜗顽，但不能穿越彼此。物體同樣也會(huì)投射陰影或反射光線雨让。

材質(zhì)設(shè)計(jì)保留了這些特點(diǎn)雇盖，以構(gòu)成一個(gè)用戶熟悉的空間模型，可以在不同APP之間統(tǒng)一運(yùn)用栖忠。

• Elevation：相對(duì)高度
  度量從一個(gè)物體表面到另一物體表面的距離崔挖，一個(gè)元素的相對(duì)高度表示了其表面到它投影之間的距離

• Resting Elevation：固定高度
  所以的材質(zhì)元素尤其固定的高度贸街。雖然各種組件在不同APP之間的高度一致，但他們?cè)诓煌脚_(tái)和設(shè)備上的高度不同狸相。

• Dynamic Elevation Offsets：動(dòng)態(tài)高度偏移
  動(dòng)態(tài)高度偏移是組件移動(dòng)的目標(biāo)高度薛匪，相對(duì)于其固定狀態(tài)而言。

Elevation （Android）

高度是兩個(gè)表面之間沿著Z軸方向的相對(duì)距離或深度脓鹃。

說(shuō)明：

• 高度以與X軸逸尖、Y軸相同的單位測(cè)量，常用單位是density - independent pixels（dp）瘸右。因?yàn)椴馁|(zhì)元素有厚度（所有材質(zhì)都是1dp厚度）娇跟，高度以一個(gè)物體表面到另一個(gè)物體表面的距離來(lái)衡量。

• 子物體的高度是與父物體的相對(duì)高度太颤。

下面的圖和數(shù)值是Android應(yīng)用中的情形苞俘。

高度和相對(duì)高度

Resting Elevation

所有的材質(zhì)物體，無(wú)論尺寸如何栋齿，都有固定高度苗胀，或不會(huì)改變的默認(rèn)高度，它應(yīng)該盡快回到其固定高度瓦堵。

桌面的固定高度比列表中的數(shù)值低2dp基协，以容納鼠標(biāo)和無(wú)法觸摸的環(huán)境元素。

list 1

list 2

Component Elevation：組件高度

• 組件在不同APP之間有相同的固定高度菇用。比如澜驮，浮動(dòng)操作按鈕的高度在不同APP中一致。
• 組件在不同平臺(tái)和設(shè)備上有不同的固定高度惋鸥，取決于環(huán)境的高度杂穷。例如，電視與電腦桌面相比具有更大的深度卦绣，因其有更大的屏幕以及用戶從更遠(yuǎn)的地方觀看耐量。類似的，電視和電腦桌面與手機(jī)相比滤港，有更大的深度廊蜒。

Responsive elevation and dynamic Elevation offsets

一些組件類型具有響應(yīng)式的高度，即它們依據(jù)用戶的輸入或系統(tǒng)事件（如溅漾，普通狀態(tài)山叮、獲取焦點(diǎn)、按下）改變高度添履。這些高度的變化使用動(dòng)態(tài)高度偏移來(lái)實(shí)現(xiàn)屁倔。

動(dòng)態(tài)高度偏移是組件移動(dòng)的目標(biāo)高度，相對(duì)于其固定狀態(tài)而言暮胧。它們保證不同操作和組件類型具有一致的高度變化锐借。比如问麸，所有的組件按下后改變同樣的高度，與其固定高度相比瞎饲。

輸入事件取消或結(jié)束后口叙，組件回到其固定高度炼绘。

Avoid component interference

擁有響應(yīng)式高度的組件在其固定高度和動(dòng)態(tài)高度偏移之間移動(dòng)時(shí)可能會(huì)與其他組件相遇嗅战。由于材質(zhì)不能穿越其它材質(zhì)，組件無(wú)論如何也要避免和其它組件發(fā)生干涉俺亮。( 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.)

在組件層面驮捍，當(dāng)發(fā)生干涉時(shí)，組件可以移動(dòng)或去除脚曾。比如东且，當(dāng)用戶選擇卡片時(shí)，浮動(dòng)按鈕會(huì)消失或移出屏幕本讥，或者當(dāng)snack-bar出現(xiàn)時(shí)發(fā)生移動(dòng)珊泳。

在整體布局層面，設(shè)計(jì)APP布局時(shí)要盡量減少發(fā)生組件干涉的概率拷沸。例如色查，可以將浮動(dòng)按鈕放置在卡片流的一邊，如此一來(lái)撞芍，當(dāng)用戶選擇其中一個(gè)卡片時(shí)就不會(huì)和浮動(dòng)按鈕發(fā)生干涉秧了。

Component elevation comparisons

下面的圖比較了各組件的固定高度和動(dòng)態(tài)高度偏移。

Shadows

陰影提供了關(guān)于物體深度和方向性運(yùn)動(dòng)的重要視覺(jué)線索序无。陰影是表現(xiàn)兩個(gè)物體表面分離程度的唯一視覺(jué)線索验毡。物體的高度覺(jué)得了陰影的外觀。

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

在運(yùn)動(dòng)中帝嗡，陰影提供了有關(guān)物體運(yùn)動(dòng)方向的有用信息晶通，告知用戶兩個(gè)表面之間的距離是增大還是減小。

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

Component reference shadows

以下組件的陰影應(yīng)該被當(dāng)做標(biāo)準(zhǔn)參考使用哟玷。如果后續(xù)的參考陰影出現(xiàn)不一致的地方狮辽，或文檔中其它地方的組件陰影與這里沖突，以這里的參考陰影為準(zhǔn)碗降。

APP Bar：4 dp

APP Bar的高度

Raised Button：上浮按鈕
固定狀態(tài)：2 dp
按壓狀態(tài)：8 dp

桌面上隘竭，上浮按鈕高度為
固定狀態(tài)：0 dp
按壓狀態(tài)：2 dp

上浮按鈕

Floating action Button：浮動(dòng)按鈕
固定狀態(tài)：6 dp
按壓狀態(tài)：12 dp

浮動(dòng)按鈕

Card：卡片
固定狀態(tài)：2 dp
上浮狀態(tài)：8 dp

卡片

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

菜單和子菜單

Dialog：對(duì)話框
對(duì)話框高度：24 dp

對(duì)話框

Nav Drawer and Right Drawer：導(dǎo)航抽屜和右側(cè)抽屜
高度：16 dp

導(dǎo)航抽屜

Modal bottom sheet：模態(tài)底部表單
高度：16 dp

模態(tài)底部表單

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

刷新指示器

Quick entry/Search bar：快速輸入或搜索欄
固定狀態(tài)：2 dp
滑動(dòng)狀態(tài)：3 dp

快速輸入或搜索欄

Snackbar：小訊欄
高度：6 dp

小訊欄

Switch：開(kāi)關(guān)
高度：1 dp

開(kāi)關(guān)

Object Relationships

Object hierarchy

你如何組織、歸集物體讼渊，決定了他們?cè)贏PP中如何與其它物體發(fā)生聯(lián)系动看。物體可以獨(dú)立于彼此移動(dòng)，也可以受高層級(jí)物體限制爪幻。

所有物體都是層級(jí)關(guān)系中的一部分菱皆，這種層級(jí)關(guān)系以父子關(guān)系來(lái)描述须误。在這些關(guān)系中，“子”是指附屬于“父”元素的元素仇轻。物體既可以是系統(tǒng)的“子”元素京痢，也可以是其它物體的“子”元素。

父 - 子說(shuō)明：

• 每個(gè)物體均有一個(gè)“父”元素
• 每個(gè)物體有任意數(shù)量的“子”元素
• 子元素從父元素那里繼承了可變化的屬性篷店，如位置祭椰、旋轉(zhuǎn)、尺寸和高度
• 兄弟元素是在同一層級(jí)上的物體

Exceptions

以根為父元素的物體疲陕，如基本的 UI 元素方淤，獨(dú)立于其它物體移動(dòng)。例如蹄殃，浮動(dòng)按鈕不會(huì)隨內(nèi)容一起滾動(dòng)携茂。其它類似元素包括：

• APP的側(cè)邊導(dǎo)航抽屜
• 操作欄
• 對(duì)話框

Interaction

物體如何與其它物體交互取決于他們?cè)诟缸訉蛹?jí)中的位置。例如：

• 子元素與父元素之間具有最小的Z軸間隔诅岩，其它物體無(wú)法插入父子元素之間讳苦。
• 在可滑動(dòng)的卡片集合中，各個(gè)卡片是彼此的兄弟元素吩谦，所以他們一個(gè)接一個(gè)地串聯(lián)移動(dòng)鸳谜。他們是卡片集合物體的子元素，卡片結(jié)合物體控制他們的運(yùn)動(dòng)逮京。

Elevation

物體的高度卿堂，即他們?cè)赯軸的位置，取決于你想傳達(dá)的內(nèi)容層級(jí)以及物體是否需要獨(dú)立與其它物體運(yùn)動(dòng)懒棉。

5. What's new

參見(jiàn)鏈接：Material Design重要更新說(shuō)明