如何使用 Material Design 设计出符合人性化的 App 界面？-JavaScript中文网-JavaScript教程资源分享门户

在现代移动应用领域中，设计和用户体验是至关重要的。Material Design 是 Google 为 Android 系统提供的一种设计语言，主要以平面化、卡片式的设计风格为主，强调界面的现实感和层次感。本篇文章将介绍如何使用 Material Design 设计出符合人性化的 App 界面。

1. Material Design 的基本原则

Material Design 设计语言的基本原则如下：

材料( Material )：大尺寸较强的实体材质能够搭配出有层次感的阴影和光影，从而赋予用户直观的触感反馈。
沉浸式( Immersive )：为用户创造出身临其境、拟物化的环境，将用户置于其中。
墨水( Ink )：墨水效果为 Material Design 设计的特色之一，它能够让用户感受到翻书、拖拽等操作带来的即时反馈。
卡片( Cards )：它是 Material Design 设计中的一个核心元素，它能够创造出层次化的视觉效果。
响应( Responsive )：页面设计必须适配各种屏幕分辨率的设备。
动效( Motion )： Material Design 设计中注重动效，动感十足的设计能够为页面增添活力，激励用户的兴趣。

2. 设计符合 Material Design 原则的界面

2.1 使用 Material Design 颜色和结构

首先，我们需要使用 Material Design 提供的颜色和结构进行设计。可以使用 Material Design 官方提供的工具来获取需要使用的颜色和构造元素。

// javascriptcn.com 代码示例
/* 红色 */
color: #F44336;

/* 蓝色 */
color: #2196F3;

/* 灰色 */
color: #9E9E9E;

/* 主题色 */
color: #3F51B5;

/* 文本框和输入框底部条颜色 */
border-color: #9E9E9E;

/* 材质设计的浮动操作按钮 */
background-color: #f44336;

2.2 使用卡片系统

卡片是一个核心设计元素，因为它们为用户提供了一种逐层递进的方式来浏览信息，同时也使得信息的组织更加总体化。

// javascriptcn.com 代码示例
<!-- 卡片 -->
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

2.3 应用级别的结构

Material Design 鼓励设计师将应用程序的整个结构视为一种结构，将每个层次结构的最上层称为应用程序栏（ application bar ）。它包括一个应用程序的标志和操作菜单。

// javascriptcn.com 代码示例
<!-- 应用程序栏 -->
<header class="mdc-top-app-bar mdc-top-app-bar--fixed">
  <div class="mdc-top-app-bar__row">
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
      <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
      <span class="mdc-top-app-bar__title">Title</span>
    </section>
  </div>
</header>

2.4 材质风格的按钮

材质设计的浮动操作按钮（ FAB ）可以在您需要与浮动按钮交互的场合激活。它们以其平滑倒角的圆形形状和细腻的淡入淡出效果而闻名。

<!-- 浮动操作按钮 -->
<button class="mdc-fab material-icons">add</button>

2.5 响应式布局

为了使您的应用程序在各种设备上都具有很好的可操作性和可读性，请使用好的响应设计。这意味着您需要在每个屏幕分辨率上测试您的页面，并确定最佳的字体、大小、广告和其他设计元素，以便在整个平台上提供最佳的用户体验。

<!-- 创建一个自适应栅格 -->
<div class="mdc-layout-grid">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell--span-4-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">
      ...
    </div>
  </div>
</div>

3. 总结

Material Design 的设计原则鼓励设计师们将应用程序结构和协调结合到一起，并在设计中使用材料、沉浸式、墨水、卡材和响应设计等方面。通过学习并使用这些原则，设计师可以更好地提高设计的质量和用户的体验。

以上是一个 Material Design 的基本介绍。您可以在开发工具中找到更多的 Material Design 示例和文档，以深入了解设计原则和实践。

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