摘要：這是一個(gè)用于構(gòu)建響應(yīng)式應(yīng)用和網(wǎng)站的前端框架。是基于設(shè)計(jì)的一套豐富的組件。這是一個(gè)對(duì)混合式手機(jī)應(yīng)用框架的擴(kuò)展庫(kù)。到目前為止它僅大小，而且不依賴(lài)于任何第三方的插件，它可以很輕量的被用來(lái)創(chuàng)建和應(yīng)用。

_Material design_是Google開(kāi)發(fā)的，目的是為了統(tǒng)一公司的web端和手機(jī)端的產(chǎn)品風(fēng)格。它是基于很多的原則，比如像合適的動(dòng)畫(huà)，響應(yīng)式，以及顏色和陰影的使用。完整的指南詳情請(qǐng)看這里（http://www.google.com/design/spec/material-design/introduction.html）
雖然Google的設(shè)計(jì)看起來(lái)主要是應(yīng)用在Android上的應(yīng)用，但是也是個(gè)很好的機(jī)會(huì)應(yīng)用到web和hybrid應(yīng)用。為了幫助使用者更好的創(chuàng)建Material design風(fēng)格的web工程，有很多的框架和類(lèi)庫(kù)已經(jīng)實(shí)現(xiàn)了相應(yīng)的組件和樣式。下面就是我們推薦的Top 15!

Material Design Lite是Google官方提供的框架，你可以經(jīng)常的更新最近版本來(lái)知道其踐行的標(biāo)準(zhǔn)。它看起來(lái)非常棒，很容易使用，并且沒(méi)有其它的依賴(lài)。

這是一個(gè)用于構(gòu)建響應(yīng)式應(yīng)用和網(wǎng)站的前端框架。它真的非常容易上手，特別是對(duì)于那些熟悉類(lèi)似Bootstrap框架的人們。非常酷的是SASS版本，可以允許用戶(hù)選擇組件引入。

Material-UI是基于Material Design設(shè)計(jì)的一套豐富的React組件。這是一個(gè)實(shí)現(xiàn)的非常漂亮的類(lèi)庫(kù)包括CSS樣式和動(dòng)畫(huà)。有兩套獨(dú)立的風(fēng)格可以選擇-黑色和亮色

在我們這份榜單中最輕量的一款，沒(méi)有任何的依賴(lài)而且僅僅12kb的gzip包，包括全部的CSS和JS。提供React支持，通過(guò)SASS文件可以自定義，為了幫助寫(xiě)出適用于電子郵件的HTML,MUI包括了一個(gè)郵件CSS庫(kù)，并允許使用內(nèi)聯(lián)。

Polymer是Google的另外一款產(chǎn)品。一個(gè)類(lèi)庫(kù)用來(lái)構(gòu)建快速可復(fù)用的web組件應(yīng)用到你的項(xiàng)目中。Polymer提供可以使用的元素有很多(https://elements.polymer-project.org/)，分成了7類(lèi)。其中的一個(gè)叫做Paper,全部是Material Design的組件。

這是一個(gè)對(duì)Ionic混合式手機(jī)應(yīng)用框架的擴(kuò)展庫(kù)。它增加了新的樣式類(lèi)，方法來(lái)達(dá)到Ionic的Material化，而并沒(méi)有改變用Ionic開(kāi)發(fā)應(yīng)用的方式。

Zurb出品的是另外一個(gè)流行的框架用來(lái)構(gòu)建響應(yīng)式的網(wǎng)站和應(yīng)用。這是一套獨(dú)立的組件可以快速的搭建基礎(chǔ)元素。它看起來(lái)非常不錯(cuò)但是沒(méi)有很多關(guān)鍵的Material Design的組件。

兩個(gè)星期的親身體驗(yàn)，Surface是一個(gè)CSS框架，實(shí)現(xiàn)了很多經(jīng)典的Material UI組件，而沒(méi)有使用任何的JavaScript而且不需要任何編程語(yǔ)言。僅一個(gè)css文件，非常輕量，易于使用。

Essence是一個(gè)基于React和React Native的CSS框架。它允許開(kāi)發(fā)者快速的構(gòu)建非常漂亮的web和mobile交互的應(yīng)用，實(shí)現(xiàn)擬物化設(shè)計(jì)標(biāo)準(zhǔn)?？梢允褂胣pm安裝整個(gè)類(lèi)庫(kù)，或者只加載你使用的模塊。

Angular.js-like框架提供了許多流暢動(dòng)畫(huà)的CSS和JavaScript組件。Lumx的布局和樣式是基于Bourbon，動(dòng)畫(huà)庫(kù)使用很流行的Velocity.js。經(jīng)過(guò)這些框架的整合，Lumx是一個(gè)實(shí)現(xiàn)很多功能的工具，來(lái)實(shí)現(xiàn)響應(yīng)式的web應(yīng)用。

很多人在Boostwatch上實(shí)現(xiàn)了很多炫酷的Bootstrap樣式風(fēng)格，包括一個(gè)模擬Material Design的叫Paper。它沒(méi)有實(shí)現(xiàn)所有的擬物化設(shè)計(jì)組件，但對(duì)于一些使用Bootstrap的人確實(shí)一個(gè)非常不錯(cuò)的選擇，因?yàn)樗麄儾挥酶淖內(nèi)魏螙|西（除了加載樣式）來(lái)實(shí)現(xiàn)一個(gè)非常流行的應(yīng)用。

另外一個(gè)可供選擇的也是為Bootstrap而生的。這是一個(gè)活躍的樣式更新的前端框架，為了達(dá)到Google的設(shè)計(jì)標(biāo)準(zhǔn)，增加了一些新的樣式和一些JavaScript，還有一些jQuery的插件。另外Github上的項(xiàng)目有超過(guò)14000個(gè)star。

AngularJS是一個(gè)非常流行的web開(kāi)發(fā)開(kāi)源框架。由Google得一個(gè)團(tuán)隊(duì)維護(hù)，所以不出意外的他們有自己的Material Design工具包?，F(xiàn)在為止，它只支持Angular 1，但對(duì)第二版本的支持也接近完成。

你可以認(rèn)為Material是一個(gè)UI層的框架，它完美的將Bootstrap和MDL融合在一起 - 它和Bootstrap非常相似(幾乎一樣的grid和HTML)，在一些Material組件中比較重要的像卡片[http://daemonite.github.io/material/ui-card.html]和彈出日期[http://daemonite.github.io/material/ui-picker.html]選擇。大部分傳統(tǒng)的Material Design的元素都可以在這里找到。

Phonon致力于hybrid移動(dòng)應(yīng)用開(kāi)發(fā)。到目前為止它僅60kb大小，而且不依賴(lài)于任何第三方的插件，它可以很輕量的被用來(lái)創(chuàng)建Cordova和PhoneGap應(yīng)用。Phonton的UI組件看起來(lái)非常接近Material Design的理念。

Framework7是為了構(gòu)建hybrid這類(lèi)應(yīng)用。它讓開(kāi)發(fā)者很快的構(gòu)建web應(yīng)用并且看起來(lái)和操作上非常接近IOS和Android.為了達(dá)到這樣的效果它提供兩種風(fēng)格-一種為Apple設(shè)備，另外一種提供Material Design組件風(fēng)格樣式。

額外紅利: Material Icons

這里的圖標(biāo)集基本都是Google在web,Android和IOS用到的。這里有大量的圖標(biāo)可供選擇，而且還在持續(xù)的增加。它是完全免費(fèi)并且可以非常容易的通過(guò)Google Fonts或其它方式來(lái)實(shí)現(xiàn)。

這里提供的大部分插件和框架有很多相似的組件和特性。這取決于開(kāi)發(fā)人員根據(jù)他們自身的情況和項(xiàng)目來(lái)決定選擇如何使用。希望這些能幫助你做出正確的選擇。

如果你對(duì)站立辦公感興趣,可以關(guān)注我們的微信公眾號(hào)__[貍木匠]__進(jìn)行購(gòu)買(mǎi)

點(diǎn)擊立即購(gòu)買(mǎi) 站式辦公桌【Li-Desk】查看商品詳情介紹