Material Design 是 Google 推出的一套设计规范，旨在提供一种直观、一致、有意义的视觉体验。卡片 (Card) 设计是 Material Design 中的一种常见布局方式，它能帮助我们以可预测和可重用的方式展示信息，促进用户与内容的交互和探索。在本文中，我们将深入了解如何使用 Material Design 规范设计出更好的卡片设计。
为什么要使用卡片设计？
卡片是一种页面中的模块化元素，可以承载各种类型的元素，如图片、文本、按钮、链接等。卡片设计可以帮助我们充分利用页面空间，提供结构化的信息，同时充分考虑用户体验，使得页面变得更加美观、易用。
此外，卡片设计也是一种被广泛应用的设计风格，我们在许多应用和网站中都能看到它的存在，如 Pinterest、Instagram、Google Now 等。
如何设计卡片？
1. 卡片的布局
卡片中通常包含图像、标题、摘要、操作等元素。我们可以使用如下布局来构建卡片。
<div class="card">
<img src="card-image.png" alt="Image description">
<div class="card-text">
<h2>Card title</h2>
<p>Card description</p>
</div>
<div class="card-actions">
<button class="btn">Action 1</button>
<button class="btn">Action 2</button>
</div>
</div>2. 卡片的样式
根据 Material Design 规范，卡片应该在阴影、形状、颜色等方面保持一致。具体来说，卡片应该采用以下样式：
- 阴影：卡片应该有 1dp 的阴影，以提供轻微的高度和深度视觉效果；
- 形状：卡片应该采用矩形或圆角矩形的形状；
- 颜色：我们应该根据元素内容和重要性来选择颜色。例如，我们可以使用明亮和鲜艳的颜色来突出重点信息。
我们可以使用如下 CSS 样式来实现卡片的样式：
.card {
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14),
0 1px 3px 0 rgba(0, 0, 0, 0.12),
0 2px 1px -1px rgba(0, 0, 0, 0.2);
border-radius: 2px;
background-color: #ffffff;
padding: 16px;
}3. 卡片的交互
卡片中通常包含交互元素，如按钮、链接等。我们可以使用 Material Design 规范中的交互效果来增强用户体验。例如，当用户单击按钮时，我们可以添加一个简短动画效果，以表示按钮已被单击。
我们可以使用如下代码来实现 Material Design 标准中的交互效果：
<button class="btn" onclick="ripple(this)">Click me</button>
<script>
function ripple(elm) {
const ripple = document.createElement('span');
ripple.className = 'ripple';
elm.appendChild(ripple);
const d = Math.max(elm.clientWidth, elm.clientHeight);
const rect = elm.getBoundingClientRect();
ripple.style.width = ripple.style.height = d + 'px';
ripple.style.left = event.clientX - rect.left - d/2 + 'px';
ripple.style.top = event.clientY - rect.top - d/2 + 'px';
ripple.classList.add('ripple-start');
setTimeout(() => {
elm.removeChild(ripple);
}, 500);
}
</script>
<style>
.btn {
background-color: #4285f4;
color: #ffffff;
border-radius: 2px;
font-size: 14px;
padding: 8px 16px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: background-color 225ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 225ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ripple {
position: absolute;
opacity: 0;
pointer-events: none;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 50%;
transform: scale(1);
transition: opacity 1s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.ripple-start {
opacity: 0.5;
transform: scale(1.5);
}
</style>总结
卡片设计是一种重要的布局方式，它能帮助我们提供层次化的信息和交互，同时提高页面的美观度和易用性。在设计卡片时，我们应该遵循 Material Design 的规范，以提供一致和高质量的设计效果，同时也可以加入一些交互效果，以提高用户的参与度和体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ade467add4f0e0ff76a18b