第一章節(jié)《Material design》
一、介紹（Introduction）
譯者注：關(guān)于“Material”如何翻譯、解釋，看看這篇報(bào)道。以下是截取部分：
谷歌的設(shè)計(jì)師們?nèi)耘f不愿為這個(gè)全新的虛擬物質(zhì)命名，而這個(gè)決定也為他們提供了更多的靈活性，讓他們能夠進(jìn)一步加深形而上學(xué)神秘主義的色彩。此外，不命名這個(gè)決定之所以很重要的原因在于，這個(gè)物質(zhì)雖然遵循著一些物理規(guī)則，但是其并不會(huì)走入擬物化設(shè)計(jì)的圈子里。按照杜亞特的說(shuō)法就是，這個(gè)物質(zhì)并非實(shí)體紙張一對(duì)一的仿造品，而是「魔法紙」。
同時(shí)引用維基百科對(duì)于“Material Design”的解釋：
Material Design** (codenamed Quantum Paper)** is a design language developed in 2014 by Google. Expanding upon the "card" motifs that debuted in Google Now...
譯：Material Design（代號(hào)Quantum Paper），Google在2014年發(fā)布的一門(mén)設(shè)計(jì)語(yǔ)言。其靈感來(lái)源于 Google Now中“card”的聯(lián)想...
譯者注：在Material Design原文中，“object（對(duì)象）、element（元素）、surfaces（面）”其實(shí)就是描述material的不同狀態(tài)，準(zhǔn)確點(diǎn)說(shuō)應(yīng)該是不同語(yǔ)境下的material。比如在講到某個(gè)應(yīng)用頁(yè)面的時(shí)候，我們可能更傾向于表達(dá)這是界面中的“element（元素）”，在對(duì)整個(gè)抽象概念描述的時(shí)候，我們更傾向于表達(dá)為“object（對(duì)象）”...所以在翻譯過(guò)程中難免會(huì)出現(xiàn)混淆概念的地方，希望各位諒解。
為了用戶，我們挑戰(zhàn)自我去創(chuàng)建一門(mén)綜合了經(jīng)典設(shè)計(jì)法則和最新科技理念的視覺(jué)語(yǔ)言，它就是Material design。這份設(shè)計(jì)規(guī)范文檔將隨著我們對(duì)Material design的探索而不斷迭代、升級(jí)。
目標(biāo)（Goals）
融合經(jīng)典的設(shè)計(jì)法則以及前沿的科學(xué)技術(shù)去創(chuàng)建一門(mén)新的視覺(jué)語(yǔ)言。
創(chuàng)建一個(gè)能夠統(tǒng)一跨平臺(tái)和不同尺寸設(shè)備之間體驗(yàn)的底層系統(tǒng)。基于移動(dòng)端的基本準(zhǔn)則，充分利用好觸摸、聲音、鼠標(biāo)和鍵盤(pán)輸入方式。
原則（Principles）
Material的隱喻特征（Material is the metaphor）
利用material的隱喻能夠幫助搭建合理化的空間以及系統(tǒng)的運(yùn)動(dòng)方式。Material是基于真實(shí)的觸摸感知，這一靈感來(lái)源于我們對(duì)紙和墨水的研究，我們相信，隨著科技的進(jìn)步，其應(yīng)用前景將不可估量。
把material想象成真實(shí)存在的有形物體，它的面和邊緣能夠?yàn)橛脩籼峁┮曈X(jué)暗示。同時(shí)，利用符合用戶現(xiàn)實(shí)經(jīng)驗(yàn)的觸覺(jué)特征有利于幫助用戶快速的理解和認(rèn)知。歸功于material本身的靈活，我們能不斷從中創(chuàng)新，但是這些創(chuàng)新都必須嚴(yán)格遵循客觀世界的物理規(guī)則。
借助現(xiàn)實(shí)世界中光照對(duì)物體的影響和物體的面和運(yùn)動(dòng)的原理，能有效的向用戶解釋并傳達(dá)物體是如何變化，物體是如何相互作用以及在空間里面物體之間的關(guān)系。引入真實(shí)的光照，能夠區(qū)分物體間的層級(jí)關(guān)系，幫助劃分空間以及暗示物體間的運(yùn)動(dòng)。
醒目、生動(dòng)、帶有目的性（Bold, graphic, intentional）
借鑒平面（印刷）中的排版、柵格、空間、尺寸、顏色以及圖像（具有象征意義）等設(shè)計(jì)元素，能幫助改良視覺(jué)設(shè)計(jì)。合理的組合、使用這些設(shè)計(jì)元素能向用戶表達(dá)更多深層次的東西，提供引導(dǎo)、表明意圖、引起注意等等。比如通過(guò)利用顏色，無(wú)邊框的圖像，大面積的排版和留白能創(chuàng)造出醒目、生動(dòng)且體驗(yàn)極佳的用戶界面。
眾所周知，用戶行為非常重要。為此需要凸顯核心功能，提供用戶操作引導(dǎo)。
動(dòng)效的引導(dǎo)（Motion provides meaning）
動(dòng)效需要引導(dǎo)用戶去完成目標(biāo)。在一些重要的用戶行為發(fā)生的時(shí)候，我們能使用動(dòng)效去引導(dǎo)、暗示用戶。
所有動(dòng)效的發(fā)生必須在同一個(gè)空間里面。保證動(dòng)效發(fā)生時(shí)不會(huì)打斷用戶體驗(yàn)。
動(dòng)效的存在應(yīng)該是合理、有意義的，動(dòng)效的使用應(yīng)該能夠吸引用戶注意力和保持用戶關(guān)注。其中，反饋的動(dòng)效應(yīng)清晰明了，不夸張。轉(zhuǎn)場(chǎng)的動(dòng)效需連貫一致，條理清晰。
</br>
二、環(huán)境（Environment）
Material design是基于三維空間的設(shè)計(jì)語(yǔ)言。在三維空間內(nèi)包含有光照（light）、material、陰影（shadows）
所有material對(duì)象都存在于含有x、y、z軸坐標(biāo)的三維空間中。
在三維空間下，所有material對(duì)象都有唯一，不與其他對(duì)象沖突的z軸位置。
物體受兩種光源影響，主光源影響物體的投影方向，環(huán)境光照射物體產(chǎn)生柔和的投影。
Material的厚度
1dp
投影
投影還會(huì)受到z軸上相互重疊的material對(duì)象之間距離大小的影響
</br>
三維空間（3D world）
Material存在于三維空間內(nèi)，因此所有的material對(duì)象都帶有x、y、z軸坐標(biāo)信息。z軸指示的方向垂直于屏幕并指向用戶眼球。在z軸坐標(biāo)方向上，每一material對(duì)象都有著唯一，不與其他對(duì)象沖突的坐標(biāo)位置并且都只有1dp厚度，1dp和屏幕密度為160px的一個(gè)px相等。
在web端上，z軸坐標(biāo)主要用于區(qū)別對(duì)象的層級(jí)關(guān)系，而三維空間的營(yíng)造主要通過(guò)y軸上的操作。
光照和投影（Light and shadow）
在material環(huán)境下，虛擬的燈光照亮整個(gè)場(chǎng)景。主光源影響物體的投影方向，環(huán)境光通過(guò)照射物體產(chǎn)生柔和的投影。
在material環(huán)境下，投影受這兩個(gè)光源影響。在Android開(kāi)發(fā)中，由于在z軸上各material對(duì)象位置的不同導(dǎo)致了不一樣的投影效果產(chǎn)生。但在web上，投影只受y軸坐標(biāo)變化的影響。下面的例子展示了一張卡片在6dp高度上光源對(duì)其的影響效果。
</br>
三、Material特性（Material properties）
Material有一套屬于自身固定不變的外在特征和內(nèi)在行為邏輯。
理解material的這些特性有助于我們掌握material design并運(yùn)用到實(shí)際設(shè)計(jì)當(dāng)中。
Material的特征
- 立體的
- 在空間中占有唯一的位置
- 不能被其他material對(duì)象穿過(guò)
- 可變化的形狀
- 只沿水平方向作變化
- 不可彎曲
- 能和其他material對(duì)象合并
- 能被分裂，再合并
- 能憑空出現(xiàn)或者消失
- 能在任何軸向上移動(dòng)
</br>
物理特性
Material的尺寸沿x和y軸變化（單位：dp），并且其有著固定不變的厚度（1dp）。
Material的投影。
投影的深淺效果跟Material對(duì)象之間的位置距離（z軸）相關(guān)。
任何形狀和顏色的內(nèi)容都能在material上面顯示。添加內(nèi)容不會(huì)增加material的厚度。
在material有限的范圍內(nèi)，內(nèi)容能夠隨意變化。
Material是立體的。
輸入事件不能穿過(guò)當(dāng)前被觸發(fā)的material對(duì)象。
在空間內(nèi)，多個(gè)material對(duì)象不能同時(shí)占據(jù)同一個(gè)位置。
一個(gè)material對(duì)象不能穿過(guò)另一個(gè)material對(duì)象。舉例，就好比一張紙不能穿過(guò)另一張紙一樣。
Material的變化
Material能改變形狀。
Material沿水平方向放大縮小（沿x和y軸）
Material不能彎曲折疊。
多個(gè)material對(duì)象能夠合并成為一個(gè)material對(duì)象。
被分裂的material對(duì)象能夠再次合并。
Material的運(yùn)動(dòng)
Material能夠出現(xiàn)或消失在空間里的任何地方。
Material能沿任何軸向移動(dòng)。
Z軸上發(fā)生的運(yùn)動(dòng)變化一般是用戶與material對(duì)象交互的反饋結(jié)果。
</br>
四、高度和投影（Elevation and shadows）
Material design中的material對(duì)象的特性與現(xiàn)實(shí)物理世界中的物體特性相似。
在現(xiàn)實(shí)物理世界中，一個(gè)物體可以疊在另一個(gè)物體上面，但是物體間不能相互穿過(guò)。同時(shí)，物體也能投射投影和反射燈光。
Material design借鑒了現(xiàn)實(shí)物理世界中物體的特性，并將其運(yùn)用在虛擬的三維空間里面的material對(duì)象上。這種借鑒現(xiàn)實(shí)物理世界的做法不僅有利于幫助用戶理解，還能統(tǒng)一各應(yīng)用間的體驗(yàn)。
高度（Elevation）
高度的計(jì)算方法是從一個(gè)material對(duì)象的頂面到另一個(gè)material對(duì)象的頂面。高度的大小可以暗示用戶兩個(gè)material對(duì)象間的距離大小以及投影的深淺。
默認(rèn)高度（Resting elevation）
所有的material對(duì)象在空間中都有其自己默認(rèn)的高度。在應(yīng)用中，這些組件（material對(duì)象）的默認(rèn)高度是這樣的，但到了不同的平臺(tái)或是設(shè)備上的時(shí)候，默認(rèn)高度可能就會(huì)出現(xiàn)變化。
高度的動(dòng)態(tài)補(bǔ)償（Dynamic elevation offsets）
高度的動(dòng)態(tài)補(bǔ)償就是一個(gè)組件（material對(duì)象）從其默認(rèn)高度朝著目標(biāo)高度所做的位移變化。
</br>
高度（Android） （Elevation (Android)）
高度取決于沿z軸兩個(gè)面之間的距離，或者說(shuō)是深度。
說(shuō)明：
高度（z軸）的測(cè)量單位和x、y軸上的測(cè)量單位是一樣的，都是dp（density-independent pixels）。因?yàn)閙aterial的厚度是1dp，所以對(duì)兩個(gè)material對(duì)象間高度的計(jì)算是從一個(gè)material對(duì)象的頂面到另一個(gè)material對(duì)象的頂面。
在material對(duì)象中，一個(gè)子對(duì)象的高度與其父對(duì)象的高度相關(guān)。
下圖是Anndroid應(yīng)用中的例子。
默認(rèn)高度（Resting elevation）
無(wú)論大小，所有的material對(duì)象都有一個(gè)默認(rèn)高度，這個(gè)默認(rèn)高度是不會(huì)改變的。當(dāng)一個(gè)material對(duì)象的高度產(chǎn)生了變化，之后它會(huì)馬上回到默認(rèn)高度。
電腦桌面端（Desktop）的各組件默認(rèn)高度比下圖所列值小2dp，目的是適應(yīng)帶鼠標(biāo)以及非觸摸屏的設(shè)備環(huán)境。
| 高度（dp） | 組件 |
|---|---|
| 24 | 對(duì)話框，選擇器 |
| 16 | 抽屜導(dǎo)航, 右抽屜導(dǎo)航, 模態(tài)底部sheet |
| 12 | 浮動(dòng)按鈕（FAB） |
| 9 | 子菜單（每個(gè)子菜單+1dp） |
| 8 | 底部導(dǎo)航欄, 菜單, 卡片（選擇狀態(tài)）, 抬起按鈕 （按下?tīng)顟B(tài)） |
| 6 | 浮動(dòng)按鈕（默認(rèn)狀態(tài)）, Snackbar |
| 4 | 應(yīng)用欄 |
| 3 | 刷新指示器, 快速入口 / 搜索欄（滾動(dòng)狀態(tài)） |
| 2 | 卡片（默認(rèn)高度）＊, 抬起按鈕（默認(rèn)高度）＊, 快速入口 / 搜索欄（默認(rèn)高度） |
| 1 | 開(kāi)關(guān) |
組件高度：（Component elevations）
在不同的應(yīng)用中，各組件的默認(rèn)高度不變。舉個(gè)例子，在一個(gè)應(yīng)用中浮動(dòng)按鈕（floating action button）的默認(rèn)高度是6dp，到了另一個(gè)應(yīng)用中一樣也是6dp的默認(rèn)高度。
在不同的平臺(tái)和設(shè)備中，各組件的默認(rèn)高度可能不同，這取決于人們觀看的距離。舉個(gè)例子，因?yàn)門(mén)V有著比電腦桌面（desktop）更大的屏幕尺寸，所以觀看TV的距離比觀看電腦桌面的距離要更遠(yuǎn)。同理，觀看TV和電腦桌面的距離比觀看手機(jī)的距離要遠(yuǎn)。
高度響應(yīng)和高度的動(dòng)態(tài)補(bǔ)償（Responsive elevation and dynamic elevation offsets）
一些組件的高度會(huì)作響應(yīng)，換句話說(shuō)就是當(dāng)用戶輸入反饋（比如正常狀態(tài)、聚焦?fàn)顟B(tài)和點(diǎn)擊狀態(tài)）或一些系統(tǒng)事件的反饋時(shí)，這些組件的高度會(huì)因此而改變。這些組件的高度變化主要是通過(guò)高度的動(dòng)態(tài)補(bǔ)償實(shí)現(xiàn)。
高度的動(dòng)態(tài)補(bǔ)償就是一個(gè)組件（material對(duì)象）從其默認(rèn)高度朝著目標(biāo)高度所做的位移變化。它能確保各組件變化以及組件類型的一致。例如，所有可點(diǎn)擊的組件被點(diǎn)擊后都會(huì)有相同高度的位移變化。
一旦用戶輸入事件完成或者被取消，這些組件就會(huì)返回到默認(rèn)高度的位置上。
**避免高度變化沖突（Avoiding elevation interference） **
當(dāng)一個(gè)組件的高度在位移變化的時(shí)候，有可能會(huì)遇到其他組件也在變化。因?yàn)?a target="_blank" rel="nofollow">material對(duì)象之間是不能夠相互穿過(guò)的，所以我們要避免各組件在高度變化的時(shí)候發(fā)生沖突。
在組件處于相同高度的時(shí)候下，組件可以根據(jù)情況提前移動(dòng)或者直接消失。舉個(gè)例子，浮動(dòng)按鈕（floating action button，以下簡(jiǎn)稱“FAB”）會(huì)在用戶選擇卡片（cards）之前消失或移離屏幕，抑或者當(dāng)snackbar出現(xiàn)時(shí)浮動(dòng)按鈕移動(dòng)位置。
在布局層面上，通過(guò)設(shè)計(jì)應(yīng)用的布局可以減少組件間相互沖突。舉個(gè)例子，將浮動(dòng)按鈕（FAB）置于屏幕的一側(cè)，當(dāng)用戶選擇卡片（cards）的時(shí)候就不會(huì)和浮動(dòng)按鈕產(chǎn)生沖突。
各組件間高度的對(duì)比（Component elevation comparisons）
下圖是各組件間默認(rèn)高度和高度的動(dòng)態(tài)補(bǔ)償?shù)膶?duì)比。
投影 （Shadows）
為了引導(dǎo)用戶理解material對(duì)象的深度和運(yùn)動(dòng)方向，投影提供了重要的視覺(jué)暗示。投影是唯一能夠區(qū)分面與面（material對(duì)象）之間關(guān)系的視覺(jué)線索。一個(gè)material對(duì)象的高度決定了其投影的效果。
在運(yùn)動(dòng)方面，投影不僅能為material對(duì)象運(yùn)動(dòng)的方向提供視覺(jué)暗示，還能展示material對(duì)象之間的高度變化（距離增加還是減少）。
組件的投影規(guī)范
以下是各個(gè)組件的投影參考。如果在Material design規(guī)范中其他地方出現(xiàn)了與這些投影參考規(guī)范不同的組件投影，請(qǐng)與這里為準(zhǔn)。
應(yīng)用欄（App bar）
4dp
凸起按鈕（Raised button）
默認(rèn)狀態(tài)（Resting state）: 2dp
按下?tīng)顟B(tài)（Pressed state）: 8dp
在電腦桌面端（desktop）上：
默認(rèn)狀態(tài)：0dp
按下?tīng)顟B(tài)：2dp
點(diǎn)擊查閱關(guān)于 凸起按鈕 的更多信息。
浮動(dòng)按鈕（Floating action button (FAB)）
默認(rèn)狀態(tài)：6dp
按下?tīng)顟B(tài)：12dp
卡片（Card）
默認(rèn)狀態(tài)：2dp
凸起狀態(tài)（Raised state）：8dp
在桌面電腦端上的情況，請(qǐng)前往 內(nèi)容布局 查閱更多信息。
菜單和子菜單（Menus and sub menus）
菜單：8dp
子菜單：9dp（每增加一個(gè)子菜單+1dp）
對(duì)話框（Dialogs）
24dp
**抽屜導(dǎo)航菜單和右抽屜（Nav Drawer & Right drawer） **
16dp
底部模態(tài)sheet （Modal bottom sheet）
16dp
譯者注：
1.sheet是Material design語(yǔ)境中的詞語(yǔ)，可以粗淺的認(rèn)為是“紙片”的意思。如果換成正常的說(shuō)法應(yīng)該是對(duì)話框的意思，只不過(guò)官方為了配合語(yǔ)境而另作設(shè)定。
2.什么是「模態(tài)」，請(qǐng)點(diǎn)擊了解
刷新指示器（Refresh indicator）
3dp
快捷入口/搜索欄
默認(rèn)狀態(tài)：2dp
滾屏狀態(tài)（Scrolled state）：3dp
Snackbar
6dp
譯者注：同樣是Material design語(yǔ)境中的詞語(yǔ)，不好表達(dá)故不做翻譯。
**開(kāi)關(guān)（Switch） **
1dp
對(duì)象關(guān)聯(lián) （Object relationships）
對(duì)象層級(jí)
在一個(gè)應(yīng)用中，你如何去組織對(duì)象直接決定了對(duì)象移動(dòng)的時(shí)候與其他對(duì)象之間的關(guān)系。比如該對(duì)象是否能夠獨(dú)立移動(dòng)，還是說(shuō)移動(dòng)的時(shí)候受到其他對(duì)象約束。
所有對(duì)象之間都是以父子關(guān)系存在的。「子」級(jí)對(duì)象從屬于它的「父」級(jí)對(duì)象。一個(gè)對(duì)象能成為整個(gè)系統(tǒng)或者另一個(gè)對(duì)象的子級(jí)對(duì)象。
譯者注：這里討論的對(duì)象就是material對(duì)象。material對(duì)象在「應(yīng)用」中的表現(xiàn)就是我們熟知的一個(gè)個(gè)組件。
關(guān)于父-子級(jí)對(duì)象：
每個(gè)對(duì)象都有一個(gè)父級(jí)對(duì)象
每個(gè)對(duì)象都有不同數(shù)量的子級(jí)對(duì)象
子級(jí)對(duì)象繼承父級(jí)對(duì)象的屬性，如位置、選擇、縮放和高度。
跟子對(duì)象處于同一層級(jí)的子級(jí)對(duì)象的級(jí)別相同。
例外
一些對(duì)象從屬的父級(jí)對(duì)象是root，比如重要的UI組件，它的移動(dòng)獨(dú)立于其他對(duì)象。舉個(gè)例子，浮動(dòng)按鈕不會(huì)跟隨滾屏而移動(dòng)。除此之外，還包括以下組件：
- 側(cè)邊導(dǎo)航菜單
- 操作欄
- 對(duì)話框
**相互作用 **
一個(gè)對(duì)象如何作用于另一個(gè)對(duì)象，取決于他們?cè)诟缸訉蛹?jí)中的位置。
舉例說(shuō)明:
子級(jí)對(duì)象和父級(jí)對(duì)象在z軸上的距離是最近的；其他非子級(jí)對(duì)象不能在父-子級(jí)對(duì)象之間插入。
一個(gè)正在移動(dòng)的卡片（card）集合，他的所有子級(jí)卡片都跟隨著移動(dòng)。這個(gè)卡片集合控制著它的各個(gè)子級(jí)卡片移動(dòng)。
高度
如何決定某個(gè)對(duì)象的高度（即它們?cè)趜軸上的位置）取決于你想表達(dá)怎樣的內(nèi)容層級(jí)，以及當(dāng)一個(gè)對(duì)象需要移動(dòng)的時(shí)候是否獨(dú)立于其他對(duì)象。
