一种侧边导航栏的交互方式

2020-03-21

最近看到几个管理系统的演示项目,结合开发过程中不顺手的地方,发现大多数网站的侧边导航栏都是点击展开,点击关闭。

感觉这样的交互方式稍微有点繁琐:

后来就想,能不能把点击事件换成悬浮事件呢?只要鼠标放上去,菜单就会自动展开,不用点一下的操作了。但是单纯的悬浮展开,需要考虑菜单长度不一致的问题,如果下一个菜单的长度比当前菜单短,鼠标离开当前菜单,当前菜单收回,鼠标所在的位置会直接越过下一长度较短的菜单。

像图片中这样,栏目二的长度是4,栏目三的长度是2,当鼠标从栏目二向下移动,离开栏目二的瞬间栏目二收回内容,鼠标在没有移动的情况下跳过了栏目三,悬浮在栏目四上,这其实是不合理的,会违背用户的预期。栏目二之后是栏目三,这是最正常的逻辑。

为了应对这一问题,也许可以将交互设计成这样,当鼠标离开栏目二后,栏目二不收回,直到鼠标离开整个导航栏,子菜单才自动折叠。如果子菜单展开时用户点击了某一父菜单,那这个父菜单即使鼠标离开导航栏也不收回。

下面是一个demo页面,通过iframe嵌入到这里,可以对比两种侧边导航栏的交互方式(移动端没有鼠标悬浮事件)。我偏爱灵活一点的交互,第二种方式单击父菜单也可以展开收起列表,相当于在方式一的基础上加入了鼠标悬浮自动展开的能力。

相较于鼠标悬浮自动展开不收回的方式,更进阶一点的做法是,当鼠标从上往下移动时,子菜单自动展开但不收回,当鼠标从下往上移动时,子菜单自动展开并且自动收回。因为子菜单要不要自动收回取决于对用户接下来的操作有没有影响。不过这样的效果实现起来有些复杂了,对于网页上的一个导航栏来说,需要不断监听鼠标的坐标,开发和和维护的成本有点高。