前言
Material Design 是 Google 推出的一套设计语言，主要用于创建 Web、移动app 和其他数字平台的视觉和交互设计。感谢 Material Design，我们可以更轻松地设计出漂亮而实用的界面。然而，大型企业级应用与 Material Design 对接，需要更深入的思考。
本文将从设计角度、开发角度以及实际应用中考虑 Material Design 在大型企业级应用中的最佳实践。我们将给出详细的指导建议，并提供一些实用的代码示例。
设计上的考虑
在大型企业级应用中，我们需要更加注重可用性与可访问性。在 Material Design 中，设计最基本的原则是纸张和墨水。但在实际应用过程中，我们可能会遇到很多未考虑到的因素，如设计未能充分考虑到用户的需求，或者使用者的职业和认知差异等。
以下是一些考虑 Material Design 在大型企业级应用中设计时的最佳实践：
1. 处理数据可视化
在企业级应用中，大量的数据可视化是必不可少的。应该将 Material Design 界面元素运用到头部导航、浏览器和关键部件等地方，而不会使页面混乱。考虑使用数据可视化，你可以参考以下建议：
- 使用 Material Design 所提供的图表，例如 ：Bar 、Line、Area 等等。
- 如果需要新增图表，应确保该界面符合 Material Design 指南。
- 不要在一个小区中集成多个图表，因为这会使页面混乱。
2. 最适合用户的交互式组件
在大型企业级应用程序中，所有用户的行为应该是可见的、可用的和可理解的。为了达到这个目标，你可以考虑下面这些要点：
- 选择 Material Design 所规定的交互元素：如按钮，文本区和轮廓表单等。
- 如果没有 Material Design的解决方案， 一个好的选择是使用自定义样式开发。
3. 维护一致性
尽管大型企业级应用可能会有许多不同的团队，但所有的团队都应该维护一致的设计与标准。这可以使使用者更容易去处理传达过来的信息并且使用应用程序相关功能。
具体措施如下：
- 避免对现有创意作出细微更改，并尽可能地在您的设计中遵循 Material Design 指南。
- 制定组件库模板，并在项目中进行广泛使用以确保一致性。
- 勇敢地与其他团队合作，以便他们能够更好地理解你们的设计标准和目标。
开发实践
在开发大型企业级应用时，对于 Material Design，我们需要考虑更多的开发实践。接下来，我们将分享一些有关开发实践的技巧。
1. 使用 CSS
大多数 Material Design 框架都是基于 CSS 和 JavaScript 开发的。在使用框架时，我们应该考虑到以下使用 CSS 的最佳实践：
- 避免使用 !important 类。
- 避免使用 jquery 。优先使用原生js。
- 避免使用带前缀的 CSS 内联样式。
- 使用 BEM 命名约定以方便组件的归类。
2. 使用框架
Material Design 框架为大型企业级应用程序提供了很多好处。在使用框架时，我们应该遵循以下最佳实践：
- 尝试使用最受欢迎和更新的框架，例如: Angular Material、Material-UI、Vuetify等。
- 确保使用符合现代标准的框架，避免使用过时的框架。
- 不要碰框架内部，遵循框架的使用指南进行开发。
3. 使用开发工具
在开发大型企业级应用程序时，使用其他开发工具来提高效率是非常必要的。以下是我们应该使用的开发工具：
- 使用版本管理工具。建议使用 Git 。
- 使用构建工具。建议使用 Webpack 。
- 使用调试器。建议使用 Chrome Developer Tools。
实战演练
以下是一个实例，旨在演示如何应用 Material Design 在大型企业级应用中。本示例程序使用 Angular Material 完成所有的界面和交互设计。
1. 构建基础
引入 Angular Material 是非常重要的一步。在这种情况下，要求已安装 Angular Material 和 Angular。
安装 CLI 并创建一个新工程：
--- ------- -- ------------ -- --- -------------- -- --------------
安装 Angular Material 与样式文件：
--- ------- ------ ----------------- ------------ -------------------
2. 创建组件
至少需要创建一个组件以显示 Material Design 界面。以下是示例代码。
app.component.ts：
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------------ ----------------
-------- ------------------
--------------
-------------- -------- ----------------- ------------------
-------------- ----------- - -- --- -- -- -- -- ------ - - - ------------------
----------------
--
--
------ ----- ------------ --在这个组件中，我们引入 Angular Material 的 mat-toolbar 和 mat-grid-list，同时演示如何在 mat-grid-tile 中使用 *ngFor 循环。
app.module.ts：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- ---------------------------------------
------ - ---------------- - ---- ----------------------------
------ - ----------------- - ---- ------------------------------
------ - ------------ - ---- ------------------
-----------
-------- -
--------------
------------------------
-----------------
------------------
--
------------- ---------------
---------- ---------------
--
------ ----- --------- --在 app.module.ts 中，我们为应用程序引入了所有使用到的 Angular Material 模块，以及 BrowserAnimationsModule。组件 AppComponent 已经在这个模块中进行了声明。
这是一个简单的 Material Design 程序。你可以在你的代码中使用类似的方法来构建你的大型企业级应用程序。
结论
Material Design 非常适合大型企业级应用程序。不仅提供了一套完整、美观和易于使用的设计语言，还有许多工具和框架可以使用。在实际应用时，需要从设计和开发方面考虑如何最好地利用 Material Design 的特性。
希望本文所介绍的最佳实践，能够对你的大型企业级应用程序设计与开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6714c847ad1e889fe215c969