2021 年面向开发人员的 15 个免费材料设计框架

Google 的 Material Design 已经超出了许多设计师最初的预测，现在已成为开发移动网站、Android 应用程序和桌面软件的常用设计标准。 谷歌甚至在自己的网站构建器中实现了原生材料设计应用程序； 一个最近看起来相当丑陋和缓慢的网站，但现在能够制作出令人难以置信的漂亮网站。

你不应该盲目地遵循指导方针，因为有人说这是正确的做法。 作为设计师，您自己的判断力是您制作真实而独特的项目的最佳资产。 从材料设计中获取你认为已经可以赞美你的意识形态的东西，然后从那里创建一个构建。 您可以使用自己的个人选择来进一步完善设计体验。 谷歌在讨论和研究世界级的用户体验和用户界面元素方面当然有诀窍，但是当你想到它时——你的项目是独一无二的，你的受众人口统计和类型是独一无二的，有时你必须按照这些步骤来创建一个设计，以展现您正在构建的业务或项目的最佳价值。

您将要了解的更多框架是尝试 Material Design 的完美解决方案。 也许最好的方法是创建一个你可以在周末破解的副项目，这样就不会打扰你的主要工作流程，然后如果你觉得那里有一些联系，开始创建路线图您将来可以在您的应用程序/网站中实施材料设计。 如果我们错过了本综述的任何重要/有用的框架，请在评论中提及我们，我们会处理它。

物化

Materialize 是一个基于 Material Design 规范的成熟的前端 Web 开发框架，它是领先的 Material Design 框架之一，因为它为快速原型化现代网站提供了一个快速、集中且易于导航的核心。 该框架采用了 Material Design 所提供的东西，并将其巧妙地组合成一个单一的框架，使所有元素都可以快速、轻松地访问。 基于反馈的组件将极大地改善您的用户体验，因为用户可以更好地理解各个设计元素的含义。

由于这是一个框架，你会期望看到一些 CSS 功能，如网格合并，在这种情况下，Materialize 为你提供了颜色、网格、助手、媒体管理、sass 文件、表格管理、排版优化和元素阴影优化，以便您可以快速创建您想要构建的骨架，然后使用优化的 MD 组件将您的设计变为现实。

材料 Swift

您是一名活跃的 Swift 开发人员，但不确定如何在 Swift 应用程序中实现 Material Design？ 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 等框架中看到的内容！