Material Design 中专有名词的理解及应用举例
一、前言
Material Design 是由 Google 在 2014 年推出的一种设计风格，它强调物理感（即实体的感觉）和阴影的使用，简洁的设计语言和动画效果，有助于用户与应用程序的快速交互和导航。在 Web 前端开发中，我们可以使用 Material Design 作为 UI 设计和前端开发的参考。
在本文中，我们将介绍 Material Design 中的各种专有名词，并以举例方式来说明如何使用它们来改善网页设计的体验。
二、专有名词的解释
- Card
在 Material Design 中，Card 是一个独立的 UI 元素，它代表了一张卡片或面板，可以包含图像，文本或其他对象。Card 的外半径左右留出一定的边距，用于使其与其他元素分隔开来。
示例代码：
<div class="card">
<div class="card-header">Card Title</div>
<div class="card-content">
Content goes here
</div>
<div class="card-footer">Footer content goes here</div>
</div>- Button
Button 是 Material Design 中直截了当的操作元素。它可以包含文本，图标和其他视觉效果。Button 的点击区域和形状都很明显，并且他们的交互方式是很明显的，通常规定鼠标悬停来表示将要预览的区域。
示例代码：
<button class="mdc-button mdc-button--raised"> Click me </button>
- Elevation
Elevation（高度、海拔）用于决定不同元素之间的 Z 轴关系，通常情况下，Elevation 的值越高，元素之间的 Z 轴距离就越大，这将导致元素的阴影变得更加明显。
示例代码：
<div class="elevation-1"> This element has an elevation of 1. </div>
- Floating Action Button (FAB)
Floating Action Button（浮动操作按钮）是一个圆形按钮，可以增加对话框、填充表单等交互感应的便利，这个元素通常作为 Material 应用程序的主要活动，它既站在用户视线的焦点，也是与用户的交互的中心。
示例代码：
<button class="mdc-fab material-icons"> <i class="material-icons">add</i> </button>
- Icon
Icon（图标）在 Material Design 中扮演着极为重要的角色，它让用户可以快速区分应用程序中的元素和动作，并提高可用性。 Material Design 提供了丰富的图标库，以及多个图标大小和主题。
示例代码：
<i class="material-icons">face</i>
- Ripple
Ripple（涟漪）是一种动画效果，在 Material Design 中，用于在用户与应用程序的互动方面提供视觉反馈。 Ripple 的外观和行为可以通过 CSS 自定义。
示例代码：
<button class="mdc-button mdc-button--raised"> <span class="ripple"></span> Button </button>
三、如何应用这些名词
在实际开发中，我们可以使用这些名词来改善我们的网页设计风格，并提高用户交互的体验。下面是应用这些名词的实例：
- 使用 Card 元素来创建带有圆角和阴影的面板：
示例代码：
-- -------------------- ---- -------
---- -----------------
---- -------------------------
--- ------------------------------- -- --- ---------
------
---- --------------------------
---
---- -- ----- --- --- --- ---- ------------ ----
----
------
---- --------------------------
------- ----------------- ----------------------- -------------
------
------- 使用 Button 元素来创建易于导航的菜单：
示例代码：
<button class="mdc-button"> <i class="material-icons">menu</i> </button>
- 使用 Elevation 来创建按钮元素的阴影效果：
示例代码：
<div class="mdc-button mdc-elevation--z2"> <span class="ripple"></span> Button </div>
- 使用 FAB 元素创建具有强烈交互感受的应用程序：
示例代码：
<button class="mdc-fab">
<span class="mdc-fab__icon">
<i class="material-icons">add</i>
</span>
</button>- 使用 Icon 为按钮、菜单等元素增加说明：
示例代码：
<button class="mdc-button"> <i class="material-icons">favorite</i> Add to Favorites </button>
- 使用 Ripple 为按钮和链接元素提供视觉反馈：
示例代码：
<a class="mdc-button" href="#"> <span class="ripple"></span> Link </a>
四、总结
在本文中，我们介绍了 Material Design 中的一些专有名词，包括：Card、Button、Elevation、Floating Action Button、Icon 和 Ripple，并以实例的方式说明如何使用它们来改善网页设计的体验。希望通过本文的学习，读者可以在他们的前端开发工作中更好地使用 Material Design，并为他们提供更好的用户交互体验。如果你有任何问题或意见，请在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e08b70f6b2d6eab3ba4674