Material Design 是 Google 推出的设计语言，旨在统一不同平台上的用户体验。在前端开发中，使用 Material Design 可以为用户带来更加直观、自然、无缝的交互体验。本篇文章将介绍 Material Design 中 5 种基本元素的使用技巧及适配方式，旨在帮助开发者更好地应用 Material Design。
1. 按钮（Button）
按钮是 Material Design 中常用的基本元素之一，常用于页面跳转、提交表单等操作。在 Material Design 中，按钮主要有以下两种类型：平面按钮（Flat Button）和凸起按钮（Raised Button）。
平面按钮（Flat Button）
平面按钮的特点是扁平化、无边框且无投影效果，通常在一些较为简单的操作中使用。在 Material Design 中，平面按钮的颜色应为页面的主题色、强调色或者是与背景颜色鲜明对比的颜色。
<button class="md-flat-button md-primary">Primary</button> <button class="md-flat-button">Plain</button>
凸起按钮（Raised Button）
凸起按钮的特点是有明显的投影效果和凸起效果，能够更加醒目地吸引用户的目光。在 Material Design 中，凸起按钮的颜色同样应为页面的主题色、强调色或者与背景颜色鲜明对比的颜色。
<button class="md-raised-button md-primary">Primary</button> <button class="md-raised-button">Plain</button>
适配方式
在使用按钮时，应根据不同的浏览器或移动端设备进行适配。常见的适配方式包括：
- 对于不支持阴影效果的浏览器，使用 CSS3 实现表现类似的效果；
- 对于不支持圆角效果的浏览器，使用 JavaScript 实现表现类似的效果；
- 对于移动端设备，应注意调整按钮的大小和间距，以满足用户的手指大小及操作习惯。
2. 卡片（Card）
卡片是 Material Design 中常见的页面组件，用于显示一些相关信息，如商品、新闻、文章等。在 Material Design 中，卡片通常使用阴影效果来显示出层次感，并使用圆角效果来显示柔和的风格。
-- -------------------- ---- -------
---- ----------------
---- -----------------------
---- -----------------------------
---- -------------------------- -----------
------
---- ---------------------------- -------------
---- ------------------------
------- --------------------- ---------------------------
------- --------------------------------------
------
------适配方式
在使用卡片时，应注意以下适配方式：
- 对于不支持阴影效果的浏览器，使用 CSS3 实现表现类似的效果；
- 对于不支持圆角效果的浏览器，使用 JavaScript 实现表现类似的效果；
- 对于移动端设备，应注意卡片大小和间距的适配，以满足用户的手指大小及操作习惯。
3. 文本框（Textfield）
文本框是 Material Design 中用于输入文本的组件，能够方便地将用户输入的数据提交到后端处理。在 Material Design 中，文本框使用圆角风格，并配以阴影效果和动画效果，能够更好地吸引用户的关注。
<div class="md-textfield"> <label>Username</label> <input type="text"> </div> <div class="md-textfield"> <label>Password</label> <input type="password"> </div>
适配方式
在使用文本框时，应注意以下适配方式：
- 对于不支持圆角效果的浏览器，使用 JavaScript 实现表现类似的效果；
- 对于移动端设备，应注意调整文本框的大小和键盘的样式，以满足用户的手指大小及操作习惯。
4. 菜单（Menu）
菜单是 Material Design 中用于展示一组选项的组件，能够方便地进行导航和操作。在 Material Design 中，菜单通常使用纸片风格，并通过动态效果来吸引用户的目光。
<div class="md-menu"> <div class="md-menu-header">Menu Header</div> <div class="md-menu-item">Menu Item 1</div> <div class="md-menu-item">Menu Item 2</div> <div class="md-menu-action"><button class="md-flat-button">Action</button></div> </div>
适配方式
在使用菜单时，应注意以下适配方式：
- 对于不支持动态效果的浏览器，使用 CSS3 或 JavaScript 实现表现类似的效果；
- 对于移动端设备，应注意适配横向和竖向的菜单，以满足不同场景的需求。
5. 悬浮操作按钮（Floating Action Button）
悬浮操作按钮是 Material Design 中用于提供页面主要操作的组件，它通常固定在页面底部，并有明显的动态效果。在 Material Design 中，悬浮操作按钮通常使用圆形图标并配以阴影效果，能够更好地吸引用户的关注。
<div class="md-fab md-fab-primary"> <i class="material-icons">add</i> </div> <div class="md-fab md-fab-secondary"> <i class="material-icons">delete</i> </div>
适配方式
在使用悬浮操作按钮时，应注意以下适配方式：
- 对于不支持圆形图标的浏览器，使用图片或字体图标实现表现类似的效果；
- 对于不支持阴影效果的浏览器，使用 CSS3 实现表现类似的效果；
- 对于移动端设备，应注意调整按钮的大小和间距，以满足用户的手指大小及操作习惯。
结论
本篇文章介绍了 Material Design 中 5 种基本元素的使用技巧及适配方式，从按钮、卡片、文本框、菜单和悬浮操作按钮等方面详细介绍了它们在 Material Design 中的使用方法及适配方式。开发者在使用 Material Design 时，应根据不同浏览器和移动端设备进行相应的适配，以提供更佳的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67170fdcad1e889fe21f7786