如何理解 Google 的 Material Design 設計語言？
此問題的等同描述還可能是：如何評價 Google 的 Material Design
We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.
Introduction - Material Design - Google design guidelines
更新：
把Material Design 官方文檔又完整地看了一遍，有了些新想法，建議閱讀：）
舞台上的戲法和天文里的科技：Material Design和iOS 7動效對比分析 - 表面 - 知乎專欄
原文：
一、
從蘋果發布 iphone 那年開始，設計界就開始發明適合觸摸時代的新材料，我們姑且稱之為「數字紙」。顧名思義，它和印刷時代的紙張既有相似又有區別。
回顧歷史，這裡面有數條線索。
其一是手機系統。除了 iOS，早期還有WebOS。後者將程序視為卡片，將程序的多任務界面表述為撲克式的橫向排列和抽拉。
另外一條線索是 app，Reeder, Flipboard, Paper for Facebook, Medium 等等，延續至今。
容易被人們遺忘和忽略的一條線索是，在 iPad 出現之後，平板雜誌的出現為紙媒向數字媒體的轉化提供了短時的興奮劑，並為後來移動 UI 的發展提供了前期技術儲備。
我那會剛從某本雜誌離職，在論壇上和人爭論還未面世的 ipad，並宣告2010年將是數字雜誌的出版元年。可以想像那時的集體氣氛，在 iPad 面世之後，整個世界的雜誌界如何陷入一種對於未來的譫妄狂想。
我個人的興奮點在於，觸摸雜誌的UI將會發生何種有趣的變化。
我記得最早期的優秀雜誌是《Popular Science》和《Wired》，前者將文本和圖片置於不同圖層，因此可以做相互運動。後者將紙張視為火車車廂一樣連接和運動的紙的條幅，並以x 軸和 y 軸的不同方向來結構專題。頁面依然是固定大小，也即卡片式的——當時國外的科技圈為了解釋界面上的新變化，徵引了用戶界面先驅Jef Raskin 所定義的兩種超文本模型：捲軸模式和卡片模式，並適用於不同手勢。前者適合滾動（Scroll），後者適合滑動（Swape）。
後期的雜誌我沒太關注，但我還記得戈爾所做的那本環保雜誌，Paper for facebook 如何深受其影響，以大小卡片來解決版塊和文章的結構關係。
回頭看來，由印刷時代的經典媒介形式來推動移動UI的發展是頗富象徵意義的。這裡面承上啟下的界碑是 Reeder，它是互聯網時代的雜誌：訂閱、聚合、推送和時間線。
這是4年前（2010年）我所發的微博：
我建議所有做ipad雜誌的都學習Reeder的紙張隱喻，質地和動畫idea……我所謂紙張隱喻，是指內容切換如何利用紙張的物理特性，翻頁早就過時了，應該在疊加、覆蓋、抽拉、翻轉這些紙與紙的關係中尋找適合觸摸時代的設計語言。我能找到一堆國外案例，和他們相比，國內的微博客戶端、周末畫報、南方周末簡直毫無設計思想。
這是兩年前我在知乎上回答問題(iOS 系統的擬物化設計存在哪些問題？為什麼有一些人會批評？)的一段話:
問題是虛擬界面的設計所面對的原生材料是什麼？它存在嗎？更為本質的設計可能不在於外觀，而在於組織和交流信息的邏輯形式，或者說交互。暫以一例說明，Reeder式紙張隱喻的巧妙在於，不是模擬紙張的樣式和材質，而是模擬紙張的疊加、覆蓋、抽拉等空間關係，如此，紙張的裂口和陰影是必要的擬物設計，它產生的虛擬邏輯更有效果地區別和組織信息。這些結合著信息形式的擬物深刻的影響了後來者，比如Safari。
我們看到，Snow Leopard里的 Safari如何借鑒使用了紙張的疊加關係， 並在 Jony Ive 的推動下在 iOS7上遍地開花。
前段日子，被 LG 收購的 WebOS 團隊將他們秘密研製的新系統 Mochi 開源，我們因此看到，Reeder 的紙張隱喻如何在紙張的裂口和抽拉關係上繼續啟發著操作系統。（早期 Reeder 設計找不到圖，可以借用 Mochi 的圖來理解紙張的裂口）
而他們又是如何繼承卡片式設計並結合紙張的物理性質（折角），在多任務交互上再次演進。
二、
Google Design 的名字叫做Material。Damn it！竟然就叫做「材料」，就好比說，不知道給姑娘起什麼昵稱的時候就叫她為「女人」。
因為「數字紙」是一種不知道叫做什麼材料的紙。
我們設想一種材料，它可以承載信息，信息的更換可用同一材料的更換來實現。讓我們測試石板、碑材、竹簡、印章、動物皮、布帛……最後發現，如果從簡潔的角度考察，紙張是最優秀的載體。因為它足夠薄，薄到似乎只有信息本身。而裁剪成固定尺寸並相互疊加又是最經濟有效的信息存儲結構。
但是紙張要通過怎樣的形式轉化到虛擬世界中呢？
我在 iOS 7發布那會兒曾經做過這樣的頭腦風暴：假設有一個量子國，量子國使用的信息媒介是「量子紙」（Material 之前曝光的名字竟然就叫做"Quantum Paper"，Damn it！）。因為量子的特性，字跡，以及量子國所有事物並不穩定，在他們的視覺記憶中，所謂事物是雪花般的干擾顆粒中的匯聚的鬆散形體。那麼量子國手機的UI設計應該是什麼樣的？
我想該國的設計師可能會這樣設計：點擊導航欄上的量子按鈕，按鈕一下子散開成無數顆粒然後再匯聚成新的頁面。而如何表達菜單欄與頁面之間的上下空間關係呢？也可能是在疊加面上，導航欄和頁面不斷地在對方的干擾下扭曲和揮發。
借用這樣的思考方式，iOS6所模擬的一定類似於蒸汽朋克之類的架空科技世界。前工業時代的木頭、工業時代的鋼鐵玻璃和後工業時代的電子屏幕混雜在一起。電影中的畫面是：推開木質的賭場大門，紳士們雪茄煙霧繚繞，圍著圓拱形隆起帶有操作按鈕的桌邊，打一場電子屏幕的虛擬牌戲……
在我們所處的宏觀三維時空里，紙張構成了薄與疊加層級的原型隱喻。讓導航欄和頁面在形式上屬於同一材料：紙張，並借用陰影——我們時空的特徵來表達層級關係，這本應該是最簡潔有效的方式。問題是，iOS7並沒有在導航欄上使用陰影效果，而是採取了我們慣常稱之為毛玻璃的形式。
其實可以理解成，蘋果發明了一種新的「數字紙」：「透明紙」。準確的說：「淺景深紙」。為了強調界面的空間深度，蘋果用景深和視差來表達圖層之間的距離感。相對遠的距離就無所謂陰影。
蘋果導航欄與程序頁面的邏輯距離既是近的，又是遠的，因為它看似屬於程序內部，又可以視為臨時層，和控制中心和通知中心屬於同一層級。所以可以不用有陰影。
* * * * * * * * * * * * * * * * * * * * * * * * *
（補充一部分）
除了導航欄上微弱的淺景深效果，蘋果還在在導航欄底邊用細線來修飾，這實現了陰影的目的：區隔。頁面不滾動的時候你大概會覺得它只是同一頁面內的分割線，但當頁面向上滾動，這條線就類似於陰影，區分了上下層。
這種手法依然來自於 Reeder，早期 Reeder 里的分割線既分割了同一頁面，又能在頁面滾動的時候變成紙張的裂口，而下層內容可以從裂口中穿過——有趣的魔法紙。大概蘋果覺得裂口和陰影太擬物了，在 iOS7隻保留了分割線。
而透明標題欄的設計應該也是來自 Reeder的標題紙條，但紙條的樣式被蘋果改造成無邊框設計，更加扁平，並同屬於半透明圖層。
只是在返回手勢所切換的上下頁面之間，蘋果仍保留了頁面陰影，因為它們足夠的「近」，同屬於程序內部。
（補完）
* * * * * * * * * * * * * * * * * * * * * * * * *
紋理、質感、色調、疊加、陰影、摺疊……在紙張的諸多物理特性中，保留哪些去除哪些，各家有各家的選擇，但普遍去除了紋理、質感——來自紙張的視覺表徵（蘋果只在備忘錄、提醒事項等程序上保留了這些），而代之以空間關係。同時在減法的基礎上再做加法，利用設計的創造力，重新結構和賦予紙張更多的的物理性質。
於是作為網站的開始，Google 的下列語句可視為對「數字紙」整體理念的闡述。
Material is the metaphor
A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.
The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.
上述語句中，」technologically advanced and open to imagination and magic」一句觸及了對於移動 UI 設計的本質性思考。
理念啟發形式，而沒有形式的創造，理念就無所依附，無有價值。對於移動 UI 設計來說，科技感所需要的「想像力和魔法」就是理念的核心價值。具體而言，要考察你依據理念發明了哪些新樣式，或者退一步說，你在樣式的借鑒和發揚上有哪些新意。從網站上的資料所見，陰影和層級、紙張拼貼變形與響應式設計、浮動按鈕、觸摸波紋這幾項是對紙張性質的新闡發。
三、
陰影和層級
Material的程序界面層級關係如圖：
可見，若要將並不鋪滿頁面的內容紙張從背景層中分離出來，陰影是一種必要手段。
頗富新意的是，按鈕的啟動狀態從下沉改為上浮。
但其實這並不真正新穎，類似的交互反饋也見過多次。比如 Paper for facebook 裡面的小圓按鈕，在點擊時會短暫下沉，然後迅速浮起和放大。iOS7的圖標在點擊後會短時變暗然後整體放大成為程序界面。物體在受力後會給予一個反彈，這符合生活中的物理經驗。
新意在於，用陰影的深度來表達層級。Material 系統規定了很多陰影的深度層級來表達不同的高度層級。
紙張拼貼、變形與多屏幕適用
邏輯上所有程序都可視為紙張的組合。但視覺上強調該特徵的並不多見。WebOS 是在多任務界面里，讓變小的程序呈現紙張卡片特徵。Material 的紙張引人注目之處在於它經常小於整個內容界面，並作為內容界面的構件。而構件可以拼貼、分解和相互運動。
用縫隙來表達紙張與紙張的相互連接並可以整體移動：
上下層紙張可做獨立移動
內容紙張在工具欄紙張下的移動
用縫隙連接的兩張工具欄紙張和內容紙張，可以在移動中產生上下級關係，Google 稱之為」Waterfall」（早期Reeder 的發明）
工具欄紙張和內容紙張可做整體移動
內容紙張可以轉成上級紙張越過工具欄移動
可見，Google 演繹了紙張拼貼的多種可能性來作為交互的主要手段，這給app 的交互設計創新展開廣闊空間。Google Now的酷炫動畫算是它的提前預演 ，可以期待它在 Andriod L中的表現。
Material 紙張的另一特徵是伸縮變形，這是 Google給紙張嫁接其他物質的物理規則："technologically advanced and open to imagination and magic"。
當紙張有了上述的物理性質，就可以構成適用多個屏幕的響應式設計。
當屏幕大小，也即背景層大小發生變化，而內容紙張的卡片形式卻可以表現為相對固定的外觀。同時紙張構件的拼貼和變形又可以保證足夠的靈活性。
另一方面，紙張作為內容信息的載體和隱喻，可以通過印刷時代的手段——排版，來保持內容的一致性。不同屏幕的紙張都有同樣的網格系統，並居左對齊。
Google Map 是表現Material 響應式設計的絕佳例子。
浮動按鈕
網站上看到的信息不夠完整。介紹Material Design的動畫中似乎在說明，浮動按鈕是下層紙張卡片的變形，貼在上層紙張上來提供「更多操作」的入口。
另外，按鈕貼在上下紙張的縫隙之間，常見的是工具欄紙張和內容紙張，似乎也暗示著關聯性的交互。
從形式上看，它來自於生活中的圓形貼紙，貼於方形卡片之上，在構成上起到點睛的作用。非常必要。如此，拼貼的概念才算完整。此外，形式上的醒目足以保證它於 Material 語言的標識性，類似於毛玻璃之於iOS。
觸摸波紋
按鈕的點擊反饋我見過幾種：常見的是變暗或者變色，如 iOS的圖標；不常見的有放大，如 Paper for facebook；還有變形，如 LG webOS。
我始終記得 Jony Ive 在設計初代 iPhone時，尋找原始感覺的時候將屏幕形容為"infinity pool"：就像一個看不到邊緣的高級游泳池。將屏幕表面比作水面，水面對動作的反饋是波紋，這是自然界給予我們不多的對於「表面」的戲劇性體驗。最先實現的是早期的WebOS，但它擬物的設計限制了我對於水波紋的想像。直到我看到 Nexus 5上點擊主頁鍵或者搜索欄時的動畫，Material Design將其擴展為全局。
Google認為構件從點擊中心擴展圓形半透明的形式來自於紙張油墨塗層的隱喻，而波紋的樣式則為觸摸的時間和壓力做出圖形反饋。
我們看到，按鈕的變暗和下沉被 Google替換為更加「扁平」的動畫，按鈕不再是一個下沉的「實體」，而僅僅是一個「表面」，其後的上升並不符合常見邏輯。紙張的觸摸被賦予了全新的物理性質。
最後請觀看 Material Design 的宣傳片。
參考The Verge對Matias Duarte的訪談：
Material world: how Google discovered what software is made of
注意這一段（下劃線和粗體是筆者加的）：
Material Design "unified us in our thinking," Duarte says, admitting that "it』s absolutely a constraint." These constraints, he says, made design decisions easier and more consistent. Take, for example, the idea of flipping a card over to see what』s on the back. In Material Design』s world, that』s a cheat that doesn』t work. It』s as if the software is actual, physical stuff inside these devices, and there』s not space inside a phone to flip a card over, so Google doesn』t allow itself to do it.
Material Design Principles這個session中特別提到：這些飄來飄去的紙片，尺度和手機是一樣的；屏幕不是看另一個世界的窗口。這是什麼意思？
Material is metaphor，這是關於整個手機的隱喻，我們怎麼理解手裡這個扁扁的黑盒子？
早期的iPhone是「百變盒子」，通過運行不同的app，它可以模擬各種我們熟悉的物品：手機，相機，計算器... 在屏幕技術的限制內，app儘力接近它們要模擬的對象。在這個隱喻里，屏幕上的各種按鈕本來應該是突出於屏幕之外的，雖然我們無法在觸覺上模擬此效果。
Windows Phone則拒絕在手機層面使用隱喻。手機就是一種全新的物品而無需模擬其他物品，屏幕的屬性就是像素而無需模擬其他材質的屬性。WP的屏幕是完全的平，前後都沒有東西，所有UI元素都位於屏幕表面。
Android直到Holo，似乎都沒怎麼考慮過這個層面的問題。Android UI繼承了桌面UI，以功能性為主。
iOS7呢？從放縮、透視和毛玻璃的大量使用來看，似乎正是把屏幕看作通往另一個世界的窗口。UI元素可能位於屏幕後面相當遠的地方，而屏幕本身可以在這個虛擬世界中自由移動。
回到Material Design，這些漂浮的小紙片，就「真實」地漂浮在手機這個小盒子之內，而屏幕是一塊透明玻璃，用戶可以透過它一窺盒子內部。UI通過陰影所表現出的深度，不應該超過手機本身的厚度。
總結：
iOS（1-6）：手機是百變盒子。UI突出於屏幕。
Android（~Kitkat）：手機是小電腦。UI是什麼沒想過。
Windows Phone：手機就是手機。UI在屏幕表面。
iOS7：手機是觀察異世界的魔鏡。UI在另一個空間。
Android L：手機是裝著漂浮小紙片，有玻璃蓋子的盒子。UI在盒子內部。
P.S.
說到盒子里的紙片，首先想到的是Paper Mario：Official Site
--------------------------------------------------------------------------
看keynote時對Material Design這個提法十分不解，因為新UI風格並不注重表現材質，也沒有體現紙張的物理特點。
但看過Material Design的panel後，我覺得Matias Duarte確實已經用兩個詞說出了Material Design的核心，那就是所謂的material，並非紙/毛玻璃/皮革/木頭，而是一種在現實中不存在的"magical material"。
1. Material，即屏幕上的元素還是由類似真實世界的材料構成的物體，有類似的物理屬性（形狀比較固定，佔據一定空間，有前後遮擋關係，會投射陰影，可以移動...）。相對的，Metro（比較極端地）和Holo（比較中庸地）都傾向於屏幕上的元素只需要具有像素本身的屬性，而不必模擬真實世界。
所以我們看到，在去掉陰影的潮流中，陰影又變得無處不在。另一方面，由於真實世界的物體通常不會瞬間、憑空出現和消失，所以平移、旋轉、擴展和畫面外飛入代替了原來從屏幕中間出現的過渡動畫。
2. Magical，即這種材料並不模擬真實世界某種具體的材料。擬物化的一個問題是用戶對真實世界的材料有非常多的期望。把界面畫得太像真實物體，你無法實現用戶的期望。比如你可以在屏幕上畫出很像紙質通訊錄的通訊錄，然而用戶期望紙質通訊錄可以翻頁，可以折角，可以用筆批註，甚至有紙的觸感，而你沒有做到。
相對的，不在視覺上模擬特定材料，比較容易控制用戶的期望。一個不明材料製成的卡片，用戶的期望可能只是可以移動而已，而這恰恰是我們想通過卡片表達的隱喻。
相對的，不在視覺上模擬特定材料，比較容易控制用戶的期望。一個不明材料製成的卡片，用戶的期望可能只是可以移動而已，而這恰恰是我們想通過卡片表達的隱喻。
3. Magical的另一面，即這種材料不必受真實世界材料的限制。仍以仿紙質通訊錄為例，用戶並不期望紙張上的文字可以上下滑動，在屏幕上實現這一功能反而會與用戶對材料的認知相矛盾。
而這種抽象的，"魔法"材料在必要時，不必受真實世界規則限制。比如大量使用的卡片伸縮變形動畫，一方面為符合日常經驗，變形要以連續的動畫而不是瞬間完成，另一方面我們不必費心考慮和表現卡片是如何伸縮的（比如表現為捲軸），反正它是魔法材料。又如UI元素像現實世界一樣有前後關係並投下陰影，但我們不必考慮它們是如何懸浮於空中，要不要加上支撐結構。
總結：既要充分利用「材料」帶來的現實世界隱喻，又不要被現實世界規律所束縛。Material Design看起來很正確，但很難把握度。終於有時間看Google的Material Design啦。
認真讀了一遍Google的設計介紹與文檔：（各種案例請到網站去看，不一一貼圖了）
http://www.google.com/design/spec/material-design/introduction.html
這裡記錄自己感興趣的部分，並加入一些粗淺的註解。希望寫的輕鬆一些。：）
Google對Material Design的介紹是這樣的：
We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design.
簡單說，就是按照傳統的理念來設計，與新的技術展現方式結合。
再簡單片面一點，就是界面設計與前端開發創新結合。
這個思路並不算創新，蘋果iOS7的扁平化和動效結合，思路是一樣的。
作為一個交互設計，我非常認同這樣的思路。首先，界面設計趨勢是簡約，突顯內容的價值，去修飾化。但是去除了過多的修飾，用戶可能不適應，因為過於簡約後可能會失真，也可能讓用戶在使用流程中迷失（界面指向性沒有那麼強了），所以前端開發動效就來拯救與彌補。我個人覺得這個趨勢是對用戶好的改變。
關於設計準則，Google說了3個：
1. Material is the metaphor
喜歡這句描述：
The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
簡單理解，設計從傳統來，但是技術的發揮可以為設計帶來更多的可能性。一樣，與以上總介紹的思路一致。
Google還說了一個要求：
The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.
這要求不低。基本的本質形態設計來提供最基礎最可靠的認知，但是又要能創造出新的設計形態來提供新的認知方式，新的認知方式還不能打破傳統的本質形態。
就像是：
藝術源於生活，又要高於生活，但是又不能脫離生活……
各位設計師朋友小心哇，以後設計總監和業務領導又有新的話語折磨你們了，這句比「不夠大氣、不夠上流、不夠高端」難多了…… 哈哈哈 lol
2. Bold, graphic, intentional
The foundational elements of print-based design—typography, grids, space, scale, color, and use of imagery—guide visual treatments. These elements do far more than please the eye; they create hierarchy, meaning, and focus.
這段寫得挺基本。字體、空間、顏色、圖片使用本來就不僅僅是直觀的界面展現，它們還能表達信息架構、意義、幫助用戶聚焦等。
這個設計小夥伴們都知道……
3. Motion provides meaning
Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are ef?cient yet coherent.
贊！動起來！後面我也會重點寫動效這一塊，因為這塊有意思。設計現在應該讓動效貫穿其中，整體的用戶體驗才會完整且精彩。
然後看動效，Google講了4點。
1. Authentic Motion
Perceiving an object"s tangible form helps us understand how to manipulate it. Observing an object"s motion tells us whether it is light or heavy, flexible or rigid, small or large. Motion in the world of material design is not only beautiful, it builds meaning about the spatial relationships, functionality, and intention of the system.
動效的價值容易理解。用戶看到物體的移動就容易懂得怎麼去使用它，並能了解它的各種形態。動效不僅僅是好看或者炫，它能給用戶體驗帶來真實價值。
同意，動效的意義如果僅僅只是為了炫，就沒有意義了。它必須與信息框架、視覺展現、流程設計等緊密結合，才能體現動效的價值。
2. Responsive Interaction
Responsive interaction builds trust with the user and engages them. When a user interacts with an app and beautiful yet perfectly logical things happen, the user feels satisfied—even delighted. It is thoughtful and purposeful, not random, and can be gently whimsical but never distracting. It encourages deeper exploration of an app: what will happen if I touch this? And then this?
當動效是有邏輯的，用戶會開心。動效不應該是隨機發生、沒有意義的。
舉個例子，在手機上，有6個大方塊。例如以前的動效，是你用手指按住1個方塊，那個方塊就呈現選中態，一下就全亮起來。這是對的，符合設計的Feedback原則。現在Google想提高標準了，你用手指按住1個方塊，你手指的按的區域先亮起來，然後那個區域再像燭光灑滿屋子或者水漫過地板一樣慢慢充滿整個方塊。自然、有邏輯、炫、好看。
不過我認為要用對這個思路，還得用點心思去思考在這個動效過程中你要講什麼故事，不然價值體現不夠。
3. Meaningful Transitions
It can sometimes be difficult for a user to know where to focus their attention in an app or how an app element got from point A to point B. Carefully choreographed motion design can effectively guide the user』s attention and focus through multiple steps of a process or procedure; avoid confusion when layouts change or elements are rearranged; and improve the overall beauty of the experience. Motion design should not only be beautiful, but serve a functional purpose.
這個常見，動效帶領用戶的注意力去理解流程。這個iOS早有了。拿起你的iPhone，在屏幕上選擇一個App點擊，App擴大佔領整個屏幕的過程是從App本來在主頁的位置發起的。所以用戶能從整個動效知道，從哪兒來，到哪兒去。
4. Delightful Details
動效細節可以讓用戶驚喜。
這個例子就舉Path好早以前的快捷按鈕吧，轉來轉去真可愛。
後面的部分我略寫，感覺比較正常。
界面風格中顏色的部分，關注這句話：
Color is inspired by bold color statements juxtaposed with muted environments, taking cues from contemporary architecture, road signs, pavement marking tape, and sports courts. Emphasize bold shadows and highlights. Introduce unexpected and vibrant colors.
字體是Roboto，關注這句話：
It is slightly wider and rounder, giving it greater clarity and making it more optimistic.
圖標部分關注這句話：
The design of system icons is simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, with every idea edited to its essence. The designs ensure readability and clarity even at small sizes.
圖標特彆強調了一致性，在諷刺iOS嘛…… iOS也蠻一致的吧…… 嘿嘿
圖片使用的部分，關注一下準則：
When using illustration and photography to enhance the user experience, choose images that express personal relevance, information and delight.
特別關注這3點：
1. Appreciation of context，理解背景
2. Build narratives，講故事
3. Don"t Over-Manipulate: maintain the original integrity of the image. Don』t apply heavy filters or gaussian blurs to imagery, especially when trying to hide degradation.
保留圖片原本的樣子，不要過度使用濾鏡…… 情何以堪…… 我是Instagram忠實用戶，我不說話不說話……
界面布局的準則：
Material design utilizes fundamental tools that have come from the world of print design, like baseline grids and a common set of structural grids that works across various pages. The layout is designed to scale across different screen sizes and will help facilitate UI development and ultimately help you make scalable apps.
講得普通，比較有意思的是強調了設計過程中應該讓界面適應多平台，並多配合設計開發環節。
界面布局的紙質案例，浮動按鈕看看例子就好啦。
後面的Components、Patterns、Usability略過，講得正常。
最後贊一下Usability里的Accessibility部分，讓設計充滿對不方便人士的關懷。每個公司都在說自己有考慮，但是產品設計的時候有多少公司真正能做到並規範到設計文檔？Google蠻用心的。
最後感覺懂設計的前端開發小夥伴們大有前途啊！加油！
謝謝閱讀。
Yoyo，德國達姆，2014年6月27日半夜1點半
大家都在回答『What do you think of Material Design』
我來回答 『How to fully understand and apply Material Design to your product』
正好自己最近工作交接，把我收藏夾里關於 MD 的資料都梳理了一遍，分享給大家。
Google 官方文檔
我知道大家都『訪問』過 Material Design 的文檔，但是有沒有一個頁面不拉的通讀一遍？有沒有達到閉著眼睛丟鏈接的熟悉程度？如果你的產品要做 MD redesign，不要以二手信息作為起點，官方文檔才能真正展示精髓。
1. 安卓開發者手冊
2. Google Material Design Guideline
3. Expressing brand in MD
4. Redesign chrome android
5. Say hello to redesigned youtube mobile app
6. Google I/O 2014 youtube video
7. Android pay
8. Android Experiments
MD 素材
- Material Design for Dummies
- Material Design Lite
- Material Design Color Palette Generator
- Angular Material vs. Material Design Lite
- Google Official Sticker Sheets Google 官方模板
- Dribbble - Material Design [Free .Sketch Template Icons] by Kyle Ledbetter 這是我個人用的最多的一套 MD 素材，不過調色板里有些顏色 Google 後來更新過，需要對照一下 Guideline。
使用 MD 的產品/設計概念
首先你當然要下載所有 Google 原廠針對 MD 重設計過的 app，還有那些 Google Play 上編輯精選的 app，反覆把玩，看完產品，再讀讀創作團隊寫的 case study，每個設計決策背後都會有一系列的邏輯作為支撐，學習他們思考的過程和決策的原因。
- Daily Material Design Inspiration
- Google news MD redesign concept
- Google MD exploration
- 26 best MD apps for android
- 10 Material Design Android apps you should be using right now
- Starbucks Android Material Design
- 有哪些 Material Design Apps 的設計適合借鑒？ - 知乎
對 MD 有意思的探討
高喊穀人希的也有，閉著眼睛亂黑的也有，作為一個設計師，請獨立思考獨立判斷。
- How google fails at implementing its own Material design
- Material Design: Why the Floating Action Button is bad UX design
- Material Design is Different, Not Better
沒錯，Material Design 絕對是一套 World Class 級別的 Guideline， 你可以主觀的評價它『好看』或者『丑』，但你不能否認 Google 從拉里佩奇開始由上至下的執行力，滲透到 Google 甚至之後 Alphabet 的每個產品里。就像 Spotify 的前 Design Lead Tobias van Schneider 說的：
Dear Google Designers
NO ONE has ever designed a digital identity at such a big scale. No one knows better than you. Keep on rocking!
No one even remotely knows the implications and challenges of implementing a digital identity, not only across an internal team of ~60.000 employees but also across so many public touch points worldwide.
So，好好向人家學習吧少年！
Happy Designing~
匡
我想專門談一談FAB （Floating
Action Button）
Promoted Actions
成功的視覺效果
FAB 對 Google design 是個很好的視覺突破。
平面設計中有個「點線面的安排」的概念，而
FAB 正是一個非常靈活且突出的「點」元素，而這樣強烈的元素在之前的界面設計中是很難出現的。
FAB 有跨越模塊或分割線的條件，能起到「破形」的效果。圓形元素與分割線、卡片、各種bar的直線形成對比，讓界面不會條條框框過於死板。
Google 似乎在引導讓 FAB 使用色彩設定中鮮艷的輔色，使界面的色彩更加豐富鮮艷。
綜上，FAB 的存在讓 UI 感覺更熱鬧、豐富、歡快、吸引人，我認為是很棒的視覺效果。
有限的交互
從形式上分析，FAB 是個凌駕於界面層級之上的，與目前用戶的
Focus 無關的按鈕，只應用於最重要的 Action。從交互上可以這麼理解：「用戶無論滑到本屏的什麼位置，正在閱讀什麼，都有可能需要立即、快速、準確地觸發的
Action」。
首先，如此重要的
Action 只有少數的
key screen有。
試問知乎的客戶端里有幾處適合使用
FAB 呢？主頁上搜索/提問？似乎沒那麼強的需求。正文頁面的贊同反對？犧牲閱讀面積搶奪視覺焦點不太好吧。評論頁列表「寫評論」按鈕？或許也沒有那麼迫不及待。
其次，按鈕中 Icon 的表達能力有限，不如文字準確並容易理解。
再次，從界面布局上看，將
Action 從
App Bar （之前稱為Action Bar）上拿出來使用了更多的屏幕面積，往往遮蔽了內容的閱讀面積，或在排布時浪費屏幕的面積（下圖粉紅色部分）。這在移動設備上很可能構成挑戰。
最後：FAB 在這一屏出現時的視覺吸引力是毋庸置疑的，但當用戶主動尋求一個按鈕時，它的可發現性真的很好么？FAB往往與同屬性的其他按鈕位置關係脫離，與相關的內容位置關係脫離，可能會造成用戶（雖然只是一瞬間）「滿屏幕找Action」的窘境。在頭圖第四個截圖中還有「只是另一個圖標」的嫌疑。我（當然）沒有測試與數據，但這樣還是讓我有一點點擔心。
哦，這麼說來FAB 還違反了「內容優先」的原則。
FAB 的使用「風險」
Google 為了防止 FAB 被濫用亂用，制訂了一系列的 don』t 的條款。所以，我們會很少見到 FAB
咯？
圖樣！別相信歌詞里講的道理，那些作詞人為了押韻什麼都寫得出來！
FAB 是新奇的，出挑的，對用戶的吸引力很強，佔據了非常重要的布局位置。面對這些優點，產品經理根本把持不住。
首先
FAB 很新鮮很時尚，開發代價（應該）低（api或開源代碼，求教），而且尼瑪管你 Google 怎麼定義的，反正 Google
Play 不！審！查！
很快我們就會看到一屏好幾個FAB、將 FAB 用作（對用戶）不重要的按鈕、將不相關的內容疊加在 FAB 里等形式，將 Google
給的反例實現一遍。
我們遲早會看到這樣的
FAB：
讓我們祈禱吧。
綜上，FAB 是一個視覺驅動的漂亮設計，有著比較狹窄的交互利用價值，但有很高的被濫用風險。
假設這條線上有一個點，叫「最完美的設計風格」。問：我們應該怎樣找到這個點？
最有效率的方法很明顯是這樣：一開始，我們需要大步地跳，大步地突破。
所以，流行的設計風格跳了一大步，從擬物化到了另一個極端——扁平化。
當扁平化普及到設備上時，又有人反思：是不是太扁平了？一切都彷彿變成了色塊加文字。哪個是按鈕？哪個不是？哪些是重要的信息？哪些不是？當扁平化的風格讓信息層級也扁平化，影響了「信息的正確溝通」這個最終目的時，我們知道這樣的扁平化已經跳得太遠。
所以 Google 選擇了往回跳一小步。在扁平化的基礎上，保留了物理世界的陰影和動作。
所以 Google 選擇了往回跳一小步。在扁平化的基礎上，保留了物理世界的陰影和動作。
Material Design 等於是強調了物理定律的扁平化設計。 Google is trying to bringing physicality into Flat Design.
設計的重心，從僅僅關注平面的表現，轉移到了人與設計之間的交互。Material Design 也許是對於這種潮流的適應。
Google Design Guide 強調 Google 找到一種 universal language，可以無縫應用在 Android、Chrome OS 和網頁上。就像物理學家們一直在追求 an universal law of physics，可以解釋萬事萬物。
不過我們也知道，universal 的東西很難有強烈的個性。
不能斷定 Material Design 這種「漂浮的紙片」效果就是最優解，但我們不能否認這是一個合情合理的解。同時，也是一個不那麼有趣的解。
Material Design：向擬物回跳一下的扁平化設計 - 筆戈科技 - 知乎專欄先看幾張圖
以一個Android開發人員，同時畫產品原型，偶爾畫畫UI的從業人員來看，Material Design是讓人滿意的~
還記得我們2011年做「eoe移動開發者大會」的時候有iOS和android分會場，其中iOS分會場的topic更多是如何做更精緻的高質量應用，而Android分論壇的topic則非常集中在「盈利」，「安全」，「破解和保護」，「支付」，「適配」等方面的問題，沒有一個topic和設計有關~
2年過去了，Google終於把自己遺留的大坑填的差不多，有了精力來統計一些設計風格和設計語言，而從 http://www.google.com/design/spec/material-design/introduction.html#introduction-goals 介紹來看，還是挺耐看（我用的不是好看）~而且按照技術人員的原話說「這個動畫做的太好看了」
為了普及和推廣Material Design，我們正在Github上協同翻譯其為中文文檔，這份規範google也在不斷的迭代和完善，歡迎有興趣的同學加入~~
--------下面是正在進行分割線----------
Material Design 中文協同翻譯
1sters/material_design_zh · GitHub
- Material Design
- 概述 - Introduction √ by iceskysl
- Animation
- Authentic Motion - Authentic Motion 1% by zhenbeiju
- 交互響應 - Responsive Interaction √ by 7heaven
- 有意義的轉場動畫 - Meaningful Transitions √ by Jingsha
- Delightful Details - Delightful Details 1% by com360
- Style
- Color 1% by arjinmc
- 字體排版 - Typography 1% by acely
- 圖標 - Icons √ by Haoxiqiang
- Imagery 1% by lhyqy5
- Layout
- Principles 1% by vincent4j
- 度量與邊框–Metrics and Keylines 99% by CodeDiving
- 結構 - Structure 90% by donlianggit
- Components
- 底部窗口 - Bottom Sheets √ by com360
- Buttons 1% by 7heaven
- Cards 1% by ThatMrL
- 紙片-Chips - Chips √ by Kris
- 提示框-Dialogs - Dialogs √ by Kris
- 分隔線-Dividers - Dividers √ by Kris
- 網格–Grids 99% by CodeDiving
- 列表–Lists 99% by CodeDiving
- List controls - List controls 1% by Jingsha
- 菜單–Menus 99% by CodeDiving
- Progress and Activity - Progress and Activity 1% by SamanthaChou
- Sliders 1% by ThatMrL
- Snackbars and Toasts 1% by ThatMrL
- Subheaders 1% by marshluca
- 開關 - Switches 80% by vincent4j
- Tabs - Tabs √ % by vincent4j
- Text fields - Text fields 1% by SamanthaChou
- 工具提示 - Tooltips 99% by lhyqy5
- Patterns
- 選擇 - Selection 99% by lhyqy5
- Gestures - Gestures 1% by Jingsha
- Promoted Actions 90% by ZeroLu
- Settings 90% by ZeroLu
- Imagery Treatment 90% by ZeroLu
- Search 1% by lhyqy5
- Usability
- Accessibility - Accessibility 1% by fortianwei
- Resources
- 布局模板 - Layout Templates 90% by iceskysl
- 貼紙 - Sticker Sheets 90% by iceskysl
- Roboto 字體 - Roboto Font 90% by iceskysl
- 調色板 - Color Palettes 90% by iceskysl
先說幾句題外話。
陽春白雪需要文人雅士才能欣賞得來，不過凡夫俗子也自有他們的審美趣味，但問題在於，普通老百姓之間的審美差異甚至還要大於不同階層之間的審美差異——托爾斯泰那句「幸福的家庭都是相似的，但不幸的家庭各不相同」大概可以用來形容這個情況。
所以，管它什麼design推出來，都不能迎合所有人的品味。
---------------------------------------------------我也試試分割線----------------------------------------------------
Android design是第二個運用了扁平化設計理念的設計模型（第一個是WP），「強調內容」是從它開始幾乎所有設計模型的統一理念。實際上，提供內容（信息、數據）正是Google絕對的強項，按理來說，扁平化設計本應由Google發揚光大，然而蘋果卻後來居上，為什麼？因為Google比起蘋果更加不注重展現內容的方式：Android design規定了應該有哪些控制項、控制項應該被擺在哪兒、各種控制項應該多大，卻沒有指出它們如何引導內容的出現、強調與退出；遵循Android design的應用讓用戶從一個界面跳轉到另一個界面，從一條訊息滑動到另一條訊息，但沒有讓用戶產生「這個界面、訊息是這麼來的」的感覺——它重視效率、結果，但忽視了方法、過程。
我一直覺得，iOS 7的扁平化是走向了極端的扁平化，因為它徹底拋棄了陰影、光線、層次，現實生活中的物理法則不再適用於iOS和應用，這使它成為了一個獨立的、別樣的宇宙。得益於蘋果優秀的界面、交互設計，這個嶄新的宇宙豐富、圓滿、和諧，絕大部分iOS用戶適應它的規則都並不困難。然而，當我們掏出手機準備解鎖時，當我們打開應用準備使用時，當我們按下按鈕準備得到系統的反應時，我們所在的宇宙也正在和操作系統的宇宙聯繫，我們的大腦在新世界裡遨遊，但我們的身軀仍然在這個世界存在——這麼說感覺很玄乎，但隨便打開一個遵循了iOS 7設計風格的應用，你會發現它和現實世界是如此的迥異。適應新的法則不代表我們捨去了舊的法則，進入另一個世界不代表我們拋棄了與這個世界的聯繫。以前，擬物化設計使得兩個世界基本相同，降低了人們從探索中獲得的驚喜、樂趣，而扁平化設計又讓兩個世界截然不同，幾乎切斷了它們應有的聯繫——如果完美的設計是線段的中點，那麼它們都偏向了兩端。事實上，這就是喬布斯的人格特點：偏激、自我，他決定了蘋果的文化也如他一般，喜愛極端（這句話中的形容詞無明顯貶義，但從講大道理的角度來看，還是略微偏貶義）。
伴隨著L的發布，Material design也得以現身，它是Android design的延續、反思與升華，是完美設計的追求者。Google的文化有中國文化的影子，同樣講究兼容並包，不同之處在於它更加主動、開放。因此，Material design不願意走極端，不追求線段兩端小小的端點，而著眼於線段的中央部分——Google既要創造一個新的宇宙，又要建起一座座橋樑，讓兩個宇宙能夠自由來往、相互影響，這是它的前任和競爭對手們都沒能做到的。
第一眼看上去，Material
design還是扁平化設計的一個子集，排版方案和色彩的選取使得整個界面都很平滑、整齊，但注意下方的+按鈕與撤銷操作的提示框，它們具有純扁平化設計中不應該存在的陰影。但在現實生活中，如果要用一個物體擋住另一個物體，那麼它們所在的層面一定是不同的，若光線投射下來，上方的物體在下面肯定會有陰影。
從Google官方的層級展示圖我們可以看到，這種設計完全符合現實世界的物理規則。（這裡的圖片和排名第一的答案是一樣的）
Material design大體上給人以扁平、注重內容的感覺，但局部又細膩地強調了與現實的聯繫，總體的觀感不會因局部的不同而顯得混亂，但邏輯卻因為局部的點綴而更加合理、清晰。
從上面那張圖更能清楚地發現層次關係，同時展示了不同層級的獨立扁平化。重新設計的圖標在扁平、抽象的同時具備光線、陰影，象徵著擬物與扁平兩種設計風格的融合。
這是從來不曾有人想到的設計方式：設計師把一張紙鋪在桌子上，在它上面作畫，然後再拿出一張紙，繼續畫，之後把它疊在第一張紙的上面，接著又拿出了一張紙……最後，設計師拿出了一個小圓盤，放在了一個兩張紙交接的部位，把它們壓得近乎扁平的同時，也讓兩者具有了異於層疊的新關係，同時還起到了畫龍點睛的效果——這種設計方式的代表作品，正是運用了Material design的L界面。
Android design中很重要的一個元素就是卡片，Google將每一個物體都抽象為一張卡片，像名片一樣展示它的屬性。在Material design中，由於卡片也是一張紙，因此它得到了保留，不過設計師將它「很明顯」地提拔到了上層。卡片們彼此之間位於一個層面，但不存在聯繫，因而是零碎、分散開的。它們都各具特性：大小不一、顏色不同，各自均保持著扁平的特徵，進一步強調了內容的差異，使得用戶能很明顯地察覺它們是不一樣的。
在「同」與「不同」的設計上，Material design作出了很好的典範。就「同」的方面來說，它在有聯繫的物體之間架起了橋樑：那個圓形按鈕——若用戶按下那個按鈕，他會發現他的手指產生了一道圓形的漣漪，同時向兩張紙擴散，就像現實生活中按壓會使得紙變形、張開一樣，這代表二者臨近，即便屬於不同層次，彼此仍然可以作用。而在「不同」之上，Material design毫不含糊地使用陰影、空白區分了沒有聯繫的物體；除此之外，線條也被利用與分隔不同模塊，就像兩張紙並排放置一樣，儘管位於一個層級，但沒有橋樑，彼此無法通行。
曾經的Android
design除了用於展示內容的卡片以外，布局、控制項都沒有與現實生活中的事物對應，因而高度抽象，邏輯難以理解。而Material
design中，紙張使得「一切」都變得熟悉起來：這就是兩個世界聯通的第一座橋樑，它的特殊之處在於，它能輸送這個世界的理念與文化，因而能夠漸漸包含、同化另一個世界。
這裡有一點需要強調，就是那「一切」二字，它並不指真正的一切——那是擬物化希望達到的最終效果，iOS6上的iBook一打開就是一個書架擺在用戶面前，老羅為時鐘應用里那個「打點計時器」的效果特意優化了許多次，擬物化從追求「外表」相似已然發展到了追求「使用方法」也相同，這是Google從來不願意去嘗試的。簡單地說，Material design僅僅希望，內容的載體不會令人感到陌生。也就是說，那種「材料「能被人們想像出來，某些地方符合現實生活的規律，就足夠了，不需要和現實一致。因此我們才能看到，在Material design中，光線與陰影並非隨處可見，而層級本身是完全扁平的，不需要進行複雜的設計去實現磁帶、唱片盒之類的效果。
另一座橋樑則是動畫。iOS的流暢、「如絲般順滑」，很大程度上就源於精心設計的動畫。iOS的動畫過渡自然，比如iPad上四指捏合就能關閉應用。更重要的是，當你的手指緩慢地向內合攏時，你會發現關閉的畫面是隨你的動作同時進行的——這就好比大型遊戲中CG實時渲染與預先製作的差別，在增強了代入感的同時，填滿了用戶小小的滿足感，這才是「自然」的原因。除此以外，iOS的動畫反饋十足，最典型的例子正是下拉回彈，那是在整個設計史上都能排進前十的產品，更為特殊的是，它的設計不對功能有任何實質上的變化，僅僅迎合了人們的心理，聽上去微不足道，但用起來堪稱完美。當然還有重要的一點，就是iOS的動畫都是統一的：在Android平台上切換到微信時，微信是憑空出現的，什麼動畫也沒有，而iOS上則始終會有放大出現的效果。
Material design重視動畫效果，從演示動畫中，我們能夠看到動畫的廣泛存在。動畫的存在正是重視過程的體現：人們渴望知道事物從何而來，到哪兒去，以什麼形式出現並以什麼方式消逝，這是終極的哲學問題，也是每個人任何時候都會提出的問題，而恰到好處的動畫能夠幫助我們知曉答案。比如演示中，從音樂界面出現到音樂開始播放，動畫讓我們知道那一張張紙片是如何出現並具有層次關係的，讓我們明白點擊「播放」按鈕之後音樂是如何出現並開始的。另一個例子是Material design在界面下拉到頂部時動畫的設計：迥異於L之前出現一個細長的藍色光圈之後快速消失的效果，新的方案是出現一個波紋動畫，就像是在拉泡泡糖一樣，你手指的方位是動畫效果最明顯的部位，富有彈性，活力十足。與按下按鈕後產生波紋類似，墨的痕迹在此處一覽無遺，那種滲在紙上而產生的通透感讓紙變得柔軟、輕盈，更加容易結合在一起。
Matias Duarte說，他們希望從本質上思考移動界面設計的方式，去尋找甚至是發明最適合展現內容的「材料」，這是非常了不起的想法。人類最早大規模使用的內容載體是紙，而現在的Material design承載的正是紙與墨的精神；人們先有了無窮多的雜念或哲思，才要想到發明一種可以記錄這一切的容器，而軟體誕生了這麼久，人們才開始去思考：把所有代碼、軟體界面都抽去以後，它們下面是什麼，才開始尋找那種「材料」，這也許就是一個輪迴。人類發明了紙之後才明白，信息的本質是「可以傳播」的對象，那麼也許等到Material design真正發現或發明了那種「材料」之後，我們也能夠真正明白軟體的本質。
從現在的Material
design來看，Google這次偉大嘗試的結果仍然處於雛形狀態——它處處模仿紙張，也留意著大自然的物理規則，同時，我們怎麼會知道軟體的「材料」是什麼呢？我們只能想像：它能變化、能移動，同時遵循著兩個世界的法則，但連那法則我們都不明白應該寫些什麼內容。不過它的兩座橋樑在做一些偉大的事情，那正是Material design前行的動力：它們不滿足於就那麼搭在兩個宇宙的邊緣，而是想要把另一個宇宙拉到這個宇宙中來，還要讓那個宇宙也有一樣的星辰大海、鳥語花香、人文社會。從另一個角度看，它們實際上可能不是橋樑，而是雄心勃勃的探索家，希望找到兩個世界的相同之處，發掘共同的美好。
真正完美的設計也許不是像iOS、WP那樣開闢一個新的天地，而是從我們的世界中精挑細選，讓它最美好的部分出現在我們眼前。
不過，難道那不算一個新的世界？
以上。
周末仔細看了下 Google 發布的設計文檔，也看了大家的回答，在這裡聊聊我自己的解讀和零散想法，以作補充。
Material，新世界的光
我們該如何理解 Material？擬物？扁平？還是從扁平往擬物的回望？不。或許我們需要跳出擬物和扁平，Material Design，這是另一個世界。
回顧擬物和扁平，我認為它們仍然基於現實世界的緯度，前者是對現實世界的臨摹，後者是抽象。對比擬物和「扁平」最有代表性的進化——iOS 6 到 iOS 7，我們都知道 iOS 7 減少了裝飾、重新梳理空間層次、並建立了空間縱深。一言以蔽之，iOS 7 是對 iOS 之前已建立現實體驗的抽象重塑，是 revolution。
那麼 Material Design 會在哪裡？
Material Design 是「神說，要有光」，就有了 material。它想做的或許比擬物和扁平更為本質，是 genesis。
Material Design 是「神說，要有光」，就有了 material。它想做的或許比擬物和扁平更為本質，是 genesis。
例證？Material Design 的視頻說明一切，在新世界裡，material 是萬物之源。不模擬現實，但構建真實
Google 從現實的物理世界中找到了一種「定律」，即我們所感知到的所有「觸覺真實」，都是材質（material）的結果。
材質即隱喻。如果我們能感知到這是一種 material，我們就會自然理解它是用來做什麼的（affordance）。
這裡引用一段 @Hi-iD 在回答「認知科學和設計領域中的 Affordance 是什麼？」的兩段文字以作補充：Gibson 用來解釋 Affordance 的例子是這樣的：如果一塊地表面接近水平（而不是傾斜的），接近平整的（而不是凸起或凹陷的），以及充分延伸的（與動物的尺寸相關），如果地表面的物質是 堅硬的（與動物的重量相關），我們可稱它為基底、場地或地面，它是可以站上去的（stan-on-able），可讓四足或兩足動物保持豎直姿勢，它是可以 行走（walk-on-able）和跑動（run-over-able）的，它不像水表面或沼澤表面之於一定重量的動物那樣是可陷入的（sink- into-able）。
《設計心理學》中說這個詞的時候還是以實體產品（著名的諾曼門）為例，後來 Norman 在解釋這個詞時說當時應該稱「感知到的 Affordance 」，比如一扇門需要設計成讓人一看就明白怎麼開的，那麼這種開門方式（是推還是拉），這一種開的 Affordance 應該叫做可感知的 Affordance，實際上門即使用推打不開，它還是有可以推的 Affordance。
在 Material Design 中，Google 認為我們可以通過光影（light）、表面（surface）和運動（motion）來傳達材質隱喻，而這種隱喻本身，可以幫助我們認知對象是如何運作、如何操作。
簡單來說，material 並不源於對物理世界中的任何對象臨摹或抽象，而是建立了一個新的世界觀（材質即隱喻，material metaphor）。在這個「世界觀」之下，再去創造形形色色的另一種「真實」，而我們與這種「真實」的溝通方式是——我們原始大腦業已建立的對材質觸覺的認知。
第三方 ROM，跟還是不跟？
不管老羅如何吹噓擬物的優秀，Material Design 的出現代表著這個星球最頂尖的兩家科技公司都已經告別擬物設計。這給依賴於 Android 生態的第三方 ROM 們提了一個兩難的問題，跟還是不跟？
其實即便從當下來看，當用戶從 Smartisan、Flyme、MIUI 等第三方 ROM 們精心打磨的桌面進入到一個應用時，那種戳穿魔術師戲法似的體驗斷層（第三方風格 → Android Design 或 iOS 風格）也仍然無法掩飾。無論這些 ROM 怎樣在系統層面修改界面、重繪圖標，大談設計與情懷；也不管 Android Design 在中國普及如何緩慢，不得不承認的是，真正能對 Android 生態設計產生影響的只有 Google 自己（或許還有 Apple ：P）。
所以，Material Design 來了，而鎚子們是繼續堅守擬物，還是在 Material Design 下找到自己的表達？ 跟，還是不跟，這都是一個問題。
結語
Google 說，Material Design 是一套跨平台和設備的 universal 設計語言。Universal 的野心在於，這是否意味著 Google 在嘗試通過推廣 Material Design 來逐漸塑造與物理世界平行的新的觸覺真實——在手機、智能設備、可穿戴設備、TV等各種屏幕上的體驗和認知。假如當人們習慣於 Material 在各種屏幕之上構建的「觸覺真實」時，在未來的某一天，會不會又會出現對這些「觸覺真實」的「二次擬物」？
最後，說個猜想，如果 Material Design 提供的是一種類「世界觀」，那如果用 Material Design 來製作遊戲，會是怎樣？多圖滲入
（上圖：之前的 Google Now）
Material design（內部代號『量子紙』）是 Google 開發的設計語言並在 2014 年 6 月 25 日的 Google I/O 大會上推出，是基於首次在 Google Now 上面出現的『card motifs』（直譯過來叫做『卡片式圖案』） 擴展設計出來的。這種設計大量的增加了柵格化圖層、響應式動畫，以及一些賦予光影變化的變形、疊化、深度等效果。設計師 Matías Duarte 解釋這種設計風格『我們不是在做真實的紙張，但是我們的虛擬設計元素卻能智能的拓展和變形（大意就是各種設計元素並沒有遵守擬物設計，但是卻有一定的實體物理性質，可以理解為物理性質擬物）。真實物質是有物理表面和邊緣的，接縫和陰影又能夠揭示你觸摸的是什麼，Material 設計來源也就是這個道理』。Google 說他們這個設計語言思路是來源於紙和墨，所以充滿了物質性。
Material design 能在 Android 2.1 到 v7 中都能使用，2009 年以後出品的所有 Android 實體設備都可以。Material design 會用 Google 一貫以來的做法，通過網頁端以及移動設備產品的擴張，來逐漸擴展影響力，Google 也發行了 Application programming interfaces (APIs) 給第三方開發者去了解和把他們的應用做成這種風格。
在 2015 年，Material design 已經佔領了大多數 Google Android 移動設備 APP 的界面了，包括 Gmail, YouTube, Google Drive, Google Docs, Sheets and Slides, Google Maps, Inbox, 還有所有 Google Play 旗下直屬 App，以及 Chrome 瀏覽器和 Google Keep 外設，還包括了網頁端一些應用界面，例如 Google Drive, Docs, Sheets, Slides and Inbox。
Material design 的 UI 設計規範被稱為『Polymer paper elements 疊紙元素』（暫且這麼翻譯），它包括『層疊元素庫』，在瀏覽器中它會用一個『墊片』來顯示網頁端外加的 API 組件，表示它並不是該軟體本身攜帶的控制項。
設計詳解
這一部分的內容是 Material Design 中文版的部分摘要和總結，在此表示感謝。
1.動畫
在真實世界裡面，由於重力等有加速度存在的力場裡面，物體運動速度大多數時候不是線性增加的，斜率改變也許更接近二次函數，所以在 Material 裡面，動畫首先要遵守『物理』，偶爾比如你要做出虛擬的上拋運動，這時候你的初速度要設定到最高才符合真實世界的規律。還有就是要考慮一下慣性，想像一下你要賦予這個物體的質量和初速度，有助於你做更好的動畫。參考 真實的動作 - Material Design 中文版
同樣的就是在真實世界裡面你試著和水面互動，你會扔石頭，或者用手指觸摸水面，結果有不同但是效果是相近的，水面會泛起漣漪。在 Material 裡面你點擊設計交互元素產生的響應也應該和這個一樣，產生『漣漪』，下一步也應該以你的點擊的地方為中心打開一個新界面。
對於轉場，也是類似，永遠想像觀眾在翻書，而不是看電影那樣硬切。在元素變化不大的界面切換中，想像要新進來的元素、要走出去的元素、要保留的元素都是要沿著怎樣的路線和動畫去走，規划出來的東西都要井然有序，即便是要加入『物理』的動畫了，也不可以亂了陣腳。
以上的做好了的話大體能把 UI 動畫做到 90 分，最後的 10 分就是來源於細節了。但是也要保證『簡單卻動人』，如果複雜又違和，寧可不要。
2.樣式
大膽使用鮮艷的顏色，一般情況下飽和度達到色彩圖中 500 為佳。糖果色和撞色也是 Material 的一個重要特色，選好兩個對比強烈的顏色，各自選取三個飽和度緯度的顏色，這樣就基本上把一個畫面的主要顏色都定下來了（優秀的設計需要有一個強而有力的 VI 制定守則），其中一個色系作為強調色，在關鍵的控制項設計上起到吸引視覺重視的作用，謹慎使用。
（字型大小和透明度之間關係）
（字型大小和行距關係）
（行文縮進注意事項）
從 Android 誕生伊始，全部 Google 平台中 Roboto 就是最標準的字體，在歷次改版之後 Roboto 顯得更加清晰特徵明顯了。比例一般都是按 12、14、16、20 和34 號的字體排版縮放，層級要非常清晰明了。在 Material 的設計標準裡面還有一個更加進步的規則就是不同字型大小顏色以及間隔和換行都需要有部分修改，以防止對比度過大而引起注意力分散。對於閱讀長度，『要得到良好的閱讀效果，每行應當包含60個字元左右』。
對於圖標而言，整個設計裡面有相對固定的柵格規範，圓角處理和避免過於銳利的直線角，還有就是在各種場合下都有很強的大小和顏色適配性。
（這種陰影是不可取的）
作為一套 UI，也要經常處理圖像和設計元素的搭配。雖然圖像本身的質量永遠是處於不可控制的範疇，在可控的範圍內（比如 APP 背景、登陸界面、專輯縮略圖等），增強和周圍圖層及控制項的關聯度、巧妙使用遮罩都能讓設計更具『人性化』。插畫和攝影常常混搭，能加強戲劇性，但是非常避免只有照片甚至是只用圖片庫的圖片。還有就是像素要滿篇幅，留白處理會讓其他設計和圖片格格不入。解析度也要保持足夠大，不要隨意添加濾鏡，甚至不要加很強的灰色半透明，這些都是降低畫面質感的行為。
3.圖層
由於整個設計的本質是想模仿『紙墨』，所以在 Material Design 處處要遵守的就是印刷時代的柵格化設計，這樣能最大化帶來『紙質』體驗（雖然我覺得這只是針對歐美印刷業）。圖層之間有非常明確的相互關係，同級的『紙張』只能相互『推動』（並且永遠保持一個『接縫』），不能忽然竄到別的層級的紙張上。另外『紙張』都是有彈性的，但是卻有一定的閾值，設計的時候也同時考慮之前說的物理學原理。
在 Material Design 中所有襯線都是有意義的不可以濫用，只是為了使得圖層互相之間的邏輯非常嚴密。於是在有些界面不再有標題欄的時候，這些襯線就變成了非常重要的圖層要素。
每個 APP 獨立性非常嚴謹，互相不能互竄圖層。如果有 APP 本身包含多圖層，那麼會有一些控制項是用於連接這些圖層的，那麼它將會一直浮現在所有圖層之上。還有一些守則，比如系統的提示永遠在圖層最上面，這也是所謂的『深度』效果了，所有圖層都有它在 3D 上的『深度』，在 Z 軸上有自己的位置，而每個圖層上它們都有他們的陰影來暗示它們距離最下面的 Z 平面有多高（雖然我覺得有時候這個處理方法有點太過頭了，尤其層高高的時候陰影簡直嚇人）。
關於各種元素之間的間隙尺寸，Material Design 都有非常成熟的尺寸規定，水平和垂直部分都有。而所有這些被定死的尺寸以外，都是由內容和留白來佔據的，這就是它靈活處理的部分了。即使在平板和 PC 上，也是同樣的處理法則。遇到棘手的尺寸，就用倍數法則：
這裡要說到更深層次的東西，關於交互邏輯了。其實 UI 頁面之間有三種聯繫：
- 一個屏幕完成所有事情，如計算器 App；
- 同一個層頁面但是不同 Bar 切換，比如撥號界面直接推拉出收藏夾這些；
- 複雜應用，多層頁面，數據較多，比如有分類功能的購物 App，包含預覽功能的文件夾。這種已經非常接近不同 App 之間的邏輯了，但是又稍微不同；
這時候你不僅要考慮單個頁面設計了，要考慮整體的 UI 設計以及設計過程要保持頭腦清醒（這時候你更像個導演或者建築師，純美工級別的請跳過以下內容……），首先出來的這個頁面一定是用戶最想看到了。而且你要做到不要混淆視覺，如果滿屏幕都是導航欄將會使得用戶非常迷茫（就像以前版本的 Android 打開 App 會出來一大堆的 Bar，極其醜陋），另外 Icon 設計的辨識度、能否清晰的表達出直接訪問路徑的內容，都是非常重要的。如果實在太多功能，先考慮精簡，然後考慮平鋪，再考慮側滑，盡量少的讓用戶產生多餘的使用步驟（當然如果你是在做 Motion 動畫，這個觀點也是值得採用的）。
（網頁端的邊欄設計）
如果你的應用頁面有大量同級的『紙張』，你可以加入邊選欄或者側邊欄來管理這些複雜的 List，但是這是需要一點學習成本的，因為它們不是一打開就能看到。當然如果是在平板或者 PC 上看的話，可以做出一點小改變，比如工具欄可以長期在上面，而底欄未必出現。一般來說尺寸設計：（手機上）側邊導航欄寬度 = 屏幕寬度 - 應用欄高度；
（在比較大的屏幕中，盡量不要頻繁切換整個屏幕的界面，而是像下圖示，兩級頁面都在一個屏幕上可以顯示，這樣可以使得邏輯清晰，不要讓使用者迷路。）
（另一種邏輯就是信息群，不要用分割線，而是多用卡片，這樣平行關係更明確。如果要加入諸如工具欄等非平行關係的結構的話，利用浮動按鈕和卡片讓『越界』變得明顯，如上圖）
工具欄設計未必會限制得很死，有些情況它甚至能做出很大的變動，但是基本樣式以及分級是務必十分明顯的：
當然，在 Material Design 裡面其實這些工具欄也是有尺寸要求的，和之前的水平上的尺寸要求類似，工具欄和底欄邊欄上，內容和空白可以自由去填補剩下沒有硬性要求的部分：
4.組件
在點選一個項目的時候（比如一個人的聯繫方式），如果這個項目能操作的項目超過了 3 項，那麼就務必要用到底部動作條這種『大工程』的控制項了，普通的那種兩個三個按鈕的對話框沒辦法滿足。當然也是有一定的尺寸標準的：
按鈕是 Material Design 裡面的一個非常重要的部件，不可以把它當成純裝飾元素，當然按鈕分為『圓形 Icon 式』FAB 和『有背景色 Raised /無背景色 Flat 文字的普通按鈕』，雖然點擊後都有漣漪效果，但是三者功能完全不一樣：
這三者的選用一般是基於圖層高低來確定的，還記得我之前的那個圖吧？
仔細想想你需要賦予這個按鈕在哪個 3D 圖層、有什麼功能（要準備推拉和彈出一堆同一個圖層信息的就用 FAB、連續一片的卡片式或者接縫式的圖層上一般就用 Raised、一堆文字對話框伴隨的一般就是 Flat），然後就你知道應該用什麼按鈕了。另外按鈕的位置也是有尺寸標準：
（這種情況只能用無背景文字按鈕 Flat）
關於按鈕的動作，在每一步上它的顏色都是不一樣的，一般來說參數如下
Raised Dark/Dark Color
最小寬度: 88 dp， 高度: 36 do
正常狀態: Color 500， 覆蓋狀態: Color 600， 點擊狀態: Color 700，
不可用狀態: 10% #ccc
遇到特殊頁面，按鈕的界限有點模糊，形狀也可以有變化，但是響應面積依然要注意；
在 Material Design 裡面的下拉菜單有一個非常重要的注意點，就是不能把之前的圖層切斷，所以只能在邊緣部分往下面展開，如上圖；
下拉菜單也有幾種，一種常規的就是什麼都不顯示，第二種就是有默認選項和下拉按鈕，第三種是有默認值和下拉按鈕而且還能自己編輯，他們也是有響應動作的。多種選項和下拉菜單連在一起的時候也有版式要求，如上圖。
和大家想像的不一樣就是在 Materila 裡面的卡片其實還是有小小的擬物化的，圓角和陰影是必備要素。卡片的內容類型都可以不一樣，而且還能互動，例如添加評論點贊之類，但是不宜過多，表示出它的基本功能即可（控制在兩項以內）。
網格設計展示圖片和文字必須簡潔明了，編排禁止混亂和濫用陰影。千萬不要在圖片下面加入分散注意力的部件，如下：
在布局上，也是有一定講究，比如：
字體設計正文：14 sp 或 16 sp
標題：24 sp 或更大
扁平按鈕：Roboto Medium, 14 sp, 10 sp 字間距
移動設備上的卡片間距
屏幕邊界與卡片間留白：8 dp
卡片間留白：8 dp
內容留白
16 dp
和這種卡片有點類似的就是紙片。所謂紙片就是包含一張圖片，一個短字元串(必要時可能被截取的字元串)，或者是其它的一些與實體對象有關的簡潔的信息的小卡片，如上圖。
這種提示框一般用於警告，偶爾用於輸入 WIFI 密碼之類的。之前在按鈕裡面有說過一下，其實和文本有點類似，也有標題和正文之類的。涉及到操作的時候，一般在固定高度的提示框裡面，注意一下有滾動條時候，哪些元素是不能夠和滾動條一起動的。
分割線也是 Material 組成要素。不需要每次都處理成等屏寬，尤其是比較密集的時候，需要一些縮進留出空白，另外給點文字提示也有助於信息篩選：
網格一般用於存儲同類內容，處理辦法和卡片類似但是有點不同，比如它完全不需要擬物化的圓角和陰影。有時候你要在上面加入可用的控制項和文字，那麼處理方式和卡片基本一樣。
Material 的列表控制項裡面，一般有非常明顯的主次之分：
每一類（比如圖標）千萬不要放在一起使用，比如頭像和複選框，選擇那個是首選哪個只是視覺輔助。比如下面這種排版，根據情況是頭像重要還是選項重要，決定後，二選一：
遇到摺疊的時候，就按照分隔線情況處理。滑動式刪除這種行為可以兩邊滑動都做到支持：
菜單設計一般在靠下面或者直接在上面出現，並且頂對齊原來的選框，然後比例也保持一致。多級菜單的時候也是一樣的處理。動態上，還記得之前的中心點開吧？
進度條有幾種，包活線形的還有圓形的，以及確定的和不確定的。『要用戶沒有目標的白等是不道德的』
有時候載入『實時』的消息，類似各種 SNS 的下拉刷新，需要一些比較有創意的載入方式，比如卡片底部 + 指示器；
（這種載入辦法比較傳統）
對於一些特殊的還帶有數值和和縮略圖的滑塊，
Snackbar，也可以理解為小型彈出框，屏幕上同時最多只能現實一個 Snackbar。還有一種類似的，膠囊狀的提示框 Toast，不含操作也不能關閉。他們都有規定就是務必要非常簡潔，不能出現過多兩個控制項、圖標這種干擾，純文字。也不能遮住界面元素，只能在底部出現。
在普通場合，以及有柵格排列的界面中，副標題應該如上處理。
關於選擇框和開關，除了和之前說的一樣要漣漪等物理效果和滿足版式要求以外，這裡漣漪一般要擴大更大的範圍。
Tabs 是一種節省空間的做法， 並且可以便於空間分組管理。但是前提是，不能把它當成高級別的內容切換。放在地圖上它就只能區別交通工具（所以它展開的起點終點會一直保持不變），但是絕對不能用來切換成設置，這樣邏輯會變得很混亂：
（這也是不可取的，因為 ALL 和 CAMERA 的關係會讓人引起誤會）
不同風格和樣式的文字或者 Icon 也是不能放在同一行的 Tab 裡面的。如果出現複雜的 Tabs 或者空間不夠用，那可以加入滾動效果：
至於動畫，參考之前的漣漪。
文本框基本沒啥說的，就是一些樣式而已。倒是在 Material Design 裡面，出現了『隱藏』的小標誌，你可以點擊然後回到字元開頭。這個很創新：
提示的顏色在字數還有不同剩餘的時候也有提示：
工具提示只需要文字和必要信息即可，框也不需要多餘的箭頭。
5.部分交互模式
選取工具：在選取文字後，彈出來的工具框必須全部大寫。
手勢是智能手機交互的最精髓，可以分為兩大類，觸發動作（比如輕觸點擊）和觸發行為（比如雙擊放大、拖曳）。這部分沒有什麼設計要素要講，基本上都是交互要素。
關於圓形按鈕 FAB 一直都是這個 Material 經常被人設計時候玩壞的點。除了同一個界面裡面不要出現多個圓形按鈕以外，就是種類也不能混淆。
這種就是典型不同類的搭配會讓人很不舒服。
另外，有歧義的，有破壞性（比如剪切刪除禁止之類）的 Icon 不適合做圓形按鈕。還有始終要用圓形，禁止其他形狀。也嚴禁過於擬物化：
（無比滑稽的設計）
而且它的位置通常在接壤接縫處，不能孤魂野鬼的出現或者被干擾的狀態下出現：
關於設置，一般都會放在每個 App 中的工具欄中，而比較少使用『集中』在設置 App 中。還有一個容易經常被人混淆的就是什麼叫設置？
- 這確實是一個用戶偏好嗎？信息和操作不是一個用戶偏好。如果不是用戶偏好，就不要把它當做一個設置。如果它是應用的靜態信息（比如版本號、服務條款、開源證書），將它組織到一個幫助頁面里。如果它是一個操作（比如刷新、切換賬號），在你的應用的主要流程中為它找一個合適的位置。
- 這個選項經常被用戶更改嗎？用戶每次訪問這個選項要多次操作會覺得負擔重嗎？如果是這樣，不要把它作為一個設置。可以通過把它放在工具欄或者更多操作（action overflow）中，讓這個控制更容易使用。
- 只有少於20%的用戶改變這個設置的值嗎？如果是這樣，不要將它作為一個設置。不管是新的還是本來就有的設置，都應該問這些同樣的問題。
- 對於已經存在的設置，最後一個問題應該多考慮一些：如果這個設置項被移除了，這會對那些不再能改變這一設置項的少數用戶造成危害嗎？如果會，或者你不清楚，那麼合適的做法是將它作為一個設置項保留。
其實即便你只是個做視覺的，也務必要注意這個問題，因為直接影響用戶體驗。
圖片的載入也有一些小細節值得考慮，其實可以從下面三個維度載入：（與視覺設計關係不大，暫且不詳談）
一般來說搜索列出歷史搜索、自動補全和附帶語音功能能讓搜索體驗更美好。而開始輸入後也要及時改變控制項，比如『清除文本』這些。以上的界面為『持續性搜索』，下面這種叫做『可拓展搜索』（你可以理解為：本來主業是工具欄，偶爾客串當搜索框）。
6.可達性 | 普適性
一個產品,如果對於任何人（無論能力）而言，都是非常容易掌握、理解並可以用之來完成他們的目標的話，那麼這個產品就是『可達』的。其實這個再通俗說，比如你的用戶是有身體機能障礙的，請問你如何改變設計？當然更多時候這一點更像是如何引導視覺走向，降低識別的錯誤（比方從像素大小和對比度以及 ICON 設計入手），還有就是減少學習成本。
Material Design發布至今幾近3個月，但現在談論對其的理解似乎仍然有點早，畢竟連Android L都還沒有正式發布。
我嘗試從『界面模型』的角度去談論Material Design。文章的鋪墊有點長，已經熟悉Material Design的讀者可以跳過『有意義的動效』、『陰影與層次』、『Floating Action Button』3個小節。
##材質設計
Google剛發布Material Design的時候，很多人在討論應該如何將這一種全新的設計風格翻譯成中文。比較受歡迎的翻譯有原質設計、要素設計、本質設計等等——人們強調了Material Design對事物本質的探求，並且認為Material Design不僅是指導了設計表現本身，還指導了較為宏觀的設計理念。
而當我們逐漸深入了解Material Design後，我們會發現其實最恰當的翻譯可能就是最直觀最簡單的那個：材質設計。因為Material Design其實就是在設計一種材質——這種材質與其附加的元素構造了一個潛藏在玻璃板後面的微型世界。
這種材質也許可以叫Magical Paper；它的附加元素則可以叫Magical Ink。紙和墨的隱喻在Material Design中貫穿始末，並且被賦予了帶有魔法色彩的特性。
The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
若要往深處探討，我們得溫習一下Material Design的一些特點。
##有意義的動效
Motion in the world of material design is not only beautiful, it builds meaning about the spatial relationships, functionality, and intention of the system.
在Material Design的世界裡，物體的運動曲線效仿了我們的現實世界，從而使得動畫效果符合物理規律或者說人們的認知經驗。突然開始運動或突然結束運動的動效顯得生硬而不自然，背離了用戶的預期，更無法取悅用戶。
有意義的動效不僅包括了力與運動的真實性，還包括觸摸漣漪效果、連貫而富有層次的轉場、令人愉悅的變換細節等等。
##陰影與層次
在Material Design中，應用界面的每一顆像素都是排列在輕薄的卡片上的。可見Android對卡片式設計愛得真切。其實在Material Design之前，卡片這一內容載體早已被廣泛運用在Google自家的應用上了（尤其是Google Now）。
卡片之間可以以接縫的形式組合（這樣它們將一起移動），也可以有前後的層級關係（兩者彼此獨立地移動）。
而陰影則是從視覺上表現層級關係的元素。陰影包括兩層：頂部陰影是為了打造深度感，底部陰影是為了提升清晰度。在新的設計規範中，Google甚至給出了各種部件的5個層次的陰影設置數據。
##Floating Action Button
FAB（浮動操作按鈕）對於Material Design來說就像是一首歌裡面的Hook——它終將成為一個標誌。
浮動操作按鈕在界面中通常是一個漂浮在頂層的小圓圈（因此會有非常張揚的外陰影），可以作為添加、編輯、喜歡、分享、搜索等按鈕出現；它有自身獨特的動態效果，比如變形、彈出、位移等等。
相信很多人會想起Path的扇形菜單，不過，雖然它們很像，並且都很有趣，但是至少在設計理念上它們是兩回事。
##材質的性質
關於Material Design更詳細的描述，可以參閱Google的官方文檔。接下來我們將繼續討論材質與其附加的元素。
Magical Paper和Magical Ink並非官方的稱呼。事實上，在官方的設計規範中我們甚至找不到對這種材質的稱呼。The Verge稱Google的設計師們一直都拒絕為這種虛擬材質命名——這個決定給予了他們更多的靈活性並且為其增添了一份神秘感。不過在訪談中，Matias Duarte（Android設計總監，曾主導設計WebOS）形容他們設計的材質時使用了一個非常貼切的詞：Magical。
先不論Magical Paper這個名字如何，為了便於指意我們暫且用著。
從目前的設計規範中，我們大抵可以推斷出Magical Paper的一些性質：
- Magical Paper是不透明的。這一點使得Android L明顯區分於偏愛毛玻璃的iOS 7。Material Design使用了更接近生活經驗的陰影來呈現層級關係。
- Magical Paper可用於列印並且能迅速抹去墨跡。內容（文字、圖片、圖標等）將列印在Magical Paper上，但隨時會被抹去或替換。顯然，真實的紙做不到這一點。
- Magical Paper能擴張也能收縮。也就是說，在二維空間中，Magical Paper能自由地伸縮。擴張能讓一張Magical Paper出現，收縮能讓一張Magical Paper消失。
- Magical Paper自身的運動符合牛頓第二運動定律。從最終效果來看，每一張Magical Paper的運動都會顯得非常自然，例如隨處可見的緩動效果。
另外我們可以從觸摸漣漪效果中了解Magical Ink：它能在Magical Paper上迅速擴散，而取決於『筆觸』（程序的設定）的差異，它可能會蔓延到整張Magical Paper，也可能只是在作用點周圍形成小小的漣漪。
了解材質的性質能幫助我們更好地了解Material Design，就像了解人性能幫助我們更好地了解社會。不過可能Google自己也還沒有非常充分地認識到Material Design需要什麼樣的材質，所以他們沒有過多地強調材質本身（包括拒絕為其命名），而把更多的描述布置在材質的實際表現上。這興許是個明智之舉，因為可以預見到，Material Design還會經過長期的調整，而目前保守的設定能給予未來更大的自由度。
儘管如此，我們仍能窺見Material Design在界面設計領域所作出的革新式突破。
##玻璃後面是什麼？
第一次看到Material Design時，我有按捺不住的感動。上一次有同樣的感覺是在2013年秋天的一個凌晨，當Apple推出iOS 7的時候。上一次，是因為我覺得自己看到了界面設計的未來；而這一次，是因為我覺得自己看到了界面設計的本源——以至於我突然發覺iOS 7是個半成品。
iOS 7在視覺上有著質的突破，甚至可以說是iOS 7掀起了扁平化的潮流。記憶力不差的人應該都還能想起當時全民吐槽的壯觀景象，當然也還會記得不久之後全民便開始黑轉粉。不得不說，Apple是一家深諳時尚之道的公司，他們知道什麼終將改變，而什麼是應該至死不渝的。然而遺憾的是，iOS 7邁開的步子已經很大，導致還有一件非常重要的事情不得不被擱置到下一步（本來以為iOS 8會開始思考這個問題，可惜沒有）。
結果Google先做了。
When you swiped one away, what was underneath?
Google的設計團隊在一次討論中提到了這樣一個問題：當你把一張卡片移走，下面是什麼？這個問題幫助他們找到了一種全新的看待界面元素的角度，然後開始思考一個更為本質的問題：玻璃後面是什麼？
Material Design就是Matias Duarte的團隊給出的回答。
##建造一個模型
Material Design的最動人之處其實不在於設計了一種虛擬材質，而在於依據該材質建造了一個模型，一個存在於手機玻璃面板乃至其他所有屏幕後面的模型。這是為什麼我認為Android L要比iOS 7更加高明。
要知道，iOS 7的核心是煥然一新的視覺元素，包括字體、色彩、圖標、動畫等等。細想之後你會發現，iOS 7的本質與其他操作系統並無不同，都是設法通過界面元素的視覺效果、交互細節來提升用戶體驗。這樣似乎已經足夠，畢竟不斷地迭代能讓最終的成果越來越細膩。但是我們常常忽略了一個問題，那就是用戶與軟體界面之間的隔閡。這種隔閡並非用戶初次使用產品時難以避免的生疏感；這種隔閡無法通過用戶學習或者功能可視化來消除；這種隔閡就像是人類與外星文明之間的尷尬處境——我即使認識你，也無法理解你。由於隔閡的存在，界面中發生的一切動作似乎都是難以預料的（Matias Duarte將其比喻成電影或電視里的鏡頭切換），用戶所能做的往往只有被動地接受——這一狀況太過普遍以至於沒有人會為此抱怨。
而Material Design試圖賦予軟體以完整的世界觀來解決這個問題。在Material Design的模型里，軟體的材質是Magical Paper；物體的運動符合一定的物理定律；每一個應用都有獨立的空間並且與其他應用互不干涉；頁面中發生的動作往往具有時間層次感；頁面間的轉場會有最大程度的連貫性（有點像Keynote里的Magic Move動效）——這些特徵之間有機地結合，搭建起一個空曠卻穩固的模型框架。往框架里填充細節（字體、色彩、版式等）將使得這個新生的模型不斷生長。
然而這個模型能給我們帶來什麼？
人有建造模型的天賦；人總是試圖通過建造模型去理解世界。哪怕是你學習踩自行車的時候，你也是在通過不斷地試錯來概括出最恰當的模型。其實現有的包括iOS 7在內的用戶界面並非無法被概括成模型，問題只在於這些模型通常過於低級，無法滿足日漸龐大而複雜的軟體生態系統的要求。而Material Design的模型是空前的具體，能讓用戶更快地建造起一個軟體的模型，從而『站在更高處』掌控整個軟體。
最直接的影響包括你總能知道自己是如何來到新的頁面的，總不會在空間上迷失，總能知道永遠不會發生違背模型的事情。
而對於開發者來講，倘若你的大腦已經建立起Material Design的模型，你在評判一個轉場動畫時，可能不再是『這個不符合Android設計規範的某某章的某某條』，而是『它看起來不對勁』。就如同人們看到一顆懸空的石頭後的第一反應不是『這不符合萬有引力定律』而是『咦，這有點奇怪』。這聽上去特別有意思。
##Material Design的未來
目前Material Design還處於嬰兒期，也就是說，Material Design的未來充滿了未知。
Google的設計美學在近幾年日趨成熟，令人不得不刮目相待。但願Google有足夠的魄力去推動Material Design的成長。也許Material Design就是下一個施樂Parc。
Google自家的一系列應用已經開始陸續換上Material Design的新裝，包括Google Docs、Google+等。而Evernote似乎是第一個嘗鮮的大牌第三方APP，雖然在風格上貫徹得並不徹底，但那個可愛的綠色FAB已經值得把玩了。
--------------------------------------------------------------
推薦觀看The Verge對Matias Duarte的採訪：
個人認為界面設計的方向無非以下：
1. 在靜態上，構造與現實可映射的虛擬空間。人們慣用的一個詞叫「隱喻」，最早隱喻多被用擬物來實現，後來高級一點加入層次、空間等等。
2. 在動態上，由於這個虛擬空間的變化完全不同於現實空間（比如頁面跳轉，狀態轉換），所以需要大量可被理解的動畫關聯這些變化，引導用戶理解這些變化。（這些動畫亦抽象於現實空間，但卻無須太多物理規則限制，好玩就在這裡）
最早的界面1，2都不考慮，界面完全是抽象的、自創的（如字元界面，只考慮機器表達）；後來在1上做得越來越多，越來越好；現在設備的性能及人員能力的冗餘（我的意思是解決問題的重點終於可以由技術轉向體驗），2當然會越來越被提上設計議程。
故而所謂界面設計風格的進化無非在這兩點上做得越來越好，讓界面這個虛擬空間對人們來說越來越容易親近和理解，這才是根本 ，而什麼擬物、扁平、如何動畫，全部都是手段，不同情境下當然可以自由選用，無須上綱上線。
比如IOS7，其實除了大家都在關注的扁平化（這只是一種風格，高度信息化時代的表達取向），還有很多系統層面在界面元素空間層次的定義與關聯動畫的完善。
這次的material design ，無非是在這條路上又向前邁進了一步，顯然時間上比IOS7更晚，當然進步也會更加明顯，而更加讓它如此顯眼的是它出現在android系統，一個人們印象中不太在乎設計的平台。
最後所有的進步都來自於所有界面設計人員的不斷探索。material design 只是對所有探索成果整合、規範的一個應用子集，它也並不是一個終極解。有很多更優秀的設計於此時存在於這個集合之外，也將在未來不斷產生。開始之前先講一講英文，Material是組成事物的基本物件，可以被近似地翻譯成材料/材質。但是在這裡最好能不要從中文翻譯的角度出發去思考。以上。
Material Design 是一個怎麼樣的設計風格和理念：
一直以來的平面設計都在試圖通過同化與差異來梳理要展示的元素。比如相同主題的內容被放在一起，相同類型的內容互相對齊，相同功能的元素用相同的顏色，相反的情況則用不同的處理。這種設計理念十分成熟，在紙媒介的平面設計中得到了廣泛運用，電子時代沿用下來也是水到渠成的事情了。
紙上的內容是無法再作改變的，框架劃好了範圍後該多大就多大，列印出來就再無商量的餘地。比如你有一個人的名片，如果你要更詳細地了解這個人，那當然是再去拿張紙列印一份詳細信息。由於一直以來的沿用，在之前的大部分電子設計里，我們也是用相同的方式，那就是再打開一個陳列了詳細信息的頁面。
不過現在情況不同了。電子化的框架在最終被像素渲染出來以前，其實可以是矢量的，那它就擁有了變化大小（與改變位置關係）的能力。基於這個，便再沒有了重新打開一個頁面來陳列信息的必要，只用改變之前框架的形狀/大小/位置 就能完成我們的需求。這樣一來，減少了不必要的層級關係，整體的信息陳述也就更清晰了。（其他的比如新版本的顏色方案和動畫方案也多是圍繞這個進行，並沒有太多屬於自己的獨特性。）
至於說這種理念是不是今年Google原創，那顯然也不是的。至少在去年推出的iOS7上面，蘋果就已經有嘗試了。比如Safari的標題欄，還有系統自帶的天氣app。
----
近年來的設計一直在致力於減少不必要的設計要素，比如通訊錄的皮革紋理，又比如很多應用圖標上的玻璃反光。因為減少越多不必要的物件，才能越多的讓有必要的物件得到關注。設計師們可不是為了要把圖標拍平才去減少視覺效果的。這次Google做得好不好不一定，在我看來還是有很多不必要的陰影效果。但是豐富了基本設計材料的屬性，還是值得讚揚的。
一套直接面向消費者的UI。
目前Google+的UI就是範例，Google Now有點那麼個意思。評價前可以先看看，還是很漂亮的。上兩張圖直觀感受下
對比新舊控制項不難發現新的控制項更加精緻圓潤(當然也扁了)。
大量的設計過的視覺動畫，而不是以前那樣的出於邏輯的過渡動畫。
以及諸如此類非常養眼的界面。
最後來張長的……
我並非設計師，所以不懂光影，邏輯或其他設計原則等等專業的東西，大多數人都不太懂。這次的Material Design給出的是一個相對更加符合大眾審美並帶有一定酷炫風格的整體UI，相比之下，舊的Android Design雖然也很漂亮，但有些太過樸素。這也是為什麼原生Android被人說丑，MIUI,flyme等等ROM模仿iOS的原因。經過這一套風格的洗禮，洗去了我對MIUI的最後一點信仰。目前大多數定製安卓界面跟這個一比都可以扔了。
如果說缺點，也有，比如虛擬鍵的樣式，還是不夠精緻。我個人會希望三角形和正方形的高度減小一些，三角形不要用呆板的正三角形(Geek風格又露出來了)，改用頂角小於60度的銳角。還有就是個別app的ActionBar(好像現在不叫這個了？)的高度顯得有些過大。
來講一些實戰性較高的觀點吧。
在上個月，我們組內進行了安卓插值器動畫的研究，其中有一個章節就是Material Design的分享，準備期將近一個月，系統地剖析了Material Design，所以對於Material Design有一些自己的見解。
下面從兩個方面來講解下：Material Design（以下均簡稱「MD」）
1. 首先是UI表現層
不同於iOS UI，安卓UI在於圖標表現方面青睞實心而非線性，青睞尖銳而非圓潤，青睞統一色彩而非多彩。
相對於iOS UI，安卓的MD設計更趨近於現實，即三維世界，而非扁平的二維。MD的設計體系，引進了Z軸的概念，也就是安卓MD具備層次美，Google相信：UI的美感不僅來源於界面的細節，更來自於層次。
MD具備更強或者超強的規範性，由於DPI特性，安卓MD元素需要能被4整除（完美顯示），距離需要為8dp的倍數（合理間距）。
ps：怎麼得出的推導過程，比較複雜，而且需要列表，故不展開。
MD強調主功能區與二級功能區，二級功能區即我們平時常見的，置於頁面左上角的漢堡式功能按鍵。
2. MD另一個重要特性為：交互動效。
因為你一旦採用MD的設計，那麼你就需要考慮動效與動效實現（為什麼一定要考慮，就好比買衣服卻不給你手提袋一樣，有缺失感不完美）。
MD強調自然的動效，流暢且有活力，例如easing。
easing表現出了自然界的動效美感，例如：模擬的回彈、緩動等（我之前發布過一則複雜動效還原，反饋不錯，也獲得了UI中國的首推，對動效有興趣的同學可以前去學習下，標題是：天了嚕 100%還原複雜交互動效）。
除了easing，MD的更凸顯：魔法紙片（1px投影的card流設計），魔法紙片是基於Z軸的設計語言，與底層越遠，投影越輕；反之則越重。
所以，MD尤其適合feed流、card流的產品設計形態。
最後，MD還推出了水紋反饋，圖標轉場交互和大面積布局交替的展現，MD推崇能夠幫助用戶理解的交互形式。
以上是我個人的一些見解，如有不對或不恰當的東方，希望大家指出。
站酷、UI中國：EthankDesign下面有7個短視頻，時間大概為5-10分鐘，分別從不同的角度談了一下對material design的看法。然後在本文的後面，也準備了一篇文章，算是對視頻內容的總結，所以也可以直接跳到後面看這篇文章。
一、《物體的基本單位》 by 空夕Material design這樣一種設計語言只是設計語言本身演化的一個階段，我們可以看一看稍微長一些的歷史，以及歪歪一下未來。
二、《無限二維平面空間與窗口》 by 今敏
由於界面本身可以當做是人觀看軟體世界的一個窗口，現在的material design對於的設計語言便是設計師對軟體世界這麼一個無限二維平面的思考。002-無限二維平面空間與窗口【歪歪一下material design】視頻
三、《信息的介質》by 平四
Material design其實最牛逼的地方在於它取了一個牛逼的名字——「material」這麼一個完全不指代任何具體事物的中立稱呼，這套設計語言是對信息介質發展的一種思考。003-信息的介質【歪歪一下material design】視頻
四、《平衡在具象和抽象之間》by 龍襄
Material Design既是具象的，又是抽象的，具象在於動效，抽象在於樣式，而更加重要的是，在二者之間獲得一個平衡,達到人機合一。004-平衡在具象與抽象之間【歪歪一下Material Design】視頻
五、《隱喻》by 晴蒼
設計是對符號系統加工的過程，面對陌生的事物的時候，需要使用隱喻的手法來幫助用戶去理解，而當用戶熟悉以後，原本需要隱喻的東西也可以去描繪以後更加陌生抽象的新事物。005-隱喻【歪歪一下material design】視頻
六、《抽象藝術》by 玥白
Material design看似走向了抽象，但是藝術本身何曾不是如此——從古典寫實繪畫到現代抽象藝術，抽象並非沒有意義，相反它可以包含更加純粹的理念和表達。006-抽象藝術【歪歪一下material design】視頻
七、《感受的維度》by 方田
界面能夠給人一種感受，讓你感覺到速度、空間感、時間變化、質感甚至是情緒等，這一次，material design從新的角度，表達了感受的不同維度。007-感受的維度【歪歪一下material design】視頻
已經有團隊在 GitHub 上以協同的方式完成了完整的中文翻譯：
http://design.1sters.com/
2008年，Steve Jobs站在巨大的投影牆前，拿起一個黑色的屏幕，他在上面輕輕一划，所有的元素隨之舞動，真實世界的元素，書籍，唱片，日記本似乎被縮小進了那個小小放著熒光的黑匣子里。現在，我們說phone開創了移動互聯網的新紀元，而它作為載體，也把擬物化這一設計風格推向了巔峰。
Jobs說,你想要書，它就是一本書，你想要聽音樂，它就是黑膠唱片，這就是擬物化風格的基礎，即真實的描摹世界。
話音猶存，而時間飛逝，轉眼過了6年， Matias Duarte（google design vice president）在2014 io上發布了google 新的設計語言，Material Design 。Google雄心薄薄，希望能用這套新的設計語言統一所有的安卓系統，包括手機，電腦，平板以及車載和可穿戴設備。這套語言看上去比以往的任何時候都更加扁平，隨處可見的大色塊，細線條，抽象的描繪和流暢的動畫。如果你剛從2008年乘坐時光機回來，可能會對這種新語言適應不良，但事實上，不僅是google，2010年伊始，flat ui就已經大行其道，微軟發布的matro design，僅用字體，動畫與色塊來表明信息內容；之後的一年，2011年10月，google發布Android 4.0系統，採用了扁平化的設計風格，而到了2013年，一直堅守擬物化風格的IOS也放棄了原先的方案，jonathan Ive（Senior Vice President Design,Apple Inc）在ios7裡面做了大刀闊斧的改革，以純粹色彩，纖細字體和簡潔線條的圖標徹底告別了scott forstall 時代的的陰影和玻璃高光效果。同時大量運用毛玻璃，利用其透露出的朦朧光影來構成ios7扁平化的設計風格。
這一切，都似乎在表明，設計風格已經與擬物化越走越遠了。但是，這一切是如何發生的？還是回到Material Design，我們來看看它究竟在傳遞什麼信息。
1、什麼是Material Design？
從字面來說，就是材料設計。聽上去像是一個工程研究的課題，事實上，除去視覺元素的更新，Material Design最大的意義是定義了交互方式應該遵循的規範。它在儘可能的還原人與現實世界交互的方式，遵循的是宏觀低速狀態下的牛頓力學定律，即我們每天生活的真實世界的物理定律，當一個物體在沒有外力作用下，保持靜止或勻速運動。
第一次，交互方式有了可遵循的規範，無論是事件的點擊反饋，還是頁面的切換，圖片的翻轉，都應該遵循力學定律。
這是更深層次的擬物化，即交互方式的擬物化。過去我們隨處可見的混亂交互體驗，突然消失的頁面，憑空出現的警告，從四面八方湧入的元素，相互矛盾的陰影方向和高光效果等等，都將在Material Design中得到規範。
它們看似只是設計的一些小細節，但的確給用戶造成了極大的干擾，因為用戶無法預知，他的行為會產生什麼後果。試想一下，如果你要走路，第一步在地球引力規範下，穩穩落在地面，第二步卻像阿姆斯特朗踏上月球一樣高高跳起，會是一種什麼樣的感覺。絕對會讓人無從下腳。如果你身處的世界是這樣無序和沒有規律的，那麼我們就無法積累經驗，認識和理解世界。
反過來說，如果用戶和設計師認為一定的交互行為必將導致相應的結果，那麼就可以減少引導和降低誤讀。我們在做產品設計時，無法繞過一個問題就是用戶引導，每個人心中都有一個哈姆雷特，如果你追蹤用戶行為路徑，會發現不同用戶的使用軌跡也是完全不同的。而這些軌跡，和設計師預先設計的往往出入甚大，也就照成了大量的誤讀，中斷和干擾。將產品的意圖準確的傳遞給用戶，滿足用戶需求，是我們在設計產品時最重要的目標。作為設計師，某種意義上，我們的任務就是讓世界看起來更加有序。
2、Material Design的三原則
雖然Material Design在視覺上是高度抽象和扁平的，但目的卻是要讓用戶相信，在此發生的一切行為和元素都是有例可循，有理可依的，即Matias Duarte所謂的「觸覺現實」，有以下三條原則：
1）事物實體的隱喻；首先要賦予虛擬物體真實的物理屬性，如體積，重量，速度等，把客觀世界的物理規律引入其中，來體現不同的觸感反饋，並以此為基礎幫助用戶構建事物的意識。其中，方法的關鍵在於靈活運用材質，光效，表面觸感和運動方式為用戶提供視覺線索和使用體驗，利用熟悉的萬事萬物，塑造用戶在移動設備上共通的觸覺體驗心理模型。（更有意思的是，也許隨著科技的發展，屏幕本身可以提供更豐富的觸感體驗。）
2）醒目，形象和深思熟慮；Material Design的設計語言，是對傳統平面設計元素的提取和學習。通過對如字體，版式，網格體系，空間層次和比例配色等視覺元素的精雕細琢，為用戶提供更加易讀，醒目，生動形象的使用界面，即視覺引導操作。
3）動畫效果指示意義：我們的視覺總會追隨物體的運動軌跡，因此，動態事物可以有效的暗示，引導用戶。通過動畫效果的變化，把物體的狀態以更加連續和連貫的方式呈現給用戶，吸引用戶的注意力，讓用戶充分理解物體的變化和意義。
Google雄心勃勃，希望用一套統一的經過實踐驗證的優秀設計準則，為安卓所有終端產品的用戶提供一致的體驗，安卓系統最受詬病的碎片化正在悄然發生改變。
此外，Material Design為設計師和開發者提供了異常豐富的內容，可以說是設計師進階範本，作為移動產品設計一員的我們，除了關注視覺元素的變化，還要關注設計思潮的變化，並應用到我們的設計中去。交互層的擬物化，建立觸覺現實，拓展了設計的維度和空間，必將影響深遠。Material Design: Google 向紙墨學了什麼？
Microsoft:
"我們不用陰影！"
「YEAH!!( ?? ω ?? )y」（台下一片歡呼）
Apple:
"我們決定不再使用陰影。"
「……那我們可怎麼辦啊」（台下一片唏噓）
Google:
"ummmmm…………………………"
「umm陰影這個東西還是，要用的吧?」
"That"s it!" (拍手)
它不過是又是另一個風格而已，哪裡能寫得出那麼多東西來-~
推薦閱讀：
TAG:如何看待/評價 X | 設計語言 | 如何理解 X | Google I/O 2014 | Material Design |