Material Design 与 UI 设计的思想碰撞

阅读时长 4 分钟读完

Material Design 是由 Google 推出的一种设计语言,旨在为 Web 应用、移动应用以及其他数字媒体提供直观、自然且具有深度的视觉效果。它成为了现代 UI 设计的标志之一,提供了一种响应式设计的方法,使应用程序在各种设备上获得统一的体验。

本文将介绍 Material Design 的基本原则,重点分析其中蕴含的 UI 设计的思想。

Material Design 基本原则

Material Design 具有三个基本原则:

  • 现实性: 设计应该模拟现实物理空间,元素的运动和变化应该自然且可预测。
  • 可读性: 设计应该通过排版和颜色运用增强内容的可读性和可理解性。
  • 结构性: 设计应该使用层次结构和对比度来引导用户。

其中可读性和结构性相对较为容易理解,这里重点介绍现实性的实现方法。

对于现实性的运用,Material Design 提供了一个非常简单的概念: 海拔高度。不同海拔高度的元素,其 zIndex 值不同,以此来创造前后关系,使得不同元素之间具有不同的空间感和运动效果。如下面的示例代码:

同时,为了提高用户体验和视觉效果,Material Design 还提供了以下两种运动效果:

  • 前景运动: 元素附着在表面的运动,如按键的点击效果,通过透明度、大小和颜色等一系列过渡动画加以呈现。
  • 悬浮运动: 元素在空气中漂浮,可带有阴影和动画效果。如提示框、卡片,给用户以浮现在平面上的体验。

根据 Material Design 设计 UI

以下是一些基于 Material Design 思想的 UI 设计指南,可帮助我们实现更好的用户体验。

1. 使用明亮的颜色和大色块

Material Design 强调色彩的使用,建议使用明亮饱和的颜色,同时使用大色块或大面积背景来显出颜色的效果。

示例代码:

-- -------------------- ---- -------
-----
  ----------------- --------
  ------ ------
-

---
  ---------- -----
  ----------- -------
  -------- ---- --
-
展开代码

2. 使用层次结构来定义元素

根据 Material Design 的概念,不同海拔高度的元素具有不同的空间感,可以通过层次结构来定义元素之间的关系。应用这个概念可以使 UI 的元素更加清晰有序,更易于理解和操作。

示例代码:

3. 提供响应式设计

Material Design 建议提供响应式设计,使应用在不同设备上具有相似的体验。响应式设计应该考虑屏幕尺寸、设备类型以及输入方式等因素,以产生具有生动和自然的体验。

示例代码:

4. 引导用户通过对比度

对比度是引导用户的一种方法,可以使用不同颜色、字体大小、元素大小等来产生视觉上的字重轻、重心偏移等效果。根据 Material Design 的思想,使用合理的对比度可以帮助用户更好地理解和操作。

示例代码:

-- -------------------- ---- -------
-----
  ----------------- --------
  ------- -----
  ------ ------
  -------- ---- -----
  ---------- -----
  ------- --------
-

-----------
  ----------------- ------
  ------ --------
-
展开代码

结论

Material Design 是一种基于现实和自然的设计语言,借鉴了真实物理空间和自然之间的关系和运动方式。以此来提高用户体验和界面设计效果。上述基于 Material Design 的 UI 设计指南可以提高我们的设计水平,也可以使得我们的网站和应用更加符合用户的体验预期。

最后附上示例代码的完整链接: https://codepen.io/pen/

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/676f9439e9a7045d0d747675

纠错
反馈

纠错反馈