Material Design 是一种由 Google 推出的设计语言，旨在提供一种简约、更加有层次感的设计风格。其中 App Bar 是一种很常见的设计元素，也是应用程序中最重要的部分之一。本文将重点介绍 Material Design App Bar 的设计和常见应用方式，并提供示例代码。
什么是 Material Design App Bar？
App Bar 是应用程序中的一个重要部分，通常包括应用程序的名称、工具栏操作和导航菜单。Material Design 中的 App Bar 进一步扩展了这些元素，并引入了更多的材料设计特征。它们是应用程序的核心组成部分，帮助用户在应用程序中快速地导航和执行任务。
Material Design App Bar 具有以下特征：
- 明确而简洁的设计
- 导航工具栏提供了常用的操作和菜单选项
- 通过标准材料设计模式统一了用户体验
App Bar 的设计
Material Design App Bar 有三个主要的元素：导航栏、工具栏和可选的操作按钮。在设计 App Bar 时，我们应该注意以下要素：
1. 美观与简约
Material Design 的核心理念之一是简约。App Bar 的设计应该与应用程序的其它元素一起呈现简洁美观的风格，尽可能减少无用的元素，以免分散用户的注意力。
2. 明确的导航
导航栏是应用程序中最重要的部分之一。通过使用以下方法可以确保导航栏的有效性：
- 必须明显和清晰地标识应用程序名称；
- 导航栏上的按钮应该准确描述该按钮代表的操作；
- 导航栏中的菜单项应该容易访问。
3. 易于访问的工具栏按钮
工具栏是 App Bar 的一部分，它包含了一些用户可能需要经常使用的工具。这里的按钮需要明确描述其功能，并且应该在用户需要使用它们时容易找到。
4. 可选操作按钮
操作按钮是一种可选的元素。这些按钮可以提供直接访问应用程序中的某些功能，但是在没有明确必要的情况下应该减少使用它们。
常见的应用方式
Material Design App Bar 在不同应用中有不同的应用方式，下面我们来介绍一些常见的应用方式。
1. 简单的 App Bar
简单的 App Bar 包含应用程序的名称和导航按钮。这种设计适合于那些只需要在应用程序中浏览少量内容的应用程序。
示例代码
-- -------------------- ---- -------
------- ---------------------------
---- -------------------------------
----- --------------------------------------
---- --------------------------------
---- -----------------------
-- ---------------------------- ---------------
-- ---------------------------- ---------------
------
------
---------2. 带搜索框的 App Bar
带搜索框的 App Bar 适用于那些需要搜索内容的应用程序。搜索框通常位于导航按钮的左侧或右侧。
示例代码
-- -------------------- ---- -------
------- ---------------------------
---- -------------------------------
----- --------------------------------------
---- --------------------------------
----- ----------
---- -------------------- ---------------- -------------------------
----------------------------- ----------------------------
------ ----------------- ------------- -----------------
-------------
-- ---------------------------------
--------
---- -----------------------------------------
------ ---------------------------- ----------- -------------
------------
------
------
-------
---- -----------------------
-- ---------------------------- ---------------
-- ---------------------------- ---------------
------
------
---------3. 带 Tab 的 App Bar
App Bar 还可以包含 Tab，这使得可以在同一个界面中浏览不同的数据。Tab 可以在工具栏上和导航栏下方之间的位置。
示例代码
-- -------------------- ---- -------
------- ---------------------------
---- -------------------------------
----- --------------------------------------
---- --------------------------------
---- -----------------------
-- ---------------------------- ---------------
-- ---------------------------- ---------------
------
------
---- -------------------------- ----------------------
-- ------------ ---------------------- -------------- -----
-- ------------ --------------------------- -----
-- ------------ --------------------------- -----
------
---------结论
Material Design App Bar 可以为我们的应用程序提供一种更具层次感和美观的设计，帮助用户更快速地完成任务和浏览信息。我们需要注意导航栏的设计、工具栏和操作按钮的使用等要素，以提供一种最佳的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67075d0cd91dce0dc8673e99