|
编辑导语：App的导航栏是页面设计中不可缺少的部分，看似相同，但其实在设计上都有着有些差异。本文作者从刚设计样式、设计风格、交互状态等多个发面出发，对导航栏进行了系统的分析。一块来瞧瞧。 
APP导航栏(AppBar)大众应该都很熟练，位置于屏幕顶部，集合了用户经常运用的有些功能，是页面设计中不可缺少的组成部分。
虽然导航栏很平常，然则咱们在运用制品的过程中会发掘，每一个APP的导航栏或多或少都存在有些设计上的差异。
为了能让大众对导航栏有更清晰且全面的认识，这篇文案将导航栏的设计样式、设计风格、交互状态等多方面的内容综合在一块进行分析，一块来瞧瞧吧~
1、导航栏的形成
全部导航栏一般分为左、中、右三部分，左侧和右侧重点用来安置功能控件，中间部分重点用来安置文字标题，接下里展开分析左中右三部分的形成。 
1. 左侧导航
安置在APP顶部导航栏左侧的控件非常多都跟动作关联，例如执行返回动作、关闭动作或点击汉堡菜单进行展开动作等。 
除了在左侧安置暗示动作的控件，还能够在安置头像框、信息提示等优先级较高的内容，用来引起用户的重视。 
在网页端的顶部导航栏中，左侧都会安置品牌logo，由于网页端顶部的空间更大，因此还能够在LOGO周边结合徽标、搜索框、下拉菜单等空间。 
2. 中间部分
APP顶部导航栏的中间部分重点用于安置标题，当然按照运用场景的区别，还能够安置头像、搜索框、下拉框、导航等控件。
（1) 标题
最平常的是在中间运用加粗的文字做为标题，亦能够运用主标题+副标题的形式来展示更加多的信息。 
还能够把标题区域做成支持下拉的样式，扩展更加多的功能全。 
（2) 用户头像
在社交类制品或对话框中，会在中间部分安置用户的头像和信息，用来展示用户的仔细信息。 
（3) 制品Logo
有些制品还会将Logo放在导航栏的中心位置用来展示品牌形象，在APP的首页能够思虑这般设计，起到强调功效。 
（4) 分段控件
在移动端制品中，还能够在中间部分安置分段控件，一般2-3个标签，在初期的网易云音乐APP中就用到了这般的设计，经过点击标签或上下滑动页面完成内容切换。 
（5) 搜索框
导航栏中间经常能看到搜索框，而后搜索框上下两边安置其他的控件。当导航栏的内容太多，例如有文字标题、头像、按钮等控件，搜索栏和这些控件可能没法并排安置时，能够将搜索栏横向拉长，放在下一行单独展示。
此刻淘宝APP首页的导航栏就做成为了两行，上一行用来安置文字标题和功能图标，搜素栏集合扫码、拍照等功能单独做为一行。 
（6) 导航选项
在网页中，标签、按钮、面包屑导航等平常的导航组件，一般会固定在网页导航的中心位置。当页面缩小到移动端时，思虑到移动端尺寸较小，倘若顶部导航内容太多，能够尝试把功能组件放到第二层级。 
3. 右侧导航
相针对左侧和中间，APP导航栏的右侧部分更加灵活，无固定的需求说必要放那些内容，按照需求安置各样类型的功能控件。
（1) 头像
倘若想调用与用户属性相关的功能，就能够将头像放在导航栏的右侧区域，点击弹出关联的选项。 
（2) 图标
在右侧区域安置功能图标是最平常的设计，把用户最常运用的功能，例如信息图标、搜索图标，都能够集中到导航栏的右侧区域。 
倘若右侧必须展示的图标太多，能够把这些图标聚合在一块，处理成类似微X首页右上角的设计，点击之后显现更加多功能。 
（3) 按钮
按钮亦能够放在右侧区域来引导用户操作。当显现多个按钮时，要运用样式和颜色来灵活区分按钮的主次关系。
按钮的形状包含圆形、方形、圆角矩形等，按钮样式包含颜色填充、描边、图标和文字结合等多种风格，经过灵活的设计抓住用户的重视力。 
（4) 搜索框
在网页端中会看到搜索框放在右侧的设计，将搜索框做为单独的控件或和其他控件组合运用放在右侧，方便用户快速拜访。 
（5) 下拉菜单
在Pad端和网页端中，能够运用嵌套在应用栏右侧的下拉菜单进行切换帐户、语言等操作。 
2、导航栏的5种设计风格
顶部导航栏设计风格必须与与全部制品的UI相匹配，平常的导航栏设计样式有
扁平风格、暗影悬浮效果、颜色填充效果、运用半透明导航等。 
1. 扁平风格
顶部导航区域完全融入到背景中，和全部页面融为一个整体，页面看起来比较简约。 
2. 暗影悬浮风格
经过在导航栏下方增多一层暗影效果，让导航栏有悬浮在页面上的感觉，同期便于和页面其他内容作区分。 
3. 颜色填充风格
将导航栏背景进行色彩填充，不透明度降低到8-12%，运用有些简约而高级的色彩来增多页面的丰富度，表现品牌特点。 
4. 深色风格
APP页面的背景大多都是浅色，这个时候倘若运用深色的导航，能够产生很剧烈的对比效果，用来明显导航中的内容。例如初期的微XAPP页面，顶部便是采用深色的导航，和浅色的页面作对比。 
5. 透明风格
照片详情页的UI设计中常用到透明的导航风格，既能避免导航栏将照片内容遮挡，还能明显页面的高级感。 
3、导航栏交互状态分析
1. 选中状态
当用户与导航栏交互时，导航栏上的控件要能够动态切换来为用户供给即时反馈，例如当选中页面中的内容时，导航栏要出对应的操作提示，是不是删除、分享等。 
2. 滚动状态
当页面上下滚动时，本来扁平的APP导航栏显现暗影悬浮的升有效果，状态的改变会让操作看起来更自然。 
3. 背景模糊
当页面滚动时，顶部导航显现毛玻璃的模糊效果，这是此刻很流行的视觉效果，会让整体的用户体验更流程。 
4. 尺寸调节
当页面尺寸变小时，要思虑将多余的导航选项折叠并隐匿在“更加多”图标里面，这般才会让设计更恰当。 
4、最后
以上便是导航栏(App Bar)设计中能用到的知识点和设计细节，期盼经过这些内容能帮忙你对导航栏有更加多的设计想法和思考。
#专栏作家#
作者：Clippp，微X公众号：Clip设计夹。每周精选设计文案，专注分享关于制品、交互、UI视觉上的设计思考。
本文原创发布于人人都是制品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。
| 
发表于 2024-8-12 01:02:27
