这是一个翻译系列，原文是谷歌18年所出的材料设计指南（文末有链接），强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇，一共百余篇，欢迎关注哦。
顶部应用栏显示与当前界面相关的信息和操作。
目录
目录
用法剖析行为语境操作栏主题化规格
用法
顶部应用栏提供与当前界面相关的内容和操作。它用于品牌推广、界面标题、导航和操作。它可以转换为基于上下文的操作栏。
原则
类型
常规型常见的顶部应用栏
语境操作栏
语境操作栏为已选对象提供操作。顶部应用栏可以转换为语境操作栏并一直是激活状态，直到执行某个操作或关闭它。
剖析
对于从左到右的语言，建议在顶部应用栏元素放置的方式有
将导航放在最左侧将任何标题放在导航右侧将上下文操作放在导航右侧将溢出菜单（如果使用）放在最右侧
对于从右到左的语言，则应倒过来放。
容器导航图标（可选）标题（可选）操作项（可选）溢出菜单（可选）
栏
应用栏包含顶部应用栏的内容。以下是各种应用栏高度：
常规型突出型密集型（仅限桌面）突出密集型（仅限桌面）
突出型突出型顶部应用栏可用于更长的标题、容纳图像或为顶部应用栏提供更强的存在感。
移动设备的常规顶部应用栏移动设备的突出型顶部应用栏
密集型（仅限桌面）顶部应用栏可以在桌面端稍压缩以适应更密集的布局。
桌面端常规型顶部应用栏桌面端密集型顶部应用栏
突出密集型桌面端的突出密集型顶部应用栏可以有更紧凑的布局。
桌面端突出型顶部应用栏桌面端突出密集顶部应用栏
应用栏的图片应用栏可以包含图像。建议使用突出型顶部应用栏以供装载图像，因为它们有更多空间。不要使用让顶部应用栏的文本和图标难以辨认的图像。
带有图像的顶部应用栏
不要使用让顶部应用栏的文本和图标难以辨认的图像。
导航图标（可选）
导航图标是可选的。在应用栏用到它时，把它放在栏的左侧。可以采用以下任何一种形式：
菜单图标，用于打开导航抽屉返回箭头，用于导航回到App的上一级后退箭头，返回上一个界面
标题（可选）
应用栏标题可用于描述：
用户当前所在的界面用户当前所在的部分正在使用的应用
默认情况下，标题在桌面端保持左对齐。移动设备和平板电脑上标题的默认位置则取决于其相应的平台。更多信息请参阅跨平台适配。
如果标题文本很长，请使用突出型应用栏并将标题写成两行。
常规型顶部应用栏不可以给文字换行。
不要省略文本，遮住完整的标题可能会导致误解。
不要为了单行排版而缩小文本。
操作项和溢出菜单（可选）
App的操作位于应用栏右侧，可以是图标，也可以是溢出菜单。移动端的溢出菜单因平台而异。更多相关规范，请参阅跨平台适配。
图标位置将最常用的操作放在左侧，从左向右常用度逐减。任何不适合应用栏的剩余操作都可以放进溢出菜单。操作项会随着应用栏宽度的变化而移入、移出溢出菜单，例如，当设备从横向旋转到纵向。 更多相关规范请参阅顶部应用栏行为。
将最常用的操作（1）放在最左侧，将第二个最常用的操作（2）放在右侧，依此类推。任何剩余或辅助操作都应放在溢出菜单中（3）。
跨平台适配
在iOS上，工具栏被叫做导航栏且高度比安卓上的要矮。在安卓上，工具栏叫做顶部应用栏。
建议工具栏的标题采用平台的默认文本对齐方式，除非是有多个操作按钮同时存在。
半透明
材料设计使用投影来表达应用栏的高度。在iOS中，则可使用半透明来区分开应用栏和内容。
行为
滚动
在滚动时，顶部应用栏可以保留在原位，或以以下方式进行转换：
向上滚动会隐藏顶部应用栏向下滚动则显示顶部应用栏
当顶部应用栏滚动时，其高于其他元素的海拔变得更明显。
向上滚动时，顶部应用栏会消失，向下滚动时会显示。
顶部应用栏可以与内容位于同一高度。 滚动时，它们会增加高度并让内容在其后面滚动。
向上滚动时，使用图像的突出型顶部应用栏可以转换为常规型顶部应用栏。直到用户滚动回页面顶部时才返回突出型模式。
嵌套操作
界面大小被调整时，顶部应用栏会随之改变大小。操作将合并到溢出菜单中。
操作定位
操作项从右向左依次移入溢出菜单，最常用的操作项最后移入。
当调整顶部应用栏大小时，操作项将从右向左依次移入溢出菜单。缩小至62.5％
语境操作栏
用法
顶部应用栏可以转换为语境操作栏，以便为所选项目提供情境操作。例如，在用户从图库中选择照片时，顶部应用栏转换为具有与所选照片相关操作的语境应用栏。当顶部应用栏转换为语境操作栏时，会发生以下变化：
应用栏颜色发生变化导航图标将被替换为关闭图标顶部应用栏标题文字转换为语境操作栏文字顶部应用栏操作将被替换为情境操作
关闭后，语境操作栏将转换回顶部应用栏。
顶部应用栏转换为语境操作栏
剖析
关闭按钮（而不是导航图标）语境标题语境操作溢出菜单（可选）
应用栏
当顶部应用栏转换为语境操作栏时，应用栏应更改颜色以表明状态变化。
主题化
Fortnightly材料主题
这款新闻App的顶部应用栏已使用材料主题进行了自定义。 定制领域包括颜色和排版。
Fortnightly的自定义顶部应用栏
颜色
元素
元素
属性
值
容器
表面
颜色
不透明度
#FFFFFF
100%
文本，图标
表面之上
颜色
不透明度
#000000
100%
排版
元素
类别
属性
值
文本
标题6（H6）
字体
字型
字号
大小写
Merriweather
Bold Italic
20
首字母大写
Rally材料主题
此理财App的顶部应用栏已使用材料主题进行自定义。定制领域包括颜色和排版。
Rally的自定义顶部应用栏
颜色
元素
类别
属性
值
容器
表面
颜色
不透明度
#363640
100%
文本
表面之上
颜色
不透明度
#FFFFFF
100%
图标
表面之上
颜色
不透明度
#FFFFFF
60%
排版
元素
类别
属性
值
文本
标题6（H6）
字体
字型
字号
大小写
Roboto Condensed
Regular
20
首字母大写
Shrine材料主题
这个零售App的顶部App栏已使用材料主题进行了自定义。定制领域包括颜色和排版。
Shrine的自定义顶部应用栏
颜色
元素
类别
属性
值
容器
主色
颜色
不透明度
#FEDBD0
100%
文本，图标
主色之上
颜色
不透明度
#442C2E
100%
排版
元素
类别
属性
值
文本
标题6（H6）
字体
字型
字号
大小写
Rubik
Medium
20
首字母大写
规格
移动端
常规顶部应用栏
扩展的顶部应用栏
原文地址：Material Design
译者：珠珠
