【ToB Web设计】导航栏 Navigation Bar——以云产品为例

导航栏 Navigation Bar

「导航栏」将网站的内容以结构化的形式呈现给用户，帮助用户定位到当前位置和目的地。「导航栏」通常由站点ID、栏目和工具构成。

站点ID：①快速定位首页；②提示用户仍然处于网站范围内

栏目：①告诉用户目前所在的位置；②给出可供用户前往的位置

工具：搜索、消息、设置等，辅助用户使用网站

---

一、导航的基础分类

按照导航作用的范围可以分为全局导航、局部导航

1.全局导航

全局导航是「全」且「一致」的：①全面地展现了产品的关键页面和功能；②无论用户身处网站何处，总是可以以一致的交互获取一致的全局导航。

2.局部导航

局部导航是全局导航的补充，只能在特定模块的页面使用。全局导航通常是全面地展现网站信息架构中的第一层级，当网站系统复杂到一定程度时，信息架构呈现多层，一个大模块由多个子功能构成，则需要局部导航协助用户更好地使用该模块的功能。

按照导航的布局方式可以分为水平导航、垂直导航、混合导航

1.水平导航

水平导航让第一层级的栏目以水平的形式固定在页面上方，适用于系统比较简单的网站。

优点：水平导航常见且符合用户的「从左至右，从上至下」的浏览方式，易读性高；无侧边栏干扰，沉浸感高。

缺点：横向扩展性较差——因为横向空间有限而使得所能容纳的栏目有限，对栏目名称的长度也有限制；纵向扩展性较差——通常只能呈现到第二层级，所以不适用于复杂系统。

水平导航

2.垂直导航

垂直导航让第一层级的栏目以垂直的形式呈现在页面左侧，适用于比较复杂的网站，多用于后台设计。

优点：垂直排布且运用滚轮滑动侧边栏，使得所能容纳的栏目数量大大增加；因无需像水平导航那样节省空间，栏目名称的长度限制可以更宽松；可以利用「手风琴式菜单交互」加增设一竖栏呈现到信息架构的第三层。

缺点：相比水平导航呈现的「细横条状」，垂直导航以「块状」占据了页面左侧，对页面主体内容的干扰更大，易影响沉浸体验。此时，可以合理设计垂直导航的收缩态，减少对用户的干扰，增强沉浸感。

垂直导航

3.混合导航

混合导航同时使用了水平导航和垂直导航，通常是使用水平导航显示第一层级，使用垂直导航显示第二、第三层级，适用于功能模块多、复杂度高的网站，多用于复杂的后台设计。

优点：扩展性高，最高能呈现到信息架构的第四层级。

缺点：同时使用水平导航和垂直导航，距离较远，使得切换效率下降；对空间的占用较大，容易影响用户的沉浸体验。

混合导航

---

二、云产品的导航设计

复杂内容下的快速定位

1.快速调出全局导航——巧用面积、妙用hover

云产品模块较多、复杂程度较高的特点，使得云产品在设计时通常使用「混合导航」。但是大型的云服务商提供了大量的产品和服务，使得「水平导航」无法满足呈现信息架构第一层级的需求，常见的做法是在「水平导航」设置控件调出全局导航。其中，笔者认为比较高效的交互方式就是使用hover调出，如腾讯云、阿里云。

腾讯云调出全局导航的方式

阿里云调出全局导航的方式

AWS和华为云在布局上与腾讯云、阿里云相似，都是在「水平导航」上设控件调出面积巨大的全局导航，但在交互方式上略有不同，他们都采用了点击而不是hover来触发，相比hover多了一步。

* *Google Cloud Platform和青云都采用侧边导航作为全局导航，把众多的服务栏目容纳在狭长的空间，大大增加了搜寻成本，效率比较低，故不推荐。

2.分组——合理分组

① 最常见的分组方式就是根据功能模块来划分，其中阿里云还专门为大的功能模块设置了导航，协助快速定位。

②AWS和华为云在全局导航面板中提供了历史记录，而腾讯云的「最近访问」则直接在首页中呈现。

③由于英文和中文的差异，AWS除了提供功能模块分组，还提供了A-Z的首字母分组，在云产品的海外版中也可以增设首字母分组。

阿里云：全局导航的辅助导航

3. 快速查找——自动获焦

为了提高在全局导航中搜寻的效率，AWS、腾讯云、阿里云、华为云均在全局导航面板设置了搜索，其中AWS和阿里云都设置了自动获焦，方便用户高效查找。

AWS明显的获焦效果

4. 快速访问常用项——设置收藏

① 水平呈现的收藏：利用水平导航的空间，优势在于比较直观、快捷，劣势在于空间有限，对小屏不友好。

水平呈现的收藏

② 垂直呈现的收藏：在水平导航中设置控件调出，优势在于能容纳的栏目数量较多，对屏幕大小要求低，劣势在于比较隐藏，不直观。

垂直呈现的收藏

同样是隐藏起来的收藏栏，阿里云比华为云的优势在于：①hover调出比点击调出更加快捷，②空间更大，③上下选择的距离也比左右选择的距离更短。

复杂内容下的专注保持

1.利用配色突出内容

当导航与内容区域底色相近时，导航和内容区域会互相干扰，易显得页面花哨，难以让用户集中注意力。配色的强对比会加大空间的分割感，使得用户注意力可以在导航和内容区域之间合理切换，而不易被干扰。

配色弱对比vs配色强对比

2.设置垂直导航的收缩态

为了减少垂直导航对内容的干扰，可以设置导航的收缩态，如果是有图标的导航，则收缩至只显示图标，如果是没有图标的导航，则需要提供小标提示导航被隐藏。

垂直导航的收缩态

云产品设计的数值