请选择 进入手机版 | 继续访问电脑版
img_top
查看: 184|回复: 1

[分享] 【转帖】导航菜单设想五步法(一)

[复制链接]
avatar

8

主题

25

帖子

124

积分

注册会员

Rank: 2

积分
124
ico_lz  楼主| 发表于 2021-3-29 14:02:38 | 显示全部楼层 |阅读模式
【转帖】导航菜单设想五步法(一)
前言:

在肆意一个B端背景系统中,导航菜单都是不成或缺的一部分,每个导航菜单都有其牢固位置,凡是这个位置是不成撼动的。所以说:导航菜单是B端产物层级重要的交互控件

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

到背景主如果对具体功用停止操纵,导航菜单在功用的指导中发挥了巨高文用。是以,其首要的功用就是对B端产物停止分发、指导;帮助用户在复杂的背景页面中,寻觅出自己真正想要的功用

分享内容:

一、公道计划
二、肯定菜单广度和深度
三、菜单层级有区分
四、导航可设置
五、四种常见导航菜单

一、公道计划

1.1遵守7±2 原则
导航菜单倡议最多不要跨越 9 个,最少不要低于5个

原则诠释:1956 年乔治米勒对短时记忆才能停止了定量研讨,他发现人类脑筋最好的状态能记忆含有 7(±2)项信息块,在记忆了 5-9 项信息先人类的脑筋就起头出错。

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

【转帖】导航菜单设想五步法(一)

能否是经过度组记忆今后,自己能记着的更多?这就是7±2 原则的分组

经过上面7+-2原则描写我们明白到:在导航菜单傍边,跨越 9 个会给用户查找时带来困难,低于 5 个说明导航菜单的分发效力不够高效

有人会说,在现实营业中,不会有那末理想,假如需要跨越 9 个时,应当怎样办?

跨越9个时,一定要对菜单停止分组,由于导航过量,用户寻觅会非常苍茫,经过度组的方式,可以对菜单停止再次分类,进步查找效力

说的太干不如举个栗子?:

【转帖】导航菜单设想五步法(一)

比如在微盟、有赞、小鹅通的导航设想傍边,微盟、小鹅通有很大不敷,我们来逐一拆解

小鹅通:共有14个导航菜单, 且菜单之间形式分歧,表示也会有所差别, 也是以对于用户而言利用起来会发生很强的迷惑感

微盟:一共有11个一级菜单,不合适7+-2原则,同时也可以感遭到在视觉层面上,微盟的导航菜单没有分组,难以寻觅和记忆

有赞:虽然在导航的数目上也是有9个以上,可是它对菜单停止分组,有用进步了用户查找时的效力,是以在设想上加倍公道

假如菜单栏数目过量怎样办?下方2.1小节会有讲到~

1.2 导航菜单不能隐藏跨越两级

导航菜单隐藏跨越两级时,代表着产物在用户的利用计划中,没有深入思考全部用户体验
【转帖】导航菜单设想五步法(一)

导航菜单层级越多,用户体验就会越差,你会发现一些具有三级导航的菜单,城市经过设想优化来实现隐藏导航的合并,从而削减用户操纵负担

【转帖】导航菜单设想五步法(一)

比若有赞就是一个典型例子,在有赞零售的导航菜单中实在是有三个层级,可是经过交互层面的优化,将二、三级菜单间接展现出来,构成一个整体,提升了用户体验避免用户层层寻觅

同时在交互上,采用 悬停+点击连系的形式,用户即可以经过悬停鼠标停止快速操纵。同时又可以经过点击,肯定跳转检察该一级导航下的菜单,可以进步用户的操纵效力

鼠标悬停还是鼠标点击

作为导航来说,其操纵自己并不多,可是设想上,点击与悬停(hover)之间,还是存在很大差异

这里想要说明这两个操纵自己而言,并没有对与错,可是适用处景的分歧,致使在设想属性上存在着较大差别

鼠标悬停操纵

鼠标在悬停时触发的操纵时候太长久,会给用户带来很激烈的挫败感,同时在悬停挑选下一级菜单时,鼠标移动悬停也同要会形成这样的成果,是以在设想时,对鼠标悬停时的操纵要分外留意。凡是在悬停操纵傍边,只适用于只要一个菜单层级的菜单选项,这样用户在操纵时加倍方便

鼠标点击操纵

鼠标点击操纵多发生于多级导航停止操纵,同时鼠标点击的形式,会给用户正向的反应,用户点击后明白晓得菜单栏不会隐藏,是以在两个操纵之间停止挑选操纵时一定要多加思考

二、肯定菜单广度和深度

导航菜单广度和深度的区分

菜单广度:导航菜单中每一个层级包括的菜单项数目为广度
菜单深度:导航菜单层级的数目为深度;
深广度平衡帮助用户停止快速挑选,经过可以对全部产物架构有着第一眼的熟悉

2.1当菜单广度过大时,怎样办?

当菜单广度过大,我们也可以经过设想的方式来优化导航菜单
我举一个比力具有代表性的例子:腾讯云

【转帖】导航菜单设想五步法(一)

腾讯云今朝具有大要100+个云产物,他们都散布在导航菜单上,是以在导航设想上,它采纳一种新的形式:1.全数菜单导航+2.搜索菜单+3.自界说导航

在全数菜单中,展现了腾讯云100+个云产物项目,经过搜索停止挑选获得用户想要的菜单。同时在导航栏上,支持用户去自界说5个菜单选项,也是以用户将常用的菜单增加至此,也更方便用户去寻觅。这样在满足营业的条件下,经过一些本性的设想,使100+个菜单也可以塞得进全部导航中

2.2菜单深度过深时,怎样办?

当面临菜单深度过深时,凡是需要从几个方面去斟酌:

与产物司理相同能否到位

这里主如果想经过与产物司理的相同,领会到菜单的架构设想的缘由,以及能否为你的设想停止一次重新的梳理,寻觅一些值得优化的点
倡议在寻觅产物司理之间,自己可以经过一些思维导图的软件将自己产物的菜单目录全数罗列出来,可以先多思考,为下面的相同节俭时候、进步效力

用户体验舆图的绘制

在一个B端产物中,用户的目标虽然复杂,可是研讨用户每一步操纵,还是会查找出一些纪律,我们可以从这些纪律中,做些文章

比如我们之前在一个医疗系统中,按照脚色的分歧,将医疗脚色分为:前台、征询师、医生、老板这四种脚色,每个脚色所关心的点城市有所分歧。比如
老板:最关心每个门店今朝的的情况数据,比如门店营业额、门店待客数、每个医生的治疗量以及治疗最少的医生。这些都代表着他分歧场景下利用的习惯。
将这些情况分析今后,提炼出焦点的需求点

然后绘制完成他们的用户舆图后,按照脚色,明白每一个脚色的平常操纵有哪些,从而肯定我们一切菜单所展现的位置以及全部菜单的层级关系

【转帖】导航菜单设想五步法(一)


回复

使用道具 举报

avatar

13

主题

43

帖子

207

积分

中级会员

Rank: 3Rank: 3

积分
207
在线会员 发表于 2021-3-29 18:11:05 | 显示全部楼层
【转帖】导航菜单设计五步法(一)【转帖】导航菜单设计五步法(一)【转帖】导航菜单设计五步法(一)【转帖】导航菜单设计五步法(一)【转帖】导航菜单设计五步法(一)
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则