Material Design 是一种由 Google 推出的设计语言，它在一定程度上介于传统的平面设计和现代的互联网设计之间。作为前端开发者，我们需要掌握 Material Design 的设计原则和技巧，以便更好地开发出符合用户期望的应用程序。
其中，bar 是 Material Design 中比较重要的一个设计元素，用来表示应用程序的状态栏或导航栏。本篇文章将介绍如何在 Material Design 中应用 bar 设计，包括它的样式、功能以及实现方法。
样式
Material Design 中的 bar 通常由两部分组成：app bar 和 bottom navigation bar。
App Bar
App bar 是一种位于屏幕顶部的水平区域，它通常包含应用程序的标题、操作按钮、菜单等元素。在使用 App bar 时，我们需要注意以下几点。
标题
标题应该简洁明了且易于理解，以便用户快速理解当前应用程序的功能。同时，应该确保标题与其他元素之间有充足的空隙，以保证用户能够快速找到所需要的信息。
<!-- 标题 --> <div class="app-bar"> <h1>Material Design 中应用 bar 设计精讲</h1> </div>
操作按钮
操作按钮通常用来触发一些核心功能，例如搜索、新建、保存、分享等。我们需要为操作按钮选择一个明显的图标或文字，并确保按钮与其他元素之间有一定的间隔。
<!-- 操作按钮 -->
<div class="app-bar">
<h1>Material Design 中应用 bar 设计精讲</h1>
<button class="btn-action">
<i class="material-icons">search</i>
</button>
</div>菜单
菜单通常用来展示一些次要的功能，例如设置、帮助、关于等。我们需要为菜单选择一个明显的图标或文字，并确保菜单与其他元素之间有一定的间隔。
// javascriptcn.com 代码示例
<!-- 菜单 -->
<div class="app-bar">
<h1>Material Design 中应用 bar 设计精讲</h1>
<button class="btn-action"><i class="material-icons">search</i></button>
<button class="btn-menu"><i class="material-icons">more_vert</i></button>
<div class="menu">
<ul>
<li><a href="#">设置</a></li>
<li><a href="#">帮助</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
</div>Bottom Navigation Bar
Bottom Navigation Bar 是一种位于屏幕底部的水平区域，它通常包含应用程序的主要导航菜单。在使用 Bottom Navigation Bar 时，我们需要注意以下几点。
导航菜单
导航菜单应该明确且易于理解，以便用户快速定位所需要的功能。同时，我们应该考虑在不同的导航菜单之间使用颜色或图标来区分，以便用户快速识别不同的导航菜单。
// javascriptcn.com 代码示例
<!-- 导航菜单 -->
<div class="bottom-nav">
<ul>
<li>
<a href="#">
<i class="material-icons">home</i>
<span>主页</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">favorite</i>
<span>收藏</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">settings</i>
<span>设置</span>
</a>
</li>
</ul>
</div>功能
除了样式外，bar 还具备一些非常实用的功能，例如搜索、滚动隐藏、滚动缩进等。下面我们将对这些功能进行详细讲解。
搜索
搜索是一种非常常见的功能，它可以帮助用户快速通过关键字找到所需要的信息。我们可以在 App bar 中加入一个搜索框，以便用户快速进行搜索操作。
<!-- 搜索 -->
<div class="app-bar">
<h1>Material Design 中应用 bar 设计精讲</h1>
<form class="search-form">
<input type="text" placeholder="搜索">
</form>
</div>滚动隐藏
当页面滚动时，bar 可能会占据太多的空间，从而影响用户体验。为了解决这个问题，我们可以使用滚动隐藏的功能，即在页面滚动时自动隐藏 bar，页面滚动结束时自动显示 bar。
<!-- 滚动隐藏 --> <div class="app-bar fixed"> <h1>Material Design 中应用 bar 设计精讲</h1> </div>
// javascriptcn.com 代码示例
// 滚动隐藏
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.querySelector('.app-bar').style.top = '0';
} else {
document.querySelector('.app-bar').style.top = '-60px';
}
prevScrollpos = currentScrollPos;
}滚动缩进
当页面滚动到顶部时，为了让用户能够看到更多的内容，我们可以使用滚动缩进的功能，即在页面滚动到顶部时将 App bar 缩进一定的距离。
<!-- 滚动缩进 --> <div class="app-bar fixed"> <h1>Material Design 中应用 bar 设计精讲</h1> </div>
// javascriptcn.com 代码示例
// 滚动缩进
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.querySelector('.app-bar').style.top = '0';
} else {
document.querySelector('.app-bar').style.top = '-60px';
}
if (document.body.scrollTop == 0 || document.documentElement.scrollTop == 0) {
document.querySelector('.app-bar').classList.remove('scrolled');
} else {
document.querySelector('.app-bar').classList.add('scrolled');
}
prevScrollpos = currentScrollPos;
}实现方法
最后，我们来看一下如何在实际开发中实现 bar 设计。我们可以使用 Material Design 官方提供的 CSS 框架，也可以使用第三方框架，例如 Bootstrap、Foundation 等。
下面是一个使用 Material Design 框架实现 bar 设计的示例代码。
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Design 中应用 bar 设计精讲</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Material Design 中应用 bar 设计精讲</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">搜索</a>
<a class="mdl-navigation__link" href="#">菜单</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">菜单</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">设置</a>
<a class="mdl-navigation__link" href="#">帮助</a>
<a class="mdl-navigation__link" href="#">关于</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content"><!-- Your content goes here --></div>
</main>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">Built with Material Design Lite</div>
<ul class="mdl-mini-footer__link-list">
<li><a href="#">帮助</a></li>
<li><a href="#">隐私条款</a></li>
</ul>
</div>
</footer>
</div>
</body>
</html>// javascriptcn.com 代码示例
.mdl-layout__drawer .mdl-navigation__link {
padding: 16px 32px;
}
.mdl-mini-footer {
background-color: #fff;
}
.mdl-mini-footer .mdl-logo {
line-height: 32px;
}总结：在 Material Design 中应用 bar 设计，需要我们掌握样式、功能以及实现方法等方面的知识。希望本篇文章能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65499c067d4982a6eb3d14bd