在界面设计中，使用导航并不意味着使用导航栏。正因为不能轻易删除，逃不掉就一定要用好，否则很容易成为页面的子项。

讲一个老东家的故事。

一次产品迭代会上，老板在台上说打算重构C端产品框架，想重组标签栏的标签设置。但是说到这部分就卡住了，说不出控件的名字& quot标签栏& quot很长时间了。气氛有点尴尬。

这时，这里的一位产品经理大方地说：底部导航栏！

也不全是错的。这可以理解。界面底部的控件可以引导用户切换页面。

但是如果标签栏取了导航条的名字…原来的导航条应该叫什么？顶部标题栏？

导航栏中的内容控件应该叫什么？按钮在左上角还是右上角？

接地气的名字让我们一听就明白了，直到有一天你打算跳槽，你带着自己的作品去下家面试，设计总监问了你几个术语。

这些& quot死控件& quot和& quot死柱& quot在页面上是不可或缺的。在设计每一页的时候，你都以为自己已经对他们了如指掌，但关键时刻，他们却被六亲不认(说多了都是泪，我面试时吃过专业术语的亏，以后再聊)。

"我不遵循形式主义，为什么非要说特殊名词装X？接地气的名字不太好听，沟通高效。"

很简单。如果把名词和概念搞混了，那就很清楚你有没有在UI设计领域投入精力进行深入研究了。你怎么能谈论如何自由地使用它们呢？

"你甚至不知道迪列日的母亲和古力娜扎之间的区别。你敢说你知道什么是皮沙发吗？"

我的经历给了我一个想法。是时候沉淀和分享一些知识了。不能让更多的人走我踩过的坑。再来说说导航栏。

首先，导航栏在哪里？导航栏，也称为Navbar。UI的新人肯定不少。在众多的条形控件中，很难区分它所指的区域。

在iOS上，导航条是指显示在应用顶部、状态栏下方的容器区域，层级要高于当前页面内容。

在Android上，谷歌在MaterialDesign中给了它同样的定义，但给了它另一个名字，TopAppBar。

请记住：

导航栏用于框定当前屏幕的内容，说明当前屏幕的状态，起到连接父子页面层次的作用。

那么，回到开头的故事，为什么标签栏不能叫底部导航呢？因为选项卡栏框定了对等页面在多个屏幕之间的内容切换，所以它与& quot导航& quot。

第二，规范告诉我们相对于实际的项目要做什么。我们应该如何做一个基本的导航栏容器？一般携带的信息可能包括：标题；导航按钮；内容控制按钮；其他控件(如搜索栏、分页标签或分页控件等。);分割线(比如微信导航栏)。

2.1导航条冠名时间回到2017年之前，当时移动终端规范下的导航条还算循规蹈矩，风格单一。但随着iPhoneX等一系列全面屏手机的出现，移动设备的屏幕高度进一步扩大，一屏中界面设计的空间也随之增大。iOS11发布后，头条导航栏的设计风格兴起，随后被引入平台规范。

因此，iOS和MaterialDesign现在都定义了两种导航栏标题规范：通用标题和标题。

通用标题是指将当前页面的标题放在导航容器的中央，高度为88px(iOS @ 2x下)。标题的字体大小一般为34px-38px(34px是iOS的一个标准规格，但不小于34px的话可以根据实际项目中的设计要求来确定)。

标题是将导航栏的高度增加到192px(iOS@2x)，保留88px高度的导航容器以容纳内容控件的按钮，并将标题放在左侧。

iOS的标准规范将headline的字体大小定义为68px，但是因为英文区分大小写，所以有一定的视觉表达水平。而中文缺乏一定的层级结构，同样字号的中文视觉尺寸大于英文；所以很多时候我们在设计标题的时候，会适当缩小，一般是56px-64px。

头条导航栏的优势毋庸置疑，空白页多，呼吸感更强，现代气息，压力更大。由于页面标题巨大，可以帮助用户快速确认自己的当前位置。采用统一的标题，让页面布局风格快速统一。

但缺点也很明显，因为增加了导航条的高度，导致屏幕利用率降低。一些通过广告实现或者更注重一屏内容呈现的应用，中和了常规导航和标题导航的优缺点，改进了风格。

那么我们如何在常规头条和大头条之间选择呢？

这不仅仅是设计风格的问题，还受到产品定位和功能的影响。

苹果的设计师在AppleMusic中实验并验证了一个结论。——在内容丰富、层次结构深刻的产品中，头条可以帮助用户快速确认自己的位置。

所以我觉得适合头条风格的产品一定要突出内容呈现而不是繁琐的功能，产品定位更倾向于现代或者文艺，需要快速统一界面风格。至于层级结构是否需要很深，不一定是这样；相反，我认为功能单一、产品体积较轻的应用更适合头条。

iOS规定导航按钮位置仅能用于放置返回按钮，可以添加一个层级的面包屑，帮助用户有效地明确当前页面层级。

MaterialDesign中，则不仅可以放置返回按钮，还另有作用，菜单图标-用于打开导航抽屉或者关闭图标-关闭工具栏。

这一点与iOS的定义有着天壤之别，iOS非常明确地赋予了工具栏的定义，并且将导航栏和工具栏（Toolbars）彻底地分离开，典型案例就是Safari。

在内容控件上iOS与MaterialDesign也大相径庭，MaterialDesign不去限制你的内容控件多少，因为它提供了溢出菜单，并可以根据屏宽的变化，自适应释出和收纳溢出菜单中的控件。

而iOS则规定我们，要给内容控件按钮足够多的空间，必要的时候，隐藏导航栏标题也未尝不可。

那么真实的项目中，我们经常为了快速落地，会存在一稿适配双平台的情况，应该遵从哪一个平台的规范呢？

答案：许多大厂的做法已经向我们验证，规范不分家。

在iOS诸多的应用中溢出菜单早已普及，尽管这是MaterialDesign提出的设计理念。

虽然国内遵从MaterialDesign进行Android应用设计的情况相对较少，但它提供的设计理念与方案却并不局限在安卓平台。