App bars: bottom 底部应用栏
【摘要】 App bars: bottom 底部应用栏考必过小编为大家整理了关于App bars: bottom 底部应用栏的信息，希望可以帮助到大家！
底部应用栏显示移动端界面底部的导航和关键操作。
目录
- 用法
- 剖析
- 行为
- 主题化
- 规格
用法
底部App栏提供对底部导航抽屉和至多四个操作的访问，包括浮动操作按钮。
原则
使用场景
底部应用栏应该用于：
- 仅限移动设备
- 访问底部导航抽屉
- 界面有两到五个操作
底部应用栏不应该用于：
- 带有底部导航栏的应用
- 界面只有一个或没有操作
剖析
底部应用栏可以包含适用于当前界面上下文的操作。它们包括最左侧的导航菜单控件和浮动操作按钮（若有）。若底部应用栏中有溢出菜单，将其放在其他控件的末尾。
- 容器
- 导航抽屉控件
- 浮动操作按钮（FAB）
- 操作图标
- 溢出菜单控件
位置
基于FAB是否存在以及其位置，底部应用栏有三种不同的布局。这些布局决定了可以应用栏中可以放多少操作。
FAB在中间
在主界面上使用底部应用栏，其中包含导航菜单控件和突出操作（例如FAB）。可以在应用栏的另一侧放置最少一个，最多两个附加操作。
FAB在末端
在二级界面使用FAB，需要有FAB和三到四个其他操作。
没有FAB
当不需要浮动操作按钮时，底部应用栏可以容纳导航菜单图标，并且在另一边最多可以放四个操作。
横屏
在横屏方向，操作保持靠边对齐，以便于手持访问。
浮动操作按钮
如果存在，浮动操作按钮（FAB）将以两种方式之一显示在底部应用栏上：
-
- 重叠：FAB处于比底部应用栏更高的海拔，并且对应用栏的形状没有影响。
- 内嵌：FAB与底部应用栏处于同一海拔，并且应用栏变形以让FAB停靠在底部应用栏的凹槽中。
使用内嵌来增加FAB的视觉显著性或突出自定义元素形状。有关底部应用栏中内嵌FAB的更多规范，请参阅主题化部分。
重叠FAB
内嵌FAB
不要将FAB放在底部应用栏之外，因为那样更难触及。
行为
布局
为了支持App不同部分的意图，可以更改底部应用栏的布局和操作来适配每个界面。
例如，界面可以根据最适合界面内容的方式来显示更多或更少的操作。
要显示主要操作，此底部应用栏会在其主界面上使用居中的FAB布局。而查看消息时，底部应用栏将更改为“末端FAB”布局以适应更多的上下文操作。
滚动
滚动时，底部应用栏可以显示或消失：
- 向下滚动隐藏底部应用栏。如果有FAB，它将从应用栏上分离并保留在界面上。
- 向上滚动显示底部应用栏，如果有FAB，则它重新和FAB连接。
底部应用栏可沿其边缘掘出一个形状，例如容纳FAB的凹槽。当应用栏与FAB分离时，应用栏将返回其默认形状。当返回界面并重新连接FAB后，应用栏又恢复其缺口形状。
FAB可一直停留在界面上，即使在面滚动时底部应用栏隐藏起来的时候。
海拔高度
底部应用栏的高度为8dp。当与FAB配对时，要给FAB加上静止和抬升高度以便其在底部应用栏上方可见。
- 内容（0dp）
- Snackbar（6dp）
- 底部应用栏（8dp）
- 浮动按钮（12dp静止时）
- 底部导航抽屉（16dp）
从底部应用栏弹出的菜单（例如底部导航抽屉或溢出菜单）展开后会是比底部应用栏更高的底部卡片（bottom sheet）。
此底部导航抽屉从底部应用栏弹出。抽屉在底部应用栏前面打开，并在菜单达到最大高度时会出现顶部应用栏，以便关闭抽屉。
覆盖底部应用栏的元素
底部应用栏可以被键盘和其他临时界面覆盖。如果你的App需要频繁遮挡应用栏，则应换成其他组件。
位置
导航
底部应用栏可以显示导航菜单图标以打开底部导航抽屉，但应用栏本身不包含任何导航操作（例如返回导航到主界面或关闭图标）。应用导航应放置在其他组件中，例如顶部应用栏或嵌入在界面上。
与顶部应用栏配对
与底部应用栏一起使用时，顶部应用栏可以提供返回导航和其他操作。在整个App中，两个栏上的操作都有统一组织和划分。
以下项目受益于特定的展示位置：
- 将单个导航菜单控件放在底部应用栏中（为了可访问）
- 将单个溢出菜单控件作为末端操作
- 将操作（例如搜索）放置在整个应用中的固定位置
- 在顶部应用栏中放置破坏性操作，例如“删除”
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 底部应用栏的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！