做中后台和移动端设计的人，对导航栏再熟悉不过了 —— 顶部那一条，放标题、放返回、放操作按钮，似乎是天经地义的事。但兰亭妙微在项目中发现，很多设计师把导航栏当成了一个 "必须存在的静态容器"，不管什么页面都原样套上去，结果该沉浸的不沉浸、该突出的不突出。
其实导航栏远没有那么死板。我们常用《简约至上》作者 Giles Colborne 提出的交互设计四策略 ——合理删除、分层组织、适时隐藏、巧妙转移—— 来重新审视导航栏的设计。再花哨的导航栏玩法，基本都逃不出这四招。
先说最基础的一条。导航栏之所以存在，本质上就是 "分层组织" 策略的产物 —— 把页面的层级关系、当前位置、核心操作集中在一个固定区域，让用户随时知道自己在哪、能做什么。这是导航栏的立身之本，不用多说。
真正值得展开的，是另外三条策略如何让导航栏从 "死板的规范" 变成 "灵活的体验工具"。
导航栏不能轻易删，但也不是绝对不能删。什么时候可以大胆删掉？兰亭妙微的判断标准是：用户在当前页面的任务状态极其明确，几乎不可能发生其他操作，导航标题和控件已经失去了存在的意义。
Nike Run Club 是个经典案例。用户点开 App、按下 "开始跑步" 之后，手机基本就揣兜里了 —— 这时候谁还会去切页面、看其他功能？NRC 干脆删掉了整个导航栏，用一个大大的 "结束" 按钮替代返回。用户跑完了，点结束就好，简单直接。
滴滴呼叫快车时也是同样的逻辑。一旦发单，用户的所有注意力都集中在 "司机到哪了" 这件事上，页面下方一个视觉区域承载全部信息，导航栏完全多余。
这两个案例有一个共通点：虽然删了返回按钮，但替代方案都符合费茨定律 —— 按钮足够大、位置足够顺手，用户想撤销操作时一点就中。与其循规蹈矩地在导航栏里塞一个小返回箭头，不如用一个更合理的方案替代。
所以兰亭妙微的原则是：当导航栏里的每一个元素都有更好的替代方案时，为什么不删掉它？ 当然，删除要大胆但不能盲目，得先确认用户在这个页面真的不需要导航。
隐藏和删除看起来像，其实完全不同。删除是 "这个页面不需要"，隐藏是 "现在不需要，但待会儿可能需要"。
兰亭妙微总结了两种最常见的隐藏场景：
第一种：沉浸体验场景。 看视频、浏览大图、阅读长文时，导航栏和状态栏会分散注意力，这时候应该暂时隐藏。iOS 的人机交互指南也明确建议：显示全屏媒体时可以暂时隐藏状态栏，但不要永久隐藏 —— 用户想看时间时，一个简单的手势就能调回来。
第二种：一屏内容优先场景。 京东的搜索结果页是个好例子。用户搜索商品后，顶部叠了三层信息：导航栏（搜索框 + 操作）、全局筛选栏（排序）、垂直筛选栏（品类标签）。用户一旦开始上滑浏览商品，说明搜索和排序的优先级下降了，京东就会把前两层隐藏掉，只保留垂直筛选。
这么做有两个好处：一是内容区域多出将近一个商品位的高度，商品提前露出，转化率自然提升；二是只保留当前阶段最重要的操作，界面更清爽。这就是设计为商业目标赋能的典型案例 —— 隐藏两个栏，多卖一件货。
导航栏有一个先天优势：它的层级始终高于页面内容，且位置固定、用户视线常驻。很多产品利用这一点，在用户上滑页面时，把重要内容或操作 "转移" 到导航栏里。
兰亭妙微把这种转移分成两类：
纯体验导向的转移。 豆瓣影评讨论区，用户上滑时，当前影片的标题和信息会渐移到导航栏。用户随时知道自己在看哪部电影的讨论，不用滑回顶部确认。公众号文章也是同样的逻辑 —— 上滑后标题出现在导航栏，时刻锚定阅读主题。
体验 + 商业双重导向的转移。 这一类更值得玩味。知乎用户浏览问题时上滑，导航栏上除了问题标题，还会多出一个 "写回答" 按钮。标题转移是体验考量，和豆瓣没区别；但 "写回答" 的转移，是知乎在利用导航栏的高曝光位，持续刺激用户输出 UGC 内容 —— 这和知乎打造内容交流社区的产品目标完全一致。
京东店铺首页也是同样的手法：上滑时把 "关注" 按钮转移到导航栏，用户浏览商品的过程中随时可以收藏店铺，关注率和复购率自然上去。一个按钮的位置变化，背后是 B2C 业务渗透的战略意图。
所以兰亭妙微对 "转移" 的理解是：产品越看重什么功能，越可以利用导航栏的层级优势把它推到用户眼前。 这和 Colborne 原书中 "把低频操作转移走" 的方向恰好相反，但内核一致 —— 都是根据优先级重新分配界面资源。
合理删除、分层组织、适时隐藏、巧妙转移 —— 这四策略是兰亭妙微做控件设计时的自检清单。导航栏在平台规范里是死板的、静态的，但在这四策略的辅助下，结合用户的滑动手势，它完全可以变得灵活、聪明、有目的性。
别被规范框死。下次做导航栏的时候，不妨多问几句：这个页面真的需要它吗？现在需要它一直显示吗？有没有什么重要的东西，应该借它的位置露个脸？想清楚了，导航栏就从一个 "必须有的控件" 变成了一个 "为体验服务的工具"。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。