本文版權(quán)歸作者和博客園共有，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，博客地址為http://www.cnblogs.com/jasonnode/?。網(wǎng)站上有對應(yīng)每一小節(jié)的在線練習(xí)大家可以去試試。

?

Material Design Lite簡介

本文主要介紹Material Design設(shè)計語言的HTML/CSS/JS部分實現(xiàn)。

一、設(shè)計語言

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

擬真 vs. 扁平

在iso7之前，Apple采用的是擬真化設(shè)計語言，期望通過模擬現(xiàn)實世界的物體，給用戶 身臨其境的感覺。自metro和ios7開始的扁平化設(shè)計語言則相反，它著意去掉冗余的裝 飾效果（比如透視、紋理、漸變等等能做出3D效果的元素），讓“信息”本身重新作為核心 被凸顯出來。

從下面的對比圖中，我們可以體會到兩種設(shè)計語言的差異：

?

?

Material Design

如果說擬真代表設(shè)計語言的一個極端，而扁平代表設(shè)計語言的另一個極端，那么Material Design則居于兩者之間更偏右的位置：

?

在Material Design中，屏幕里看上去平整的一個 App 界面，事實上不同控件之間都擁有 著層級關(guān)系。不同控件之間的層級關(guān)系會使用陰影作為表示，而陰影的深淺，代表的正是這個 控件在 Z 軸的高度：

?

二、材料/Material

Material Design 里的材料/Material實際上是一種虛構(gòu)出來的材料，：厚度無限薄（1dp），面積 無限大，能變換造型，也能按照規(guī)律移動 —— 你可以把它當(dāng)做一張紙（事實上，Material Design 曾一度傳說要改名為Quantum Paper - 量子紙）：

上面的兩幅圖示，左邊正確地表達了Material Design的設(shè)計理念：材料有厚度，但是無差別的1dp 厚。右邊的圖過于擬真地表現(xiàn)了材料的厚度，因此是錯誤的。

雖然每一塊 Material 都是扁的，但他們所處的環(huán)境，其實是一個 3D 空間，這意味著所有處于 Material Design 設(shè)置的這個三維環(huán)境里的控件，都擁有 XYZ 三個維度，Z軸垂直于屏幕，使用 陰影表現(xiàn)材料的高度，陰影越重，Z值越高，距離用戶越近。在下面的動圖中，你可以直觀地體會到 陰影的變化對我們感官的影響：

因此，Material Design 并不是單純的扁平化，它在保留了扁的控件的同時，采用了立體的虛擬空間， 簡言之，Material Design的核心是：扁而不平。

Material Design Lite

MDL中定義了一組樣式類mdl-shadow--Ndp，用于聲明材料的陰影，N的有效取值為：2/3/4/6/8/16。

為元素應(yīng)用陰影樣式類很簡單：

<!--為元素聲明2dp的陰影--> <any class="mdl-shadow--2dp">...</any>

?

三、色彩/Color

Material Design中的色彩靈感來自于現(xiàn)代建筑、道路標(biāo)識、路面標(biāo)記及運動場等 大膽運用色調(diào)、高光和陰影，充滿動感的場景。

Material Design使用19個調(diào)色板（red、pink、purple等）用來約束設(shè)計中色彩的使用。 在每個調(diào)色板中，色調(diào)為500的顏色為基準(zhǔn)色，其他顏色是基準(zhǔn)色在不同色調(diào)（50-900, A100-700） 下的表現(xiàn)。

在右邊的示例代碼中，我們繪制了Material Design完整的調(diào)色板集。每一行是一個調(diào)色板， 每一列表示一個色調(diào)。你可以將鼠標(biāo)移動到一個顏色上，查看其RGB值。

Material Design Lite

在MDL中，我們可以使用樣式類mdl-color--{palette}-{hue}來設(shè)置背景色，使用樣式類?mdl-color-text--{palette}-{hue}來設(shè)置前景色：

<div class="mdl-color--red mdl-color-text--grey-50"> this is a gray text on red background. </div>

四、色彩運用

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

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

1. 最多用兩個調(diào)色板

在一個界面中最多使用兩個調(diào)色板，從主調(diào)色板選擇最多三個色調(diào)，從輔調(diào)色板選擇 一個強調(diào)色。下面的示例選擇indigo調(diào)色板中的三個色調(diào)（100、500和700），從pink?調(diào)色板中選擇色調(diào)A200作為強調(diào)色：

2. 為文本、圖標(biāo)和分割線應(yīng)用透明度

通過為文本設(shè)置透明度來表達文本的相對重要性：

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

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

3. 工具欄和狀態(tài)欄

工具欄和大色塊應(yīng)當(dāng)使用調(diào)色板中色調(diào)為500的顏色為基準(zhǔn)色。狀態(tài)欄應(yīng)當(dāng)選擇 調(diào)色板中比基準(zhǔn)色略深的色調(diào)為700的顏色。

在下面的示例中，左圖的工具欄和右圖的大色塊，使用了indigo調(diào)色板中的色調(diào) 500的基準(zhǔn)色；而兩幅圖頂端的狀態(tài)欄則使用了indigo調(diào)色板中的色調(diào)700的深色：

4. 使用強調(diào)色

在大色塊上絕對不要使用強調(diào)色，對動作按鈕、開關(guān)或滑動條之類的組件應(yīng)當(dāng)使用強調(diào)色：

五、圖標(biāo)/Icon

Google提供了適用于Material Design的圖標(biāo)字體，我們可以直接在前端樣式表中使用@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; }

在頁面中要使用圖標(biāo)字體，只需要應(yīng)用上面定義的material-icons樣式：

<i class="material-icons">face</i>

上面的示例創(chuàng)建了一個笑臉圖標(biāo)，face用來指定要顯示的圖標(biāo)，也可以 使用其對應(yīng)的數(shù)字編碼：

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

具體的圖標(biāo)名和編碼，參閱Material Icons官網(wǎng)（需翻墻）：https://www.google.com/design/icons/

?

六、排版/Typography

Material Design提供了11種規(guī)格的文字樣式供不同場景下排版使用:

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>

?

網(wǎng)站上有對應(yīng)每一小節(jié)的在線練習(xí)大家可以去試試。

轉(zhuǎn)載于:https://www.cnblogs.com/jasonnode/p/4747469.html

總結(jié)

以上是生活随笔為你收集整理的Material Design Lite，简洁惊艳的前端工具箱。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。