通过阅读别人的文章，结合自己的阅历和工作经验用自己的术语来陈述一遍。

写在前面个的话：

这篇文章是我通过阅读其他优秀设计师的文章，再添加自己的理解与自身工作经验，重新找资料和用自己的言语编写下来的内容，一是为了加深记忆与理解，其次是为了提高自己的写作水品。

原文章作者：姜正

原文章链接

https://m.sohu.com/a/273992387_470009

首先我们需要了解

导航栏的定义：信息架构的梳理分类。

导航栏的作用：其实就是结合交互法则里的三点法则。

•                        1，让用户知道自己当前做所位置。

•                        2，让用户明白下一步该怎么走。

•                        3，让用户知道可以回到哪里。

•                        （在告诉用户改怎么走这个流程需要给用户提供准确的跳转方法，并且让用户明白导航元素与界面的关系。）

• 
  

• 那接下来我们了解一下导航栏有多少种样式，据我所了解到一共十种。分别是：

• 
  

• 底部导航            顶部导航          陀式导航

• 分段式导航        侧边栏导航       下拉导航   

• 左侧导航           宫格导航           列表式导航   

• 点聚式导航   

• 1. 底部导航

• 顾名思义它是位于界面底部的位置，常常适用于频繁的切换，作为一级导航。（一般是3-5个标签的切换）正是我们最常见的一种导航样式。  

• 比如我们常用的软件：微信(通讯类），支付宝（金融类)，京东(购物类）等软件。

• 

• 那对于底部导航的作用，以及它的优缺点是什么呢？我们只有真正了解每一种导航的性质，在工作过程中才能运用自如。
  
  优点：手机底部属于拇指热区范围，操作方便，切换自如，用户不会轻易迷失。体验感很好。

缺点：可扩展性不强。导航的元素数量特别有限，只能是3-5个。

2. 顶部导航

同样的字面意思它位于界面的顶部位置，一般是位于状态栏和导航栏下方。常常适用于做二级导航，以纯文字的样式出现在用户眼前，而且它的导航元素可以很多。也是一种我们常见的导航样式。

需要注意的是顶部导航元素的数量也会影响这顶部导航的设计样式。

比如我们常见的软件: 触漫（动漫社区类），伴伴（游戏陪玩类），LOFTER（兴趣社区类）

优点：可扩展性很强，导航元素标签数量可以很多。在技术上，适配简单，减少开发成本。

缺点：假若导航元素标签过多，用户需要花费大量时间去进行一个频繁的左右滑动，那后面的标签内容容易被忽略。形成一个用户流量的流失。（所以，顶部导航标签的排序需要找着重要性的大小来排序）。

3. 坨式导航

坨式导航同样位于界面底部，也可以说是属于底部导航。区别是在于：底部导航的所有功能是同属重要，位于同一级别。而坨式导航是为了突出其某功能点的导航。

比如我们常见的软件：咸鱼、转转（二手市场购物类），触漫（动漫社区类）

优点：陀式导航中的重要功能都是以不同其他功能的样式呈现在用户眼前，用强烈的色彩或者图标引起视觉冲击，更能触动用户点击欲望。

缺点：层级深，用户需要再次点击才能达到目的，交互路径增多。而坨式隐藏起来的功能也不能过多，1-3个尤佳。

4. 分段导航

分段导航位于界面的顶部，同样与顶部导航一样属于二级导航，适用于切换频率比较高的主要功能。

而分段导航与顶部导航的明显区别在于可扩展性的强弱。顶部导航可扩展性强，分段导航的可扩展性弱。

分段导航最明显的区别在于，分段导航的标签元素之间是有关联性的。

所以我们做设计的时候只需要分析导航元素标签之间的关系，如果有关联就 采用分段导航，如果没有那就采用常见的顶部导航。

常见的软件有：智行火车（交通出行类），作业帮（学习类），王者营地（游戏类）

优点：切换自如，用户切换时间成本比较低。

缺点：可扩展性弱，对标签的选项个数少。

5. 侧边栏导航

侧边栏导航也叫抽屉式导航是隐藏在界面侧边的位置，一般是通过点击界面左上角的icon弹出，主要承载的内容是除了核心功能意外的主要功能。侧边栏还分全侧边和半侧边。

全侧边的功能会更多、杂，需要分类，而半侧边功能比较单一，同一级别。

常见运用到侧边导航的软件有：QQ（社交类），小红书（生活社区类），小日常（打卡类），

优点：次功能隐藏起来，减少主界面的占位空间。沉浸式体验优秀。

缺点：切换功能操作麻烦，交互路径长。会导致隐藏起来的功能用户使用频率会低。

6. 下拉导航

下拉导航同侧边栏导航一样是将非核心功能隐藏起来，同样是作为二级导航。

而他们的区别是在于：

下拉导航更多的是属于一种选择状态，同一等级下对应的不同选择，有同一种共性。而侧边导航隐藏的功能是相互独立的。

常见的软件有：微博（社交分享类），唯品会、淘宝（购物类），

优点：节省界面控件，交互方便，与界面的连贯性强，用户能够清晰的知道自己所在的位置。

缺点：可扩展性不强。

7. 左侧导航

左侧导航根据字面意思是位于界面的左侧，属于二级导航，通常适用于界面种的分类功能。

常见的软件有：唯品会（购物类），稿定设计（素材类），虎课网（学习类）

优点：多功能间的切换自如，操作方便，交互路径短。

缺点：假若功能过多，用户的选择压力变大，容易让用户迷失方向。

8. 宫格式导航

宫格式导航它主要以图标+文字组合形式罗列在界面中，能够让用户快速了解到产品的具体业务功能。而它的功能于功能之间是相互独立存在的，不能相互间切换或者跳转交互。

当然宫格式导航的可扩展性也是很强的。

优点：可扩展性强，归类处理，模块分析清楚，展现直观，减少用户选择的时间成本。

缺点：功能间的不可切换，导致用户操作起来需要频繁的返回操作，交互路径边长。如果平铺功能过多时，还会干扰到用户的选择。

9. 列表导航

列表导航与宫格式导航一样也是图标+文字组合形成排列于界面中。

而区别在于：

                    列表导航

                    1，图标+文字是左右结构   

                    2，热区分散，由左到右，引导用户

                    3，可扩展性弱

                   宫格导航

                    1，图标+文字属于上下结构

                    2，热区聚集一块区域。

                    3，可扩展性强

                    总得来说，宫格式导航更适用于重要性强一点的功能。列表式导航适用于重要性弱一点的功能。

常见的软件有：伴伴（游戏类），虎课网（学习类），boss直聘（招聘类）

优点：符合人们自左到右、自上而下的阅读习惯。

缺点：切换不方便，必须返回列表页面才能进行切换，交互路径长。且阅读效率低且容易造成阅读疲劳。

10. 点聚式导航（一般是位于界面右下角作为悬浮icon）

适用于用户需要频繁使用的核心功能。

优点：节省界面空间，icon的视觉也较为醒目，节省用户的阅读成本。

缺点：会遮挡住界面一小部分内容（所以这个内容必须是次要内容），一个纯icon，虽然节省了用户的阅读成本，但是却提高了用户的理解成本（所以这个点聚式导航的icon一定需要设计得具象易于理解，不能抽象）。

Powered by Froala Editor