随着智能手机的普及，越来越多的应用程序涌现出来，而设计好的应用程序也可以使用户更加舒适地使用该应用程序。Material Design 是谷歌公司设计出来的设计规范，它为应用程序设计提供了一个可靠的框架。本文将介绍如何使用 Material Design 设计简单、美观、易用的应用程序界面。
Material Design 概述
Material Design 由谷歌公司在 2014 年提出并发布。Material Design 是一项围绕材料的内容、颜色、图标、间距和动画的设计语言。谷歌公司推出了大量的资源，包括设计原则、颜色、类型共 3 个部分。实现 Material Design 的应用程序，开发人员可以使用谷歌现成的设计元素 (DodgeGrid) 并结合适合业务的视觉元素进行适当修改。
Material Design 的特点为：
- 扁平化设计和活泼的颜色
- 面向移动端的设计原则
- 基于方格的布局
- 突出组件、动画和颜色的使用
- 易于阅读的字体选择
实现 Material Design
1. 使用谷歌 Material 组件库
为了确保一个应用程序的 Material Design 风格，开发人员可以使用谷歌提供的 Material 组件库，该组件库为常见 UI 组件提供了 Material Design 风格。
Material 组件库目前已经支持使用原生 JavaScript、React 和 Angular 来进行实现。以下是使用 React 和 Material 组件库实现一个主页列表的示例代码：
------ ------ - --------- - ---- --------
------ - ----- -------- - ---- -------------------
------ ------ ---- ---------------------
------ --------- ---- ------------------------
------ ------- ---- ----------------------
----- -------- ------- --------- -
------------------ -
-------------
---------- - -
------ -
- ----- ---------- ------------ -- ------ ------ ----- ------ ------------------------------------------------------------------------------- --
- ----- ------ ------------ -- ------ ------ --- ------- ------ ------------------------------------------------------------------------------- --
- ----- -------- ------------ -- ------- --- --------- ------ ------------------------------------------------------------------------------- --
- ----- ---------------- ------------ -- ------ ------ --- ------- ------ ------------------------------------------------------------------------------- --
--
--
-
-------- -
----- --------- - --------------------------- ------ -- -
---- ------------
---------
-----------------------
--------------------------------
------------------- ---------------- ---
--
-------- ------------ --
------
---
------ -
-----
------
-------------- ----------------
-----------
-------
------
--
-
-某应用的主页列表
在这个示例中，我们首先从 material-ui 库中导入了 List、ListItem、Avatar、Subheader 和 Divider 等组件。定义一个包含 items 属性的 HomePage 组件。 items 属性保存了一组车辆对象，并在 render 方法中使用 map 函数来生成一个包含 ListItem 的列表及其文本和图像。Divider 指定列表之间的间隔。
2. 手动编写模块化 CSS
编写模块化 CSS 文件可以帮助我们让样式更加清晰，与其他模块或部件进行隔离。使用预处理器如 Sass 可以提高开发效率。
以下是一个使用 Sass 实现基本列表样式的示例代码
--------- -
----------------- ------
-------------- ----
----------- - ----- ---- ------- -- -- ------- - ----- ---- ------- -- -- ------
---------- ---------
------------ --
----------- --
-------------- -
------ ------- -- -- ------
---------- -----
------------ ----
------------ ---- -----------
------------- -----
-
-对于使用 Sass 的开发人员来说，这里有几个使用 Sass 优化的注意点：
- 使用嵌套规则来减少重复代码。
- 使用变量框架，定义一些共享颜色、字体和尺寸等，避免在 CSS 中大量使用颜色代码和字体大小。
结论
Material Design 提供了一个成熟的习惯和已经演化出一系列的开发规范，辅助我们设计构建良好的应用程序。在开发过程中，我们应该尽可能地遵循这些规范并且要注意自己交互体验的每一个细节，这会让用户更容易使用该应用程序，并且让它更加易于使用和管理。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67384a3f317fbffedf0f5ba6