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>菜单
菜单通常用来展示一些次要的功能，例如设置、帮助、关于等。我们需要为菜单选择一个明显的图标或文字，并确保菜单与其他元素之间有一定的间隔。
-- -------------------- ---- -------
---- -- ---
---- ----------------
------------ ------ --- --- ---------
------- --------------------- ------------------------------------------
------- ------------------- ---------------------------------------------
---- -------------
----
------ --------------------
------ --------------------
------ --------------------
-----
------
------Bottom Navigation Bar
Bottom Navigation Bar 是一种位于屏幕底部的水平区域，它通常包含应用程序的主要导航菜单。在使用 Bottom Navigation Bar 时，我们需要注意以下几点。
导航菜单
导航菜单应该明确且易于理解，以便用户快速定位所需要的功能。同时，我们应该考虑在不同的导航菜单之间使用颜色或图标来区分，以便用户快速识别不同的导航菜单。
-- -------------------- ---- -------
---- ---- ---
---- -------------------
----
----
-- ---------
-- -------------------------------
---------------
----
-----
----
-- ---------
-- -----------------------------------
---------------
----
-----
----
-- ---------
-- -----------------------------------
---------------
----
-----
-----
------功能
除了样式外，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>
-- -------------------- ---- -------
-- ----
--- ------------- - -------------------
--------------- - ---------- -
--- ---------------- - -------------------
-- -------------- - ----------------- -
-------------------------------------------- - ----
- ---- -
-------------------------------------------- - --------
-
------------- - -----------------
-滚动缩进
当页面滚动到顶部时，为了让用户能够看到更多的内容，我们可以使用滚动缩进的功能，即在页面滚动到顶部时将 App bar 缩进一定的距离。
<!-- 滚动缩进 --> <div class="app-bar fixed"> <h1>Material Design 中应用 bar 设计精讲</h1> </div>
-- -------------------- ---- -------
-- ----
--- ------------- - -------------------
--------------- - ---------- -
--- ---------------- - -------------------
-- -------------- - ----------------- -
-------------------------------------------- - ----
- ---- -
-------------------------------------------- - --------
-
-- ------------------------ -- - -- ---------------------------------- -- -- -
----------------------------------------------------------------
- ---- -
-------------------------------------------------------------
-
------------- - -----------------
-实现方法
最后，我们来看一下如何在实际开发中实现 bar 设计。我们可以使用 Material Design 官方提供的 CSS 框架，也可以使用第三方框架，例如 Bootstrap、Foundation 等。
下面是一个使用 Material Design 框架实现 bar 设计的示例代码。
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
----- --------------- ---------------------------- -----------------
--------------- ------ --- --- ------------
----- ---------------- ---------------------------------------------------------------
----- ---------------- -----------------------------------------------------------------
------- ----- ------------------------------------------------------------
----- ---------------- -----------------
-------
------
---- ----------------- ------------- --------------------------
------- ---------------------------
---- -------------------------------
----- --------------------------------- ------ --- --- -----------
---- --------------------------------
---- -----------------------
-- ---------------------------- ---------------
-- ---------------------------- ---------------
------
------
---------
---- ---------------------------
----- ----------------------------------
---- -----------------------
-- ---------------------------- ---------------
-- ---------------------------- ---------------
-- ---------------------------- ---------------
------
------
----- ----------------------------
---- ------------------------- ---- ------- ---- ---- ---------
-------
------- ------------------------
---- --------------------------------------
---- ---------------------- ---- -------- ------ ----------
--- -----------------------------------
------ --------------------
------ ----------------------
-----
------
---------
------
-------
--------- -------------------- ---- ------- ------------------- --------------------- - -------- ---- ----- - ---------------- - ----------------- ----- - ---------------- --------- - ------------ ----- -
总结：在 Material Design 中应用 bar 设计，需要我们掌握样式、功能以及实现方法等方面的知识。希望本篇文章能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65499c067d4982a6eb3d14bd