一个网页或APP产品要想有很好的可用性（usability），需要做好的最基本的一点是导航的设计或者说引导用户的设计。如果用户在使用APP的时候找不到自己的处在什么位置或者该怎么去到想要的页面，那么视觉效果再怎么有创意或者抓人眼球都无法弥补产品的缺陷。无论你的产品想满足用户什么需求，让用户知道产品当下的状态和每一步操作之后的结果是对用户最基本的尊重。
定义
常规导航栏主要是指固定在状态栏下，能清晰分辨出的一行导航栏，主要由操作图标、标题、搜索框、背景等组成，大致分成三种，分别是普通标题导航栏、搜索框导航栏以及Tab/分段控件导航栏。
作用
导航设计最大的作用就是：告诉用户当前在哪里，从哪里来，能到哪里去。
当然我们还需要为用户跳转提供方法，并且能明确让用户感受到导航栏元素与页面的关系，最后是表达出内容与用户浏览界面的关系。
1.普通标题导航栏
普通标题导航栏常见于二级详情界面或导航简单的一级界面，主要由操作图标与标题组成，如下图：
该类型导航标题的大小一般是36px，操作图标的大小一般是40px，切图大小一般是48px，背景色多采用白色或APP主题色。并且很多APP为了保证整体界面的简洁，还会去除导航栏底部分割线，仅采用白色作为背景。
2.搜索框导航栏
常规搜索框导航栏是在简单标题导航栏的基础上，增加了一个搜索框，一般去除了导航标题。如下图：
搜索框的宽度随导航栏中操作图标的多少决定，搜索框高度多采用56~60px，搜索框中的图标设计尺寸多采用32px(为了减少切图尺寸，也可采用48px的切图大小)。
在摆放图标时，采用左右间距等分，距离搜索框的间距与边距相等，看起来会更舒适。如下图所示：
3.Tab/分段控件导航栏
Tab左右切换顶部导航栏与分段控件顶部导航栏，都是顶部有多个标题切换的导航栏样式，分为选中标题与未选中标题，如下图：
分段控件顶部导航栏一般有2~5个可选项，且不能左右滑动。Tab左右切换顶部导航栏的可选项可以扩展很多(如爱奇艺的首页顶部Tab切换有24个可选项)，并且可以左右滑动切换，选中样式也比较丰富，常见的有底部加上小短线、字体颜色变化、字号放大等(多个合并使用更能突出选中标题)，如下图：
4.去标题式导航栏
一些产品中的一级界面删除了顶部栏中的标题。要知道为什么被删除，首先要知道为什么而存在。很简单，标题的功能就是告诉用户当前界面的名称。但是这个功能跟底部栏菜单有些重叠，因为用户从底部栏的选中状态也能知道自己当前在哪个界面。那么我刚才也强调了，是一级界面，如果进入了二级界面，一旦没有了底部栏菜单，标题还是要拿回来的。
上面阐述的是一级界面删标题的条件，接下来我们来说说删标题的动机。一个产品的一级界面一般最多只有5个，我们必须在有限的空间中展示足够多的功能和内容，而删标题就是一个不错的方法。下图是对支付宝首页做的一个修改，如果加了标题，我们会发现首页展示的内容就会减少一些。
而一级界面也有优先级之分，「首页」的用户点击率最高，所以我们可以看到很多产品的首页标题都删除了，但是其余一级界面的标题依旧保留。就以上面提到的两款产品为例，b站「首页」和「我的」删除了标题，而支付宝只有「首页」删除了标题。
5.隐藏导航栏
当我们打开one里的一篇文章时，发现顶部栏是隐藏起来的，我继续往下阅读，一旦我往上滑动那么顶部栏就会出现。
我们不妨去分析其背后的原因，用户下拉代表了用户正在阅读，那么为了增加阅读区域，我们选择隐藏顶部栏。
通栏导航栏
通栏导航栏与常规导航栏的构成基本没有区别，最大的不同是，通栏导航栏的背景层一般与下方的模块打通了，在视觉上看起来更为统一，还能一定程度上节约界面空间。如下图：
通栏导航栏常用在电商、旅游等界面复杂或是需要烘托氛围的界面中（多伴随着背景处理），有些也会放在顶部通栏Banner上，节省空间的同时减少割裂感。
通栏导航栏的背景处理方式一般有三种
1. 特殊背景处理：与下方模块整体风格保持一致，多采用与下方一致的图片背景；
2. 颜色、渐变背景：采用纯色或是渐变背景，常见于卡片风格的界面；
3. 黑色透明渐变蒙层：采用一层渐变蒙层，常见于图片Banner上，保证导航栏文字的可识别性。
大标题导航栏
自ios11发布后，大标题风格的导航栏便开始流行起来，尤其是飞机稿总能看见大标题导航栏的影子。普通的导航栏在二倍图下高度只有88px，标题字号为36px，而大标题导航栏在二倍图下高度足足有192px,标题字号为68px。
但并不是所有APP都适合使用大标题导航栏，并且即便使用大标题导航栏，整个APP中也不会全部使用，使用中界面向上滑动也会切换成正常状态的导航栏或直接隐去导航栏，便于内容的查看。
某些APP在使用大标题导航栏时，在iOS11的大标题导航栏上进行了一定的改良，最常见的就是一定程度缩小了标题的字号，如下图:
这三个APP的标题字号都没有到68px，常用40px~48px的字号，陌陌与天猫是固定在顶部导航栏的，而Kepp会随页面上滑变为常规标题导航。
一般这种固定的较大标题都会隐去导航栏的分割线，显得导航栏更高，更有呼吸感。像是天猫的大标题导航栏使用的色块，与下方模块又比较近，就显得很拥挤。
使用大标题导航栏，你需要考虑以下两点：
1.是否需要帮助用户快速确认所处位置；
2.APP整体风格是否偏向简约大气。
小程序导航栏
微信的小程序导航栏，在顶部右上方有一个不可去除也无法编辑的Titlebar按钮，微信配置了一深一浅两种风格。
从APP转换到小程序时，要注意调整APP的顶部导航栏的位置以及搜索框的大小，避免被Titlebar遮挡，如下图：
上图中，豌豆公主的顶部导航栏整体下移，并且减小了搜索框的高度，提高屏幕的利用率。
划重点
· 常规导航栏主要包括简单标题导航栏、搜索框导航栏以及Tab/分段控件导航栏通栏导航栏。
· 通栏导航栏要注意导航背景的处理，常用的有特殊背景处理、颜色渐变背景、黑色透明渐变蒙层。
· 大标题导航栏使界面整体更有逼格，但不是所有APP都适合的，要根据情况合理使用。
· 微信小程序导航栏在顶部右上方有一个不可去除的Titlebar按钮，从APP换到小程序时要注意重新调整导航栏。
欢迎扫描关注我的微信公众号。热爱设计，关注用户体验，分享设计思考。
公众号回复以下关键词获取设计资源
* 回复“软件”可以获取全套设计软件（包括win系统和Mac系统）
* 回复"PS"可获取最新版PS cc 2019
* 回复“字体”可获取最全的设计常用字体
* 回复“C4D”可获取从新手到进阶全套C4D视频教程
* 回复“笔刷”可获最全的笔刷资源
网友评论