撰稿编者按：App的导航控制系统栏是网页结构设计中不可缺少的部份，貌似完全相同，但只不过在结构设计上都有著许多差别。责任撰稿译者Morena结构设计式样、结构设计艺术风格、可视化状况等数个紫菊起程，对导航控制系统栏展开了控制系统的预测。一同来看一看。

APP导航控制系统栏(AppBar)他们如果都很熟识，坐落于萤幕顶端，子集了采用者时常采用的许多机能，是网页结构设计中不可缺少的组成部份。

尽管导航控制系统栏很常用，但他们在采用商品的操作过程中会辨认出，每一APP的导航控制系统栏多多少少都存有许多结构设计上的差别。

为的是能让他们对导航控制系统栏有更明晰且全面性的重新认识，这首诗将导航控制系统栏的结构设计式样、结构设计艺术风格、可视化状况等各方面的文本综合性在一同展开预测，一同来看一看吧~

一、导航控制系统栏的形成

整座导航控制系统栏一般来说分成左、中、右三部份，左侧和左侧主要就用以置放机能命令行，尾端部份主要就用以置放文本副标题，接掌里展开预测朝北三部份的形成。

1. 左侧导航控制系统

置放在APP顶端导航控制系统栏左侧的命令行许多都跟姿势有关，比如继续执行回到姿势、停用姿势或是点选杜塞尔多夫工具栏展开展开姿势等。

除在左侧置放则表示姿势的命令行，还能在置放头暗室、最新消息提示信息等错误率较低的文本，用以引发采用者的特别注意。

在网页端的顶端导航控制系统栏中，左侧都会置放品牌logo，因为网页端顶端的空间更大，所以还能在LOGO周围结合徽标、搜索框、下拉工具栏等空间。

2. 尾端部份

APP顶端导航控制系统栏的尾端部份主要就用于置放副标题，当然根据采用场景的不同，还能置放头像、搜索框、下拉框、导航控制系统等命令行。

（1) 副标题

最常用的是在尾端采用加粗的文本作为副标题，也能采用主副标题+副副标题的形式来展示更多的信息。

还能把副标题区域做成支持下拉的式样，扩展更多的机能全。

（2) 采用者头像

在社交类商品或对话框中，会在尾端部份置放采用者的头像和信息，用以展示采用者的详细信息。

（3) 商品Logo

有些商品还会将Logo放在导航控制系统栏的中心位置用以展示品牌形象，在APP的首页能考虑这样结构设计，起到强调作用。

（4) 分段命令行

在移动端商品中，还能在尾端部份置放分段命令行，一般来说2-3个标签，在早期的网易云音乐APP中就用到了这样的结构设计，通过点选标签或是左右滑动网页完成文本切换。

（5) 搜索框

导航控制系统栏尾端时常能看到搜索框，然后搜索框左右两边置放其他的命令行。当导航控制系统栏的文本太多，比如有文本副标题、头像、按钮等命令行，搜索栏和这些命令行可能无法并排置放时，能将搜索栏横向拉长，放在下一行单独展示。

现在淘宝APP首页的导航控制系统栏就做成了两行，上一行用以置放文本副标题和机能图标，搜素栏子集扫码、拍照等机能单独作为一行。

（6) 导航控制系统选项

在网页中，标签、按钮、面包屑导航控制系统等常用的导航控制系统组件，一般来说会固定在网页导航控制系统的中心位置。当网页缩小到移动端时，考虑到移动端尺寸较小，如果顶端导航控制系统文本太多，能尝试把机能组件放到第二层级。

3. 左侧导航控制系统

相对于左侧和尾端，APP导航控制系统栏的左侧部份更加灵活，没有固定的要求说必须放哪些文本，根据需求置放各种类型的机能命令行。

（1) 头像

如果想调用与采用者属性有关的机能，就能将头像放在导航控制系统栏的左侧区域，点选弹出有关的选项。

（2) 图标

在左侧区域置放机能图标是最常用的结构设计，把采用者最常采用的机能，比如最新消息图标、搜索图标，都能集中到导航控制系统栏的左侧区域。

如果左侧需要展示的图标太多，能把这些图标聚合在一同，处理成类似微信首页右上角的结构设计，点选之后出现更多机能。

（3) 按钮

按钮也能放在左侧区域来引导采用者操作。当出现数个按钮时，要采用式样和颜色来灵活区分按钮的主次关系。

按钮的形状包括圆形、方形、圆角矩形等，按钮式样包括颜色填充、描边、图标和文本结合等多种艺术风格，通过灵活的结构设计抓住采用者的特别注意力。

（4) 搜索框

在网页端中会看到搜索框放在左侧的结构设计，将搜索框作为单独的命令行或是和其他命令行组合采用放在左侧，方便采用者快速访问。

（5) 下拉工具栏

在Pad端和网页端中，能采用嵌套在应用栏左侧的下拉工具栏展开切换帐户、语言等操作。

二、导航控制系统栏的5种结构设计艺术风格

顶端导航控制系统栏结构设计艺术风格需要与与整座商品的UI相匹配，常用的导航控制系统栏结构设计式样有

扁平艺术风格、阴影悬浮效果、颜色填充效果、采用半透明导航控制系统等。

1. 扁平艺术风格

顶端导航控制系统区域完全融入到背景中，和整座网页融为一个整体，网页看起来比较简约。

2. 阴影悬浮艺术风格

通过在导航控制系统栏下方增加一层阴影效果，让导航控制系统栏有悬浮在网页上的感觉，同时便于和网页其他文本作区分。

3. 颜色填充艺术风格

将导航控制系统栏背景展开色彩填充，不透明度降低到8-12%，采用许多简约而高级的色彩来增加网页的丰富度，体现品牌特点。

4. 深色艺术风格

APP网页的背景大多都是浅色，这个时候如果采用深色的导航控制系统，能够产生很强烈的对比效果，用以突出导航控制系统中的文本。比如早期的微信APP网页，顶端就是采用深色的导航控制系统，和浅色的网页作对比。

5. 透明艺术风格

图片详情页的UI结构设计中常用到透明的导航控制系统艺术风格，既能避免导航控制系统栏将图片文本遮挡，还能突出网页的高级感。

三、导航控制系统栏可视化状况预测

1. 选中状况

当采用者与导航控制系统栏可视化时，导航控制系统栏上的命令行要能够动态切换来为采用者提供即时反馈，比如当选中网页中的文本时，导航控制系统栏要出对应的操作提示信息，是否删除、分享等。

2. 滚动状况

当网页上下滚动时，原本扁平的APP导航控制系统栏出现阴影悬浮的升高效果，状况的改变会让操作看起来更自然。

3. 背景模糊

当网页滚动时，顶端导航控制系统出现毛玻璃的模糊效果，这是现在很流行的视觉效果，会让整体的采用者体验更流程。

4. 尺寸调整

当网页尺寸变小时，要考虑将多余的导航控制系统选项折叠并隐藏在更多图标里面，这样才会让结构设计更合理。

四、最后

以上就是导航控制系统栏(App Bar)结构设计中能用到的知识点和结构设计细节，希望通过这些文本能帮助你对导航控制系统栏有更多的结构设计想法和思考。

专栏作家

译者：Clippp，微信公众号：Clip结构设计夹。每周精选结构设计文章，专注分享关于商品、可视化、UI视觉上的结构设计思考。

责任撰稿原创发布于人人都是商品经理，未经译者许可，禁止转载。

题图来自Unsplash，基于CC0协议。