Material Design

Material Design

參考代碼

1. 設計語言

擬真 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 都是扁的，但他們所處的環境，實際上是一個 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 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的顏色。

4. 使用強調色

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

5. 圖標/Icon

Google提供了適用於Material Design的圖標字體，咱們能夠直接在前端樣式表中使用@font-face引用這些字體。

face用來指定要顯示的圖標，也能夠 使用其對應的數字編碼：

<i class="material-icons">&#xE87C;</i>

6. 排版/Typography

Material Design提供了11種規格的文字樣式供不一樣場景下排版使用:

在MDL中，使用樣式類mdl-typography--{name}聲明文本的排版樣式：

<h1 class="mdl-typography--title">Hello,Material Design</h1>
<p class="mdl-typography--body-2">this is a demo</p>