侧边导航与顶部导航的争论是每个设计师在某个时候都要面对的。顶部导航和侧边导航不能仅凭个人偏好判断，应该结合信息层级、页面内容和设备空间选择。导航的选择可以对用户交互产生重大影响。扫描、空间、扩展性等八个角度，可以帮助判断两种导航各自的适用条件；再用同一任务对照方案，检查是否符合实际使用需求。
比较顶部和侧边方案时，先保持内容与入口名称一致，再调整导航容器。App 与网页的布局设计可以把导航组件和内容区域放在同一份设计稿中，便于核对不同屏宽下的空间分配。
1. 哪种导航更容易扫描
扫描导航的难度不仅取决于位置，也取决于标签能否区分、分组是否清楚、当前项是否突出。顶部导航便于同时看到少量一级入口；侧边导航更容易纵向排列分组和较长名称。不要仅凭某种阅读轨迹就推断所有产品都应使用左侧导航。
2. 哪种导航更节省空间
顶部导航占用纵向空间，侧边导航占用横向空间，哪个代价更大需要看主体内容。宽数据表更容易受到侧栏挤压，长文阅读则未必需要占满屏幕宽度。把同一页面放进两种布局，比较表格关键列是否被隐藏、标题是否换行、导航是否需要滚动，比套用固定占屏比例更可靠。
3. 哪种导航更适合业务增长
随着产品的增长，导航需要可扩展性。选择导航时要考虑设备尺寸、字体大小和行高，侧边导航通常更容易向下扩展和分组，但可见入口数量仍受高度、行高和其他控件影响。当信息体系结构具有许多无法在逻辑上分为多块的顶级项目时，侧边导航栏的效果更好。即使使用侧边导航，入口不断增加后仍需检查分类、命名和查找路径，不能把所有新增功能都直接堆到一级菜单。
4. 哪种导航是可自定义的导航
当用户需要固定常用项目、折叠分组或调整个人入口时，侧边导航提供了较灵活的组织空间。原因有很多，例如侧边导航比其他选项更具可扩展性。自定义和可变菜单的侧边导航也很常见，但个性化入口不应改变团队共享功能的名称，也应提供恢复默认设置的方法。
5. 哪种导航与桌面具有一致性
桌面应用程序中的顶部导航和侧边导航之间存在一些关键差异。首先，应参考目标用户熟悉的同类桌面任务，而不是仅按操作系统推断导航位置。此外，与顶部导航相比，侧边导航通常为链接和其他信息提供更多空间。基于这些因素，如果你正在处理桌面应用程序，则可能需要考虑使用左侧边导航。
6. 哪种导航有悬停激活的子菜单
侧边导航中的抽屉式子菜单可能很难与光标一起使用，尤其是在对角线移动时。此外，侧向展开的子菜单可能遮挡相邻内容区域，需要检查展开位置和可用空间。
7. 哪种导航有超级菜单
悬停激活的巨型菜单是网站导航的热门选择，尤其是在电子商务网站上。它们提供了一种组织大量信息或仅看一眼即可显示较低级别页面的好方法。这种类型的布局还为产品展示和广告提供了更多空间，但菜单不应以推广内容挤占主要分类；是否适合仍需结合商品层级与实际查找任务。
8. 哪种导航需要适应用户习惯
设计新的导航系统始终是一项棘手的工作。用户会形成熟悉的查找路径，改变长期使用的入口位置或名称时，需要考虑重新寻找的成本。
用同一个项目工作台比较两个方案
假设一个项目工作台包含“概览、任务、文件、成员、设置”，任务下还分“全部任务、我负责的、已归档”。先不要凭导航看起来是否清爽作决定，而是让同一位评审者完成“找到我负责的任务，打开附件，再回到原列表”这一条路径。
方案一把五个一级入口放在顶部，任务下的分类放到页面内部。它的优点是主体横向空间较充足，但需要让二级分类与顶部当前项的关系足够明确。方案二用左侧分组展示任务分类，并将成员和设置放在独立组中。它能让频繁切换的目的地更稳定，却可能压缩任务表格中的负责人、截止日期等关键列。
当工作台继续增加更多模块时，也可以采用顶部承载全局入口、左侧承载当前模块子导航的组合，而不是强制二选一。Carbon 的 UI Shell 就将全局页头与可选左侧导航分开组织。借鉴的是层级分工，不是直接照搬其他产品的入口数量。
窄屏与键盘操作，会暴露桌面稿没有回答的问题
把两份方案都缩到窄屏后，检查打开导航是否挡住当前任务、收起后是否还能知道所在模块，以及选中子项时父级是否保持可见。当前模块的位置还可通过面包屑的层级路径补充说明。长菜单需要可滚动时，不能把“退出”“设置”等入口放在用户无法抵达的区域。对仅靠悬停展开的子菜单，还要补上点击或键盘展开方式，让触屏和键盘用户也能到达同一目的地。
导航中的链接负责前往页面，展开按钮负责显示子项；两者合在同一行时，也应明确各自点击区域。普通网站导航不必因为叫“菜单”就套用复杂应用菜单的全部键盘规则，相关区分可参考 W3C 展开式导航示例。
在 Pixso 中保留相同标题、任务数据和搜索条件，只改变导航组织，再为窄屏各复制一份画板。让评审记录“找到入口用了哪条路径、是否回到原筛选、哪一列被挤掉”，即可把偏好争论转为可具体修改的布局问题。
9. 推荐使用网页导航设计工具Pixso
顶部导航和侧边导航各有优缺点，选择适合自己业务的导航设计才是最重要的。在平板竖屏或手机上，两种导航都可能需要收起、转移入口或减少同时展示的层级。应保持名称、分组和当前位置一致，而不是要求所有尺寸都保持完全相同的外观。 Pixso 作为国内新一代在线协作网页页面设计工具，设计功能非常强大。不单原型、设计、交付能在此一起进行，还支持跨平台协作、标注、绘画以及文件实时云同步。而且，网页页面设计工具Pixso还兼容Sketch、Figma以及XD格式导入使用，不管是新手还是大神都非常实用，工作效率直线上升，新手能够快速上手运用，也能从社区资源中吸取灵感和经验；网页设计大牛则是可以利用里面一站式功能大大提升办事效率。
-
全中文的操作页面，简洁明了的设计，完美解决了语言不通的问题。
-
无需下载任何软件，可直接在网页进行创作和储存，为你节省不少存储空间。
-
可以结合“历史版本”查看和恢复历史设计；历史版本与撤销上一步操作不是同一概念。
-
丰富的社区资源和原型模版，为你提供更多创作灵感。
