B端产品全局导航样式与分析

本篇主要整理与总结B端产品全局导航的样式与使用,如有不足望指正!

B端产品全局导航样式与分析

目录:

  1. 用户如何查找信息
  2. B端导航目前的主流设计样式
  3. 这些样式的使用场景及优缺点

一、用户如何查找信息?

查找信息是导航最重要的功能,用户如何查找信息总结为下面四个场景:

场景1:用户知道想要什么,且知道如何查找;

此场景出现在用户操作熟练的系统当中。

场景2:用户知道想要什么,但不知道如何查找;

例如,用户想查看自己的消费记录,但不确定在哪个页面找。

场景3:用户不知道自己想要什么

此场景较少出现于B端,使用B端产品的用户都有明确的目的性。

但多出于C端,出于无聊逛淘宝,而不是真的想买什么。对于这类用户,C端产品推出了“关联导航”,在浏览某一页面时,会给你推荐相关的产品或算法算出用户可能感兴趣的商品,也叫“关联推荐”。

场景4:再次搜索

用户想返回寻找之前发现的内容,此时浏览记录和合理的结构导航非常重要。

以上根据用户查找信息的方式,我们可以把导航分为:

1、结构导航

包含全局导航局部导航两种。

全局导航通常是一级导航,方便用户跳转以及及时查看网站内容。

局部导航与全局导航有层级关系,局部导航帮助用户进入更加特定的页面。

B端产品全局导航样式与分析

2、关联导航

是一种跨越信息架构的层级,会快速跳转到相关页面的一种导航形式,在B端不多见,常见于C端,最终的目的是留住用户。

B端产品全局导航样式与分析

3、可用性导航

指一些帮助提升网站可用性的功能,并不是主要功能,但却不能缺少。

如:用户信息、帮助、操作手册等,通常摆放位置在界面右上角。

B端产品全局导航样式与分析

因B端用户在进入一个系统时,通常抱有明确的目的性,所以此处聚焦分析“结构导航中的全局导航”。

二、全局导航样式与分析

常用的B端全局导航样式有三种,分别为:

1、顶部水平导航

2、侧边垂直导航

3、混合导航

样式一:顶部水平导航

1、顶部水平导航:

页面上下布局,提供全局性的类目和功能,二级菜单一般聚合在下拉菜单里,鼠标Hover出现二级或者更多层级菜单。

B端产品全局导航样式与分析

2、使用场景:

适用于一级导航数量较少,内容较为简单,或追求沉浸式阅读操作的系统,多见于官网首页。

高度范围计算公式:48px+8n

顶部导航(大部分系统):一级导航高度64px,二级导航48px。

顶部导航(展示类页面):一级导航高度80px,二级导航56px。

3、优点:

1、对菜单获取速度更快,符合用户横向阅读习惯;

2、对阅读的视觉干扰小,符合从上至下的页面浏览习惯,相比垂直导航不会打断用户对内容区的沉浸感;

3、在导航深度上可扩展性较强,在下拉菜单中可根据业务需求灵活地增加层级和版块。

4、相较于垂直导航占用左侧屏幕宽度,顶部导航为下方内容区腾出更多空间。

5、内容通常放在固定版心尺寸以内, 页面排版稳定,不受用户终端显示器影响。

4、缺点:

1、随着业务的扩展,对顶部一级菜单的标题数量和标题的文案字数有较高的限制要求;

2、更深层级的菜单在点开后会隐藏收起,影响用户记忆与查找。

样式二:侧边垂直导航

1、侧边垂直导航:

页面左右布局,提供多级结构来收纳和排列网站架构。

通常默认为展开状态,为减少垂直导航对内容区的干扰,侧边栏会设置收缩功能。

当网页架构复杂,层级较深时,侧边栏会采用逐层渐进的导航样式来支撑庞大的业务内容。

B端产品全局导航样式与分析

2、使用场景:

多用于专注功能,快速切换操作,有一定复杂度的后台系统。

宽度计算公式:200px+8n

3、优点:

1、侧边栏的宽度可收缩。既可用鼠标拉宽查看超长导航文案,又可收起侧边减少垂直导航对右侧内容区的干扰。

2、操作效果高,用户在操作和浏览中可以快速定位和切换当前位置。

3、层级扩展性强,一二三级导航可以更为顺畅且具关联性的被展示。

4、缺点:

1、导航展开收起二三级菜单需要手动多次点击。

2、视觉层次上不如水平导航一二级导航视觉区分明显。

3、受终端设备影响,页面排版不稳定。遇到分辨率较低,屏幕较小终端显示器,内容区的排版需要考虑适配问题。

4、用户使用时浏览视线左右折回,相比顶部导航垂直浏览更容易疲劳。

样式三:混合式导航

1、混合式导航:

同时拥有顶部与侧边栏导航。

B端产品全局导航样式与分析

如下图,当业务版块越来越多,横向与纵向都较为复杂时,导航的样式可以采用渐进式,让一二级菜单的业务分类界面清晰明确。减小用户的认知负荷,让体验更为友好。

B端产品全局导航样式与分析

如下图,当面临更加庞大的业务内容时,可采用渐进式与平铺式结合的方式。把业务进行整合分类,同时对于细分业务领域用平铺的方式进行展示,更方便用户迅速查找目标。

B端产品全局导航样式与分析

2、使用场景:

用于功能较多,结构较复杂的网站。

3、优点:

层级扩展性强,最深可达四~五级菜单。

4、缺点:

1、一级菜单与更深层级的距离较远,视觉关联性较弱。

2、导航菜单占用屏幕面积较大,内容区的展示受影响。

总结

1、导航的位置摆放:

① 顶部

② 侧边

③ 顶部+侧边

2、注意点:

1、导航的外观样式取决于网页架构的复杂程度,越简单的结构越倾向于顶部水平导航;越复杂的结构越倾向于混合式导航。

2、导航的层级深度通常不超过三级,当业务内容复杂程度超过三级时,使用逐层渐进+平铺的方式来展示可以降低用户的认知负荷。

3、思考题:

早期的办公类软件,如Word或Excel的导航和工具栏都在顶部,如果改放到侧边会给用户体验带来什么样的影响?导航的位置与屏幕比例,尺寸大小,软件的功能之间都有什么样的关系?

本文由 新媒体之家 作者: 海盐社 发表,其版权均为原作者所有,文章内容系作者个人观点,不代表 新媒体之家 对观点赞同或支持,未经许可,请勿转载,题图来自Unsplash,基于CC0协议。
0

发表评论