App bars: bottom 底部应用栏

【摘要】 App bars: bottom 底部应用栏考必过小编为大家整理了关于App bars: bottom 底部应用栏的信息，希望可以帮助到大家！

底部应用栏显示移动端界面底部的导航和关键操作。

​​

目录

1. 用法
2. 剖析
3. 行为
4. 主题化
5. 规格

用法

底部App栏提供对底部导航抽屉和至多四个操作的访问，包括浮动操作按钮。

原则

使用场景

底部应用栏应该用于：

1. 仅限移动设备
2. 访问底部导航抽屉
3. 界面有两到五个操作

底部应用栏不应该用于：

1. 带有底部导航栏的应用
2. 界面只有一个或没有操作

剖析

底部应用栏可以包含适用于当前界面上下文的操作。它们包括最左侧的导航菜单控件和浮动操作按钮（若有）。若底部应用栏中有溢出菜单，将其放在其他控件的末尾。

1. 容器
2. 导航抽屉控件
3. 浮动操作按钮（FAB）
4. 操作图标
5. 溢出菜单控件

位置

基于FAB是否存在以及其位置，底部应用栏有三种不同的布局。这些布局决定了可以应用栏中可以放多少操作。

FAB在中间

在主界面上使用底部应用栏，其中包含导航菜单控件和突出操作（例如FAB）。可以在应用栏的另一侧放置最少一个，最多两个附加操作。

FAB在末端

在二级界面使用FAB，需要有FAB和三到四个其他操作。

没有FAB

当不需要浮动操作按钮时，底部应用栏可以容纳导航菜单图标，并且在另一边最多可以放四个操作。

横屏

在横屏方向，操作保持靠边对齐，以便于手持访问。

浮动操作按钮

如果存在，浮动操作按钮（FAB）将以两种方式之一显示在底部应用栏上：

1. 1. 重叠：FAB处于比底部应用栏更高的海拔，并且对应用栏的形状没有影响。

1. 内嵌：FAB与底部应用栏处于同一海拔，并且应用栏变形以让FAB停靠在底部应用栏的凹槽中。

使用内嵌来增加FAB的视觉显著性或突出自定义元素形状。有关底部应用栏中内嵌FAB的更多规范，请参阅主题化部分。

重叠FAB

内嵌FAB

 

不要将FAB放在底部应用栏之外，因为那样更难触及。

行为

布局

为了支持App不同部分的意图，可以更改底部应用栏的布局和操作来适配每个界面。

例如，界面可以根据最适合界面内容的方式来显示更多或更少的操作。

要显示主要操作，此底部应用栏会在其主界面上使用居中的FAB布局。而查看消息时，底部应用栏将更改为“末端FAB”布局以适应更多的上下文操作。

滚动

滚动时，底部应用栏可以显示或消失：

1. 向下滚动隐藏底部应用栏。如果有FAB，它将从应用栏上分离并保留在界面上。
2. 向上滚动显示底部应用栏，如果有FAB，则它重新和FAB连接。

底部应用栏可沿其边缘掘出一个形状，例如容纳FAB的凹槽。当应用栏与FAB分离时，应用栏将返回其默认形状。当返回界面并重新连接FAB后，应用栏又恢复其缺口形状。

FAB可一直停留在界面上，即使在面滚动时底部应用栏隐藏起来的时候。

海拔高度

底部应用栏的高度为8dp。当与FAB配对时，要给FAB加上静止和抬升高度以便其在底部应用栏上方可见。

1. 内容（0dp）
2. Snackbar（6dp）
3. 底部应用栏（8dp）
4. 浮动按钮（12dp静止时）
5. 底部导航抽屉（16dp）

从底部应用栏弹出的菜单（例如底部导航抽屉或溢出菜单）展开后会是比底部应用栏更高的底部卡片（bottom sheet）。

此底部导航抽屉从底部应用栏弹出。抽屉在底部应用栏前面打开，并在菜单达到最大高度时会出现顶部应用栏，以便关闭抽屉。

覆盖底部应用栏的元素

底部应用栏可以被键盘和其他临时界面覆盖。如果你的App需要频繁遮挡应用栏，则应换成其他组件。

位置

导航

底部应用栏可以显示导航菜单图标以打开底部导航抽屉，但应用栏本身不包含任何导航操作（例如返回导航到主界面或关闭图标）。应用导航应放置在其他组件中，例如顶部应用栏或嵌入在界面上。

与顶部应用栏配对

与底部应用栏一起使用时，顶部应用栏可以提供返回导航和其他操作。在整个App中，两个栏上的操作都有统一组织和划分。

以下项目受益于特定的展示位置：

1. 将单个导航菜单控件放在底部应用栏中（为了可访问）
2. 将单个溢出菜单控件作为末端操作
3. 将操作（例如搜索）放置在整个应用中的固定位置
4. 在顶部应用栏中放置破坏性操作，例如“删除”

​
Snackbars

为避免阻塞，Snackbar和Toast应在底部应用栏上方垂直排列出现。有关其布局和位置的更多规范，请参阅Snackbars 。

在底部应用栏和FAB上方插入Snack或Toast。

不要把Snackbar放在底部应用栏或FAB前面。

主题化

Posivibe材料主题

此社交媒体App的底部应用栏已使用材料主题进行自定义。定制领域包括颜色和形状。

Posivibe的自定义底部应用栏

​​

颜色

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

元素	类别	属性	值
容器	表面颜色	颜色 不透明度	#FFFFFF 100%
图标	表面之上	颜色 不透明度	#000000 100%

​

形状

Posivibe底部应用栏的上边缘带有自定义形状。

元素	属性	值
容器	上边缘	三角形边缘SVG 路径数据: “l 42 42 l 42 -42″

更多路径语法规范，请参阅https://www.w3.org/TR/SVG/paths.html。

规格

移动端竖屏

底部应用栏是仅限移动设备的组件，不适用于平板电脑或台式机。

导航菜单的另一端使用最少1个，最多2个操作。

FAB在中间

FAB在中间并切割应用栏

​​

FAB在末端

最少2个，最多4个操作在FAB的另一端

​​

没有FAB

最少2个，最多4个操作在导航菜单的另一端

​​

移动端横屏

底部应用栏是仅限移动设备的组件，不适用于平板电脑或台式机。导航菜单的另一端放置最少1个，最多两个操作。

​​

以上就是App bars: bottom 底部应用栏的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！