导航栏（Navigation Bar）作为一个基础控件，极高的复用率和看似单调的设计样式，往往会让人习惯性忽略其中隐藏的诸多细节，以及背后的设计原因。

一、理解导航栏的作用

简要概述导航栏的作用，有以下6个：

1. 定位：告知用户当前所在位置；
2. 导航：提供离开当前页面的出口，即返回上级（适用于非一级页面）；
3. 提供全局操作：一般是以图标、文字、按钮或组合的形式存在；
4. 扁平层级：以分类tab为代表，本质是将多个相关的同级页面聚合在一起；
5. 增加品牌曝光：一般放置在首页左上角；
6. 解释页面当前状态：属于瞬时状态，动态变化。

nerror="javascript:errorimg.call(this);">

实际上，导航栏的布局方式非常丰富，除了上文提到的几种基础布局之外，还有许多复杂的布局方式，不同的布局方式体现了不同页面的信息架构。

接下来，我将从【结构简单】到【结构复杂】的顺序来讨论导航栏的各种布局方式。

nerror="javascript:errorimg.call(this);">nerror="javascript:errorimg.call(this);">nerror="javascript:errorimg.call(this);">nerror="javascript:errorimg.call(this);">

视觉服务于功能，不同视觉权重背后对应的是不同功能权重。以搜索功能为例，不同产品、不同场景下，搜索功能的权重都是不同的。

提升视觉权重的本质是将重要信息和次要信息【区分】开来，而建立区分的本质则是【建立对比】，我们以“搜索”功能为例。

nerror="javascript:errorimg.call(this);">nerror="javascript:errorimg.call(this);">nerror="javascript:errorimg.call(this);">nerror="javascript:errorimg.call(this);">

我们从以下几个方面来拆解导航栏：

nerror="javascript:errorimg.call(this);">nerror="javascript:errorimg.call(this);">nerror="javascript:errorimg.call(this);">nerror="javascript:errorimg.call(this);">

首先，我们要了解，页面固有的层级结构决定了某些信息是常驻于屏幕的，另外的信息是随着用户竖直方向滑动手势而滚动的，而导航栏绝大多数情况下是常驻于页面顶部的。

nerror="javascript:errorimg.call(this);">

首先要明确，哪些内容属于常驻内容。

nerror="javascript:errorimg.call(this);">

我们再来看下面的案例：

nerror="javascript:errorimg.call(this);">nerror="javascript:errorimg.call(this);">

状态b决定了常驻于屏幕的元素数量，这和内容层显示效率息息相关，需要在页面设计之初就考虑好；确定好了【常驻区域】和【被折叠区域】之后的交互就比较简单，直接折叠相应内容即可；使用这种【状态过渡】的思路，相当于明确了变化的起点和终点，之后就可以将精力投入在如何使两种状态之间的过渡更加自然。

nerror="javascript:errorimg.call(this);">nerror="javascript:errorimg.call(this);">

上方微信读书的案例用了硬切的方式，过渡变量直接出现在状态b中。通过观察iOS14的信息，我们不难发现，iOS系统采用的标题栏过渡方式是渐现。本质上没有区别，细节上，渐现相对于硬切更加柔和丝滑。

以上是我个人对导航栏相关的一些整理和总结。

基础且复用率极高的控件蕴含了许多细节和门道，通过大量细致观察总结出一般性的规律，希望我的文章能帮助大家看到一些平时可能会忽略的细节。

本文由 @doo_W 原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议