设计师经理营销设计/图形高级初学者中级开发 Javascript

实现 Material Design 的不同方式

Stas Wolski

4.91/5 (3投票s)

2016 年 7 月 1 日

CPOL

4分钟阅读

13963

现代 Material Design 并探索其在不同 Web 框架中的实现

自 2014 年 6 月首次发布以来，由 Google 公司开发的 Material Design 理念已成为真正的现代经典。如今，设计追求的是简洁整洁的界面。现代网站和移动应用程序开发者的主要目标是让他们的创作尽可能简单且具有吸引力。简洁和鲜艳的色彩是这种方法的 S主要特征。Material Design 甚至超越了网站和移动应用。最新版本的桌面版 Google Chrome 浏览器就是按照其基本原理开发的。在本文中，我将介绍五种可以帮助您构建遵循 Material Design 范式的网站和移动应用程序的框架。我试图关注不同类型的工具，这样您就可以更容易地选择一个最符合您的意图和技能的工具。好了，开始吧。

material design

Material-UI

如果您关注最新的 Web 开发新闻，您可能知道 Facebook 开发的 React 框架最近变得非常流行。虚拟 DOM 或同构 JavaScript 等前沿功能可以为您提供高度的性能。再加上以较低的投入进行深度自定义以及高代码重用性的可能性，您就会明白为什么 React 如此受欢迎。 Material-UI 是一个实现 Material Design 原则的 React 组件集合框架。它允许两种主题——深色和浅色。文档编写得很好，并描述了所需的安装步骤。但有一点我想警告您：React 使用 JSX 语言，所以刚开始使用这个框架可能会有点不习惯。

Webix

如果您想获得一套高级的现成 UI 组件，可以尝试 Webix。与 React 不同，在自定义方面，这个框架不会给您的想象力留下太多空间。但是，Webix 为您提供了更强大的组件版本，例如树形或表格。可用的窗口小部件集从简单的按钮到更复杂的看板（Kanban）不等。掌握基本的 JavaScript 知识就足以创建布局并将所需的元素添加到您的应用程序中。文档编写得很好，并且包含许多详细的分步指南。但坏消息是 Webix 默认不支持 Material Design。要实现它，您应该使用正确的皮肤。请遵循本指南了解如何将其添加到您的项目中。

DHTMLX Suite

让我们来谈谈多功能解决方案。DHTMLX Suite 是用于构建跨浏览器 Web 和移动应用程序的 JavaScript UI 库。除了各种复杂程度的 UI 组件（如图表和日历）之外，您还可以使用一些额外的工具。其中包括表单生成器和可视化设计器，用于通过拖放方式可视化创建用户界面。从 5.0 版本开始，Material Design 已成为默认设计。因此，无需额外工作，也无需外部依赖。

Angular Material

您可能听说过 Angular 框架。如果您有 Web 开发经验，很可能已经使用过它。如果您喜欢它的功能，可以尝试 Angular Material。这是一个功能齐全的框架，得到 Google 大量资源的强大支持。Angular 的流行度和 Google 的支持共同使 Angular Material 广受欢迎且名声大噪。文档编写得很好，演示很有吸引力，API 参考也非常详细。

Materialize

如果您刚开始计划在您的项目中实现 Material Design，Materialize 可能是一个不错的起点。它的工作方式类似于 Bootstrap，可以通过 CSS 类访问元素。您可以像使用 Bootstrap 一样使用这个响应式前端框架。您只需要导入正确的 CSS 文件即可。它很容易上手，而且框架的 SASS 版本允许您选择要包含在项目中的组件。

结论

Material Design 似乎会一直流行下去。它经过精心打磨和研究。每天我们都能看到越来越多的网站和移动应用程序遵循简洁的理念。知名应用程序的新版本也紧随其后，通过新的、用户友好的 Material 设计界面吸引用户。为了保持时尚和相关性，您应该始终关注前沿趋势。而今天，其中一种趋势就是 Material Design。很难列出所有允许您在项目中实现它的框架。但我试图向您介绍不同种类的框架。有轻量级且易于学习的 Materialize，这对新手来说是不错的选择。另一方面，还有 DHTMLX Suite，它是一个包含各种工具和组件的集合。我希望您能找到最适合您需求的项目，并能够帮助您将想法变为现实。