超實用!9個目前流行的MATERIAL DESIGN前端框架

2021-01-21 站長之家

谷歌推出的Material Design風格已見有一些APP UI採用,視覺和交互體驗都很棒,對於想嘗試這個風格但又不懂實現一些效果的前端設計師們,可以試試今天分享的9個目前流行的Material Design前端框架 。

這些前端框架的設計元素齊全,按鈕、表單、布局及常用JS特效代碼也有齊了,支持Responsive Design,還有的可以結合Bootstrap使用,相當不錯,下面來看看介紹,並挑選一款你喜歡的Framework來製作你的新項目吧。

個別網站得搭梯子訪問 :

Materialize

Materialize 是一個響應式的前端框架,設計樣式及組件元素豐富。

Material UI

(可能得搭梯子)

Material UI 和上面的框架差不多,另外值得一提就是它自帶的響應式日期選擇很棒哦。

MUI

MUI 是一個輕量級的Material Design框架,它的CSS和JS壓縮版加起來不超過10KB,作者還提到可以用MUI的CSS來創建郵箱模板,支持流行的郵箱(如:Gmail,Apple Mail,Outlook等)

Daemonite

Daemonite ,輕量級。

LumX

(可能得搭梯子)

LumX 這個前端框架主要是使用了Angular JS,針對手機端有不錯的體驗,如果懂Angular JS的建議使用這個框架。

Framaterial

Framaterial 這個框架小編體驗的時候,有的JS效果在桌面端感覺有點卡頓,動畫不夠流暢,但總體還是不錯,有很豐富的組件元素。

Material Framework

Material Framework 這個前端框架有2組風格,一個是默認白色以及暗色調,缺點就是組件元素目前還不夠多。

Material Foundation

如果你懂得使用Foundation,那麼這個前端框架可以選擇了,直接為你的Foundation換膚。但組件還是有點少了。

Material Design For Bootstrap

Material Design for Bootstrap 對於不想再去花時間了解新框架,並喜歡使用Bootstrap 的用戶,那麼你就用它吧。

相關焦點

  • material2 發布 7.1.0,Angular 的 Material Design 風格框架
    Angular 的 Material Design 風格框架 material2 發布了 7.1.0 版本,這主要是一個 bug 修復版本,當然也提供了新特性和改進性能。
  • material2 發布 7.0.1,Angular 的 Material Design 風格框架
    Angular 的 Material Design 風格框架 material2 發布了 7.0.1 版本,這主要是一個 bug
  • Material UI 1.0.0 正式發布,Material Design 實現框架
    歷時兩年,經過 20 多個 alpha 版本,40 多個 beta 版本和 2 個 rc 版本,Material UI 終於迎來 1.0.0 正式版本。
  • Vuetify - 廣受歡迎的 Material Design 風格的開源 UI 框架
    全世界範圍內廣受歡迎的 Vue UI 框架,一個非常精緻的 Material Design UI 套件。Material Design 風格 UI 框架Vuetify 是一個基於 Vue.js 精心打造 UI 組件庫,整套 UI 設計為 Material 風格。
  • 關於在iOS當中實踐Material Design的訪談
    在所有這些app當中,我個人覺得Google Play Music算是集大成於一身,包括通過動效引導用戶與界面進行互動、通過簡潔的界面框架使內容本身得到最大化的呈現等一系列基本設計原則都得到了淋漓盡致的體現
  • React、Angular和Vue三種最流行的前端框架哪一個最好?
    這是三種最流行的工具,可以幫助開發人員構建Web應用程式。仔細閱讀,看哪一個最適合您的需求。在當今的發展世界中,技術發展非常迅速並且變化迅速,許多開發工具似乎可以解決不同的開發問題。在本次討論中,我們將比較三種最受歡迎的前端開發技術 - Angular,React和Vue。我們正在根據項目架構或者從開發人員的角度來討論這種比較,他們將為新項目選擇技術。
  • Web前端三大主流框架是什麼?
    前端框架對於前端開發的好處是顯而易見的,比如減少代碼中因失誤產生的bug,還能大大節約時間和人力成本,縮短開發周期等等。目前,市面上Web前端三大主流框架分別指的是Angular、React和Vue,在Web前端開發中,它們平分秋色,各有優劣。
  • Material design與iOS Human Interface Guidelines對比分析
    本篇分析對比是基於各自官網最新的Material design與iOS Human Interface Guidelines文檔,官方文檔地址將在文末給出,供各位交流學習。MD文檔中共有10個一級目錄,其中動態效果,風格,布局,要素以及模式這5個方面從本質而言都是對軟體的視覺表現效果進行約束。例如動態效果中,文檔對material變形的動態效果就作出了嚴格規定,輻射變換適用於圓形至方形而不能用於兩個相似的形狀。而在HIC文檔的11個一級目錄中,僅在「視覺設計」,「bar」,「視圖」與「控制」這四個主題中存在著對軟體的視覺表現效果進行規範。
  • 英語老師劉滄龍教你15個超實用的流行英文
    川北在線核心提示:原標題:英語老師劉滄龍教你15個超實用的流行英文 這是個信息大爆炸的時代,為了緊隨時尚的步伐,在這個大時代裡的我們一不小心就成了低頭族。吃飯、走路、睡覺、坐公交、擠地鐵離不開手機。幾天不玩手機不上網,和別人聊天時就會發現自己成了out man!
  • 【NEXT Collections】關於實踐 Material Design 的三個問題
    要想清楚這個決定,那 Material Design 是什麼、為什麼要採用 Material Design 以及在自己的產品中怎樣實踐 Material Design 會成為首先要回答的三個問題。 Material Design 是什麼? 這裡不再贅述,Material Design 的官方設計文檔就是最好的答案。
  • 扁平化設計與Material Design區別在哪裡?
    兩種相似的設計風格,一個基於另一個。一個是新熱事物,另一個,有人猜測,已經以自己的方式成為一種時尚。一個是自發的——適應設計的趨勢,另一個卻是有目標——專用的設計指導規範。你可能明白了扁平化與Material Design之間的衝突了。
  • 哈爾濱前端移動框架Angular
    哈爾濱前端移動框架Angular!哈爾濱前端移動框架Angular.js!Angular.js是一個功能齊全的框架,支持Model-View-Controller編程結構,非常適合構建動態的單頁網絡應用程式。
  • Google 來做你的網站主美,輕鬆實現 Material Design 設計風格
    近日 Google 發布了前端開發語言框架 Material Design Lite (MDL),包含一些符合其設計風格的按鈕、複選框、輸入區、排版樣式、以及對應的網格系統和自適應排版系統。與 Twitter 推出的 Bootstrap 類似,MDL 是為了幫其他開發者快速實現統一的網站風格。
  • Axure實現Material Design的按鈕波浪特效
    最近在寫一個谷歌材料設計 Material Design風格的WEB產品,在開發過程中將產品原型做成了Axure元件庫,當然目前沒有完全完成(2)Axure提供了【當前窗口打開鏈】的接口,通過這個接口可以直接加載Javascript,它提供了Axure和前端代碼直接交互的能力,正因為這樣,Axure在前端樣式和交互上有了更加廣闊的擴展空間。
  • 使用前端框架Foundation 4來幫助簡化響應式設計開發
    使用前端框架Foundation 4來幫助簡化響應式設計開發 Foundation是一套使用廣泛的前端開發套件,可以幫助你快速的網站。
  • 上微前端後,我司的祖傳代碼有救了
    在愛奇藝號近幾年快速發展的過程中,他們意識到了一些問題——現代流行的前端框架在部署時都會將所有的依賴統一打包,而在業務急速擴展時,包的大小也會急速膨脹,導致上線效率越來越差,更不用說開發時的各種代碼衝突、不同團隊間的合作開發問題了,於是他們開發了一套微前端架構,並且成功應用到了多個重要業務中。每次都重新部署主應用,極大地提高了上線效率。
  • Material Design 有什麼缺點?
    成功的視覺效果FAB 對 Google design 是個很好的視覺突破。平面設計中的「點線排列」概念,是一個非常靈活和突出的「點」元素,而這種強大元素的界面設計在很難出現之前。在標題的第四個截圖中,有一個「只是另一個圖標」的嫌疑。我沒有測試和數據,但還是讓我有點擔心。以上內容由百度派作者提供
  • 5分鐘看懂,未來1年的web前端新趨勢,都在這了!
    展望未來的同時,必然是在總結過去的基礎上進行,所以我們現在快速回顧一下:2018年的web前端開發的重要新聞、重要事件和JavaScript的各種流行框架、模式發展趨勢。快速回顧,也就可能有難免的錯誤之處,畢竟只是突出重點,如果不當之處,敬請指正和留言討論。
  • Vue+Axios+Vuex+Vux+Vue-Router全家桶搭建前端框架
    不知從何時起,前端開發變成一件工程化的事情,曾經的紅極一時的Jquery如今也慢慢退出歷史的舞臺,取而代之的是更前沿的技術;前端框架層出不窮,Angular 2+,React + Redux,Dojo 2,Vue。。。等等,太多了,那我們如何在這繁雜的框架中選擇一個合適的呢?
  • 通用深度學習框架:預測材料相形成
    來自中國北京科技大學和英國萊斯特大學的Huadong Fu和Hongbiao Dong研究組提出了一種可應用於小型數據集的通用且可移植的深度學習框架(GTDL),用於預測材料成相。GTDL框架在玻璃形成能力和高熵合金案例研究中的應用表明, GTDL優於目前的模型,嵌入數據中的元素周期表等信息以及不同模型之間共享的信息,使得基於小型數據集的預測成為可能。