關於 **Google 材質設計(Material Design)**發布之後,就以相當快的速度風靡全球。 從Google的 Inbox 到Google的其它專案項目,以及其他網站應用程式(Web application),例如: Telegram,都已經開始佈署Material Design的框架。

如果你想了解Material Design及它在趨勢上的訊息,可以參考 [2015 網頁設計10大趨勢預測],以及依照需求挑選適合的 Google Material 語言版本: [繁體版]、[簡體版]、[英文版]

Material Design 的特色,主要包含: 擁有全方位、簡潔、包含了UI設計哲學理念 等特性。如果你也想試著在網站上使用Material Design,則推薦使用以下的5個熱門框架:

Angular Material

今天一開始,先介紹的 [Angular Material] 似乎理所當然的登上 Material Design 框架的寶座。其中原因包括Angular本身就是知名框架,以及有Google內部的支持。 從它的說明文件中,不難發現Google想藉由 Angular Material 同時開拓Js Framework及UI Design的用戶群。

Materialize

Materialize 同樣是一個相當令人驚艷且擁有響應式設計的 Material Design 框架,並且可以和其它框架(例如:Bootstrap)共同使用。當然,它是開源的框架,同時提供了 CSS、SCSS格式,以及相關的javascript、Material Design icon及Roboto 字體。相當推薦使用喔。

Material UI

React 是Facebook 及 Instagram兩位老大哥共同開發的框架,在近年來也相當受到矚目,而目前以React為基底的框架中,最知名的就是 Material UI,並且同擁有響應式功能 。

如果你本身學習過React,那就千萬不可錯過這Material UI。如果還不熟悉 React,則這裡有提供安裝方式及相關教學 (Material Ui github)。

MUI CSS Framework

MUI CSS Framework是一個輕量等級的框架,提供了類似Bootstrap的前端開發方案。相對其他競爭者的框架,最主要優勢還是在於 MUI CSS Framework的反應速度較(稍為)快。 也因為它們專注在速度及輕量,因此在Google Material設計理念實作的並不全面。因此較推薦將它使用在小專案上。

Polymer

Google的 Polymer Project 應該是在這幾個框架中,最貼近Google Material Design 核心理念的框架。如果你想打造更貼近類似Inbox或Google風格的網站,那麼這款框架應該就相當適合你瞜。

建議

綜合以上這些框架,如果你已經熟悉 Angular Js 或 React Js,就可以直接使用 Angular Material (Angular Js)Material UI (React Js)

雖然,Material Design在未來相當被看好,但事實上,它的風格還是傾向於Google風格 (畢竟它是以Google為出發點,而不是大眾),不一定符合各個設計師的需求。但是也別太介意,因為從客觀角度來看,Material Design依然提供了相當棒的設計見解,或許,從這裡,你能找到適合自己的原件與自身的創意作品結合,或許這也是Material(材質)的最大功能,連結-然後創新。

最後,你有決定採用哪些框架了嗎? 或者你有推薦更好的框架? 歡迎在下方留言討論。

參考來源: Top 5 Material Design Frameworks to Use in 2015