app ui界面的导航设计都有哪些？

我在大学毕业前从未在设计领域听说过“导航”这个单词，曾经一度以为它指的是汽车里的GPS导航，后来才明白这个称呼只是一种类比，是说界面的各种标签就像是行车导航仪一样，可以让用户“定位”他所在的位置，同时指引他下一步的去向，并不是真的要让你在界面上画个仪表盘。

导航的使命就在于自身的“名称”上面，它叫什么名字就是在告诉用户“沿着这条路能通往哪里”，所以导航的展示形式虽然多种多样，却大多逃不出文字的辅佐，这是因为它的本质就是产品对用户传达的一种指向性信息。

因为所有用户都是从产品的首页开始进入产品的，所以任务路径全部都是从产品的首页开始延伸的，产品的首页就是全部导航的聚合处，也是产品内所有任务路径的开启之地。

根据导航的特征不同，我们可以将导航分成三类——主导航、页面导航、特殊导航。

主导航

主导航是指整个移动端产品最顶层的导航，它完整地将产品分成了多个页面模块。

【沉浸式导航】

它平时隐藏在角落的功能按钮里，对屏幕的空间占用较低，不会打断用户的沉浸式浏览。

-所谓“沉浸式”浏览，是指用户持续在当前页面查阅内容，例如阅读文章、观看短视频等行为。

【平行式导航（tabs结构）】

它始终悬浮在界面底部，对屏幕的空间占用较高，适合大容量或者界面层级较多的产品。

所谓“界面层级”，是指用户想要完成某项操作任务要经过多少层界面。

【舵式导航】

它始终悬浮在界面底部，对屏幕的空间占用更高，适合逻辑层级更多的产品-隐藏在中间“船舵”里的功能，多是值得强化的基本功能，如上传文章、分享app、邀请新用户等。

业务模块较多的产品，也会使用舵式导航。

页面导航

页面导航是指某个页面的导航形式，往往一个页面内会有多重页面导航复合出现。

【分类式页面导航（tabs结构）】

它会将某个单独页面的内容划分成两部分，里面的内容相互独立-适合逻辑层级较为深入的产品。

【双层标签页面导航（tabs结构）】

它始终悬浮在界面顶部，对屏幕的空间占用较高，适合大容量或者逻辑层级较多的产品；

它会将某个单独页面的内容划分为多个部分，每一部分的内容可以重复（同一项信息可以被打上多个标签而复用）；

它在内容极其复杂的聚合类平台中比较常见。

【列表式页面导航】

它可能出现在页面的任何地方，是一种高效率处理信息的方法，也是工具类产品最常用的页面导航形式；

位置相邻的列表大多拥有一种相同的属性（也就是A、B、C、D这些列表项都是归属于同一个列表栏目之内的）；

列表处理信息的效率很高，但是区分度不够强，不适合业务属性相互独立的栏目-列表式页面导航多是“复合导航”的一部分，很少单独成页。

【宫格式页面导航（tabs结构）】

宫格导航的样式是由宫格组成的，它和列表式导航最主要的区别就是它占据的页面空间比较少；

宫格导航的组成部分互相独立，各具特色。

宫格导航在同等空间内展示的信息量比条目更多宫格式导航的信息承载力比列表更强，更适合工具类型或业务较复杂的产品。

特色导航

特色导航是指平时很少见到的导航，它们往往具有极强的限制性，只能在特定环境下使用。

【轮播式导航-硬件设备】

轮播式导航的扩张性很弱，不适合迭代型产品；

硬件类设备的导航都是固定的，因此无需考虑产品的迭代类需求，可以酌情考虑轮播式导航。

【陈列式导航-影视产品】

陈列式导航是页面导航，它里面的内容是可以左右滑动的；

陈列式导航类似于卡片式导航，只是在同一行的；

空间里展示了较多的卡片。

【弹出式导航-文案产品】

弹出式导航在公众号里比较常见，适合文章列表；

弹出式导航多和功能按钮并排展示，可以提升操作效率总结 。

移动端的产品往往是一个主导航将所有内容切割成几部分，而每个页面上又单独设置有页面导航，页面导航往往是复合的形式，比如首页上既有标签式导航，又有列表式导航和宫格式导航，翻来覆去都是这几种导航的互相搭配。

总结

很多设计师总想在导航上做所谓的“创新”，其实这是完全没必要的，导航的样式大多都非常普通，这并不是所有设计师都傻笨笨的不知道做创新，而是用户已经培养出了稳固的使用习惯，新颖的导航意味着全新的操作认知，会给用户强行增加一道进入产品的门槛。

早年移动手机刚出现的时候，市面上的导航多种多样，现在绝大多数特立独行的导航都因为潜藏着各种各样的问题而消失在网络中，只有这几种最常用的“普通导航”坚挺地活了下来，它们活着就意味着自身没有致命的问题，没问题的导航就是最优秀的导航。

这些平庸无奇的导航样式是经过大浪淘沙后最终存活的精华，它们用无数场商业竞争宣告了自身稳定的地位，如果你真的想做创新，不如多考虑下怎样帮助产品树立核心竞争力吧，没必要在导航上下功夫。

作者：小龙   集创堂