Material Design 是由 Google 推出的一种设计语言，旨在为 Web 应用、移动应用以及其他数字媒体提供直观、自然且具有深度的视觉效果。它成为了现代 UI 设计的标志之一，提供了一种响应式设计的方法，使应用程序在各种设备上获得统一的体验。
本文将介绍 Material Design 的基本原则，重点分析其中蕴含的 UI 设计的思想。
Material Design 基本原则
Material Design 具有三个基本原则:
- 现实性: 设计应该模拟现实物理空间，元素的运动和变化应该自然且可预测。
- 可读性: 设计应该通过排版和颜色运用增强内容的可读性和可理解性。
- 结构性: 设计应该使用层次结构和对比度来引导用户。
其中可读性和结构性相对较为容易理解，这里重点介绍现实性的实现方法。
对于现实性的运用，Material Design 提供了一个非常简单的概念: 海拔高度。不同海拔高度的元素，其 zIndex 值不同，以此来创造前后关系，使得不同元素之间具有不同的空间感和运动效果。如下面的示例代码:
<div class="elevation-0">我是地面</div> <div class="elevation-1">我在“地面”之上</div> <div class="elevation-2">我在“地面”和“-1”之间</div> <div class="elevation-3">我在“-1”和“-2”之间</div>
同时，为了提高用户体验和视觉效果，Material Design 还提供了以下两种运动效果:
- 前景运动: 元素附着在表面的运动，如按键的点击效果，通过透明度、大小和颜色等一系列过渡动画加以呈现。
- 悬浮运动: 元素在空气中漂浮，可带有阴影和动画效果。如提示框、卡片，给用户以浮现在平面上的体验。
根据 Material Design 设计 UI
以下是一些基于 Material Design 思想的 UI 设计指南，可帮助我们实现更好的用户体验。
1. 使用明亮的颜色和大色块
Material Design 强调色彩的使用，建议使用明亮饱和的颜色，同时使用大色块或大面积背景来显出颜色的效果。
示例代码:
-- -------------------- ---- ------- ----- ----------------- -------- ------ ------ - --- ---------- ----- ----------- ------- -------- ---- -- -展开代码
2. 使用层次结构来定义元素
根据 Material Design 的概念，不同海拔高度的元素具有不同的空间感，可以通过层次结构来定义元素之间的关系。应用这个概念可以使 UI 的元素更加清晰有序，更易于理解和操作。
示例代码:
<div class="card"> <h2 class="card-title">这里是标题</h2> <p class="card-text">这里是内容</p> <button class="btn btn-primary">按钮</button> </div>
3. 提供响应式设计
Material Design 建议提供响应式设计，使应用在不同设备上具有相似的体验。响应式设计应该考虑屏幕尺寸、设备类型以及输入方式等因素，以产生具有生动和自然的体验。
示例代码:
@media (min-width: 768px) { .card{ width: 50%; margin: 0 auto; } }
4. 引导用户通过对比度
对比度是引导用户的一种方法，可以使用不同颜色、字体大小、元素大小等来产生视觉上的字重轻、重心偏移等效果。根据 Material Design 的思想，使用合理的对比度可以帮助用户更好地理解和操作。
示例代码:
-- -------------------- ---- ------- ----- ----------------- -------- ------- ----- ------ ------ -------- ---- ----- ---------- ----- ------- -------- - ----------- ----------------- ------ ------ -------- -展开代码
结论
Material Design 是一种基于现实和自然的设计语言，借鉴了真实物理空间和自然之间的关系和运动方式。以此来提高用户体验和界面设计效果。上述基于 Material Design 的 UI 设计指南可以提高我们的设计水平，也可以使得我们的网站和应用更加符合用户的体验预期。
最后附上示例代码的完整链接: https://codepen.io/pen/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676f9439e9a7045d0d747675
