导航设计

导航就像一本书的目录，当你看到书的目录时，知道这本书的框架分为几部分，每个框架的内容点是什么，这些内容点又是如何排布。导航对于整个APP来说是非常重要的，可以让读者在浏览内容时不易迷路。以下归纳几种比较常见的导航设计以及优缺点。

目前，移动端界面的一级导航设计主要有几种：1、底部布局的标签导航；2、顶部布局的标签导航；3、舵式导航；4抽屉式导航；5、宫格式导航；等等。二级导航设计常见的有：1、分段式导航；2、底部+顶部布局的标签导航；3、列表导航；4、图标式导航；5、下拉菜单式导航等。

本篇文章分为三个部分，第一部分为一级导航设计介绍、第二部分为二级导航介绍、第三部分总结。

1、底部布局的标签导航：

这是最为常见的导航模式，一般而言是一个icon+文字描述 ； 纯icon形式的底部标签导航也有，但使用起来容易误导。所以大部分产品的一级导航设计，都有一个文字说明。

总结这种导航的特点是：占用面积较大，用户能够轻松进行点击，一般不超过5个标签。是IOS端导航设计最为推荐的一种模式。

以纯icon跟icon+文字描述为例：medium、airbnb、网易云音乐

2、顶部布局导航

标签式的导航除了放在底部外，也可以放在顶部。而底部空余的空间可以 设计APP主要功能 。比如拿滴滴打车跟QQ音乐为例，滴滴打车的主要是为了让用户使用来打车，所以按照人的输入习惯，把底部的位置设计为输入框，便于用户立即输入地点。而QQ音乐的底部设计则可以让用户快捷切换、播放、暂停音乐。

总结这种导航设计的特点是：根据用户的场景使用以及APP自身特点情况设计。这种导航也大量地使用在Android系统中。

3、舵式导航

如果一个APP中有一个非常需要突出的功能，是该APP的核心功能或操作，一般会使用舵式导航。经常以颜色或者是大小的区别来展示这个核心。常见的有文字或照片发布类型的APP软件，比如、微博、Evernote等；也有包括产品本身功能不多，但有一个最需要突出的核心，以共享单车ofo为例。

总结这种导航的特点是：以颜色或大小的区别来展示核心，让人有点击的欲望。

4、抽屉式导航

抽屉式导航把一些功能整合在一个图标（汉堡菜单/三线icon）中，让界面变得更加简洁。这款导航也有一个比较突出的特点，使用这种导航意味着更多的点击。使用一个功能，首先要打开抽屉式导航，然后才能点击其他的功能，接着在其他的功能中再继续点击。2010年Facebook也使用这种抽屉式导航，但2013年换成了标签式导航。更多的点击意味着大大降低使用的频率次数。

总结这种导航的特点：核心是“藏”，突出核心功能，但同时意味着更多的点击。

以VPN master跟QQ作为例子。

昨天看到medium上有一段话很有意思，来形容这种汉堡式菜单： If you don't pay attention you can't see it, if you pay attention and you see it then you don't understand what's going on there.

知乎上也专门有讨论抽屉式导航的利弊。这种导航有它的优势，也有明显的劣势。

5、宫格式导航

很常见，把一个个功能罗列出来，像宫型一样在你的桌面上直接铺开，基本上占据整个屏幕或一半。这种导航主要针对一些功能非常多的软件。市面上比较典型的有：美团、去哪儿（但去哪儿的界面真心丑），不过这种设计在我们手机屏幕上已经得到了充分的展示。

市面上较主要的一级导航类型如上。接下来来说说二级导航的布局是怎么样的吧。

就像书的目录有一级目录跟二级目录，APP中也有一级导航跟二级导航，二级导航从属于一级导航，带领用户去到不同的层级内容。

一、选卡式导航

位于顶部，这种选卡式导航是在主导航中其中的某个图标里的二级导航。一般情况下，不会超过四个，相互之间也有一定的关联。

二、底部+顶部布局的标签导航

双tab导航出现的时候，顶部导航往往是二级导航。而顶部的内容偏多时，需要提示用户可滑动，如不提供完整的信息。意外发现Airbnb中的二级导航没有提示用户可以往右滑动。

三、列表导航

是十分常见的二级导航，清晰的条目可以实现用户在内容选项中的快速切换。不会展示过多的内容，一般为icon+文字+导向符号，右侧部分大量空白，符合人的视觉阅读习惯。这种导航也可以作为一级导航，例如QQ邮箱。点击其中一个条目之后会进入另一个界面中，内容的交互逻辑十分重要。

四、图标式导航

算是宫格式导航的一种，可以作为一级导航，也可以作为二级导航。每个图标之间相互独立，就如同我们手机桌面上的每一个APP一样，他们所拥有的信息完全独立，与相邻的APP没有任何关系。内容较多时，也会给用户带来一定的选择困难，一般而言会作为二级导航使用。最经典的就是bilibili跟支付宝。

五、下拉菜单式

下拉菜单不会跳转到其他界面，能够显示足够的条目，没有退出的选项。

三、总结

很多导航与导航之间可以相互搭配使用，没有最完美的导航，而设计导航的首要因素是要理解需求，从需求出发，以及配合相应的场景使用，做出最合适的设计模式。

在看Thoughts on Interaction Design 这本书的时候，作者说： Interaction Design is a language.

在看medium有关导航的文章时，有作者（Nick Babich）也说： Navigation is a conversation .

作为一门可沟通的语言，让target audiences听懂，尊重用户&尊重客户。在设计时也多思考personas，思考用户目标与用户体验目标，导航的设计是让他们知道如何实现这些目标与需求。如果产品设计让用户觉得人性化，那么他们应该会乐意去使用。

一、标签式导航

即tab式导航，是移动应用中最普遍、最常用的导航模式，适合在相关的几类信息中间频繁的调转。这类信息优先级较高、用户使用频繁，彼此之间相互独立，通过标签式导航的引导，用户可以迅速的实现页面之间的切换且不会迷失方向，简单而高效。细分为：底部tab式导航、顶部tab式导航、底部tab的扩展导航三种。

以下情况可以选择顶部tab式导航：某项功能必须固定在底部，其他tab只能固定在顶部，但为了方便操作，顶部tab导航最好支持手势操作，即滑动即可切换，如新闻，小说等。

实际上，底部Tab模式导航在iOS和Android上一直是最安全的一种导航模式，它不怎么出彩，但是绝对不会犯错。在大屏幕时代，底部Tab模式的导航更能适应，也更好设计。

底部tab式导航的扩展形式适用于：入口分类数目不多，可以控制在5个以内，且用户需要在入口间频繁切换来执行多个任务，需要注意：结构太过复杂而且不稳定的应用不适合标签式导航。

二、抽屉式导航

抽屉式导航将部分信息内容进行隐藏，突出了应用的核心功能。抽屉栏式导航有两大缺陷：

1、在大屏幕手机上，单手持握时处于操作盲区，难以点击。

2、抽屉式导航可能会降低你产品一半的用户参与度

适用对象：应用主要功能和内容都在一个页面里面。一些用户设置等低频操作内容需要显示在其他页面里。

为了让主页面看上去干净美观，可以把这些辅助功能放在抽屉栏里。如果你的应用有不同的视图，且他们是平级的，需要用户同等地对待，抽屉栏将会浪费掉大多数的用户对于侧边栏中入口的潜在参与度和交互程度。在大屏时代使用抽屉栏，手势操作显得尤为重要，从屏幕边缘唤出抽屉栏是个不错的选择。需要注意的是：需要用户有一定参与的信息层级，最好不好放置在抽屉栏。

三、列表式导航

列表式导航就是最必不可少的一种信息承载模式，这种导航结构简单清晰、易于理解、冷静高效，能够帮助用户快速定位到对应内容。在APP中的应用也分为两种：

1、作为主导航使用

2、作为辅助导航来展示二级甚至更深层级的内容

列表式导航大多作为辅助导航来展示二级甚至更深层次的内容，若要作为主导航，必须满足层级浅且内容平级的条件。需要注意的是：列表式导航的数量保持在一屏以内，超过一屏最好再分一级，将最终要的内容归纳在前4个列表更容易被人们记住，要注意为列表内容分类。

四、平铺式导航

当信息足够扁平，可以尝试平铺式导航。这种导航方式很容易带来高大上的视觉体验，最大程度的保证了页面的简洁性和内容的完整性，且一般都会结合滑动切换的手势，操作起来也非常方便。

平铺式导航比较适用于足够扁平化的内容和随意浏览的阅读模式，需要注意的是：无法跳转至费相邻页面，如果入口间需要反复跳转，则不适合这种模式。

五、宫格式导航

每一个APP都是一个宫格，这些宫格聚集在中心页面，用户只能在中心页面进入其中一个宫格，如果想要进入另一个宫格，必须要先回到中心页面，再进入另一个宫格。每个宫格相互独立，它们的信息间也没有任何交集，无法跳转互通。因为这种特质，宫格式导航被广泛应用于各平台系统的中心页面。

宫格式导航适合入口相互独立互斥，且不需要交叉使用的信息归类。一旦入口需要有所交集，必然导致更多的操作负累，这个时候只能根据产品特性做出权衡，如果不适合，建议果断拒绝这种方式。

六、悬浮式导航

悬浮式导航，是将导航页面分层，无论你到达APP的哪个页面，悬浮icon永远悬浮在上面，你依靠悬浮层随时可以去想要去的地方，同时，为了让悬浮icon不遮挡某个页面的操作，通常悬浮的icon都可以在屏幕边缘自由移动。

悬浮式icon是一个非常便捷的操作入口，也适应大屏幕时代。但需要注意的是：悬浮式icon会遮挡某些页面的操作，在设计的时候应该考虑进去。

七、其他新式导航

导航其实只有6种，但不能被现有的导航模式所束缚，未来会有新的导航模式，新的操作手势…，设计的心应该是自由的，若你羽翼未丰，就在规则的天空中飞行，可能不会出彩，但不至于犯错；若你已成雄鹰，便可自由飞翔，突破规则，甚至建立自己的规则。

总结一下：

标签式导航：最常用、最不易出错，请第一时间考虑它。

抽屉式导航：如果你的信息层级繁多，可以考虑将辅助类内容放在抽屉中。

列表式导航：作为辅助导航来展示二级甚至更深层级的内容，每个APP必不可少，但请注意数量与分类。

平铺式导航：如果你的内容是随意浏览，无需来回跳转的，可以考虑它。

宫格式导航：不建议在APP中作为主导航使用，如果非使用不可，请增加跳转的关联性。

悬浮式导航：更适应大屏的导航模式，不妨试一试，但注意不要让它遮挡住某些页面的操作。

最后，根据产品层级的深度和广度，选择适合的导航模式，是产品设计中的关键一环。

生活中大家或多或少都会有迷路的经验，但你是不是从来没思考过迷路的定义是什么？

迷路的定义其实有两个核心：

1.想要到达一个目的地；

2.不知道自己在哪里，应该往哪走。

和生活中的迷路一样，我们在使用APP过程中也可能会「迷路」。因为我们使用APP时同样需要到达一个页面，如果没有合适引导，我们很难知道他需要怎么跳转才能到达自己想要的页面。在APP中，导航设计起到的正是这种关键作用：让我们了解自己此时在哪个页面，自己想要到达某个页面应该怎么跳转。

下面我们通过实例从是什么、为什么、怎么做这三个方面来介绍一下目前APP设计中最常用的几种导航。

1.简介

底部标签导航是APP中最常见的导航。

为什么它会是最常见的？就像超市把利润最高（最想卖给顾客）的商品摆在顾客触手可及的地方一样，APP最核心的功能通常也应该放在用户触手可及的地方。在我们握持手机时，屏幕底部区域恰好是大拇指最方便触及的区域。因此大多数APP产品才会选择底部标签导航的形式来呈现产品核心功能。

2.设计特征

1）通常作为APP的一级导航（主导航）。

原因同简介里的解释。

2）标签数通常为3-5个。

为什么不更多？因为大拇指触摸屏幕时的接触面积较大，一旦标签数超过5个，每个标签的所占面积不足，将会使正确的标签点击选择变得困难，甚至导致误点击。

3）标签通常是图标+文字形式的。

标签通常可以有文字、图标、文字加图标这3种设计形式，为什么非要用图标+文字？首先，文字的意义指向性强于图标。举个例子，一个X，可以表示关闭，也可以表示错误，甚至可以表示未知数，但「关闭」这两个字表示的就是关闭。其次，人类作为视觉化动物，对图形比对文字敏感。综合起来，图标+文字的形式是意义指向最准确的形式，也是让我们以最快理解标签含义（功能）的形式。

4）标签顺序通常按功能优先级从左至右排列，第1个标签显示产品主页面。

为什么？因为凡有排列，在视觉上必有顺序。有顺序，必有优先级。因此第1个标签通常显示产品主页面，或者说放置最核心的功能。

5）如果标签数多于5个，但依然要使用底部标签导航，可以把最右侧标签设计为「更多」，然后点击「更多」会显示更多功能。

这就像产品调研的问卷设计中我们设置选项一样，有时候我们需要让选项互斥，但选项数量又很多，这个时候我们可以把重要性低的几个选项合并成一个选项叫「其它」。

6）标签对应功能模块间通常有高频次切换需求，且功能层级相当。

7）通常用户所在页的标签需要突出显示（正常是通过颜色差异和标签图形变化来突出）。

为什么？因为要让用户在APP中不「迷路」，一个至关重要的点就是让他知道自己现在在哪。

8）底部标签在特定情况下可以做成沉浸式的。

为了增加页面的展示空间，让用户能更专注（沉浸）于页面内容，比如说内容阅读类产品，底部导航可以设计成上滑时隐藏、下滑时显示的形式。但这种设计可能会导致使底部标签导航失去其原本在标签切换中的便捷性，使用时需要慎重考虑。

9）考虑到大屏手机的单手操作，底部导航标签有时会采用左滑右滑切换标签的交互。

3.优缺点

1）优点

可以直观展现APP的核心功能页面及入口；

我们可以在不同的功能模块间进行快速切换。

2）缺点

作为页面固定显示的内容，会挤压页面其它内容的显示区域，进而降低页面的信息承载量。

4.原型设计实现案例

底部导航

点此查看原型实例

1.简介

舵式导航本质是底部标签导航的变式。那么舵式导航为什么要叫舵式导航呢？首先是形似，其次是因为舵式导航中最重要的导航就像舵在船的航行中一样重要。即一个底部标签导航中，有一个功能标签相比其它功能标签来说更重要、突出，更需要强调。

2.设计特征

1）有一个核心功能比其它功能更重要，更需要强调。常见于UGC产品，比如微博、闲鱼、抖音以及原型案例中的小红书。

2）算上需要强调的标签，标签数量通常为3个或者5个。

为什么？和船的控制室的对称式设计一样，当有标签需要突出的话，两边的标签在视觉上则要设计成对称的。

3）舵这个概念在标签上的呈现，也就是突出的形式。既可以真的有舵的形，也可以只给标签做简单的差异化设计。

前者的例子：闲鱼。

后者的例子：微博、抖音、小红书。

3.优缺点

1）优点

可以直观展现APP的核心功能页面及入口；

我们可以在不同的功能模块间进行快速切换；

可以凸显核心、频繁使用的功能，引导用户使用该功能（比如产出内容）。

2）缺点

作为页面固定显示的内容，会挤压页面其它内容的显示区域，进而降低页面的信息承载量；

凸显最重要的功能的同时，一定程度上会弱化其它核心功能的使用。

4.原型设计实现案例

底部导航

点此查看原型实例

1.简介

顶部标签导航通常作为次级导航，配合底部标签导航或舵式导航一起使用。

2.设计特征

1）相对底部标签导航而言，标签数量更灵活。

作为二级导航时，通常可以是2-3个标签。当二级导航的分类数较多时，也可以超过5个标签。

2）标签通常是文字形式的。

为什么不像底部标签一样设置成图标+文字的形式？因为图标+文字相比纯文字而言会占据更多的页面面积。如果采用这种形式，再加上底部导航，将极大挤压页面其它内容的显示区域。

3）当标签分类数量过多时，通常可以设计成左滑滚动标签的形式。

但需要注意的是，滚动标签意味着在不滚动状态下，页面默认状态下显示的标签数是有限的，这时我们让默认状态下可见的最后一个标签露出一半，以提示我们它可以左滑滚动，一定程度上减少用户的发现成本。

在电商产品中，通常还会有一种类似于顶部滚动标签导航的侧边分类滚动导航。

3.优缺点

1）优点

我们可以在不同的次级功能模块间进行快速切换。

2）缺点

作为页面固定显示的内容，在和底部导航配合使用时，会挤压页面其它内容的显示区域，进而降低页面的信息承载量。

4.原型设计实现案例

1）顶部导航

点此查看原型实例

2）顶部分类滚动导航

点此查看原型实例

3）侧边分类滚动导航

点此查看原型实例

1.简介

抽屉导航也叫汉堡菜单，是将一个导航页（菜单）隐藏在当前页面，点击汉堡按钮，导航页会像抽屉一样从页面左侧或右侧拉出。我们可以通过现实意义的抽屉来理解这种导航：

1）抽屉作为收纳物品的容器，通常可以存放多个物品（抽屉导航可以放置多个次级功能入口）

2）抽屉通常是关起来的，需要时才打开，因此抽屉内的物品通常不可见（抽屉导航只有点击后才能看到次级功能入口）

2.设计特征

1）通常用于放置非常用、非核心、低频但必要的功能。如对设置、个人信息等。

为什么要放置低频、非核心功能？因为抽屉导航具有隐藏的特性，而根据前面的介绍，越是核心、高频的功能，就越应该放在用户容易看到、触及的地方地方。

2）使用抽屉导航，通常意味着产品的主要功能集中在主页面当中。比如摩拜。

3.优缺点

1）优点

占用页面空间较少，使得主页面能承载更多的信息，页面更简洁，我们可以更专注于使用产品的核心功能。

具有较强的次级功能扩展性，可以在抽屉导航页放置较多的功能入口。

2）缺点

隐藏式设计，可发现性较差，增加了用户的发现成本。

4.原型设计实现案例

抽屉导航

点此查看原型实例

1.简介

说到宫格，很多人第一时间想到的会是九宫格。实际上宫格导航不只是九宫格，也可以是其它数量的宫格。宫格导航会以分格、平铺的形式来展示功能，通常作为次级导航使用。

2.设计特征

1）宫格对应的功能数量较多。通常用户提供服务较多或者类目较多的APP，如支付宝和微信。

为什么？因为要组成宫格，宫格数通常是6、9、12或者8、16甚至更多。

2）通常功能之间层级相同，使用频率相近、彼此独立且切换频率低。

为什么？因为分格平铺的形式可以让用户一目了然地看到所有功能，彼此之间没有显著的优先级差异。另外因为宫格导航只显示功能入口，不显示实际的功能页面，因此要切换功能时需要退回宫格导航页面才能切换其它功能，不适合作为彼此有关联、切换频繁的功能的导航。

3）功能间如果具备一定的关联性，可以分类处理。

为什么要分类处理？因为当宫格数量过多时，依据功能的关联性做分类，可以便于用户更快地找到自己想要的功能，减少用户的寻找成本。

3.优缺点

1）优点

可扩展性强，可以根据需要向下扩展功能入口；

可以让我们一目了然地知道产品所提供的功能，快速找到自己想要的功能。

2）缺点

不展示功能对应页面的内，无法直接执行功能操作；

功能间切换不方便，要切换功能时需要退回宫格导航页面才能切换其它功能；

容易形成较深功能层级和功能路径，增加用户的操作成本。

4.原型设计实现案例

因设计较简单，未附案例

1.简介

以列表的形式呈现功能，适用于大量的功能的展现，通常作为次级导航，如网易云音乐的账号页。

2.设计特征

1）通常功能之间层级相同。

2）通常在列的右侧显示箭头表示有二级内容。

3）当列表功能较多时，可以通过调整间距的方式对功能进行分类。如无合适分类名称，也可以选择不加分类名称。

3.优缺点

1）优点

可扩展性强，可以根据需要向下扩展功能入口。

2）缺点

下方的功能可能会被忽略。虽说列表导航的功能间层级相同，但如果列表功能过多，我们需要向下滚动页面才能看到下方的功能，因此这一部分功能容易被忽略。

4.原型设计实现案例

因设计较简单，未附案例

1.我们使用产品是为了满足某种需求（达到某种目的），因此导航最主要的功能在于让我们清楚地知道自己所在页面（所处位置），并帮助我们更快地到达目的页（目的地）。

2.导航设计的形式服从设计的于目的。每种形式的导航虽然都有常用的使用场景，但这不意味着设计导航时需要严格遵循这些使用场景。在实际的设计当中，还需要根据产品侧及用户侧的需求具体分析。

3.一款产品通常不会只使用一种导航，而是会根据信息架构以及功能的需求，混合使用多种导航。

以上原型案例现在我们都可以在墨刀模版区找到并且免费使用哦！随时都可以按自己的需求来编辑模版或者直接复用！

如何查看模版项目，我们可以登陆墨刀：modao.cc，进入工作区，点击“新建项目” 就能在下方看到。

选择一个模版，点击“使用模版”。

进入项目编辑区，可以随意改动各种元素。

此外，如果点击“预览模版”，也可以一键查看该原型模版的教程哦！

“红色”批注区域即为文字教程。

更多模版信息可参考旧文：再也不用四处找原型模版了 墨刀模版库全面升级！

优点：清楚当前所在的入口位置；直接展现最重要入口的内容信息。

缺点：功能入口过多时，该模式显得笨重不实用。

2.驼式导航 （中间加了一个“+”导航，像轮船上用来指挥的船驼，比如微博、qq空间）

优点：需要突出重要且频繁操作的入口。

缺点：同标签导航。

3.抽屉导航 （将菜单隐藏在当前页面内，点击入口即可像抽屉一样拉出菜单）

优点：节省页面展示空间；让用户注意力聚焦到当前页面；扩展性好。

缺点：不适合频繁切换的应用。

4.宫格导航 （宫格导航将主要入口全部聚合在页面，让用户做出选择，比如美图秀秀）

优点：直接展现各项内容；方便浏览经常更新的内容。

缺点：无法入口间的跳转；不能直接展现入口内容；不能显示太多入口次级内容。

5.组合导航 （比如淘宝里的快捷入口，像天猫之类的）

当用户需要聚焦内容，同时又需要一些快捷入口能够接到某些页面时，就可以采用组合导航。

优点：布局灵活，能适应架构的快速调整。

缺点：不规则容易有杂乱感。

6.列表导航 （比如微信的发现界面）

优点：层次展现清晰；可展现内容较长的标题；可展示标题的次级内容。

缺点：同级过多时，容易产生疲劳；排版灵活性不高；只能通过排列顺序、颜色来区分各入口重要程度。

7.tab导航 （用于二级页，本质和标签导航相同，当应用层级较多时，可采用tab导航，比如淘宝）

优点：对多内容多层级产品适用。

缺点：结构复杂，内容繁多。

8.轮播导航 （比如天气软件）

优点：单页面简洁内容，整体性强；线性的浏览方式有顺畅感、方向感。

缺点：不适合展示过多页面；非主页面不利于展示和查看。

9.点聚导航 （主操作选项或导航合并成一个按钮，浮动在页面上，比如path，最新版本导航置在中间）

优点：灵活；展示方式有趣；页面更开阔。

缺点：隐藏了更多入口和操作。

10.瀑布导航 （瀑布式布局适用于图片为主的内容，下拉自动加载，比如花瓣）

优点：浏览时产生流畅体验；排版布局多变；沉浸式体验。

缺点：不适合层级架构复杂的产品；容易产生疲劳感。

1、清晰性

清晰性是网站导航设计的首要目标，导航起着引导用户浏览信息的重要作用，而导航设计的清晰与否直接影响了网站信息架构以及用户体验。导航的清晰不仅体现在导航按钮的明朗设计上，还要体现出主导航与副导航之间清晰明了层次性。

2、面包屑导航

面包屑导航是一种线性的导航方式，通过搭建极具层次的网站架构，让用户在访问网站时迅速获取当前页面在网站中的位置，通过提供各个层级的快速入口，方便用户操作。需要注意的是，并不是所有的网站都适用面包屑导航，对于一些层级较深骨架清晰的网站，面包屑导航不失为一种极佳的选择。

1、滑出导航

滑出式导航是现在很流行的一种，当用户打开页面时，第一眼看到的是主要的内容而非菜单，给用户更好的第一印象。响应式全屏滑出导航也可以给人愉悦的体验。

2、全屏导航

全屏导航设计对内容有强调作用，用户可以更加便捷地切换到不同的页面，让内容成为更加触手可及的东西。如果设计的够合理，用户会在无意识间充分运用起它的导航功能。

3、单页滚动导航

对于不含有大量内容的网站而言，单页式的导航的效果非常不错。这样的网站只需要简单的向下滚动操作，内容就会持续不断地到你的眼前。

4、垂直导航

垂直导航最流行的有两种排版方式，一种是隐藏式的导航菜单，需要的时候点击显示。另外一种是固定的侧边栏来展示菜单。它为网站设计提供了一种新的视觉体验。

导航如何使用，还是要结合你的项目的具体特征来决定的。