推薦五個熱門 Google 材質設計框架 (Material Design Framework)

本文原位置: http://adon988.logdown.com/posts/263691-recommend-some-good-google-material-design-framework

關於 Google 材質設計(Material Design) 從2014年發布之後,就以相當快的速度風靡全球。 從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風格的網站,那麼這款框架應該就相當適合你瞜。

建議

綜合以上這些框架,假設你已經決定想在下一個專案使用Material Design,這裡則建議可以先從Materialize這個UI框架開始。如果你已經熟悉 Angular Js 或 React Js,就可以直接使用 Angular Material(Angular Js) 或 Material UI(React Js)。 雖然,Material Design在未來相當被看好,但事實上,它的風格還是太過於Google系列,或許就不一定符合多數設計師的需求。但是還是建議能夠研究這些效果,或許在不同設計理念交叉應用,又能觸碰出更豐富的火花。你說是嗎。

關於這些熱門框架,有沒有哪些已經吸引你,決定準備採用? 或者你有推薦更好的Material Design 框架?

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

转载于:https://my.oschina.net/adon988/blog/411242

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值