Material Design Lite，簡潔驚豔的前端工具箱。

本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，博客地址爲http://www.cnblogs.com/jasonnode/ 。網站上有對應每一小節的在線練習你們能夠去試試。

 

Material Design Lite簡介

本文主要介紹Material Design設計語言的HTML/CSS/JS部分實現。

1、設計語言

github項目地址：https://github.com/google/material-design-lite

擬真 vs. 扁平

在iso7以前，Apple採用的是擬真化設計語言，指望經過模擬現實世界的物體，給用戶 身臨其境的感受。自metro和ios7開始的扁平化設計語言則相反，它着意去掉冗餘的裝 飾效果（好比透視、紋理、漸變等等能作出3D效果的元素），讓「信息」自己從新做爲核心 被凸顯出來。

從下面的對比圖中，咱們能夠體會到兩種設計語言的差別：

 

 

Material Design

若是說擬真表明設計語言的一個極端，而扁平表明設計語言的另外一個極端，那麼Material Design則居於二者之間更偏右的位置：

 

在Material Design中，屏幕裏看上去平整的一個 App 界面，事實上不一樣控件之間都擁有 着層級關係。不一樣控件之間的層級關係會使用陰影做爲表示，而陰影的深淺，表明的正是這個 控件在 Z 軸的高度：

 

2、材料/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>

 

3、色彩/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>

4、色彩運用

毫無疑問，咱們在一個界面中不能無約束的使用色彩，那將使事情變得一團糟。 說好聽點，沒有約束，就再也不是設計，而成爲藝術了。

Material Design給出了一些一般條件下的約束：

1. 最多用兩個調色板

在一個界面中最多使用兩個調色板，從主調色板選擇最多三個色調，從輔調色板選擇 一個強調色。下面的示例選擇indigo調色板中的三個色調（100、500和700），從pink 調色板中選擇色調A200做爲強調色：

2. 爲文本、圖標和分割線應用透明度

經過爲文本設置透明度來表達文本的相對重要性：

對於深色背景的淺色文字，最重要的文本使用87%的透明度，次重要的文本使用54%的 透明度。提示性文本，例如輸入框、標籤、被禁止的文字等使用26%的透明度。

對於淺色背景的深色文字，最重要的文本使用100%的透明度，次重要的文本使用70%的 透明度，其餘文本使用30%的透明度。

3. 工具欄和狀態欄

工具欄和大色塊應當使用調色板中色調爲500的顏色爲基準色。狀態欄應當選擇 調色板中比基準色略深的色調爲700的顏色。

在下面的示例中，左圖的工具欄和右圖的大色塊，使用了indigo調色板中的色調 500的基準色；而兩幅圖頂端的狀態欄則使用了indigo調色板中的色調700的深色：

4. 使用強調色

在大色塊上絕對不要使用強調色，對動做按鈕、開關或滑動條之類的組件應當使用強調色：

5、圖標/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">&#xE87C;</i>

具體的圖標名和編碼，參閱Material Icons官網（需FQ）：https://www.google.com/design/icons/

 

6、排版/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>

 

網站上有對應每一小節的在線練習你們能夠去試試。