首页 UI设计正文

顶部导航和侧边导航,哪种更好用?

我是飞天兜 UI设计 2021-08-31 09:09:57 306 0 | 文章出自:Taras Bakusevych

作者:Taras Bakusevych

桌面和大屏幕上导航栏要怎么设计其实是一个经常被拿来探讨的问题,如今这也是 B 端设计中绕不开的一个设计问题。关于这点,Jennifer Rose Kingsburg 曾经有针对网页的三级菜单导航进行过一份研究,结论是在左侧设置导航好处多多。需要注意的是,这些研究大都是 2017年之前的研究成果,而如今很多样式放生了变化。

 顶部导航和侧边导航,哪种更好用? 第1张

1、左侧导航更方便和容易浏览

Eyetracķ荷兰国际集团的研究表明,用户习惯于使用 F 式的浏览路径,这使得左侧导航在一般情况下有着相对更强的可用性,它不需要用户视线上的查找,因为用户会下意识注意到它们。

 顶部导航和侧边导航,哪种更好用? 第2张

2、相较之下顶部导航更加节省空间

如果我们经常使用笔记本电脑来浏览页面,会很容易注意到不同的导航模块对于页面空间的占用比例,左侧导航所占用的页面控件通常是同样内容量的顶部导航的占用空间的3倍,因为纵向的侧边栏导航需要考虑到横向的标题占用空间,再加上搜索等功能模块的加入,这种空间占用就成了不可避免的结果。即使左侧的菜单栏可以折叠,这种处理方法也不总是有效的,因为这可能会隐藏相关条目的标签信息,降低了导航的可用性。

 顶部导航和侧边导航,哪种更好用? 第3张

3、侧边导航更方便缩放和收起

也正是左侧导航本身的排版逻辑,它通常可以显示比顶部导航多一倍的条目内容,如果你的信息架构本身涉及到的一级菜单条目较多的时候,采用左侧边栏导航是明显更合理的选择,而且这种导航非常适合随着时间推移逐渐增加条目的需求。

 顶部导航和侧边导航,哪种更好用? 第4张

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

侧边导航本身虽然占用的空间更大,但是它也有着更多的空间根据需求来定制各种不同的需求,相比于顶部导航,侧边导航甚至可以直接将分层的二级菜单直接展现出来,就像 Outlook 的侧边栏和 Slack 的侧边栏导航。

 顶部导航和侧边导航,哪种更好用? 第5张

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

你会注意到 macOS 和 Windows 操作系统当中,系统默认的用户界面大都采用了灵活的侧边栏导航设计,很多 web 应用也是如此,它们会将顶部空间留给系统默认的菜单模块。采用侧边栏导航的 UI 界面可以和操作系统的逻辑保持一致。

 顶部导航和侧边导航,哪种更好用? 第6张

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

悬停激活抽屉式下拉菜单的设计在顶部导航当中是非常自然的,但是在侧边栏导航当中,这种设计可能会在一定程度上遮挡住下级菜单,如果使用在旁边展开的方式,可能会占用大量的空间,总而言之,它更贴合顶部导航的交互模式。

 顶部导航和侧边导航,哪种更好用? 第7张

7、顶部导航栏适合做巨型菜单

顶部导航正是因为和悬停出发下级菜单的功能很搭,所以国内外很多电商和大型网站上会使用它来呈现条目众多的超级菜单。它是用来一次容纳超多条目的下级菜单的有效方式,这种布局也为产品展示和广告留出了足够多的空间。

 顶部导航和侧边导航,哪种更好用? 第8张

8、尽量避免重设计时改变导航模式

如果一种导航模式看起来不够好用,那么是否要借助重设计的机会,切换到另外一种模式呢?根据 Jira 的用户测试,95% 的早期用户对于这种情况会感到非常迷惑,即使是再小的导航功能修改都可能直接影响到大量用户的日常使用,因此不管哪种导航模式,一旦选定,尽量不要改变。

 顶部导航和侧边导航,哪种更好用? 第9张

9、不论哪种导航栏都面临响应式设计的挑战

对于没有太多条目的顶部导航,在移动端上依然可以直接在顶部呈现,不过如果太多了就需要使用汉堡菜单来承载,或者切换为垂直的侧边栏导航。而侧边栏导航在移动端上相对好一点,因为导航模式本身是一致的,但是有限的空间内如何呈现大量的导航条目同样存在挑战。

 顶部导航和侧边导航,哪种更好用? 第10张

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

顶部导航:占用空间小,在页面的位置最为显著,涉及条目不多的时候效果非常好。对于层次结构简单的中小型网站,顶部导航还是很好用的,对于层级较少但是二级条目特别多的超级导航,顶部导航也是不二选择。

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


收藏(0)
UI设计图标图标库设计项目设计师
版权声明

1、本网站属于个人的非盈利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,按照目前互联网开放的原则,我们将在不通知作者的情况下,转载文章:如果原文明确注明“禁止转载”我们一定不会转载。

2、本网站转载文章仅为传播更多信息之目的,凡在本网站出现的信息,均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性,但不保证信息的正确性和完整性,且不对因为信息的不正确或遗漏导致的任何损失或损害承担责任。

3、任何透过本网站网页而链接及得到资讯、产品服务,本网站概不负责,亦不负任何法律责任。

4、本网站所刊发、转载的文章,其版权归原作者所有,如其他媒体、网站或个人从本网站转载使用,请在转载有关文章时务必尊重该文章的著作权,保留本网站注明的“稿件来源”并自负版权等法律责任。

5、本站内容为传递信息使用,仅供参考,不构成营销建议。

6、如不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!谢谢。

发表评论

评论列表(0人评论 , 306人围观)
☹还没有评论,来说两句吧...

网站建设_网站优化就上魁元网络

https://www.kuaichez.com/

| 粤ICP备2020133026号

Powered By 魁元网络 版权所有

使用微信扫描二维码

关注我们看更多资讯

欢迎您光临魁元网络