每个网页的设计都需要包括导航，那么导航架构该如何设计？作者结合之前用户体验设计的相关经验给大家分享关于导航架构设计的思路，希望对你有所帮助。
过完元宵佳节就正式进入新的一年了，告别与家人团聚的欢乐重新回归繁忙的工作生活中，今天结合之前用户体验设计的相关经验给大家分享一篇关于导航架构设计的文章。
导航：是一种对信息的分类，能够帮助用户找到想要的信息，完成预期的任务。导航映射到我们物理世界中就是路牌、导览、线路示意图等。导航在B端产品中是不可或缺的，用户依赖导航在各个页面中进行跳转去完成预期的任务。
1. 确定用户的位置：
B端产品由于业务的复杂性和用户角色的多样性，导致页面层级结构较多，清晰的导航可以告诉用户“自己在哪里”，避免用户在产品中迷路；
2.告诉用户如何使用产品：
清晰一致的导航能够帮助用户规划行程明确地提示用户从哪里开始，能进行哪些操作，能去往哪里，帮助用户快速找到所需内容；
3.告诉用户这里有什么：
B端产品中系统架构通常通过导航结构划分，通过导航层次分级、导航文案引导可以快速呈现产品的层级和内容。
全局导航：
可以覆盖整个产品的通路但不一定包含全局信息，往往是产品的一级信息分类；是用户操作路径上贯穿始终的导航，不一定一步就让用户快速完成自己的目标，但一定是在用户完成目标的关键节点上；全局导航需要具有良好的稳定性和拓展性。
局部导航：
局部导航与全局导航有层级关系，局部导航帮助用户进入更加深层级的页面；常作为产品的二级导航出现；
辅助导航：
提供用户在全局/局部导航不可到达的本产品相关内容的快捷途径（如页面内的页签导航）；
内嵌导航：
对页面内容进行解释说明的导航（如文字超级链接引导用户搜索相关内容）；
友好导航：
给用户提供一个便利的途径，在需要的时候能够找到信息入口，帮助提升网站可用性的功能（如用户、消息、登录、帮助等导航）；
远程导航：
不包含在产品结构中，以独立的方式独立存在于产品内帮助用户跳转到其他产品中去（如网站地图、索引表等）。
导航菜单广度：
导航菜单每一层级包含的菜单数目（如一级导航的总个数）为广度，菜单数目越多则广度越大。
导航菜单广度的处理方法：
导航菜单深度：
导航菜单层级的数目为深度（如一级菜单/二级菜单/三级菜单），层级越多则深度越大。
导航深度的处理方法：
我们先记住一个重要的原则：让导航在每一页上，以一致的外观出现在相同的位置，会让用户确认自己仍然待在这个网站上。
顶部导航：
自上而下的顶部布局结构符合用户的浏览习惯，其排版稳定，不受显示器的影响，无左侧垂直导航干扰，用户作业沉浸感强在网页设计中较受欢迎。不足之处是横向布局的拓展性较弱，能够放置的条目也是有限的：一方面受浏览器宽度限制，水平方式栏目长度受限，栏目数量不宜过多。栏目命名中文字数2~5个，栏目数目不超过7个比较合适；另外一方面，如果是有中英文切换功能的话，英文栏目长度很可能比中文的长，而屏幕宽度有限，容易出现内容密集或排不下的情况。
因此顶部导航适用于业务简单，导航栏目较少，追求沉浸式体验，轻操作的产品；
侧边导航：
因其可拓展的布局结构在B端产品中比较受欢迎，它虽占据页面主视觉区，但竖向的布局能够展示更多条目，当每个分类模块的数量较多（条目信息一般遵循5±2原则）可通过收起折叠信息；
中文文字宽度较短，侧边导航能最大发挥出他的优势，能最大限度减少空间的使用率；B端产品的业务复杂，以及对于扩展性的要求较高，每个企业都想做一个又大又全的产品，因此侧边导航栏更加适合业务的实际需求；
一级导航在左侧时，导航可固定，使用户在操作和浏览时可以快速定位和切换当前位置，用户使用效率高、迟疑和错误更少，用户追求的是使用产品完成目标任务，注重的是功能完整性和操作便捷性。
但是导航放在左侧，排版受客户端显示器影响大；打断用户的正常阅读顺序，内容展示区宽度受限，不利于沉浸式体验。
因此侧边导航适用于有一定复杂度，需要频繁切换，重操作的产品；
混合导航：
将顶部导航与侧边导航进行结合。通常将一级导航菜单放置顶部，通过一级菜单的点击后，展示侧边的二、三级菜单。层级与栏目扩展性强，最深可支持4级结构有极强的包容性，可以承载更多复杂的逻辑关系。菜单交互路径长，部分栏目与不同层级栏目间距离可能较远，切换效率受限；导航占屏幕面积大，内容页面宽高展示区域受限。
因此混合导航适用于量级大，模块多且复杂度较高的产品。
效率对于多个级别的导航菜单是至关重要的，菜单的层级越多消耗的时间越长，最常见的是三级导航。常见的三级导航布局包括：上-上-上、上-左-左、上-上-左、上-左-上、左-左-左、左-上-上、左-左-上、左-上-左。
JR Kingsburg 曾经做过一次实验（A comparison of three-level menu navigation structures for web design），研究 3 层导航中，哪种组合使用效率更高。研究方向包括操作时间、操作迟疑、错误移动、错误点击和喜好排名，研究表明：
设计理论：
导航尽量扁平保持稳定：对于B端产品来说稳定相当重要！因为B端产品对于用户来说使用和学习成本、门槛较大，如果你很频繁地对其路径进行修改调整，用户就会因为产品不符合操作的习惯、心智模型对产品很容易滋生负面情绪，对于产品本身来说这样的伤害是需要尽量避免的；
导航需要易于扩展：当我们的产品的功能增多时，尤其是二级导航的项目增多，导致原来如果是横向布局的导航不得不改成纵向布局的导航，这就是所谓的因为产品的变化发生很大的变化。所以在选择导航布局的时候就需要打下一个很好的基础便于日后的拓展；
导航需要清晰可见操作易懂：站在一个外观和交互共同的层面去看，导航的大小一定要足够，而且其位置一定要是用户认为足够清晰的，确保在视觉反馈的的层面对于用户来说是友好的。其次就是所有的可交互区域需要有积极的响应，与内容区要有对比，可以将其称为界面的热情度，这也是一个优秀界面的自我修养。
设计方法：
项目背景：
产品线领导对于当前产品的导航结构现状表达不满，要求进行改版。
产品现状：
用户痛点：
设计思路：
改版设计效果：
后面还会根据自己的实际工作经历，持续分享B端产品经理成长之旅相关内容，感兴趣的朋友欢迎加关注评论交流，大家一起进步前行。最后祝大家新年新气象，工作顺利步步高升！
本文由 @Zero0304 原创发布于人人都是产品经理。未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。