QQ登录

登录|注册 上传

飞特网

  • 飞特网官方微博
  • 飞特网微信公众号

导航菜单设计五步法-B端设计指南

andmax发布于:2020-2-14 16:25 |原作者: CE大人
简介: 导航菜单对于用户的使用来说尤为重要,本文是我从实际工作出发,结合自身产品和过去经验对于导航进行的一次全面总结

导航菜单设计五步法-B端设计指南 飞特网 设计理论

前言:

在任意一个B端后台系统中,导航菜单都是不可或缺的一部分,每个导航菜单都有其固定位置,通常这个位置是不可撼动的。所以说:导航菜单是B端产品层级重要的交互控件

对于B端产品的用户而言,他们使用导航菜单目的性很强

到后台主要是对具体功能进行操作,导航菜单在功能的引导中发挥了巨大作用。因此,其主要的功能就是对B端产品进行分发、引导;帮助用户在复杂的后台页面中,寻找出自己真正想要的功能

分享内容:

一、合理规划

二、确定菜单广度和深度

三、菜单层级有区分

四、导航可配置

五、四种常见导航菜单

一、合理规划

1.1遵循7±2 原则

导航菜单建议最多不要超过 9 个,最少不要低于5个

原则解释:1956 年乔治米勒对短时记忆能力进行了定量研究,他发现人类头脑最好的状态能记忆含有 7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。

在生活中我们经常会把一长串的数字分成 7 个左右的数组来记忆,这样会使难度降低很多,米勒称这种单位为“组块”

导航菜单设计五步法-B端设计指南 飞特网 设计理论

是不是通过分组记忆以后,自己能记住的更多?这就是7±2 原则的分组

通过上面7+-2原则描述我们明确到:在导航菜单当中,超过 9 个会给用户查找时带来困难,低于 5 个说明导航菜单的分发效率不够高效

有人会说,在实际业务中,不会有那么理想,如果需要超过 9 个时,应该怎么办?

超过9个时,一定要对菜单进行分组,因为导航过多,用户寻找会十分迷茫,通过分组的方式,能够对菜单进行再次分类,提高查找效率

说的太干不如举个栗子

导航菜单层级越多,用户体验就会越差,你会发现一些拥有三级导航的菜单,都会通过设计优化来实现隐藏导航的合并,从而减少用户操作负担

导航菜单设计五步法-B端设计指南 飞特网 设计理论

比如有赞就是一个典型例子,在有赞零售的导航菜单中其实是有三个层级,但是通过交互层面的优化,将二、三级菜单直接展示出来,形成一个整体,提升了用户体验避免用户层层寻找

同时在交互上,采用 悬停+点击结合的形式,用户即可以通过悬停鼠标进行快捷操作。同时又可以通过点击,确定跳转查看该一级导航下的菜单,能够提高用户的操作效率

鼠标悬停还是鼠标点击

作为导航来说,其操作本身并不多,但是设计上,点击与悬停(hover)之间,还是存在很大差距

这里想要说明这两个操作本身而言,并没有对与错,但是适用场景的不同,导致在设计属性上存在着较大差异

鼠标悬停操作

鼠标在悬停时触发的操作时间太短暂,会给用户带来很强烈的挫败感,同时在悬停选择下一级菜单时,鼠标移动悬停也同要会造成这样的结果,因此在设计时,对鼠标悬停时的操作要格外留意。通常在悬停操作当中,只适用于只有一个菜单层级的菜单选项,这样用户在操作时更加方便

鼠标点击操作

鼠标点击操作多发生于多级导航进行操作,同时鼠标点击的形式,会给用户正向的反馈,用户点击后明确知道菜单栏不会隐藏,因此在两个操作之间进行选择操作时一定要多加思考 

1234下一页
1

好评

差评

刚表态过的朋友 (1 人)

andmax
浙江省 丽水市 设计爱好者
+ 关注 私信
  • 导航菜单设计五步法-B端设计指南
  • AE滑块控制简易用法教程
  • AE循环表达式完全教程+控制循环时间

最新评论

我来说两句:
B Color Image Link Quote Code Smilies |上传
您需要登录后才可以评论和提交作业 登录 | 立即注册

上传作业

本周热点文章

关于飞特| 广告服务| 付款方式| 友情链接| 网站地图| 联系我们| 加入我们| 举报| 飞特网旧版| 手机版| 飞特网