导航栏（Navigation Bar）作为一个根本控件，极高的复用率和看似单调的设计样式，每每会让人习气性忽略个中隐蔽的诸多细节，以及背后的设计缘故原由。
本篇文章紧张磋商导航栏视觉和交互上的各种组合可能性和干系设计细节点，希望能提炼出一样平常性的设计规律（不雅观点仅是个人粗浅的剖析，如果有哪里说得不对的地方，希望大家多多指示）。
一、理解导航栏的浸染
导航栏是用来帮助用户定位、导航、操作的根本组件；既卖力奉告用户当前所在位置，防止迷失落，又卖力连通页面跳转路径，许可用户在不同层级的界面之间来去自若，同时还承载了针对当前页面全局性的操作。
简要概述导航栏的浸染，有以下6个：
定位：奉告用户当前所在位置；导航：供应离开当前页面的出口，即返回上级（适用于非一级页面）；供应全局操作：一样平常因此图标、笔墨、按钮或组合的形式存在；扁平层级：以分类tab为代表，实质是将多个干系的同级页面聚合在一起；增加品牌曝光：一样平常放置在首页左上角；阐明页面当前状态：属于瞬时状态，动态变革。二、梳理导航栏常见的布局办法实际上，导航栏的布局办法非常丰富，除了上文提到的几种根本布局之外，还有许多繁芜的布局办法，不同的布局办法表示了不同页面的信息架构。
为了方便描述，我将导航栏可以放置信息的部分划分为左、中、右三个区域。
接下来，我将从【构造大略】到【构造繁芜】的顺序来谈论导航栏的各种布局办法。
三、突出视觉重点的4种设计谋略
视觉做事于功能，不同视觉权重背后对应的是不同功能权重。以搜索功能为例，不同产品、不同场景下，搜索功能的权重都是不同的。
对付电商产品来说，首页搜索是非常关键的流量入口，必须足够突出，减少用户的认知和操作包袱，利用户更加顺畅高效地利用产品；而对付不同产品或不同场景来说，搜索的优先级就未必有这么高。
提升视觉权重的实质是将主要信息和次要信息【区分】开来，而建立区分的实质则是【建立比拟】，我们以“搜索”功能为例。
四、拆解视觉细节
我们从以下几个方面来拆解导航栏：
五、整理交互细节
首先，我们要理解，页面固有的层级构造决定了某些信息是常驻于屏幕的，其余的信息是随着用户竖直方向滑动手势而滚动的，而导航栏绝大多数情形下是常驻于页面顶部的。
只管导航栏一样平常都是常驻于页面顶部，但仍有不同的情形要分类谈论：
常驻区域无变革：导航栏不会随着用户手势的滑动而发生变革。常驻区域有变革：导航栏会随着用户手势的滑动而发生变革。首先要明确，哪些内容属于常驻内容。
上方这种情形比较明显，头部区域是常驻区域，但要把稳并不包括四个主图标。
我们再来看下面的案例：
上述变革的实质是从【状态a】过渡到【状态b】。
状态b决定了常驻于屏幕的元素数量，这和内容层显示效率息息相关，须要在页面设计之初就考虑好；确定好了【常驻区域】和【被折叠区域】之后的交互就比较大略，直接折叠相应内容即可；利用这种【状态过渡】的思路，相称于明确了变革的出发点和终点，之后就可以将精力投入在如何使两种状态之间的过渡更加自然。
当我们确定了【过渡变量】之后，我们只须要考虑如何安排变量如何入场（进入状态b）。变量的出场（撤出状态a）并不须要考虑，由于变量是跟随内容层一齐滚动的，自然会被上层的导航栏遮挡。
上方微信心书的案例用了硬切的办法，过渡变量直接涌如今状态b中。通过不雅观察iOS14的信息，我们不难创造，iOS系统采取的标题栏过渡办法是渐现。实质上没有差异，细节上，渐现相对付硬切更加柔和丝滑。
六、结语
以上是我个人对导航栏干系的一些整理和总结。
分别从功能浸染、布局样式、如何突出重点、视觉细节、交互细节几个层面梳理了导航栏设计谋略和设计思考。
根本且复用率极高的控件蕴含了许多细节和门道，通过大量细致不雅观察总结出一样平常性的规律，希望我的文章能帮助大家看到一些平时可能会忽略的细节。
感谢阅读，欢迎互换！
本文由 @doo_W 原创发布于大家都是产品经理，未经作者容许，禁止转载。
题图来自 Unsplash，基于 CC0 协议
