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