参考

全局导航与局部导航

全局导航与局部导航
导航作用
1、告诉用户有什么。通过信息层次结构告诉用户站点内容。
2、告诉用户如何使用。帮助用户规划行程，含蓄地告诉用户该从哪里开始，能进行哪些选择，帮用户快速找到所需内容。
3、确定用户的位置，避免迷路。

全局导航

全局导航就是在网站的每一页都会显示，且样式一致的全域导航。全局导航允许用户直接访问关键区域和功能，而不管他们处于网站的哪个层级。

局部导航

补充全局导航，不是每个页面都有，能让用户可以立即探索他们所在的区域。
局部导航存在的主要原因是全站导航不足以涵括整个网站架构，且有的内容和功能需要以独特的导航方式呈现。其次，有的后台系统量级较大，不同模块通常由不同部门负责，因而采用了不同的处理方式。

后台系统导航

后台系统导航包含4种元素，可根据系统特性保持这些元素的部分可见：
站点logo/名称、栏目、搜索、实用工具
站点logo一般会承载“回到首页”的功能，无论用户迷失到何种地步，点击“站点logo”都能回到首页。就像点击“重启”一样，从头开始。一般存在于全局导航中。
栏目可以理解为导航上到达站点的不同层级栏目的链接。栏目可能有多个层级，一般第1~2个层级栏目存在于全站导航中，往后栏目存在于局部导航中。
搜索（可选）：一种辅助型导航，可以帮助用户在站点中快速找到所需的内容。面向用户/客户的搜索功能常为全站搜索，存在于全局导航中。
实用工具：到达网站中不属于内容层次的重要元素链接，比如登录、注册、用户中心、消息中心等。
特殊场景——比如登录、注册、查看购物车、支付等，这些场景会做一些重要且不希望被干扰的操作。这时候，持久导航可能会成为不必要的干扰。对这些页面来说，只需要站点logo，一个回到主页的链接，以及有助于完成任务的实用工具作为做小规模的全站导航就足够了。

web导航呈现方式

水平方式/垂直方式/混合方式；

后台导航配色建议：一般层级深且量级大的后台系统，建议从主栏目到下级栏目配色从深到浅。因为相对于导航，页面内容会更重要。如果导航用浅色系去表达，会压不住整个界面，容易让整个界面看上去没有突出的重点。

常见导航模式

顶部水平栏导航

顶部水平栏导航是当前两种最流行的导航菜单设计模式之一。它最常用于主导航菜单，且最通常地放在页面头的直接上方或直接下方。
顶部水平栏导航设计模式有时伴随着下拉菜单，当鼠标移到（点击）某个项上时弹出它下面的二级子导航项。

• 顶部水平栏导航一般特征

导航项是文字链接，按钮形状，或者选项卡形状，水平栏导航通常直接放在邻近logo的地方。

• 顶部水平栏导航的缺点

顶部水平栏导航最大的缺点就是它限制了在不采用子级导航的情况下可以包含的链接数。对于只有几个页面或类别的网站来说，这不是什么问题，但是对于有非常复杂的信息结构且有很多模块组成的页面来说，如果没有子导航的话，这并不是一个完美的主导航菜单选择。

• 何时使用顶部水平栏导航

顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的系统来说是非常好的。这也是单列布局的网站的主导航的唯一选择（除了通常用于二级导航系统的底部导航）。当它与下拉子导航结合时，这种设计模式可以支持更多的链接。

竖直/侧边栏导航

侧边栏导航的导航项被排列在一个单列，一项在一项的上面。它经常在左上角的列上，在主内容区之前——根据一份针对从左到右习惯读者的导航模式的可用性研究，左边的竖直导航栏比右边的竖直导航表现要好。
侧边栏导航设计模式随处可见，几乎存在于各类网站上。这有可能是因为竖直导航是当前最通用的模式之一，可以适应数量很多的链接。
它可以与子导航菜单一起使用，也可以单独使用。它很容易用于包含很多链接的网站主导航。侧边栏导航可以集成在几乎任何种类的多列布局中。

• 侧边栏导航的一般特征

文字链接作为导航项很普遍（包含或不包含图标）
很少使用选项卡（除了堆叠标签导航模式）
竖直导航菜单经常含有很多链接
侧边竖直导航菜单可以存在“常驻”“收起”两个状态

• 竖直/侧边栏导航缺点

因为可以处理很多链接，当竖直菜单太长时有时可能将用户淹没。尝试限制你引入的链接数，取而代之可以使用飞出式子导航菜单以提供网站的更多信息。同时考虑将链接分放在直观的类别当中，以帮助用户很快地找到感兴趣的链接。

• 何时使用竖直/侧边栏导航

竖直导航适用于几乎所有种类的网站，尤其适合有一堆主导航链接的网站。

选项卡导航

选项卡导航可以随意设计成任何你想要的样式，从逼真的，有手感的标签到圆滑的标签，以及简单的方边标签等。它存在于各种各样的网站里，并且可以纳入任何视觉效果。

• 选项卡导航的缺点

选项卡最大的缺点是它比简单的顶部水平栏更难设计。它们通常需要更多的标签，图片资源以及CSS，具体根据标签的视觉复杂度而定。选项卡的另一个缺点是它们也不太适用于链接很多的情况，除非它们竖直地排列（即使这样，如果太多的话它们还是看起来很不合适）。

• 何时使用选项卡导航

选项卡也适合几乎任何主导航，虽然它们在可以显示的链接上有限制，尤其在水平方向的情况下。将它们用于拥有不同风格子导航的主导航的较大型网站是个不错的选项。

面包屑导航

面包屑的名字来源于Hansel和Gretel的故事，他们在沿途播撒面包屑以用来找到回家的路，这可以告诉你在网站的当前位置。这是二级导航的一种形式，辅助网站的主导航系统。

• 面包屑导航的缺点

面包屑不适于浅导航网站。当网站没有清晰的层次和分类的时候，使用它也可能产生混乱。

• 何时使用面包屑导航

面包屑导航最适用于具有清晰章节和多层次分类内容的网站。没有明显的章节，使用面包屑是得不偿失。

标签导航

标签经常被用于博客和新闻网站。它们常常被组织成一个标签云，导航项可能按字母顺序排列（通常用不同大小的链接来表示这个标签下有多少内容），或者按流行程度排列。
标签是出色的二级导航而很少用于主导航。可以提高网站的可发现性和探索性。标签云通常出现在边栏或底部。如果没有标签云，标签则通常包括于文章顶部或底部的元信息中，这种设计让用户更容易找到相似的内容。

• 标签导航的一般特征

标签是以内容为中心的网站（博客和新闻站）的一般特性
仅有文字链接
当处于标签云中时，链接通常大小各异以标识流行度
经常被包含在文章的元信息中

• 标签导航的缺点

人们通常把标签和博客和新闻网站联系在一起（有时候也可能是电子商务网站），所以如果你的网站与这些网站有本质的不同，它可能对你就没有帮助。标签也会给内容创作者带来一定量的工作量，因为为了使标签系统有效，每篇文章都需要打上准确的标签。

• 何时使用标签

如果你拥有很多主题，为内容打上关键词标记是很有利的。如果你仅有几个页面（可能你的网站是一个公司网站），可能就不需要给内容打标签了。是否结合标签云或只是将标签包含在元信息中得取决于你的设计。

搜索导航

（过滤搜索）
近些年来网站检索已成为流行的导航方式。它非常适合拥有无限内容的网站（像维基百科），这种网站很难使用其它的导航。搜索也常见于博客和新闻网站，以及电子商务网站。
搜索对于清楚知道自己想要找什么的访客非常有用。但是有了搜索并不代表着就可以忽略好的信息结构。它对于保证那些不完全知道自己要找什么或是想发现潜在的感兴趣内容的浏览者可以查找到内容依然非常重要。
分为横向和纵向。开始定义一些已知信息，之后通过限定条件对搜索后的结果进行再过滤。

• 搜索导航的一般特征

搜索栏通常位于头部或在侧边栏靠近顶部的地方
搜索栏经常会出现在页面布局中的辅助部分，如底部

• 搜索导航的缺点

搜索最大的缺点是并非所有搜索引擎都是平等的。取决于你选择的方案，你网站的搜索特性可能不能返回精确的结果或者缺失一些东西如文章元数据。搜索导航，对于大部分网站来说，应该作为次要的导航形式。搜索是用户在无法被导航到他们想找的东西的地方时的可靠选择。

• 何时使用搜索导航

对于具有无数页面并且有复杂信息结构的网站来说，肯定必须引入搜索功能。没有它用户可能很难通过遍历链接和多层的导航来找到他们想要的信息。搜索对于电子商务网站也非常重要，而关键的一点是电子商务网站的搜索结果要根据网站存货的多少具有相应的筛选和排序功能。

弹出式菜单和下拉菜单导航

弹出式菜单（与竖直/侧边栏导航一起使用）和下拉菜单（一般与顶部水平栏导航一起使用）是构建健壮的导航系统的好方法。它使得你的网站整体上看起来很整洁，而且使得深层章节很容易被访问。
他们通常结合水平，竖直或是选项卡导航一起使用，作为网站主导航系统的一部分。

• 弹出式菜单和下拉菜单导航的一般特征

用于多级信息结构
使用JavaScript和CSS来隐藏和显示菜单
显示在菜单中的链接是主菜单项的子项
菜单通常在鼠标悬停在上面时被激活，而有时候也可能是鼠标点击时激活

• 弹出式菜单和下拉菜单导航缺点

除非你在主导航链接边上放置一些标识（通常是箭头图标），不然访客可能不知道那有包含子导航项的下拉或弹出式菜单，因此使这些标识很明显是非常重要的。同时弹出式菜单和下拉可能使得导航在移动设备上非常难用，所以要确保你的移动样式表处理了这种情况。

• 何时使用弹出式菜单和下拉菜单导航

如果你想在视觉上隐藏很大的或很复杂的导航层次，弹出式菜单和下拉是很好的选择，因为它让用户决定他们想看见什么，以及什么时候可以看见它们。它们可以用来在不弄乱网页的情况下按需显示很大数量的链接。它们还可以用来显示子页面和局部导航，并且不需要用户首先点击打开新的页面。

分面/引导导航

分面/引导导航（也叫做分面检索或引导检索）最常见于电子商务网站。基本上来说引导导航给你提供额外的内容属性筛选。假设你在浏览一个新的LCD显示器，引导导航可能会列出大小，价格，品牌等选顶。基于这些内容属性，你可以导航到匹配你的条件的项。
引导导航在拥有巨大数量货物的大型电子商务网站中是非常宝贵的。用户通过直接搜索通常很难找到他们想要的东西，并且增加了用户漏掉一个产品的可能性。例如他们可能搜索一个灰褐色的产品，但你可能将它标记了灰色或褐色，虽然它可能就是用户想要的东西。

• 分面/引导导航的一般特征

最常见于电子商务网站
通常让用户对不同的特征做多次筛选
几乎总是使用文字链接，分解在不同的类别下或是下拉菜单下
常常与面包屑导航一起使用

• 分面/引导导航的缺点

引导导航可能会引起一些用户的迷惑。另外不能保证用户会在你预先定义的类别中查找。

• 何时使用分面/引导导航

分面导航对于大型电子商务网站非常有用。它方便了用户购物，提升了购物体验，并更容易找到它们真正想要的东西。它也可以用于其它目录风格的网站。

页脚导航

页脚导航通常用于次要导航，并且可能包含了主导航中没有的链接，或是包含简化的网站地图链接。
访客通常在主导航找不到他们要找的东西时会去查看页脚导航。

• 页脚导航的一般特征

页脚导航通常用于放置其它地方都没有的导航项
通常使用文字链接，偶尔带有图标
通常链接指向不是那么关键的页面

• 页脚导航的缺点

如果你的页面很长，没有人愿意仅仅为了导航而滚动到页面底部。对于较长的页面，页脚导航最好作为重复链接和简要的网站地图的地方。它不适合作为主导航形式。

• 何时使用页脚导航

绝大多数网站都有这样那样的页脚导航，即使它只是重复其它地方的链接。考虑什么放在那有用，以及你的访客可能最想找什么。

导航模式

产品中的信息由页面支撑，页面中信息流动由导航承载。导航设计过程中除了考虑层级结构的合理搭建、操作步骤的恰当分解、引导模式的巧妙运用，逆向导航这个偏隐藏化的功能的针对性使用也尤为重要。
导航是一个产品的交互核心，帮助用户到达并协助快速完成任务。

导航的用途（Usage）

建立上下文关联（Communicate relationships & context）
按逻辑对内容进行分组，用模块展示出项目之间的关系
阐明操作（Illuminate actions）
用路径引导用户从一个场景进入另一个场景，既能让用户作出明确选择也鼓励其自由探索
注意力聚焦（Focus attention）
利用导航合理设置，暴露产品中重要内容和任务

导航分类

按照导航移动方向可以分为：

• 横向导航：在同一级别的屏幕之间移动；
• 向前导航：连续的层级级别、流程中的步骤或跨应用的程序屏幕之间移动；
• 反向导航：按照时间顺序或分层向后翻屏幕；

  横向导航

  | 名称 | 定义及作用 | 交互原则 | | —- | —- | —- | | 菜单 | 核心导航元素之一，可以加速目标实现和满足需求的过程，一般用于系统框架级导航，菜单层级最多3级。 | 1. 主菜单导航系统，建议一级菜单遵循 7±2 法则，≤7 最佳；
  2. 菜单项按照逻辑顺序排列，如果逻辑不明显，则按照菜单常用度排列；
  3. 下拉平铺式菜单较多时，子菜单数量 <9 时，1列显示；当 9<子菜单数量 <18 时，2列显示；下拉画布右侧可以放些广告；
  4. 对于复杂菜单，可以采用汉堡式菜单，可以释放空间，使界面简约，但是汉堡式菜单也有缺点，隐藏的导航元素让新手迷惑，不知道如何下手。 | | 手风琴 | 一般用于系统内模块类的导航，易于扩展，可以完美展示其中的层级关系，垂直菜单建议最多2级。 | 1. 默认激活第一个菜单或者首个菜单的第一个子菜单，选中某个子菜单，子菜单所属的菜单为展开形式；
  2. 垂直菜单建议最多3级，并具有展开收起选择等交互功能；
  3. 手风琴一般至于页面左侧。 | | 标签（选项卡） | 提供平级的区域将大块内容进行聚合，标准页签常常用于容器内部主功能切换。 | 1. tabs标签建议遵循 7±2 规则，理想情况是 ≤5 | | 结构树 | 一般用于系统内模块类的导航，易于扩展，可以完美展示其中的层级关系，垂直菜单建议最多3级。 | 1. 默认选中第一个菜单，内容区显示第一个菜单对应的内容；
  2. 垂直菜单建议最多3级，根据场景功能结构树要具备编辑添加删除等交互功能；
  3. 结构树一般至于页面左侧。 | | 按钮集合 | 快捷入口集合，简化界面信息，提升效率。 | |

向前导航

反向导航

导航的渐进指引，基本都有其强规则属性；而反向指引，则更多的要从用户预期及操作闭环角度的思考，发挥其灵活可配置的特点，提升流程体验和数据转化。
逆向导航（也称反向导航）。概念出自Material Design，从用户行为维度，分成三类：Lateral navigation(横向导航)、Forward navigation(前进导航)以及Reverse navigation(逆向导航)。横向导航和前进导航分别指引用户操作的水平渐进和层级渐进。逆向导航则负责对反向轨迹进行定义和实施，三者结合，实现对移动页面的全局操控。

移动端逆向导航的作用(设计举例)

承担APP内信息高效流动

1.推送
Push推送消息。点击push，不同应用在push调起过程中出现的前置页面是不同的，有首页、有列表页、也有活动页。目的是告诉用户，如果从详情页退回，会前往何处，提供心理预期。（eg：网易云音乐推送）
2.线性的任务流表单优化
信贷授信过程需要用户完成的任务包括实名信息认证、个人信息补充、身份证照片上传、活体人脸验证等。层层返回不仅操作繁琐，也无法满足快速返回、跳页修改的诉求（跨环节修改是低效的）。所以增加公共聚合页，缩短线性进程。（eg：滴滴金融）
3.直接跳过同级页
内容型产品，从列表页下沉至文章详情页，并通过相关文章或推荐在详情页间流转。“返回”行为认定：同级详情内容已被阅读，无需二次展示。逆向导航会引导用户直接返回上一层级，而不是逐级返回。这种定向方式看似不太符合操作规则，但从用户角度思考，比较符合心理预期。（eg：今日头条）

连接主站与旁支的场景切换

1.侦测行为，辅助快速跳离。
主站APP接入独立小应用或第三方模块已成为大众做法；比如：百度网盘中的小度商城模块，当用户在小度商城中流转，出现返回行为时，导航就会展示“返回”“关闭”等快捷通道，提供一键返回百度网盘功能。出发点很好，但返回行为并不意味着用户一定想跳离，“返回”“关闭”的热区位置相邻，很容易让用户在移动场景下误操作直接关闭，体验欠佳。
微信在接入新闻板块的详情页提供了更好的解决方案：返回与跳离区域分开，基于用户滑动行为显示或隐藏返回功能。让高频的“前进返回”与低频的“跳回”，互不干扰。
2.动态呈现，提供双向链接。
QQ内置阅读顶部提供快速返回好友列表的逆向导航入口，用户可直接跳出阅读场景。但与之对应的，列表页顶部同样提供快速跳回阅读场景的链接。这种双向引导很快的将阅读场景与实时聊天相互贯通。更用心的是，如果阅读页层层返回聊天列表，聊天页顶部的快速链接是不再出现的，体现了场景的差异化。
3.突破层级，给予一键直达。
对于微信长文阅读场景，用户很容易被微信聊天打断。为了尽量减少二者切换的时间间隔，长文提供用户手动浮窗功能。直接突破层级的限制，任何场景下都能一键直达，彻底解决返回问题。圆形浮窗的颜色渐变也会时刻提醒及时阅读。

应对跨应用间的跳转返回问题

新版的iOS中，增加了左上角的返回标识，帮助用户快速返回原场景。一些应用更会在场景跳转的结尾，给予用户快速回跳的机会，比如：知乎分享内容到微信，微信提供返回知乎的快捷浮层。