Learning objectives

Menus and navigation elements：认识常见导航界面元素；区分不同菜单类型与各自优势；掌握菜单设计基础与关键注意点。

Navigation menu design guidelines：理解并应用有效导航/菜单的设计原则与指南。

Best Practices for Effective Interfaces（Laws of UX 精选）

Jakob’s Law：用户更偏好与其熟悉网站/应用一致的交互与布局，熟悉=更少学习成本与更低不适；反例强调“非标准”迁移会迫使用户靠提示/说明才能操作。

Fitts’ Law：命中时间与目标大小、距离相关——交互目标要足够大、留足间距、放在易触达区域；反例展示把“搜索”移到不便位置会提高操作成本。

Miller’s Law：工作记忆容量有限（常以 7±2 概括），需将信息分组分块以减负；反例为表单字段过多导致认知负荷上升。

Hick’s Law：决策时间随选项数量和复杂度增加而增加——可通过减少选项、分步操作、优先推荐、优化排序降低负担。

Von Restorff Effect：在一组相似元素中，与众不同者更易被记住——关键动作要做“显著化”，但需克制使用以免淹没重点。

Navigation and menus：概念与区分

Navigation 指“定位—规划—到达”的过程，既发生在页面间，也发生在页面内（如分区/局部跳转），涵盖“我在哪—周围是什么—我可以去哪”。

Menu 是呈现一组选项的界面元素，既可承载到达目的地的导航选项，也可承载与数据输入相关的操作项；菜单设计的核心是为这组选项找到最合适的呈现方式。

首页/主屏 是用户的第一印象，应围绕不同到访目标提供清晰的入口与导览，同时传达系统目的与范围，做到“可探索且可引导”。

Types of Navigation（导航类型）

Sequential（顺序型）：内容按线性次序浏览（如幻灯片逐张），要考虑是否单向/双向、是否有首尾或循环。

Structural（结构型）：面向分层信息架构；主导航（global/main） 提供一层概览与全局在场感，便于随时“换目标/重置路径”；本地导航（local） 在同一类目与同一层级内跳转，常见于下拉/侧栏。

Associative（关联型）：按主题/相似内容连接页面，不强调层级关系；常见于页脚快速链接、上下文链接、推荐模块；其中Contextual（嵌入式/交互式/自适应）根据当前内容提供就近导航。

Utility（工具型）：提供搜索、购物车、登录/注册、设置、订阅、分享/关注等工具入口，虽可跳页但不必属于某个内容类目。

反例：“神秘肉菜单”（mystery-meat navigation）——图形化但不自明的入口会令用户无从判断可点项与去向，应避免。

Menu Types and Design Patterns（菜单类型与模式）

菜单/栏/列表（bars, rails, lists）：最基础的一维排列，通常贴合四边；同类项用分组与间距表达结构。

瞬态菜单（Drop-down / Pop-up / Cascading）：层级多时可节省空间；灰化禁用项能保留可发现性并减少误触，但深层嵌套会降低可发现性。

Accordion（手风琴）：折叠/展开揭示更多分组内容，注意使用清晰的图标提示可交互性与映射关系。

Mega Menu（巨型菜单）：大量分类且相对同等重要时高效；有助于提升可发现性、降低记忆负担、扁平化层级，但仍需清晰的类目标题与编组。

Springboards/Tile Grids（九宫格/磁贴）：二维图标/磁贴矩阵，适合主导航，给所有选项相同层级的重要性，并展示更全面的入口。

Dynamic Tiles & Galleries（动态磁贴/内容画廊）：把内容嵌入导航（如通知、推荐），可提升识别但注意认知负荷。

Dashboards（仪表盘）：信息概览与导航融合，适合熟练用户；应规划视觉流、提供定制（显示什么、如何布置）。

Tabs（标签页）：同集选项“同级等重”，内容需彼此区分；文案/图标的标注方式要一致。移动端：

• 固定 tabs：3–5 项、等宽；
• 可滚动 tabs：5–7 项，注意增加 padding 提高命中并警惕后续项可发现性下降。

  Placement（位置）：大屏手机上顶部不易触达，底部 tab bar 常用于 3–5 个最重要任务，其余放入弹出菜单、顶部菜单或Off-canvas（侧滑抽屉）等；Off-canvas 可容纳完整列表但在打开前“零可见性”。

Navigation & Menu Design（设计要点与标注体系）

我在哪？：用当前位置指示、面包屑、清晰分区标题等提供全局与局部的定位线索；标签保持一致；允许回溯。

文本标签（Textual labeling）：准确且简洁；用用户熟悉语言、避免行话；结合上下文给出线索、必要时提供多种表达；最好能自解释并带有行动号召。

图标标签（Iconic labeling）：图标紧凑美观但易歧义——应优先选“高度约定俗成”的图标，必要时配文字或工具提示来消解歧义。

组织与排序（Organisation & Sequencing）：

• 精确式：按客观规则分组/排序（互斥类目、按字母/时间/地理等）——适合用户已理解类目或已知名称的任务；
• 模糊式：按主题/情境分组并以“有意义但便捷”的顺序呈现——适合探索型与“看见即识别”的任务；

  没有单一最优方案，需依据场景与首次使用者心智模型选择。