编辑导读：作为一个新用户，进入一个网站可能产物的第一件事就是去看导航栏，按照导航栏的指引找到本身想要的信息。本文作者基于本身的事情履历，将从五个方面复盘了B端的导航设计，但愿对你有辅佐。

公司想要对原有的运营打点平台举办页面改版进级，本文就关于如何设计导航做了如下观测和总结。

公司现有平台页面如下：

页面有如下缺点：

顶部操作率低；

一级菜单过多；

成果搜索间隔菜单元置太远；

按照靠山数据，常用成果没有几多用户利用；

拿到任务，我的思路首先是摸索导航的意义，其次查察其他产物的设计，尔后总结导航的所有范例和可实现的方法，最后按照现有的菜单框架选定最适合的模子。

一、导航的意义

许多人是把导航和菜单接洽在一起，叫导航菜单，但我以为狭隘了。

菜单原指餐馆提供的列有种种菜肴的清单，它是大而全的；导航就是给客户指引，让用户知道本身在哪，可以去哪。显然导航的观念更富厚，而菜单是实现网站导航的一种。我们可以按照菜单点单，也可以按门店销售排行榜点单，也可以按照点单员的推荐点单。

所以发明白吗？这里就呈现了三类导航：菜单导航（菜单点单）、标签导航（排行榜点单）、推荐导航（处事员推荐点单）。

二、菜单导航

菜单可分为顶部菜单、侧边菜单、顶部+侧边菜单。

关于这三者的优缺点，这位作者的梳理给了我很大辅佐，链接如下：B端设计：导航菜单的设计5步法

这类菜单是将全平台所有可利用成果颠末度类全部泛起出来，在从头接头分别后，我们共有9个菜单，个中三个与平台主业务不想关，其时处于技能原因想借用前端框架临时挂在这里，可以不消过多思量，将其收起来放在埋没点的位置即可。

所以实际为6个菜单，二级菜单或许为15个，三级菜单为75-80个。不算太多，三种范例的菜单摆放位置我们皆可思量。

1. 关于二三级菜单展开模式

顶部放一级菜单，侧边放二三级菜单的模式凡是一级菜单会揭示出来，二三级揭示形式大概会有以下两种：

1）二三级同时展示，如下图

2）二三层级逐级展开，如下图

同时展开的长处是可以将3级菜单尽收眼底，进入到内容页面只需要再点击一步。阿里云、腾讯云他们的菜单较多，回收的都是这种模式；而老牌的东西平台如PS、PR、Axure则喜欢逐级展开这种交互。

我没有想大白这类层级展开的菜单为何一直在用？从导航的目标触发，它使得找寻方针的路径变得很长，看起来好像没有优势。

在展开方法上我们选择回收一级外露，二三级同时展开的模式。

2. 关于菜单元置

顶部+侧边导航：顶部放一级菜单，侧边同时展开二级和三级，它的阅读顺序不是很友好，我要先看上面，选中了一个后再在左边选择。

顶部导航：6个主菜单不多，且名字皆为两个字，在选择一级后，在下方同时揭示二三级菜单，切合阅读顺序，是最佳选择。

侧边导航：侧边导航有三种揭示形式：悬浮显示+纵向分列，依然违背阅读习惯；悬浮显示+横向分列，可取；牢靠显示，表达清晰，可是占位过多，解除。

最后，我们暂且选定顶部导航和侧边导航里的“悬浮显示+横向分列”，看一下与其他部门团结哪个结果会更好。

3. 关于交互方法

交互有两种，一种是悬停显示二三级菜单，一种是点击显示二三级菜单。两者的主要区别在于一个会跟着鼠标移动消失，一个不会消失。

我小我私家倾向于点击，这样我不会因为不小心滑动鼠标导致面板消失，点击会让我有更强的掌控感，并且我以为点击和悬停的操纵本钱是一样的。我不太大白上文作者所说的悬停可以利用户操纵更利便的结论是怎么得来的。小我私家认为悬停只合用于呈现的弹窗不需要举办二次点击，只是举办释义的场景。