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

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

[复制链接]
avatar

8

主题

25

帖子

124

积分

注册会员

Rank: 2

积分
124
ico_lz  楼主| 发表于 2021-3-29 15:12:31 | 显示全部楼层 |阅读模式
本帖最初由 爱进修的小同学 于 2021-3-29 15:15 编辑

前文传送门:

导航菜单设想五步法(一)
导航菜单设想五步法(二)

五、四种常见导航菜单

5.1 侧边导航

侧边导航在国内的 B 端产物傍边最为常见的
将菜单栏放置在左侧,页面结构上根基为左右结构,将导航菜单放置左侧牢固

由于侧边导航在国内产物中最为常见,是以把他是优先提出来说,国内厂商对于侧边栏导航的尤其偏心,在很多民气目中,感受就只要侧边导航和其他导航两种导航形式,也就形成了在 B 端产物的成长也逐步趋同。不外现阶段大师对于 B 端产物的重视,在设想上也起头多元化,话不多说,我们先来看看侧边导航的优点有哪些~

优点:

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

扩大性较强:多级导航可以流利展现,可以涵盖很多大而全的产物
展现灵活:侧边导   航可收折,收折事后用户的横向焦点空间将会增大大,页面展现效力也会大猛进步
快速定位:视觉启始线同一,用户可以按照首字停止查找,方便查找

弱点:

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

不易阅读:侧边导航笔墨垂直排列,有悖于眼动的一般视觉偏向
阅读沉醉感低:侧边导航轻易打断用户的一般阅读顺序,使阅读感下降

线上产物:

我们拿有赞零售停止举例,他就是一个典型例子。

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

菜单栏+功用菜单共有 15 个,然后经过导航的间隔将菜单停止分组,最多一个导航菜单共 9 个,满足7+-2原则

同时可以看到,有赞在利用三级导航时,经过右侧面积同一展现二、三级导航,方便了用户导航展现的同时优化了用户的利用体验


5.2 顶部导航

顶部导航在国外的产物傍边,算是较为常见的。

将菜单栏放置在顶部,页面结构上根基为高低结构,将导航菜单放置上方牢固


顶部导航早期出现于各类门户网站:比如企业官网,各类征询类的网站经常会采纳这样的导航形式。说回B端产物中,顶部导航凡是在B端产物中也是非常常见的,其中以国外产物最为集合,比如国外CRM三剑客:salesforces、hubspot、zoho都是采纳的顶部导航的形式。

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



优点:

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

满足阅读习惯:导航为水平结构,阅读方式更切近眼动的一般阅读顺序
沉醉感强:顶部导航凡是不会打断用户的阅读行为,对用户的干扰少

装备影响小:导航顶部,整体页面稳定,页面临于用户显现器分辨率影响较小

弱点:

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

通用性差:同时受导航栏题目笔墨限制,对于每一个菜单的字数限制严酷
横向 Tab 数目少:承载不了太多菜单数目,跨越 7 个后菜单排布会非常困难,横向空间操纵率差

扩大性差:水平导航最好不要跨越二级菜单,跨越二级菜单,用户利用本钱高

线上产物:

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

salesforce

销售 CRM 传奇人物,千亿美圆估值,每年营收百亿美圆,无疑是 B 端产物傍边的一个标杆。

假如你是做 CRM,大概是 B 端产物,必看的一个竞品。
salesforce 采纳的就是一个顶部导航,只是分歧的是,salesforce 的顶部导航更多是将页头的功用停止合并叠加,虽然 salesforce 的交互方式不算优异,可是由于其营业线不竭庞大,这样才能支持其整条营业线。就由于这样的题目,需要设想师在设想时,要斟酌到全部系统的一个扩大性题目。做 B 端产物的交互设想有点类似我劈面后端同学写代码,我们现在设想的这个交互最少要满足未来一到两年公司的已计划好的产物的扩大题目。

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

Hubspot

Hubspot 采纳就是顶部菜单,同时二级菜单下拉展现,同时 Hubspot 是依照脚色去分别顶部菜单,可以给用户减轻认知负担,更好的被用户所利用。同时在一些设想小细节上,比如顶部的主题色,既可以提升品牌感,同时在是适那时可以作为进度停止一个展现,利用户可以加倍深入的感知到其设想

5.3 夹杂导航

在 B 端产物中,感受夹杂导航就是一个前期之秀。

它在页面结构为顶部和侧边,简单来说,就是将顶部导航于侧边导航停止连系。凡是将一级导航菜单放置顶部,经过一级菜单的点击后,展现侧边的二、三级菜单。在一些产物具有复杂的逻辑关系,菜单之间关系清楚的产物中,夹杂导航也越来越被公共所接管。在很多复杂的系统傍边,夹杂导航真的是很不错的一个挑选,我们来看看他的优弱点:

优点:

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

承载大型营业:在导航上,他可以展现 3 级甚至 4 级菜单,对于很多大型 B 端项目,夹杂导航算是加倍公道的挑选
扩大性强:对今后有计划大量功用的产物,用夹杂导航,能使以后菜单扩大性更强

弱点:

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

占用面积大:要切换多个菜单,所以顶部和左侧会占用大量的空间
菜单交互途径长:一、二级菜单间往返交互本钱高,操纵烦琐

线上产物:

各类云产物
云产物实在就是一个很好的例子,比如 阿里云,他们由于本身产物线众多,对于导航的设想也是以复杂著称,大都情况下,面临这类复杂的导航时城市采纳夹杂导航。他们可以经过夹杂导航,利用户对于导航每一个功用模块有一个深入的熟悉。

金蝶
金蝶-星空定位就以 Paas 停止定制销售,分析过他的产物你就领会到,他一共有 100+个菜单,同时算是金蝶的王牌产物,是以对于此类产物,应当侧重去领会,也是以,对于每一个模块,都是经过大题目+小题目标形式停止设想,利用户在利用时可以明白晓得自己想要什么

现在各大复杂的产物城市采纳夹杂导航,这样对于产物的架构以及各类菜单层级的分析也会起到很大的帮助~

5.4平台类导航的新趋向:

平台类导航是我们团队内部自己的取名,给他的界说凡是是具有很多模块比如Teambition、明道云、具有很多个模块,经过一个同一的平台停止内容的分发,比如移动真个钉钉、企业微信、纷享销客都采用一样的方式,但在WEB端傍边,平台导航凡是陪伴着其他导航同时出现,

比如比来很火明道云、就是利用了在我们看来的平台导航,他们将自己的产物别离摆设在页面的焦点地区,经过对于工作台的设想,构成对于页面的展现,同时构成一个平台类的导航,于此相对应的还有钉钉背景治理页面以及企业微信背景治理页面,他们都是经过一个个平台类的模块对导航停止分发的~

最初的罗唆叨

我相信,看到这里的同学都是勇士,给大师聊聊自己的心得吧~
实在这篇文章的原型,来自对于公司新产物的导航设想分享,我希望自己把比来几年打仗到的内容整理一下,用一个系列的文章来去论述B端产物的全部架构,假如大师想看什么文章,接待私信~
希望大师喜好

对了,假如你感觉文章对你来说有所帮助,接待点赞,同时也接待将文章分享给你身旁的人~
感谢 : )







回复

使用道具 举报

avatar

3

主题

10

帖子

63

积分

注册会员

Rank: 2

积分
63
在线会员 发表于 2021-3-29 18:12:05 | 显示全部楼层
还是比较有用的【转帖】导航菜单设计五步法(三)
回复

使用道具 举报

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

本版积分规则