Material Design 是 Google 推出的一种用于用户界面设计的视觉语言，它的核心理念是提供一种视觉和交互上充满意想不到之处的体验，并能够让用户在不同的平台上即使不同的设备上也可以获得一致的体验。近年来，它被越来越多的人所接受和使用。本文主要介绍如何使用 Material Design 实现简约的 App 设计。
基础知识
在开始实现简约的 App 设计之前，必须先掌握 Material Design 的基础知识，包括颜色、形状、布局等。
颜色
Material Design 提供了一些已经定义好的颜色，称为“调色板”。调色板包括基本颜色、亮度和饱和度。主要的基本颜色有红色、粉色、紫色、深紫色、靛蓝色、蓝色、浅蓝色、青色、绿色、灰色、黄色、橙色和棕色。这些颜色可以通过预定义的 class 或者其它方法来使用。
<div class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button> <span class="mdc-top-app-bar__title">Title</span> </div>
形状
材料设计的基本形状是四边形，这些形状包括矩形、圆形、圆角矩形和斜角矩形。一个 UI 元素的形状可以通过层次结构来决定，并可以使用 CSS 样式表或 JavaScript 代码来设置。
img {
border-radius: 50%;
width: 100px;
height: 100px;
}布局
材料设计的布局是基于一种被称为“网格”的可伸缩系统构建的。网格是一系列纵横比始终为 8:5 的列和行。布局是通过这个网格来构建的，并可以使 UI 元素在屏幕上垂直和水平对齐。所有的 UI 元素都是以相对位置的形式来定位的。
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell--span-12">
<p>Text paragraph</p>
</div>
</div>
</div>实现简约的 App 设计
有了 Material Design 的基础知识，下面就可以开始实现简约的 App 设计。这里假设我们要开发一个 To-do List 应用程序，以下是实现的步骤：
步骤一：确定需求和功能
To-do List 应用程序需要具备以下功能：
- 添加待办事项
- 修改待办事项
- 删除待办事项
- 显示所有待办事项
- 按日期、优先级等排序
步骤二：设计界面
根据需求和功能，设计 To-do List 应用程序的界面。
步骤三：使用 Material Design 实现界面
使用 Material Design 框架帮助我们更容易地实现界面，并与标准 Material Design 风格相匹配。以下是使用 Material Design 实现 To-do List 应用程序的示例代码。
// javascriptcn.com 代码示例
<body>
<header class="mdc-top-app-bar mdc-top-app-bar--short">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="mdc-icon-button material-icons menu-icon">menu</button>
<span class="mdc-top-app-bar__title">To-do List</span>
</section>
</div>
</header>
<main class="mdc-typography--subtitle1">
<form class="task-form">
<label for="task-input" class="mdc-text-field mdc-text-field--outlined task-input-field">
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__notch">
<span class="mdc-floating-label">Add a task</span>
</span>
</span>
<input id="task-input" class="mdc-text-field__input">
</label>
<button type="submit" class="mdc-icon-button material-icons add-task-button">add</button>
</form>
<ul class="mdc-list task-list" role="listbox">
<li class="mdc-list-item task" tabindex="0">
<div class="mdc-checkbox">
<input type="checkbox" class="mdc-checkbox__native-control" id="task-1-checkbox">
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
<label class="mdc-list-item__text" for="task-1-checkbox">
Task 1
</label>
<button class="mdc-icon-button material-icons edit-task-button" aria-label="Edit task" tabindex="-1">edit</button>
<button class="mdc-icon-button material-icons delete-task-button" aria-label="Delete task" tabindex="-1">delete</button>
</li>
<li class="mdc-list-item task completed-task" tabindex="0">
<div class="mdc-checkbox mdc-checkbox--selected">
<input type="checkbox" class="mdc-checkbox__native-control" id="task-2-checkbox" checked>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
<label class="mdc-list-item__text" for="task-2-checkbox">
Task 2
</label>
<button class="mdc-icon-button material-icons edit-task-button" aria-label="Edit task" tabindex="-1">edit</button>
<button class="mdc-icon-button material-icons delete-task-button" aria-label="Delete task" tabindex="-1">delete</button>
</li>
</ul>
</main>
</body>到这里，简约的 To-do List 应用程序已经用 Material Design 实现完成了。这个应用程序使用了 Material Design 的框架和控件，如顶部应用栏、列表、复选框和浮动标签，从而让它看起来更现代化和干净，同时也让用户有更好的使用体验。
总结
简洁和现代化是当代应用程序设计的一个趋势，而使用 Material Design 可以帮助开发者轻松实现这个目标。本文提供了一个简单的 To-do List 应用程序示例，用于演示如何使用 Material Design 实现干净而现代的界面。希望本文对于初学者具有启发作用，以及能够有所帮助，提高工作效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6546f75f7d4982a6eb15d763