2021-10-9 资深UI设计者
桌面和大屏幕上导航栏要怎么设计其实是一个经常被拿来探讨的问题，如今这也是 B 端设计中绕不开的一个设计问题。Jennifer Rose Kingsburg 曾经有针对网页的三级菜单导航进行过一份研究，结论是在左侧设置导航好处多多。此外还有很多类似的研究，你可以在这里看到很多相关研究的摘要。值得注意的是，这些研究大都是 2017年之前的研究成果，而如今很多设计范式发生了变化。
Eyetracķ荷兰国际集团的研究表明，用户习惯于使用 F 式的浏览路径，这使得左侧导航在一般情况下有着相对更强的可用性，它不需要用户视线上的查找，因为用户会下意识注意到它们的存在。
如果我们经常使用笔记本电脑来浏览页面，会很容易注意到不同的导航模块对于页面空间的占用比例，左侧导航所占用的页面控件通常是同样内容量的顶部导航的占用空间的3倍，因为纵向的侧边栏导航需要考虑到横向的标题占用空间，再加上搜索等功能模块的加入，这种空间占用就成了不可避免的结果。即使左侧的菜单栏可以折叠，这种处理方法也不总是有效的，因为这可能会隐藏相关条目的标签信息，降低了导航的可用性。
也正是左侧导航本身的排版逻辑，它通常可以显示比顶部导航多一倍的条目内容，如果你的信息架构本身涉及到的一级菜单条目较多的时候，采用左侧边栏导航是明显更合理的选择，而且这种导航非常适合随着时间推移逐渐增加条目的需求。
侧边导航本身虽然占用的空间更大，但是它也有着更多的空间根据需求来定制各种不同的需求，相比于顶部导航，侧边导航甚至可以直接将分层的二级菜单直接展现出来，就像 Outlook 的侧边栏和 Slack 的侧边栏导航。
你会注意到 macOS 和 Windows 操作系统当中，系统默认的用户界面大都采用了灵活的侧边栏导航设计，很多 web 应用也是如此，它们会将顶部空间留给系统默认的菜单模块。采用侧边栏导航的 UI 界面可以和操作系统的逻辑保持一致。
悬停激活抽屉式下拉菜单的设计在顶部导航当中是非常自然的，但是在侧边栏导航当中，这种设计可能会在一定程度上遮挡住下级菜单，如果使用在旁边展开的方式，可能会占用大量的空间，总而言之，它更贴合顶部导航的交互模式。
顶部导航正是因为和悬停出发下级菜单的功能很搭，所以很多电商和大型网站上会使用它来呈现条目众多的超级菜单。它是用来一次容纳超多条目的下级菜单的有效方式，这种布局也为产品展示和广告留出了足够多的空间。
如果一种导航模式看起来不够好用，那么是否要借助重设计的机会，切换到另外一种模式呢？根据 Jira 的用户测试，95% 的早期用户对于这种情况会感到非常迷惑，即使是再小的导航功能修改都可能直接影响到大量用户的日常使用，因此不管哪种导航模式，一旦选定，尽量不要改变。
对于没有太多条目的顶部导航，在移动端上依然可以直接在顶部呈现，不过如果太多了就需要使用汉堡菜单来承载，或者切换为垂直的侧边栏导航。而侧边栏导航在移动端上相对好一点，因为导航模式本身是一致的，但是有限的空间内如何呈现大量的导航条目同样存在挑战。
顶部导航：占用空间小，在页面的位置最为显著，涉及条目不多的时候效果非常好。对于层次结构简单的中小型网站，顶部导航还是很好用的，对于层级较少但是二级条目特别多的超级导航，顶部导航也是不二选择。
侧边导航：侧边导航支持一级条目较多且层级较多的导航需求，扩展性良好，对于复杂的产品和自定义需求较多的产品、涉及到管理功能、 桌面级产品、 都适合使用侧边导航。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务