导航栏如何设计

文章总结了APP种常见的几类导航栏及特点，希望给大家带来些启发。

1.1 标签式导航标签式导航又叫Tab式导航，是目前移动端市场上最为广泛的导航设计。标签导航通常分为底部，顶部，顶、底混合使用这三种模式。

1.1.1 底部导航

采用文字加图标的方式展现。一般有3~5个标签，适合在相关的几类信息中间频繁的切换使用。这类信息优先级较高、用户使用频繁，彼此之间相互独立，通过标签式导航的引导，用户可以迅速的实现页面之间的切换且不会迷失方向，简单而高效。它的缺点是会占用一定高度的空间，如果用户是小屏幕手机，则视觉体验不太好。

下图应用分别为微信、Facebook：

1.1.2顶部导航

当内容分类比较多，用户对不同内容的打开率相差不是很大，需要快速切换/调出的时候，经常会采用顶部导航设计模式，常见于工具类APP中，如Wave Analytics、滴滴打车：

1.1.3 顶部、底部双Tab导航

标签式导航除了设在顶部和底部，另外有些内容比较多的产品会采用顶部、底部混合使用标签式导航，如简书、网易云阅读：

1.2 抽屉式导航抽屉导航指的是一些功能菜单按钮隐藏在当前页面后，点击入口或侧滑即可像拉抽屉一样拉出菜单。这种导航设计比较适合于那么不需要频繁切换的次要功能，例如对设置、关于、会员、皮肤设置等功能的隐藏。下图分别是Wave Analytics、Gadgets News、My Rolls和Perisfind：

抽屉式导航的优点在于节省页面展示空间，使主页面更加简洁美观，让用户将更多的注意力聚焦到当前页面。

缺点在于次功能入口比较隐蔽，用户不容易发现；使用次功能需要二次点击，增加用户使用成本。

1.3 桌面式导航桌面式导航类似于操作系统或启动控制面板，其特色是主页由多个按钮组成。均衡布局时，按钮通常大小一致，以3*3、2*3、2*2和1*2等形式排布于桌面。点击按钮时，跳转至其他内部子系统/子模块。

如图，Strides和Finance采用了基于圆形按钮的均衡布局：

而360和日语五十音图则采用了基于圆角矩形按钮的均衡布局：

注：当圆角矩形弧度越来越小，甚至消失不见成为正方形的时候，往往用方形格子隔开各个按钮，使得视觉效果最好，这种模式见于下一节的“宫格式导航”中。