#我是一个可爱的搬砖工系列# 看了 @霖酱 的分享，自己也尝试着对照英文翻译学习MD的组件设计，借此加深各种组件的应用~
Material Design链接：App bars：top
顶部应用程序栏显示与当前屏幕相关的信息和操作。
使用
顶部应用程序栏提供与当前屏幕相关的内容和操作。它用于品牌（branding）、屏幕标题（screen titles）、导航（navigation）和操作（actions）。
它可以转换为上下文操作栏（contextual action bar）。
原则
· 保持（Persistent ） 顶级应用程序栏出现在应用程序中每个屏幕的顶部, 并且可以在滚动时消失。
· 引导（Guiding） 顶级应用程序栏提供了一个可靠的方式来指导用户通过应用程序。
· 一致（Consistent） 顶级应用程序栏具有一致的位置和内容, 以提高熟悉度。
类型
· 常规 常规的顶级应用程序栏
· 上下文操作栏 上下文操作栏为所选项目提供操作。顶部应用程序栏可以转换为上下文操作栏, 直到采取操作或被取消时才保持活动状态。
分析
建议在顶部应用程序栏中为从左向右的顺序放置元素:
· 在最左边放置导航（Place navigation on the far left）
· 将任何标题放置在导航右侧（Place any titles to the right of navigation ）
· 将上下文操作放置到导航右侧（Place contextual actions to the right of navigation）
对于从右向左的语言, 应翻转位置。
1. 容器 Container
2. 导航图标 (可选) Navigation icon (optional)
3. 标题 (可选) Title (optional)
4. 操作项 (可选) Action items (optional)
5. 溢出菜单 (可选) Overflow menu (optional)
导航栏
该栏包含顶部应用程序栏的内容。可提供各种导航栏高度:
· 定期 Regular
· 突出 Prominent
突出的顶级应用程序栏可以用于更长的标题, 房子的图像, 或提供一个更强大的存在到顶部的应用程序栏。
左—手机上的常规顶部应用栏 移动中突出的顶级应用程序栏；右—移动中突出的顶级应用程序栏· 密 (仅限桌面) Dense (desktop only)
顶部应用程序栏可以压缩在桌面上, 以适应更密集的布局。
左—桌面上的常规顶部应用程序栏；右—桌面上的密顶应用程序栏
· 突出的密集 (仅桌面) Prominent dense (desktop only)
桌面上突出的顶级应用程序栏可以有一个稠密的状态来容纳更密集的布局。
左—桌面上突出的顶级应用程序栏；右—桌面上突出的密顶应用程序栏
· 状态栏中的图像 Images in bars
条形图可以包含图像。推荐使用突出的顶部应用条形图, 因为它们提供了更多的空间。不要使用使顶级应用程序栏文本和图标难以辨认的图像。
具有图像的突出的顶部应用程序栏
不要 将图像放在使顶部应用程序栏的文本和图标难以辨认的条形图中。
导航图标 (可选)
导航图标是可选的。当它出现在应用程序栏中时, 它在条形图的左侧对齐。它可以采取下列任何形式:
· 一个菜单图标, 它打开一个导航抽屉
· 向上箭头, 它向上导航应用程序的层次结构
· 返回上一个屏幕的后退箭头
标题 (可选)
应用程序栏标题可用于描述:
· 用户当前所在的屏幕
· 用户当前所在的部分
· 正在使用的app
如果标题文本很长, 请使用突出的应用程序栏并将标题包装为两行。
不要在常规的顶部应用程序栏中包装文本。
不要截断文本, 隐藏完整标题可能会引起误解。
不要收缩文本以适应单行。
操作项和溢出菜单 (可选)
app 操作被放在应用程序栏的右侧, 无论是图标还是溢出菜单（overflow menu）。溢出菜单在移动平台上有所不同。更多的指导是指跨平台的适应。（For more guidance refer tocross-platform adaptation.）
Icon placement
把最常用的动作放在左边, 朝着最右边最不使用的动作前进。任何不适合应用程序栏的剩余操作都可以进入溢出菜单。
通过将最常用的操作 (1) 放在最左边、第二个最常用的操作 (2) 到它的右侧, 等等来排序操作项。任何剩余或次要操作都应放在溢出菜单中 (3)
当应用程序栏宽度发生变化时, 操作会移入和流出溢出菜单, 如设备从横向旋转到纵向方向。有关此的更多指南可在顶级应用程序栏行为中使用。
行为
滚动
滚动时, 顶部应用程序栏可以保持到位, 或以下列方式进行转换:
· 向上滚动隐藏顶部应用程序栏
· 向下滚动显示顶部应用程序栏
当顶部应用程序栏滚动时, 它的海拔高于其他元素就会变得明显。
· 顶部应用程序栏在滚动时消失, 并在向下滚动时出现。
· 顶级应用程序栏可以定位在与内容相同的高度。在滚动时, 它们会增加海拔, 并让内容在它们后面滚动。
· 当向上滚动时, 使用图像的突出的顶级应用程序栏可以转换为普通的顶级应用程序栏。在用户滚动回页面顶端之前, 它们不应返回到突出的模式。
嵌套操作
调整屏幕大小时, 顶部应用程序栏将随之调整大小。操作被合并到溢出菜单中。
操作定位
操作将从右向左移动到溢出菜单, 使最常用的操作最后移动到溢出菜单。
当顶部应用程序栏调整大小时, 操作将从右向左移动到溢出菜单。缩小到62.5%
上下文操作栏
使用
顶级应用程序栏可以转换为上下文操作栏, 以便为所选项目提供上下文操作。例如, 当用户从库中选择照片时, 顶部应用程序栏将转换为上下文应用程序栏, 其中带有与所选照片相关的操作。
当顶级应用程序栏转换为上下文操作栏时, 将发生以下更改:
· 条形图颜色更改
· 导航图标被关闭图标替换
· 顶部应用程序栏标题文本转换为上下文操作栏文本
· 使用上下文操作替换顶级应用程序栏操作
关闭后, 上下文操作栏将转换回顶级应用程序栏。
将顶级应用程序栏转换为上下文操作栏
分析
· 关闭按钮 (而不是导航图标)
· 上下文标题
· 上下文操作
· 溢出菜单 (可选)
END.THANKS FOR YOUR READING~
如有不当，还请多多指教~
网友评论