Material Design 是 Google 推出的一种设计语言，旨在为移动设备、桌面端和网络应用提供一致、美观、直观的用户体验。Material Design 致力于提供一种基于纸张和墨水的虚拟环境，传达出一种自然、真实的感觉。
在本篇文章中，我们将探讨如何使用 Material Design 让不同的 APP 有一致的风格。
1. Material Design 的主要特点
Material Design 的主要特点是平面、卡片、动画和色彩。下面我们将逐一介绍。
1.1 平面
Material Design 建议使用平面设计，即不使用阴影和立体效果。这样可以让界面更加简洁、明了，同时也更加容易实现和维护。
1.2 卡片
卡片是 Material Design 中的重要元素，它可以用来展示信息、图片、图标等。卡片的大小可以根据内容自适应，同时也可以设置固定大小。卡片之间的距离可以通过设置间距来控制。
1.3 动画
Material Design 中的动画可以让用户更加容易地理解操作的结果。例如，当用户点击一个按钮时，可以通过动画让用户知道按钮被点击了。
1.4 色彩
Material Design 中的色彩是非常重要的，它可以用来传达信息、引导用户等。Material Design 建议使用鲜艳的颜色，并且使用颜色的方式应该是有规律的，例如使用相邻的颜色。
2. Material Design 的基本组件
Material Design 提供了一些基本组件，包括按钮、文本框、卡片、列表等。这些组件可以帮助我们快速构建界面。
下面我们将以按钮为例，介绍如何使用 Material Design。
2.1 普通按钮
使用 Material Design 的普通按钮非常简单，只需要在 HTML 中添加以下代码即可：
<button class="mdc-button">Click me</button>
然后在 CSS 中添加以下代码：
// javascriptcn.com 代码示例
.mdc-button {
background-color: #3f51b5;
color: #fff;
border-radius: 4px;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.025em;
text-transform: uppercase;
}这样就可以得到一个简单的 Material Design 按钮了。
2.2 带有图标的按钮
如果需要在按钮中添加图标，可以使用 Material Design 提供的图标库。首先需要在 HTML 中引入图标库：
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
然后在按钮中添加图标：
<button class="mdc-button"> <i class="material-icons">favorite</i> Like </button>
最后在 CSS 中添加以下代码：
.mdc-button i {
margin-right: 8px;
}这样就可以得到一个带有图标的 Material Design 按钮了。
3. Material Design 的布局
Material Design 中的布局是基于网格的，可以使用网格来实现响应式布局。
下面我们将以一个简单的网格布局为例，介绍如何使用 Material Design。
// javascriptcn.com 代码示例
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell--span-6">
<div class="mdc-card">
<div class="mdc-card__primary-action">
<div class="mdc-card__media mdc-card__media--16-9">
<img src="https://picsum.photos/200/300" alt="Image">
</div>
<div class="mdc-card__primary">
<h2 class="mdc-card__title mdc-card__title--large">Card title</h2>
<h3 class="mdc-card__subtitle">Card subtitle</h3>
</div>
<div class="mdc-card__actions">
<button class="mdc-button mdc-card__action">Action 1</button>
<button class="mdc-button mdc-card__action">Action 2</button>
</div>
</div>
</div>
</div>
<div class="mdc-layout-grid__cell--span-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod tellus eu felis scelerisque, vel lobortis velit tristique. Nullam sagittis, quam eu feugiat convallis, ipsum nulla feugiat purus, at euismod risus sapien vel justo. Duis commodo lectus vel mauris bibendum, ac congue lectus vestibulum. Vivamus consequat, ipsum et scelerisque sodales, risus eros dignissim lorem, a vulputate purus augue vel quam. Praesent at mollis sapien. Curabitur aliquet tempor vestibulum. Curabitur quis leo nec turpis euismod fermentum. Curabitur at augue eu sapien bibendum tristique. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dictum, purus vel feugiat luctus, quam velit pulvinar nunc, at venenatis est nisi vel velit. Fusce dictum libero vel justo pellentesque, quis commodo felis interdum. Etiam euismod, tortor id hendrerit vehicula, metus eros lobortis odio, eu varius lacus justo in elit. Nullam vel mauris ac quam bibendum pulvinar sit amet ac mauris. Sed euismod ipsum ut tellus eleifend, in rutrum nulla facilisis. Sed vestibulum, nisi vitae bibendum tempor, sapien lorem aliquet mi, sed rutrum velit velit sit amet velit.</p>
</div>
</div>
</div>然后在 CSS 中添加以下代码：
.mdc-layout-grid__cell--span-6 {
padding: 16px;
}这样就可以得到一个简单的网格布局了。
4. 总结
本文介绍了如何使用 Material Design 让不同的 APP 有一致的风格。我们首先介绍了 Material Design 的主要特点，然后介绍了 Material Design 的基本组件和布局。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6505dbe695b1f8cacd21b1c9