顶部导航 vs 侧边导航,到底哪种更好用?

释放双眼,带上耳机,听听看~!
桌面和大屏幕上导航栏要怎么规划其实是一个经常被拿来讨论的问题,如今这也是 B 端规划中绕不开的一个规划问题。

桌面和大屏幕上导航栏要怎么规划其实是一个常常被拿来讨论的问题,现在这也是 B 端规划中绕不开的一个规划问题。Jennifer Rose Kingsburg 曾经有针对网页的三级菜单导航进行过一份研讨,结论是在左边设置导航好处多多。此外还有许多类似的研讨,你能够在这里看到许多相关研讨的摘要。值得注意的是,这些研讨大都是 2017年之前的研讨成果,而现在许多规划范式发生了变化。

1、左边导航更简略阅读

Eyetrac荷兰世界集团的研讨表明,用户习惯于运用 F 式的阅读路径,这使得左边导航在一般状况下有着相对更强的可用性,它不需求用户视线上的查找,由于用户会下认识注意到它们的存在。

2、顶部导航更加节约空间

假如咱们常常运用笔记本电脑来阅读页面,会很简略注意到不同的导航模块关于页面空间的占用比例,左边导航所占用的页面控件通常是同样内容量的顶部导航的占用空间的3倍,由于纵向的侧边栏导航需求考虑到横向的标题占用空间,再加上查找等功用模块的参加,这种空间占用就成了不可避免的结果。即便左边的菜单栏能够折叠,这种处理方法也不总是有用的,由于这或许会隐藏相关条意图标签信息,降低了导航的可用性。

3、侧边导航更简略缩放和收纳

也正是左边导航自身的排版逻辑,它通常能够显示比顶部导航多一倍的条目内容,假如你的信息架构自身触及到的一级菜单条目较多的时分,采用左边边栏导航是显着更合理的挑选,而且这种导航非常适合随着时间推移逐渐添加条意图需求。

4、侧边导航支撑定制化导航结构

侧边导航自身尽管占用的空间更大,可是它也有着更多的空间依据需求来定制各种不同的需求,相比于顶部导航,侧边导航乃至能够直接将分层的二级菜单直接展现出来,就像 Outlook 的侧边栏和 Slack 的侧边栏导航。

5、侧边栏更和桌面端体系更一致

你会注意到 macOS 和 Windows 操作体系傍边,体系默许的用户界面大都采用了灵活的侧边栏导航规划,许多 web 运用也是如此,它们会将顶部空间留给体系默许的菜单模块。采用侧边栏导航的 UI 界面能够和操作体系的逻辑保持一致。

6、悬停激活下级菜单在顶部导航中更好用

悬停激活抽屉式下拉菜单的规划在顶部导航傍边是非常自然的,可是在侧边栏导航傍边,这种规划或许会在一定程度上遮挡住下级菜单,假如运用在旁边展开的方法,或许会占用很多的空间,总而言之,它更贴合顶部导航的交互形式。

7、顶部导航栏适合做超级菜单

顶部导航正是由于和悬停动身下级菜单的功用很搭,所以许多电商和大型网站上会运用它来出现条目很多的超级菜单。它是用来一次包容超多条意图下级菜单的有用方法,这种布局也为产品展示和广告留出了足够多的空间。

8、尽量避免重规划时改变导航形式

假如一种导航形式看起来不行好用,那么是否要凭借重规划的时机,切换到另外一种形式呢?依据 Jira 的用户测验,95% 的前期用户关于这种状况会感到非常利诱,即便是再小的导航功用修正都或许直接影响到很多用户的日常运用,因此不管哪种导航形式,一旦选定,尽量不要改变。

9、不论哪种导航栏都面临呼应式规划的应战

关于没有太多条意图顶部导航,在移动端上依然能够直接在顶部出现,不过假如太多了就需求运用汉堡菜单来承载,或许切换为垂直的侧边栏导航。而侧边栏导航在移动端上相对好一点,由于导航形式自身是一致的,可是有限的空间内怎么出现很多的导航条目同样存在应战。

结论:用哪种导航栏取决于需求

顶部导航:占用空间小,在页面的方位最为显著,触及条目不多的时分效果非常好。关于层次结构简略的中小型网站,顶部导航还是很好用的,关于层级较少可是二级条目特别多的超级导航,顶部导航也是不二挑选。

侧边导航:侧边导航支撑一级条目较多且层级较多的导航需求,扩展性良好,关于复杂的产品和自定义需求较多的产品、触及到办理功用、 桌面级产品、 都适合运用侧边导航。

更多来自 Taras Bakusevych 的文章

给TA打赏
共{{data.count}}人
人已打赏
教程分享

5000 字干货!超全面的B端设计规范总结

2021-8-13 17:17:17

教程分享

出海产品如何从零搭建IP插画库?让大厂高手教你!

2021-8-20 17:16:35

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索