Material Design——App bars: botto
#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计，借此加深各种组件的应用~
Material Design链接：App bars: bottom
在移动设备底部，底部应用程序栏显示导航和关键操作。
一、使用
底部应用程序栏提供对底部导航抽屉的访问和可多达四个的操作, 包括浮动动作按钮。
· 可行（Actionable） app 底部导航栏突出显示重要的屏幕操作, 并提高对浮动动作按钮的认识。
· 灵活（Flexible） app 底部导航栏的布局和操作根据需求而变化。
· 符合人体工程学（Ergonomic） 使用移动设备时，手持姿势可以轻易点击 app 底部导航栏。
△ 什么时候使用
底部程序应用栏于:
· 仅限移动设备
· 进入底部导航抽屉
· 具有五个操作的屏幕
底部应用程序栏不应用于:
· 带有底部导航栏的应用程序
· 带有一个或多个操作的屏幕
Right：使用底部应用程序栏提供方便的操作访问。Wrong：不要在屏幕上使用一个或没有操作的底部应用程序栏。
二、分析
底部应用程序栏可以包含应用于当前屏幕上下文的操作。它们包括在最左边的导航菜单控件和浮动动作按钮 (当存在时)。如果包含在底部应用程序栏中, 则会在其他操作结束时放置一个溢出菜单控件。
1. 容器
2.导航抽屉控制
3. 浮动动作按钮（FAB）
FAB 按钮（Fixed Action Button）在Google的宣传片里，最引人注目的新玩意，就是这个淘气的圆形小按钮了。 从宣传片里来看，这个按钮的功能并不局限于“新建”“播放”“收藏”“更多”等功能。它于整体界面的配色形成比较大的反差，因此会让这个按钮在界面里显得非常耀眼，从这样的设计来看，这个按钮所背负的任务将会是整个界面的主要操作。虽然有点类似与Path里的“+”按钮，但由于iOS系统本身并没有这样的设计，这将会成为最区别于iOS的一种交互设计，对交互设计师和产品经理来说都可能会成为一种挑战。
FAB
4. 动作图标
5. 溢出菜单控件
△ 位置
底部的应用程序栏有三种不同的布局，基于一个 FAB 的存在和它在导航栏的位置。这些布局决定了包含在状态栏中操作按钮的数量。
在主页上使用底部的应用程序栏, 该功能具有导航菜单控件和突出的操作 (如 "按钮")。最小的一个和最多两个额外的动作可以放在状态栏的另一侧。
在需要浮动动作按钮和三-四个附加操作的辅助屏幕上使用一个返回按钮。
当不需要浮动按钮时, 底部的应用程序栏可以容纳导航菜单图标和多达四个在对立边上对齐的动作。
在横向方向上, 动作保持与屏幕边缘对齐, 便于手持访问。
△ 浮动按钮
当前, 浮动动作按钮 （FAB）以下两种方式之一显示在底部应用程序栏中:
· 重叠 该应用程序栏的高度比底部的应用程序栏高, 对应用程序栏的形状没有影响。
· 嵌入式 该应用程序栏与底部应用程序栏的高度相同, 形状转换让按钮在一个凹槽中嵌入底部的应用程序栏。
使用嵌入来增加按钮的视觉突出, 或强调自定义元素形状。
重叠的按钮
嵌入式的按钮
不要将一个按钮放在底部的应用程序栏之外, 因为会对用户的点击造成困扰，不利于用户点击。
三、行为
△ 布局
为了支持应用程序不同部分的意图, 可以更改底部应用程序栏的布局和操作, 以适配每个屏幕。
例如, 屏幕可以根据最适合屏幕内容的操作显示更多或更少的动作。
为了展示一个主要的动作, 这个底部的应用栏在其主屏幕上使用居中的按钮布局。查看邮件时, 底部的应用程序栏布局将更改为 "最终按钮" 布局, 以适应其他上下文操作。
△ 滚动
滚动时, 底部应用程序栏可能出现或消失:
· 向下滚动隐藏底部应用程序栏。如果有一个按钮存在, 使它从应用程序栏分离, 并保持在屏幕上。
· 向上滚动时，底部应用栏隐藏吗，按钮在底部程序栏保持不变。
底部的应用程序栏可以包含一个形状, 如一个凹槽, 沿其边缘, 以适应按钮。当条形图与按钮分离时, 条形将返回到其默认形状。当回到屏幕和重新附加到按钮, 应用程序栏恢复其缺口形状。
这个按钮可以保持在屏幕上, 即使底部应用程序栏隐藏时, 滚动屏幕。
△ 高度
由底部应用程序栏 (如底部导航抽屉或溢出菜单) 生成的菜单长度比条形图更高，且从底板打开。
这个底部导航抽屉从底部的应用程序栏打开。
当它全屏显示的时候，在顶部应用程序栏关闭底板。
覆盖底部应用程序栏的元素
底部的应用程序栏可以覆盖键盘和其他临时界面。如果应用程序会经常干扰该栏, 则应改用另一个组件。
Right：键盘可以临时覆盖底部的应用程序栏；Wrong：不要将底部的应用程序栏附加到键盘的顶部。
△ 位置
底部的应用程序栏可以显示一个导航菜单图标来打开一个底部导航抽屉, 但该栏不包含任何导航操作本身 (如向上导航到主屏幕或关闭图标)。应用程序导航应该放在另一个组件, 如顶部应用程序栏, 或嵌入在屏幕上。
Right：在底部的应用程序栏外提供导航, 允许用户返回到以前的应用程序屏幕；Wrong：在主屏幕上, 不要在顶部和底部的应用程序栏中放置导航菜单控件。只有一个应用程序栏能在底部的导航栏内。
与顶部应用程序栏配对
当与底部的应用程序栏一起使用时, 可以在顶级应用程序栏设计向上导航和其他操作。在整个应用程序中, 顶部和底部状态栏应该经过充分的思考并保持两者操作的一致性。
以下原则有助于更好地设计:
· 在底部应用程序栏中放置一个导航菜单控件 (用于到达)
· 将单个溢出菜单控件放置为尾随操作
· 将操作 (如搜索) 放置在整个应用程序的一致位置中
· 在顶部应用程序栏中放置破坏性动作, 如 "删除"
Right：在辅助屏幕上使用顶部应用程序栏作为返回上级的按钮。；Wrong：在主屏幕上, 不要同时在顶部和底部的应用程序栏中设计导航菜单控件，应该只有其一有这个控制按钮。
左：将溢出菜单作为应用程序栏的最后一个操作。；右：底部的应用程序栏可以提供对操作 (如导航和搜索) 的一致访问, 允许顶部应用程序栏保留与底部底部导航栏相同的功能按钮。
Snackbars
为了避免阻碍, Snackbars 和 toasts 应该在一个底部的应用栏上方的垂直位置进行动画处理。有关其布局和定位的更多指导, 请参阅 Snackbars 的设计规范。
Right：在底部的应用程序栏上插入一个 Snackbars 或 toasts；Wrong：不要在状态栏放置此提示。
四、主题
△ 颜色
△ 尺寸
END.THANKS FOR YOUR READING~
如有不当，还请多多指教~
