2021 年面向開發人員的 15 個免費材料設計框架

Google 的 Material Design 已經超出了許多設計師最初的預測，現在已成為開發移動網站、Android 應用程序和桌面軟件的常用設計標準。 谷歌甚至在自己的網站構建器中實現了原生材料設計應用程序； 一個最近看起來相當醜陋和緩慢的網站，但現在能夠製作出令人難以置信的漂亮網站。

你不應該盲目地遵循指導方針，因為有人說這是正確的做法。 作為設計師，您自己的判斷力是您製作真實而獨特的項目的最佳資產。 從材料設計中獲取你認為已經可以讚美你的意識形態的東西，然後從那裡創建一個構建。 您可以使用自己的個人選擇來進一步完善設計體驗。 谷歌在討論和研究世界級的用戶體驗和用戶界面元素方面當然有訣竅，但是當你想到它時——你的項目是獨一無二的，你的受眾人口統計和類型是獨一無二的，有時你必須按照這些步驟來創建一個設計，以展現您正在構建的業務或項目的最佳價值。

您將要了解的更多框架是嘗試 Material Design 的完美解決方案。 也許最好的方法是創建一個你可以在周末破解的副項目，這樣就不會打擾你的主要工作流程，然後如果你覺得那裡有一些聯繫，開始創建路線圖您將來可以在您的應用程序/網站中實施材料設計。 如果我們錯過了本綜述的任何重要/有用的框架，請在評論中提及我們，我們會處理它。

物化

Materialize 是一個基於 Material Design 規範的成熟的前端 Web 開發框架，它是領先的 Material Design 框架之一，因為它為快速原型化現代網站提供了一個快速、集中且易於導航的核心。 該框架採用了 Material Design 所提供的東西，並將其巧妙地組合成一個單一的框架，使所有元素都可以快速、輕鬆地訪問。 基於反饋的組件將極大地改善您的用戶體驗，因為用戶可以更好地理解各個設計元素的含義。

因為這是一個框架，你會期望看到一些 CSS 功能，比如網格合併，在這種情況下，Materialize 為你提供了顏色、網格、助手、媒體管理、sass 文件、表格管理、排版優化和元素陰影優化，以便您可以快速創建您想要構建的骨架，然後使用優化的 MD 組件將您的設計變為現實。

材料 Swift

您是一名活躍的 Swift 開發人員，但不確定如何在您的 Swift 應用程序中實現材料設計？ CosmicMind 的材料可以毫不費力地處理所有這些。 使用這個 Swift Material 框架/庫，您可以使用 MD 組件並擁有完整的配置訪問權限，提供了複雜的移動應用程序界面通常需要的網格佈局，您可以獲得可用於製作獨特 UI 的標準圖層和視圖成分。 其他功能包括控制導航、材料設計圖標、按鈕、卡片、開關和用於構建動畫導航菜單的菜單系統的能力。 除了作為傳統的移動應用程序框架之外，Swift Material 實際上自稱為動畫框架，它在允許開發人員構建依賴於流暢動畫的佈局以豐富用戶體驗方面做得非常出色。

材料框架

Material Framework 使將材料設計插入現有設計變得非常容易。 它是一個基於純 CSS 的完全響應式框架。 您真正需要做的就是將 CSS 樣式表文件附加到您的主要網站樣式文件夾，然後您就可以開始使用了。 該框架提供了深色和淺色配色方案的選擇，您可以通過特定的 CSS 類應用它們，或者也可以使用 JavaScript 來設置您想要使用的主題。

可以使用不同的動畫效果，例如向現有表單添加漣漪，以創建更有意義的用戶體驗。 您可以根據自己的喜好自定義排版佈局，並且您可以調整內容的外觀，因為它最適合您的其他設計元素。 您可以更改現有樣式以使用按鈕、輸入、工具欄、圖標、列表、菜單、卡片設計和切換等事物的設計規範。 啟動並運行它並不難，並且可能是一種很好的方式來測試您的用戶是否會喜歡 Material Design。

本質

Essence 結合了兩件事：Material Design 和 React.js — 如果您正在尋求具有最佳設計規範的快速 Web 性能，那麼 Essence 為所有開發人員提供的產品將難以匹敵。 如果您決定選擇 Essence，則 Material Design 必須提供的所有 UI 組件都將通過 React.js 重建！ 最終結果是令人驚嘆的用戶界面元素選擇，它將創造獨特的用戶體驗。 Essence 在 NPM 上隨時可用，因此您可以使用簡單的安裝命令安裝並開始使用。 組件需要單獨安裝和使用，但無論如何都在同一個文件夾下。

溫泉界面

Onsen UI 作為使用 HTML5 構建移動應用程序的最佳混合框架之一而享有盛譽。 這個開源平台是完全免費的，而且一直都是，對優秀設計的現代理解幫助 Onsen UI 開發人員創建用戶界面元素，最終構建無與倫比的用戶體驗。 作為一個不可知的框架，您可以將 Onsen 與任何其他框架一起使用，而不必擔心任何代碼衝突或任何問題。 這也是新的 Onsen UI V2 中發生的事情——它們集成了 Material Design、Angular 2 和 React 組件以進一步豐富體驗。 目前仍然是一個候選版本，但已經被數千人使用。 如果您一直打算推出移動產品或進入移動軟件開發，那麼學習如何使用 Onsen UI 可以為您的簡歷增添一些額外的影響力。

材質 CSS

Material CSS 是一種輕量級的替代方案，它使用屬性來定義樣式，而不是使用類。 這使得開發工作流程更加輕鬆，當然也更加簡單​​。 由於最小的性質，您實際上將主要使用組件本身，這些組件包括顏色、排版、陰影、波紋、圖標、輸入、表單、按鈕、媒體、卡片、面板、工具欄、列表、頁面，和幫手。 Material CSS 徹底解釋了文檔中的每個特定組件，以及如何使用它。

材料設計精簡版

Material Design Lite 是另一種輕量級解決方案，可使用材料規格優化您的設計。 在依賴靜態內容的網站上輕鬆工作，但在動態網站中實施也不成問題。 它是一個獨立的 CSS 庫，不需要任何類型的外部資源即可運行。 內置多設備優化，如果舊版本的瀏覽器嘗試訪問該站點，它自然會降級。 您可以選擇博客模板之類的模板來啟動您的博客，或者使用 Android 官方網站正在使用的精簡版主題，還有用於在您的網站後面實施的儀表板模板，一個展示您最佳作品的現代作品集，和內容頁面的文本優化模板。 所有其他的東西，比如組件和样式，都是你已經期望從使用材料設計的框架中得到的。

表面

似乎很多開發人員都在鍛煉自己製作框架的能力，Surface 是另一個輕量級（在這種情況下是真正的輕量級）框架，最終縮小後大小約為 6kb。 它還基於純 CSS，因此您根本不必使用 JavaScript。 首先轉到 Surface 文檔並了解 Surface 網格的工作方式，這樣您就可以更輕鬆地獲得板上的所有組件。 動畫、警報、磁貼、可折疊元素、頁腳、模態、媒體、實用程序和工具提示等組件。 開發人員將這一切組織得井井有條，比從 100 倒數到 1 更容易設置。

材質界面

Material-UI 為您提供了一系列 React.js 組件，它們已經根據 Material Design 規范進行了定制。 關於 Material-UI 和使用它的想法有一個最重要的事情。 您應該首先了解更多關於 React.js 以及它通常如何與 Web 和移動設備交互的知識。 由於組件基於 React，因此了解 React 在 Web 開發中的地位以及它在其中扮演的角色是明智之舉。 Material-UI 團隊也很友好地提供了模板選擇，深色和淺色，兩者都提供了不同組件和元素如何適應網格的示例。

一些以前看不見的組件包括應用程序欄、表單自動完成、頭像、徽章、芯片、日期選擇器、對話框、分隔符、菜單抽屜、網格列表、文本字段、時間選擇器和不同種類的工具欄； 這些只是該框架中可用的部分組件。

多媒體界面

MUI 是一個豐富的輕量級 CSS 框架，它可以使用 Google 的材料設計來豐富您的設計。 它為用戶提供了不同類型的演示佈局：博客、登錄頁面、滑塊菜單和 HTML 通訊訂閱框。 僅從這些演示中，開發人員就可以了解材料設計的效率以及實現它的難易程度。 MUI 還適用於 React.js 和 Angular.js 框架，因此您可以輕鬆地將材料插入您的應用程序。 還有不同的單獨 Web 組件，都可以使用。

角材料

Angular Material 是用於 Angular 2 項目的 Material UI 的官方版本。 您有一個詳盡而簡潔的文檔頁面。 它可以向您展示在融入 Material 用戶界面時您的應用程序的外觀有多美。 所有組件都提供了深入的示例和附加選項。 有了這個，您可以充分利用該框架所提供的功能。 為希望將材料提升到更高水平的經驗豐富的開發人員提供了 API 文檔。

Bootstrap 的材料設計

Bootstrap 無疑是世界上許多前端開發人員的最愛。 如今，Bootstrap 為數百萬個網站提供了支持，還有數百萬個網站尚未到來。 Bootstrap 的 Material Design 是一個高效的 Bootstrap 主題，它使用 Material Design 來創造壯觀的設計體驗。 您可以從所有現有的、最喜歡的 Bootstrap 元素中進行選擇。 另外，你可以用 Material Design 的 UI 優化它們，那有多棒？ 對於那些以前沒有使用過 NPM 的人來說，它可能需要一些修補才能讓它運行起來。 文檔似乎很好地解釋了啟動過程。

明信

LumX 是第一個基於 AngularJS 和 Google Material Design 規範的響應式前端框架。 它提供了一個用 Sass 和一堆 AngularJS 組件構建的完整 CSS 框架。 為了使用 LumX，您需要知道如何使用 Bower 來安裝庫。 如果您不熟悉 Bower，另一種選擇是單獨下載所有依賴項。 其中包括 Angular、jQuery、Velocity、Moment、Bourbon 和 Material Icons。 LumX 還使用 Flexbox 來使用 Flexbox 屬性創建標準化和響應式的網格系統。 LumX 組件涵蓋傳統網站佈局設計的任何區域和部分。

離子材料

Ionic 是用於構建 HTML5 移動應用程序的終極混合框架。 現在，通過 Material Design 的注入，可以將所有這些非凡的功能帶到您的應用程序中！ Ionic 為您的應用程序提供已經構建的佈局，包括活動源和類別。 它還可以幫助您處理功能列表、圖庫、常規列表、登錄頁面和個人資料頁面。 您可以快速引導您的通用應用程序界面的演示，然後在其上構建您的軟件。 離子材料是無縫主題化的。 Ionic Material 主要是一個行為庫，使用 Ionic 的顏色命名約定和元素類。 詳細到規格的像素，離子材料旨在遵循谷歌關於運動、墨水和深度的指導方針。 隨著新組件和佈局添加到庫中，您已確保對材料設計規範的質量關注。

聲子

Phonon Framework 為使用混合框架技術構建 HTML5 移動應用程序提供了簡潔的解決方案。 Phono 強大的一面是其良好的直覺，可以快速將應用程序擴展到您想要的位置。 它也是一個用戶界面庫，可為您提供即時製作界面的快速工具。 完全縮小和優化後，Phonon 的大小大約為 24kb。 這是移動開發人員使用 Phonon 的主要原因之一。 這遠低於您在 Ionic 或 Onsen 等框架中看到的內容！