本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，博客地址為http://www.cnblogs.com/jasonnode/ 。網站上有對應每一小節的在線練習大家可以去試試。
Material Design Lite簡介
本文主要介紹Material Design設計語言的HTML/CSS/JS部分實現。
一、設計語言
github項目地址：https://github.com/google/material-design-lite
擬真 vs. 扁平
在iso7之前，Apple采用的是擬真化設計語言，期望通過模擬現實世界的物體，給用戶 身臨其境的感覺。自metro和ios7開始的扁平化設計語言則相反，它着意去掉冗余的裝 飾效果（比如透視、紋理、漸變等等能做出3D效果的元素），讓“信息”本身重新作為核心 被凸顯出來。
從下面的對比圖中，我們可以體會到兩種設計語言的差異：
Material Design
如果說擬真代表設計語言的一個極端，而扁平代表設計語言的另一個極端，那么Material Design則居於兩者之間更偏右的位置：
在Material Design中，屏幕里看上去平整的一個 App 界面，事實上不同控件之間都擁有 着層級關系。不同控件之間的層級關系會使用陰影作為表示，而陰影的深淺，代表的正是這個 控件在 Z 軸的高度：
二、材料/Material
Material Design 里的材料/Material實際上是一種虛構出來的材料，：厚度無限薄（1dp），面積 無限大，能變換造型，也能按照規律移動 —— 你可以把它當做一張紙（事實上，Material Design 曾一度傳說要改名為Quantum Paper - 量子紙）：
上面的兩幅圖示，左邊正確地表達了Material Design的設計理念：材料有厚度，但是無差別的1dp 厚。右邊的圖過於擬真地表現了材料的厚度，因此是錯誤的。
雖然每一塊 Material 都是扁的，但他們所處的環境，其實是一個 3D 空間，這意味着所有處於 Material Design 設置的這個三維環境里的控件，都擁有 XYZ 三個維度，Z軸垂直於屏幕，使用 陰影表現材料的高度，陰影越重，Z值越高，距離用戶越近。在下面的動圖中，你可以直觀地體會到 陰影的變化對我們感官的影響：
因此，Material Design 並不是單純的扁平化，它在保留了扁的控件的同時，采用了立體的虛擬空間， 簡言之，Material Design的核心是：扁而不平。
Material Design Lite
MDL中定義了一組樣式類mdl-shadow--Ndp，用於聲明材料的陰影，N的有效取值為：2/3/4/6/8/16。
為元素應用陰影樣式類很簡單：
<!--為元素聲明2dp的陰影--> <any class="mdl-shadow--2dp">...</any>
三、色彩/Color
Material Design中的色彩靈感來自於現代建築、道路標識、路面標記及運動場等 大膽運用色調、高光和陰影，充滿動感的場景。
Material Design使用19個調色板（red、pink、purple等）用來約束設計中色彩的使用。 在每個調色板中，色調為500的顏色為基准色，其他顏色是基准色在不同色調（50-900, A100-700） 下的表現。
在右邊的示例代碼中，我們繪制了Material Design完整的調色板集。每一行是一個調色板， 每一列表示一個色調。你可以將鼠標移動到一個顏色上，查看其RGB值。
Material Design Lite
在MDL中，我們可以使用樣式類mdl-color--{palette}-{hue}來設置背景色，使用樣式類 mdl-color-text--{palette}-{hue}來設置前景色：
<div class="mdl-color--red mdl-color-text--grey-50">
this is a gray text on red background.
</div>
四、色彩運用
毫無疑問，我們在一個界面中不能無約束的使用色彩，那將使事情變得一團糟。 說好聽點，沒有約束，就不再是設計，而成為藝術了。
Material Design給出了一些通常條件下的約束：
1. 最多用兩個調色板
在一個界面中最多使用兩個調色板，從主調色板選擇最多三個色調，從輔調色板選擇 一個強調色。下面的示例選擇indigo調色板中的三個色調（100、500和700），從pink 調色板中選擇色調A200作為強調色：
2. 為文本、圖標和分割線應用透明度
通過為文本設置透明度來表達文本的相對重要性：
對於深色背景的淺色文字，最重要的文本使用87%的透明度，次重要的文本使用54%的 透明度。提示性文本，例如輸入框、標簽、被禁止的文字等使用26%的透明度。
對於淺色背景的深色文字，最重要的文本使用100%的透明度，次重要的文本使用70%的 透明度，其他文本使用30%的透明度。
3. 工具欄和狀態欄
工具欄和大色塊應當使用調色板中色調為500的顏色為基准色。狀態欄應當選擇 調色板中比基准色略深的色調為700的顏色。
在下面的示例中，左圖的工具欄和右圖的大色塊，使用了indigo調色板中的色調 500的基准色；而兩幅圖頂端的狀態欄則使用了indigo調色板中的色調700的深色：
4. 使用強調色
在大色塊上絕對不要使用強調色，對動作按鈕、開關或滑動條之類的組件應當使用強調色：
五、圖標/Icon
Google提供了適用於Material Design的圖標字體，我們可以直接在前端樣式表中使用@font-face引用這些字體：
/*icon.css*/
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: local('Material Icons'), local('MaterialIcons-Regular'), url(material-icons.woff2) format('woff2'), url(material-icons.woff) format('woff'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; word-wrap: normal; -webkit-font-smoothing: antialiased; /*text-rendering must be set for local host fonts*/ text-rendering: optimizeLegibility; -moz-font-feature-settings: 'liga'; -moz-osx-font-smoothing: grayscale; }
在頁面中要使用圖標字體，只需要應用上面定義的material-icons樣式：
<i class="material-icons">face</i>
上面的示例創建了一個笑臉圖標，face用來指定要顯示的圖標，也可以 使用其對應的數字編碼：
<i class="material-icons"></i>
具體的圖標名和編碼，參閱Material Icons官網（需翻牆）：https://www.google.com/design/icons/
六、排版/Typography
Material Design提供了11種規格的文字樣式供不同場景下排版使用:
Material Design Lite
在MDL中，使用樣式類mdl-typography--{name}聲明文本的排版樣式：
<h1 class="mdl-typography--title">Hello,Material Design</h1> <p class="mdl-typography--body-2">this is a demo</p>
網站上有對應每一小節的在線練習大家可以去試試。
