ux-menus

菜单技能

此技能的工作方式（请先阅读）

这是一项生成式技能。默认的失败模式包括：大杂烩下拉菜单（把不相关的操作全塞进同一个菜单）、层级过深且含义模糊（用户在级联层级中迷失）以及无序的条目列表（没有优先级、没有分组、标签充斥术语）。菜单应是经过筛选并按顺序排列的一组相关操作——一旦不再如此，解决办法就是更改流程，而不是增加层级。此技能会把关以下内容：

1. 确定操作集合——有哪些操作、彼此有何关联、数量多少、是供用户选择还是执行命令？
2. 应用始终适用的核心原则——根据结构选择类型、按优先级排序、分组、设置标签和状态。
3. 明确依赖具体情境的决策（级联菜单、上下文菜单、菜单内搜索、快捷键），并说明权衡取舍。

随后，它会将工作交接给 ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit 和 ux-microcopy-audit 进行验证。

范围与组合（依据 docs/orchestration-policy.md §9）：此技能负责菜单的结构和构成要素。负责某个子部分的同级技能（如涉及则交由相应技能处理）：ux-navigation 负责菜单在整体导航系统中的位置（汉堡菜单的位置、巨型菜单、顶部栏还是侧边栏），ux-selection-controls 负责在表单选择中决定使用菜单还是单选框／复选框。

---

步骤 0 — 确定操作集合

如果信息未知，请先询问；若在没有答案的情况下继续，则说明所作假设：

• 命令还是选择？ 是触发操作（Copy、Delete），还是选择值（筛选选项）——选择菜单需要显示选择状态，并决定单选还是多选；命令菜单需要使用动词，也可能需要快捷键。
• 有多少项，彼此有何关联？ 只有当各项彼此相关时，菜单才有存在的价值。不相关的操作 → 拆分菜单或重新考虑流程。列表很长 → 使用搜索菜单或改用其他控件。
• 是否有子结构？ 确有父子类别时，可以采用级联菜单；但如果子项越来越多，就应更改用户流程。
• 平台——上下文菜单（右键）是桌面端的原生交互；多选菜单在移动端难以使用；悬停状态需要有对应的触控交互。

---

几乎适用于所有情况的核心原则

根据选项结构选择类型

• 基础下拉菜单——从简单列表中选择一项；选择后关闭。
• 单选菜单——选项互斥，并显示明确的选中状态（勾号、粗体、叠加层）。不要用它来打开模态框或动态控件。
• 多选菜单——使用复选框／标签表示可组合的选项；选中的项始终可见，并且可在菜单输入框中移除——绝不要强迫用户返回上一步取消选择。
• 搜索菜单——用于较长的列表（国家、语言）：用户输入时自动筛选并显示建议。
• 上下文菜单——为被点击的元素提供常用操作（右键／长按），显示在指针位置，选项随目标而变化。
• 行内／溢出（⋮）菜单——在表格和列表中提供每行的操作（Edit、Delete、Download），无需离开当前视图。
• 级联菜单——仅用于确实分类的操作（New → 文档类型）；请参见下方的限制表。

排序和分组——这决定菜单的成败

• 最常用的项放在顶部。 空间允许时，不要把关键选项藏在额外层级中；工作记忆大约能容纳 5–9 项，因此主列表应放置重要操作，其余项则放到下一级或移到别处。
• 用分隔线聚合同类项——使用浅色线条，而非拆成多个菜单；分组能让列表更易浏览，同时避免杂乱。
• **滚动是个警讯：**如果需要滚动，必须显示滚动条；但如果选项多到需要滚动好几轮，就应添加搜索功能或更改流程。

标签和图标

• 标签说明操作内容——简短、符合惯例（用“粘贴”，而不是“插入”），不使用行话或文字游戏；无法避免标签过长时应截断，并提供工具提示；标签换行说明需要改写。测试标签（卡片分类）——你觉得清楚的内容可能会让用户困惑。
• 图标置于标签前方（从左到右）——只使用熟悉、通用的图标（剪刀 = 剪切）；不熟悉的图标比没有图标更容易让用户不知所措。
• 使用熟悉的选择标记——对勾或 ×；不要使用新奇的标记。

状态和行为

• 每个项目都应有悬停/焦点反馈（微妙的叠加层、阴影或边框），并清晰显示选中/禁用状态。
• **打开/关闭行为应可预测：**轻触/单击即可打开，单击外部即可关闭。不要让用户意外。
• 项目尺寸至少为 48×48px，并留出舒适的内边距——保证易读，并方便运动障碍人士操作。
• 通过约 8dp 的阴影将菜单与页面区分开——菜单应呈现为悬浮且可操作的界面。

---

依赖上下文的决策（明确呈现，不要自动套用）

决策	适用情形	避免/调整情形	默认建议
级联菜单	确有父子关系的操作类别；桌面端，且有足够空间展开	子项过多或层级过深（操作繁琐、令人应接不暇）；移动端；布局紧凑——通过模型稿检查展开空间	最多一个子级；如果继续增加，应重构工作流
上下文菜单（右键菜单）	桌面端的高效工作流；经常使用的元素专属操作	作为某个功能的唯一入口（难以发现）；以触控为主的产品	将上下文菜单作为快捷入口；每项操作也应能通过可见入口访问
菜单内搜索	项目较长、滚动起来很繁琐的列表	短列表（增加额外负担）	列表需要滚动两三屏以上时再添加
菜单中显示键盘快捷键	包含重复操作（复制/剪切/粘贴）的效率工具	创造非标准快捷键；只能通过快捷键访问	为最常用的命令提供标准快捷键，并在菜单中显示
多选模式	使用快捷键+单击、复选框或标签集合——根据受众和平台选择	面向移动端或普通用户时采用基于快捷键的多选	使用复选框/标签；选中项应清晰可见，且可在原处移除
仅图标的行内菜单（⋮）	需要逐行操作的密集表格	将该行最重要的操作藏在溢出菜单中	主要行操作应直接显示；次要操作放在 ⋮ 中

---

验证结果（编排）

交接时，请使用每个审查视角对应的可安装技能 name。只有在该技能已安装时才调用；如果没有，本技能的核心已包含这些规则——继续操作，不要因此受阻。

生成或修订结果后，请将其交给各审查视角审核，而不是直接宣布完成。这些都是候选审查视角——具体策略由 docs/orchestration-policy.md 规定，也可以将整个结果交由 ux-design-review 审核。这里，heuristics 和 microcopy 属于 A 级（自动运行）；accessibility、aesthetics、information-architecture 和 mobile-responsiveness 属于 B 级（可选）——在现有设计系统下，aesthetics 会被省略，accessibility 则会收窄为使用方面；mobile-responsiveness 仅适用于移动端。如果用户调用此技能是为了处理某个具体事项，请遵循该范围。

• ux-heuristics-audit（A 级）——优先识别而非回忆（关键选项应清晰可见）、行为一致性、用户控制权（易于取消选择、关闭行为可预测）。
• ux-accessibility-audit（B 级——可选；在设计系统下范围收窄）——通过菜单项进行键盘导航、48px 点击目标、标签和分隔线的对比度、不依赖悬停即可访问所有内容。
• ux-aesthetics-audit（B 级——可选；在设计系统下省略）——间距、层级、分组节奏；菜单整体是否清爽统一。
• ux-microcopy-audit（A 级）——标签是否清晰、动词是否符合惯例、截断方式是否合适。
• ux-information-architecture-audit（B 级——可选）——菜单的分组、层级和标签体系是否符合用户心智模型并提供信息线索；此技能负责组织菜单界面，IA 负责其背后的类别模型。
• ux-mobile-responsiveness-audit（B 级——可选；仅适用于移动端）——在移动端场景下检查触控目标、不依赖悬停、多选模式是否合适。

如果审核发现冲突（例如，完整性与易浏览性之间的冲突），请回到首要任务来解决：用户打开菜单是为了快速操作——每个菜单项都在争夺用户的注意力。

---

常见的正确与错误模式

❌ 不要	✅ 应当
用一个下拉菜单容纳所有零散操作	只放相关操作；如果不再构成一个整体，就重新组织
三级级联子菜单	只设一级子菜单；如果内容变多，就改用其他流程
不论使用频率如何都按字母排序	高频项放在前面；次要项下沉一级
将 14 个项目平铺成无分组列表	用分隔线将相关操作归为一组
明明大家都说“粘贴”，却标成“插入”	使用符合惯例且经过测试的标签
为每个项目添加装饰性或别出心裁的图标	只用通用图标——或不使用图标
只能通过右键删除	将上下文菜单作为快捷方式，同时提供可见的操作路径
取消选择必须重新打开菜单并费力查找	就地显示已选项目并允许移除
点击外部区域时菜单仍保持打开	采用标准的打开/关闭行为
拥挤的 32px 行	项目至少为 48px，并留有充足空间
未经检查就发布	交由启发式审查、无障碍审查、审美审查和微文案审查

---

参考资料（Uxcel）

• UI 菜单类型
• UI 菜单设计最佳实践