Material Design 是由谷歌提出的一种视觉设计风格，旨在提高设计的可理解性和一致性，使得应用程序、网页和其他数字作品更加生动、更加自然。Material Design 给用户带来了直观、跨平台和逼真的数字体验。在本文中，我们将介绍 Material Design 的基本原则和如何将其应用到前端开发中。
基本原则
Material Design 的基本原则是通过不断演进和更深入的技术调整来优化用户界面设计。这个设计语言的基本原则有以下几个方面：
- 科技的基础：Material Design 建立在纸张和墨水的理念上，将现实世界中的物体复制出来，成为具有3D感的元素，这样可以使用户更加亲切，更加直观地理解 web 页面。
- 一致性：不同页面的元素之间需要保持连贯性。这样，用户可以更容易地预测下一个交互的动作，因为他们已经看到过相同的控件或布局。
- 自然的移动：Material Design 将元素的运动视为移动的自然延伸。移动元素使它们在三维空间中成为有机的实体，用户可以更好地理解和在它们之间导航。
- 有意义的图标和颜色：Material Design 中的图标和颜色被认为是指令的重要组成部分。用途明确的图标和色彩有助于页面的理解和视觉定位。
- 材料的进步：Material Design 的基本思想是不断进步。它的目标是超越纸张和墨水般的习惯，成为有潜力的视觉系统。
理解这些原则是通往 Material Design 成功的关键。
应用原则
虽然 Material Design 的基本原则已经很好地解释了设计语言，但是在实际中使用的时候需要有具体的指导。下面是一些可以帮助你更好地应用 Material Design 的实用原则：
- 保持简洁：Material Design 是构建在简单和直观上的。在设计时去掉所有繁琐的东西。
- 强调交互元素：在设计时，重要的按钮、切换、滑动控件等都应该尽量突出。
- 整洁透明：Material Design 偏向于减少复杂的图形元素，而是让动画和过渡来展示两部分之间的关联。
- 要有成体系的设计：在 Material Design 的范围内，使用不同的元素和组件来构建你的应用程序或网页，这会帮助你将设计组织成有组织的单元。
- 对要传达的信息有明确的目标：Material Design 中的所有元素和组件都应该具有特定的目的。确保它们契合没有“某个东西看起来很酷”的想法。
- 注意阴影和深度：在 Material Design 中，阴影被用来表示材料的高度和深度。在将元素放置到页面上时，要确保它们的阴影环境符合 Material Design 的规范。
案例分析
下面是一个 Material Design 案例的实际代码。这篇文章可以根据Material Design的指导原则进行讲解，还包含代码示例。
我们首先在<head>中引入 Materialize.css，这是一个使用 Material Design 的 CSS 框架：
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> </head>
然后，在<body>元素中，我们可以使用 Materialize 中的任何组件，如以下 <nav>：
-- -------------------- ---- -------
------
-----
---- --------------------
-- -------- ---------------------------
--- --------------- ------------ ----------------------
------ ----------------------
------ ----------------------------
-----
------
------
-------很显然，在这个 nav 中，Material Design 的主要原则 “保持简洁”已经得到了有效的体现。其他的 Material Design 原则，如颜色、布局和阴影等，也可以在组件中被发现。
结论
Material Design 作为一种主流设计语言，是前端开发的一个重要方面。它包含了一套规范，可以确保页面的直观性、连贯性和自然性。如果你希望跟上最先进的设计趋势，就应该开始使用 Material Design，并将 Material Design 的感受应用于你的设计中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6775207b6d66e0f9aaf4060d