底部应用程序栏（App bars: bottom ）

底部应用程序栏在移动屏幕底部——显示导航和关键操作。

开发文档（Developer documentation）

内容（CONTENTS）

用法（Usage）

解析（Anatomy）

行为（Behavior）

主题（Theming）

标注（Specs）

用法（Usage ）

底部应用程序栏提供了访问底部抽屉导航和最多四个动作的操作,包括浮动操作按钮。

原理（Principles）

什么时候使用（When to use）

底部应用程序栏应用在:

●仅限移动设备

●访问底部导航抽屉

●屏幕上2-5个的行为操作

底部应用程序栏不应用在:

●带有底部导航栏的应用程序

●屏幕上只有一个或没有的行为操作

解析（Anatomy ）

底部应用导航栏可以包含当前屏幕里提供下文的操作，包括最左边的导航菜单控件和一个浮动操作按钮(如果有的话），如果包含在底部的应用程序栏中，溢出选项控件应该放在其他操作的末尾。

1.容器（Container）

2.导航抽屉控件（Navigation drawer control）

3.悬浮按钮（Floating action button-FAB）

4.操作按钮（Action icon）

5.溢出按钮（Overflow menu control）

定位（Positioning）

基于悬浮按钮，和不同的位置，底部应用导航栏有三种不同的布局。这些布局定义了一些在栏中的操作。

中间悬浮按钮（Centered FAB）

建议

在底部应用程序栏中，使用导航菜单控件和一个突出的操作(比如悬浮按钮),添加最少1项最多2项操作控件，放在栏中最右。

右边悬浮按钮（End FAB）

建议

在二级屏幕上使用悬浮按钮，栏中放置一个悬浮按钮和3-4个操作项。

没有悬浮按钮（No FAB）

建议

当不需要悬浮操作按钮时，底部应用程序栏可以放置导航菜单控件，另一侧最多放置4个操作项。

横屏

建议

在横屏中，操作与屏幕边缘对齐，便于手持访问。

悬浮操作按钮

悬浮操作按钮以两种方式之一展示在底部应用程序栏上:

1.重叠

FAB比底部应用程序栏的高度高一点，对底部应用程序栏的形状没有影响。

2.插入

FAB与底部应用程序栏的高度一致，让FAB放置在底部应用程序栏的凹槽中。

使用插入的方式增加FAB的视觉突出性，或者突出定制的元素形状，更多在底部应用程序栏插入FAB的指导，请阅读主题部分。

重叠

插入

不建议

不要把FAB放在底部的应用程序栏外面，因为这样会让它更难到达。

行为

布局

为了适应一个应用程序的各个部分，底部应用程序栏的布局和操作支持相应的更改。举个例子，根据屏幕最适合的内容，可以展示更多或者更少的操作行为。

举个例子，屏幕可以根据最适合屏幕的内容展示更多或者更少的操作行为。

为了显示一个主要的操作，主屏幕上的底部应用程序栏使用居中FAB布局，当需要浏览信息时，底部应用程序栏可以改为居右布局，以容纳额外的上下文操作。

滚动

滚动时，底部应用程序栏可以出现和消失:

向下滚动时

隐藏底部应用程序栏，如果有FAB,则从底部应用程序栏中分离出来，固定在屏幕上。

向上滚动时

显示底部应用程序栏，如果有FAB,则重新对应到FAB

底部应用程序栏可以包含一个形状，比如凹槽，沿着边缘贴合FAB.当底部应用程序栏从FAB分离时，它会变回默认的形状。当返回屏幕和重新贴合FAB的时候，底部应用程序栏恢复了凹槽的形状。

即使滚动到屏幕外，底部应用程序栏隐藏起来，FAB可以仍旧保留在屏幕上。

高度

底部应用程序栏有8dp的高度。有FAB时，底部应用程序栏上方的FAB在默认和悬停时的高度应该增加，并清晰可见。

1.内容 (Content 0dp)

2.snackbar(6dp)

3.底部应用程序栏(Bottom app bar 8dp)

4.FAB(Bottom navigation drawer 12dp默认)

5.底部导航抽屉(16dp)

底部应用程序栏的控件(比如导航抽屉或者溢出控件)，作为表单打开覆盖在底部栏上，比底部栏有更高的高度。

导航抽屉控件从底部应用程序栏中打开，覆盖在应用程序栏上，全屏时，显示顶部程序栏关闭抽屉。

覆盖底部应用程序栏的元素

键盘和其他临时界面可以覆盖底部应用程序栏上方，如果APP频繁的覆盖底部应用程序栏，应该选用其他的组件。

建议

键盘可以临时覆盖底部应用程序栏

不建议

不要将底部应用程序栏放在键盘上面

放置

导航

底部应用程序栏可以放一个菜单图标来打开导航抽屉，但是底部应用程序栏不包含任何导航类别的操作(比如向上导航到主屏幕或者关闭按钮),应用导航应该放在另外一个组件中，比如顶部应用程序栏。

建议

在底部行应用程序栏外在提供导航操作，允许用户返回另一个屏幕

 

不建议

不要在底部应用程序栏中放置导航操作，因为会被临时的界面覆盖。

与顶部应用程序栏配对

当使用底部应用程序栏时，顶部应用程序栏可以提供向上的导航和其他操作。在整个应用程序中，操作应该整体的规划和分配。

建议如下放置:

●在底部应用程序栏中放一个单独的导航菜单(便于访问)

●在底部应用程序栏的末尾放一个溢出控件。

●在整个应用程序栏中，将操作(比如搜索）放在统一的位置。

●具有破坏性的操作，比如删除，放在顶部应用程序栏。

建议

在二级页面的顶部应用程序栏中使用返回操作

不建议

在主屏幕上，不要在顶部和底部同时放置栏导航菜单控件，选一个放就好。

建议

在顶部栏或者底部栏，放置一个溢出控件作为末尾操作

建议

底部应用程序栏可以提供一致的操作，比如菜单和搜索，允许底部应用程序栏保留上下文，屏幕特定的操作。

Snackbars

为了避免阻碍，snackbar 和toast应该垂直的放置于底部应用程序栏的上方，更多的指导，定位，布局，请参考snackbar。

建议

在顶部应用程序栏和FAB上方插入snackbar 和toast

 

不建议

不要底部应用程序栏和FAB的前面放入snackbar 和toast 

主题

Posivibes材料主题

这款社交应用程序使用了材料主题定制，范围包括颜色和形状。

Posivibe的自定义底部应用程序栏

 

颜色

Posivibe的底部应用程序栏在两个元素上使用自定义颜色:容器和图标。

形状

Posivibe的底部应用程序栏在容器的顶部边缘使用自定义形状。更多指导，请参考https://www.w3.org/TR/SVG/paths.html.

空间

移动画像

底部应用程序栏仅仅是在移动端使用，不适用平板电脑或者桌面使用。最小1个，最大两个操作控件对齐导航菜单对面(右边)的边缘。

FAB居中

FAB插入

FAB末尾

没有FAB

最小2，最大4操作控件对齐导航菜单对面（右边）

英文词汇

consistently

英 [kənˈsɪstəntli]  美 [kənˈsɪstəntli] 

adv. 一贯地；一致地；坚实地

This is a policy we have pursued consistently. 

这是我们一贯奉行政策。

paired

英 [peəd]  美 [pɛrd] 

adj. [计] 成对的；配对的

v. 使成对；配合（pair的过去分词）

Some looked like little eels, most have paired teeth at the head end. 

有的看上去像小鳝鱼，大多数的头部有着成对的牙齿。

notch

英 [nɒtʃ]  美 [nɑːtʃ] 

n. 刻痕，凹口；等级；峡谷

vt. 赢得；用刻痕计算；在…上刻凹痕

They have a notch in their belt. 

他们在自己的地带有个切口。

anatomy

英 [əˈnætəmi]  美 [əˈnætəmi] 

n. 解剖；解剖学；剖析；骨骼

A knowledge of anatomy adds to the appreciation of works of art. 

解剖学知识有助于提高对艺术作品的鉴赏力。

dictate

英 [dɪkˈteɪt]  美 [ˈdɪkteɪt] 

vt. 命令；口述；使听写

vi. 口述；听写

n. 命令；指示

I don't let this list dictate my life or determine what I have to do for the day. 

我不会让这些工作清单来支配我的生活或者决定我这一天要做什么事情。