改善用户体验：Material Design 和动效设计-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，提升用户体验一直是前端开发者所追寻的目标。而 Material Design 以及动效设计的运用可以帮助我们实现这一目标。本文将分别介绍 Material Design 和动效设计，并探讨如何有效地应用它们来改善用户体验。

Material Design

Material Design 是由 Google 推出的一套设计语言，它的目标是以更真实的物理感为基础，创造出更简洁、更美观、更直观的用户体验。Material Design 主要关注的是元素的操作和组织方式，通过它们的排列和变化来引导用户的注意力和指导用户的操作。

材质

Material Design 的主要特点是材质的运用。通过对材质的变化和变形，可以实现自然且富有表现力的动效，从而更好地表达用户操作的结果。常见的材质有这些：

背景：表示基础材质的颜色或图案。
表面：可以是按钮、文字、图标、卡片等。
浮起：被选中的表面会浮现到其他的表面之上，表示高优先级。
交互过度状态：材质的颜色、形状稍稍改变，表示由某种状态到另一种状态的过度。

设计原则

Material Design 的设计原则主要有以下几个：

平面而明显：通过运用径直的边角、纯平面、鲜艳色彩、细大粗细的字体，让界面元素清晰明了而又鲜明有力。
周而有序：根据材质的规模和重要性，以及逻辑和优先级来排版，从而组织材质，并形成可操作和理解的视觉层次。
视觉层次：将视觉元素的层次和内容高度相映射，会以更易于理解的方式来表达内容的关系和优先级。
有意义的动效：通过自然而且有意义的动效，让静态的材质变得生动有趣，并根据重要性来引导用户行为。

实战应用

在实际操作中，以下几个方面可以帮助我们更好地应用 Material Design：

颜色：Material Design 中的颜色有规定的结构，我们建议在应用颜色方案时参考 Material Design 的颜色指南。
样式：按钮、图标、提示信息等样式的设计需要参照 Material Design 中的元素规范。
线条设计：Material Design 中介绍了工具栏、卡片、搜索等常见元素的线条设计。
关注重点：Material Design 鼓励设计者将关注点放在集中的动效、视觉元素和优先级上。

下面是一个 Material Design 元素布局的示例代码：

// javascriptcn.com 代码示例
<div class="mdc-card">

  <div class="mdc-card__primary-action">
    <div class="mdc-card__headline">Material Design Card</div>
    <div class="mdc-card__subtitle">by Google</div>
  </div>

  <div class="mdc-card__actions">
    <button class="mdc-button mdc-card__action mdc-card__action--button">Action 1</button>
    <button class="mdc-button mdc-card__action mdc-card__action--button">Action 2</button>
  </div>

</div>

动效设计

动效设计是一种通过运用动画来提升用户体验的设计方式。适当的动画可以使用户操作更加自然，提高用户的参与感和交互性。在实际设计中，动效设计的几个重要规范包括：

自然性：动画需要遵循自然的物理原则，使得动画看上去非常真实。
一致性：动画应该遵循统一的规则，从而让视觉元素表现出一致的行为。
清晰：动画需要符合相应的交互模型，用动效指导用户，表达界面上所发生的变化。
适度：动画需要考虑观感体验，过于夸张的动画会对用户产生负面影响。

实战应用

在实际应用中，以下几方面可以提升我们的动效设计：

时间规定：动画时间不应该太长，设计师可以根据设备硬件的适应性和实际的UI设计进行适当调整。
动作类型：在动画应用中，常用的动作类型有缩放、移动和旋转等，应该根据不同的实际情况进行选择。
缓动效果：动画的缓动效果要自然、舒适，遵循一定的物理规律。

下面是一个动效设计的示例代码，演示了一个自然的材质变形效果：

// javascriptcn.com 代码示例
.material {
  background-color: #2898dd;
  box-shadow: none;
  transition: all 0.25s ease-in-out;
  position: relative;
  z-index: 0;
}

.material:after {
  content: "";
  width: 100%;
  height: 50%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.25s ease-in-out;
  background-image: url(http://lorempixel.com/640/480/nature);
  background-size: cover;
  z-index: -1;
}

.material:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(40, 152, 221, 0.5);
}

.material:hover:after {
  transform: skewY(2deg) translateY(-15%);
}

总结

以上就是 Material Design 和动效设计的介绍和实战应用。Material Design 可以使得界面的材质更加鲜明、生动，并引导用户的注意力；动效设计可以让用户操作更加自然，提高用户体验。合理地运用 Material Design 和动效设计是提高用户体验的重要手段，需要在实际应用中根据需要进行合理的选择和实现。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653d45747d4982a6eb7273c3