Material Design 是 Google 发布的一套设计语言，旨在为应用程序提供一致的外观和体验。离线操作、平稳的动画效果，以及无缝的过渡是 Material Design 的主要特征。随着越来越多的开发者开始使用 Material Design，本文将介绍如何在实践中应用 Material Design，并提供一些注意事项和技巧。
Material Design 的基础
要开始使用 Material Design，必须先了解其核心组件和原则。Material Design 包括许多基础组件，如按钮、卡片、图标等等。此外，Material Design 还涵盖了动画、路由等概念，开发人员应该清楚它们的使用方法。
以下是一些应用 Material Design 时需要注意的事项。
1. 精简设计
Material Design 的理念是简单、明了、直观。开发人员应始终采用简单的设计手法，以确保用户能够更快地理解和使用您的应用程序。这意味着组件和屏幕元素的数量应该尽可能地少，同时确保主要内容不会被隐藏或忽略。
2. 设计一致性
Material Design 支持在应用程序中实现一致的设计和交互。因此，在设计应用程序时，应该考虑到所有用户的需求，并确定如何被触摸和使用。这样一来，用户将能够对应用程序中的不同部分进行有效的导航、交互、查找和使用。
3. 使用色彩
Material Design 中的颜色非常重要，因为它们可以应用在页面的不同元素中，例如按钮、输入框、卡片等等。应该选择明显的颜色和高对比度，以确保页面的可读性和可点击性。例如，可以使用 color palette（颜色板）提供的预定义的颜色，或者使用 material design website（Material Design 官网）的颜色工具自定义颜色。
4. 考虑移动端
最近一些研究表明，在全球范围内使用移动设备访问互联网的用户数量已超过桌面设备。因此，在设计和开发应用程序时，要考虑用户访问应用程序的设备类型。Material Design 其中一个基本原则是制作可访问性和响应式的应用程序，因此，Material Design 应用程序应该在所有屏幕大小上具备一致的体验。
5. 思考动画
器官运行、突出重点和状态转换是 Material Design 其他主要元素。动态效果应该扮演 Material Design 应用程序中的关键角色，为用户提供有效的反馈和可视化。开发人员应该研究 Material Design 中提供的动画并了解哪些动画适用于特定设置和区域。
6. 熟悉 Material Design 规范
最后，开发人员应该熟悉 Material Design 的规范，以了解如何将其应用于实际项目中。Material Design 具有详细的设计和交互指南，可以在其网站上找到。熟悉这些规范将使开发人员更加容易制作出符合 Material Design 标准的应用程序。
示例代码
以下是一个基于 Material Design 的登录页面示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------
----- ---------------- ---------------------------------------------------------------
----- ---------------- -----------------------------------------------------------------
------- ----- ------------------------------------------------------------
-------
------
---- ----------------- ------------- ---------------------
----- ----------------------------
---- --------------- -----------------
---- ---------------------- ------------------ -----------------------
--- ------------------------------------
------
---- ----------------------------------
----- -----------
---- -------------------- ------------------
------ ---------------------------- ----------- ---------------
------ ---------------------------- --------------------------
------
---- -------------------- ------------------
------ ---------------------------- --------------- ---------------
------ ---------------------------- -------------------------
------
-------
------
---- ------------------------ ------------------
------- ----------------- ------------------- ------------- ----------------------
--
---------
------
------
-------
------
-------
-------在此示例中，我们使用 Material Design Lite 库来创建一个简单的登录页面。这个页面包含一个卡片、一组文本框和一个登录按钮，样式与 Material Design 的指南一致。
结论
Material Design 是一种流行的设计语言，可以用来开发各种应用程序和桌面网站。在应用 Material Design 时，开发人员应该注意精简设计、设计一致性、使用色彩、考虑移动端、思考动画和熟悉 Material Design 规范。使用 Material Design Lite 库，可以轻松地创建符合 Material Design 标准的页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67764bfa6d66e0f9aa1e2a18