导航栏是页面设计中常见的控件，但里面却有很多细节和设计值得参考，这篇文章将会向你介绍导航栏，希望对你有帮助。
关于导航栏
顶部导航栏出现在应用程序屏幕的顶部，状态栏下方，并指引当前页面位置、层级的控件。就是说，哪天你用一个 App 却问我在哪、我该如何返回的时候，就是导航栏没设计好。导航栏是 App 中最常见的控件之一，iOS 和 Material Design 规范中对它进行了阐述。在 iOS 上，该栏被称为导航栏，其高度比 Android 版本短。在 Android 上，该栏被称为顶部应用栏，本文会以更常用的导航栏的叫法指代。
导航栏的特点
稳定的
顶部导航栏会显示在应用中几乎每个页面的顶部，有时是常驻存在，有时随着页面需要进行隐藏，但永远不会缺席。很少页面完全不需导航栏，而整个应用都不需要导航栏的几乎不存在。指引的
之所以叫它导航栏，明显就是因为这个玩意具有导航作用，可以和用户说，你现在处于什么页面（导航栏标题）、你现在处于什么位置（一级导航、二级导航，靠返回按钮区分），用户可以通过导航栏回到最开始的位置。
统一的
同一个应用内，导航栏的位置、高度、信息都具备相对的统一性，以增加熟悉度，这也是页面一致性要求的，iOS 和 Material Design 对导航栏的高度、信息等内容都进行了要求，所以大家在形态上都大差不差（但是内容上被玩出了花，下文会讲到）。
导航栏功能类型
按照功能类型划分，导航栏常见的有：常规导航栏、编辑操作栏。常规导航栏：
常规导航栏主要的是提供页面及层级的指引、以及相关操作，这是我们看到最多的导航栏类型。
编辑操作栏：
编辑操作栏可以为所选项目提供动作。常规导航栏可以切换为编辑操作栏，在执行某项操作或将其撤消之前一直保持活动状态。
常规导航栏解析
在 Material Design 的规范中，导航栏由容器、导航图标、标题、操作项、更多菜单等组成，而国内的许多应用，都在此基础上，进行了更多适应产品需求的个性化设计，但是在形态上，依然与规范相似，以保证用户易理解性与体验的流畅性。
1、容器：即导航栏的范围，导航栏所都有元素都应当在容器里面，导航栏容器的高度因场景不同，有高低之分。常规的导航栏只需要保证指引性即可，所以不需要占据太大的高度位置，特别是非工具型的产品，更是将页面高度空间视为寸土寸金的存在。
MD 针对导航栏的特殊情况提供了突出的顶部导航栏方案，并明确指出可用于较长的标题，以容纳图像或为顶部应用程序栏提供更强的外观。但是这种方案在国内的应用的并不常见，因为中文环境下，出现这种超长标题的场景比较少，就算有，大多也可以通过缩减标题字数的方法避免这种问题。
iOS 的大标题导航栏使用反而更为常见，大标题可以明确地与下方内容进行区分，默认情况下，大标题导航栏不包含背景底色或阴影。
大标题导航栏样式下，随着用户滚动页面内容，大标题会转换为标准大小的标题。
导航栏的底色理论上允许各种颜色，同时也支持透明，但在设计时，基于体验上的可视性，需要避免因导航栏的透明底色而导致与下方信息难以区分的情况。
2、导航图标（可选）：导航图标是可选的，它可以采用以下任何形式：菜单图标：这将打开一个导航抽屉，而在国内 App 中，这个规范不仅是汉堡导航按钮的形式，也可以是头像图片等形式。
3、标题（可选）：应用栏标题可用于描述，主要作用为：用户当前所在的页面/页面中的具体场景/正在使用的应用等，此外，标题还被广泛“改造”，具备很大的被定制的潜力，以满足产品独特的需求，这点会在下文讲到。MD 对于导航栏的标题做了许多的规范建议，但是目前看似乎大部分应用都并没有遵守这些规范，比如：· 如果标题文本很长，请使用突出显示的应用程序栏，并将标题换成两行。
4、操作项（可选）：导航栏大多会包含操作项，在操作项中，最常用的动作一般会放在左侧，然后朝最右边的最少动作进行。
5、更多菜单（可选）：针对某些功能操作，不适合直接展示在导航栏外面但由不能直接去掉，或者导航栏空间不足以承载，可以将其放在更多菜单里，点击可以查看这些功能项。
结语
导航栏是页面设计中最常见的控件，虽然常用，但不见得每个人都能用好。作为设计师，需要考虑到如何在导航栏基础能力上，赋予其更大的能力发挥空间。这篇文章介绍了导航栏的基础规范，也列举业内对导航栏的设计做的比较好的一些应用，包括导航栏如何配合操作进行变化，如何让信息更加高效展示等，希望这篇文章对你有帮助。
关注盖群科技微信
