如何做好B端产品菜单设计

菜单对用户使用产品很重要，直接影响用户任务效率和对产品体验满意度。

菜单设计本质是信息架构IA设计，通过建立信息秩序，让用户以最低认知负荷、最短操作时长完成业务目的。所以，衡量菜单设计的量化标准是认知负荷、点击次数、鼠标距离。

认知负荷由3方面组成：

• 信息本身：业务概念复杂，学习成本高；内容量大，信息过载；信息零散，缺乏体系；歧义模糊，理解困难。

  
  

• 组织方式：组织失序，分组、排序逻辑不清；缺乏视觉层次，边界不清、对比不足，视觉定位目标慢；一致性差，视觉、交互、命名逻辑不统一，建立稳定心智模型难；任务地图路径不畅，用户完成任务步骤长、切换多；

  
  

• 用户认知：知识储备不足，缺乏背景信息；认知瓶颈，仅能记忆与处理5-7个信息单元；注意力分散，工作场景中存在干扰；

  
  

点击次数是尽量减少用户完成任务总点击动作，以3次以内为佳。

鼠标距离是让用户在完成任务时，减少鼠标键盘切换操作，减少用户鼠标移动总路径长度，让用户可以就近操作。

在菜单设计前，需要先把功能按页面做好聚合，尽量精简页面数量。

在菜单设计时，要以用户角色、任务场景、价值衡量为牵引。

● 用户角色：梳理业务角色、角色目的、角色权限等，决策向最高频用户倾斜；

● 任务场景：梳理角色主要业务场景和任务，以角色任务驱动，模拟用户操作过程，优化操作步骤、点击次数、鼠标移动距离等；

● 价值衡量：梳理菜单使用频次、业务重要性，决策向高频、重要菜单倾斜；

菜单设计时参考原则：

● 菜单层级不超过3层，每级菜单下不超过7个子菜单；

● 菜单命名简洁、准确，消除歧义、重叠、模糊，提高信息确定性；关注业务术语、过往习惯、全站一致性（视觉、交互、命名方式）等心智模型，降低学习理解成本；

● 菜单分组符合互斥穷尽原则（MECE），逻辑维度一致、界限清晰、体系完整、归属明确；

● 菜单排序逻辑清晰、一致，综合考虑业务逻辑、用户使用频率、业务重要性等；

● 菜单简化，通过功能合并、转移、折叠隐藏等方法，降低低频菜单的认知噪音；

● 考虑长期稳定性和可扩展性，可兼容未来新增业务，避免因业务变化大范围调整；

● 用户任务优先，减少企业内部逻辑影响，如开发团队归属、技术栈近似性、市场销售倾向等；

● 借助搜索、自定义收藏菜单等手段，配合用户完成任务；

常见的菜单组织模式有4种，顶部、左侧、顶部左侧组合以及页内标签，选择的量化衡量标准是菜单数量。

● 顶部模式适合页面数量少的网站，用户鼠标距离短、效率高，消耗用户注意力少，较少占用用户黄金视觉区域，但菜单超过2层或子菜单数量多时操作不便；

● 左侧模式适合多层级、中等规模菜单数量的网站，可扩展菜单数量多，但占用部分左侧视觉黄金区，压缩单屏能承载的信息量；

● 顶部左侧组合模式适合业务域多、大规模菜单数量的网站，可扩展性最强，但最压缩单屏信息承载量；

● 页内标签菜单通常作为辅助手段，用于菜单超3层后避免出现4层；或所承载信息归属同一任务域，在同页内操作对用户更便利；或页面信息量过大，为避免页面过长，对信息进行分组；

常见的菜单点击后跳转模式有3种，原页面覆盖跳转、新页面跳转、站内标签页打开，选择的量化衡量标准是用户任务串/并行比例、页面参照对比需求、任务临时态保持（如弹窗保持、筛选条件保持等）需求等，在产品中需要根据用户场景任务灵活组合，选择适合特定场景的方式。

● 原页面覆盖跳转适合单业务串行操作，用户操作流畅，但不适合多业务、并行或需要页面对比、临时态保持的场景；

● 新页面打开跳转完整保留原页面，方便随时并行处理、对比等，但对串行任务执行打断感明显，流畅度下降，且增加窗口页管理负担；

● 站内标签页打开适合多任务并行操作，也方便对比，减少用户的跳出感，尤其适合当用户工作场景中需要同时使用多个网站时；但同样有多标签页管理负担，且对临时态保持（如弹窗保持）不友好，增加客户端内存压力（若限制最大标签数，还会增加标签管理负担），难满足独立URL访问需求；

老产品菜单设计不合理，优化调整时需要综合权衡风险和收益，对新产品最佳菜单设计不一定适合老产品。菜单设计的最终目的是提高用户效率和体验满意度，若用户已养成多年操作肌肉记忆，贸然变更用户习惯，可能反而增加用户学习成本，对用户效率和满意度产生负面影响。低风险、高收益的可调整，高风险、低受益的避免调整。

避免调整的，包括：

● 调整用户已形成肌肉记忆的操作路径；

● 调整用户用户已建立稳定认知或高频使用的菜单，如一级菜单命名、高频菜单分组与层级；

● 颠覆性全局菜单重构，菜单变更超过20%；

● 出于美观、学“大厂”、“感觉”等原因调整，B端产品，效率>美观；

可以调整的，包括：

● 对较少客户使用，用户较低频操作的菜单，进行隐藏、分组降级；

● 对有明确歧义、模糊、重复的菜单命名，进行规范化；

● 对超过3层以上，明确有用户反馈层级过深影响操作效率的菜单，在保持一、二级稳定的情况下，对菜单层级提升；

● 对明确逻辑不一致、分类混乱的菜单，有用户容易理解、逻辑清晰明确的分类调整方式；

● 完成同一任务，要多次跨一级菜单跳转，明确有用户反馈不贴合实际业务操作过程的菜单，按业务进行位置调整；

● 在不改变菜单整体结构情况下，新增菜单收藏、快捷导航等功能；

综合而言，如果调整风险很小，收益很大，则可以调整；若有风险，但收益低或收益不明，尽量先保持不变。一定要避免，花了人力投入，却反招用户骂声。优化老产品菜单，成功的关键不在于改的多前卫多美好，而在于变更过程平稳无感，却明确有效率提升。

结合大模型，未来可能有更好的交互方式。菜单设计的目的，是帮助用户最少时间、时少操作完成特定任务。借助大模型对话，按任务场景组织功能，通过引导式流程，让用户在不切换对话窗口的情况下获取信息、完成操作，可能是完成任务更高效的方式。

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。