1. 什么是组件下拉菜单
组件下拉菜单是UI设计中常见的基础控件，被广泛应用在Web界面设计中。看起来相似的下拉面板，可能用于执行命令、跳转页面或选择字段值；它们应先按任务区分，再决定交互方式。
菜单展开后还要说明执行动作、关闭和返回焦点的结果；在交互原型与团队评审中把这几步连起来，比只画一张展开状态更容易发现操作断点。
-
组件下拉菜单背后的真正功能是什么？
-
组件下拉菜单在界面上的真正目的是什么？
-
不同组件下拉菜单的共同点和区别有哪些？
-
有什么设计技巧及设计误区呢？
首先，我们先认识一下组件下拉菜单的常见用法：
1.1 命令菜单
命令菜单根据所选选项启动一个操作，展开后，可帮助用户更好地控制界面按钮。一个典型的例子是Microsoft Word使用的下拉菜单。
Pixso工具台的菜单栏也是一个下拉命令菜单，展开后可以让用户获得更多对界面的选择权。
1.2 导航菜单
导航菜单常位于产品顶部，把相关页面入口按层级或主题分组。目标可以是当前页面的区域，也可以是另一个页面；页面导航不应与筛选当前列表混为一谈。确定菜单位置前，可以比较顶部导航与侧边导航的适用条件。
Pixso官网的导航栏是一个下拉的导航菜单，设置于页面顶部，与重要界面连贯性强，不会占用过多重要界面的位置，分组设置，方便用户点击跳转。
1.3 表单填充
表单填充是最常见的下拉列表形式之一，好处是方便用户从许多不同的选项中进行选择，帮助用户缩小选择范围，减轻用户认知负担，并防止数据输入错误，常用于资料填写、问卷调查、订票信息等。
1.4 属性选择
允许用户从许多选项中选择一个值，其作用方式与表单填写下拉列表类似。
如图中的颜色属性面板，可以切换颜色值的表示方式。这里选择的是属性格式，并不是执行文件操作；Hex、RGB等表示方式也不能一概称为同一种色彩空间。
2. 组件下拉菜单的设计技巧
下拉菜单是最具争议的UI组件之一，它常常被一些UI设计师用在导航等关键问题上，但下拉菜单也有自己的一系列挑战。如果做得不好，它们就会很笨拙，占用太多空间，并且在移动设备方面存在一些可用性问题。但是如果做得好，它们可以提升界面设计。
2.1 不要随意更改下拉菜单显示的选项
许多平台都使用交互式下拉菜单，其中选项取决于设置或所选功能。如果“窗口”中列出的选项根据用户正在查看的页面而变化，那么用户会很容易感到困惑。用户想要伟大而充满创意和惊喜的设计 ，但同时他们也都需要良好的可用性，随意地更改下拉菜单的选项会让用户感到困惑，这也加大用户对应用和网站的学习和适应难度，从而直接影响产品的可发现性和可用性。
示例:Pixso资源社区中的海洋之声网页界面的下拉菜单位于界面顶部，菜单选项保持相对固定。Pixso资源社区内置腾讯、阿里、字节、今日头条、蚂蚁设计等优秀设计规范，设计师可以直接参考并使用。
常用命令宜保持稳定顺序。临时不可用的操作可以保留禁用态并解释原因；对当前对象完全不适用的操作则可不显示，不能把“所有选项都变灰”当成唯一规则。
2.2 控制菜单长度，必要时提供清楚的滚动区域
设计组件下拉菜单时，需要考虑的主要问题之一是选项的大小和数量。
如果任务是从少量值中选择一个，且需要同时比较，可以考虑单选按钮；如果是“复制”“重命名”等命令，则不应因为选项少就改成单选框。
而一旦当下拉菜单的选项较多时，用户便需要进行滚动，才可以完整浏览所有选项。而且大多数情况下，用户只有将光标置于下拉菜单当中才能正常浏览，这时如果不小心将光标挪到了下拉菜单之外，则可能让整个页面一起滚动，这将会进一步降低用户的体验。
无论哪种情况，设计师都面临着让用户感到困惑或用户永远无法充分享受你的设计的风险。如果设计师希望创建一个简短而巧妙的下拉菜单，那么一定要谨慎设置其中的每一个选项。
2.3 为认知努力找到适当的平衡
字段值可选时，列表有助于减少输入错误；用户已准确知道答案时，直接输入也可能更高效。下方医疗资料案例可用来观察字段组织，不能仅凭画面认定系统能自动读取或确认个人信息。
设计下拉菜单时的真正诀窍是达到适当的平衡。也就是说，键入信息和仅从其他 UI 组件（如下拉列表或复选框）中选择信息之间的平衡。UI 组件的正确选择很可能取决于你正在创建的表单类型以及将要填写表单的用户类型。
2.4 不要滥用主导航中的下拉列表
现在越来越多网站选择使用下拉菜单，因为下拉菜单是一种很方便的设计形式，它可以存储更多路径和链接到网站的所有角落的同时，仅占用很少的屏幕空间，用户可以很方便的通过下拉菜单返回或跳转到任何他们想到达的页面。
虽然下拉菜单有很多优势，但是也存在一些问题，在某些情况下，不建议过多使用。下拉导航菜单虽然占据很少的网页空间，但导航上的一些重要信息会被隐藏到更深的层级中，会导致用户难以发现菜单里面的内容。
2.5 在移动设备上下拉菜单
众所周知，移动应用程序很难设计，因为屏幕空间较小，这使得下拉菜单处于一个艰难的位置，因为它们在扩展时往往会占用大量空间。但是，在移动应用程序上使用下拉列表时，设计人员可以考虑一些技巧和因素。如点击触发取代悬停，悬停下如果用户指针离开下拉菜单，下拉菜单将被关闭，这就迫使了用户必须将指针放在下拉菜单内，增加了用户的操作难度。因此更建议通过点击触发下拉菜单，而不是悬停触发。
以文件“更多”菜单区分三种结果
一份文档的“更多”菜单包含“重命名”“复制”“归档”。点击“复制”后创建副本并给出结果；点击“重命名”后进入编辑名称的输入区域；点击“归档”则根据业务规则展示后续确认或可撤销反馈。三项都在同一个菜单内，但结果不是同一种状态，不能只给每项配同样的关闭动画。
“进行中／已完成”若是任务的持久字段值，应保留当前选中项；“复制／归档”是动作，执行后不应把按钮标题改成最后点过的命令。需要选择和保留字段值时，可继续看下拉列表的选值与取消规则，避免把操作菜单当成表单选择器。
关闭菜单不是执行其中一个动作
点击外部或按Escape可以退出菜单，不应默认执行当前高亮项。键盘打开菜单后，需要有可见焦点；方向键浏览、确认键执行，关闭后焦点通常返回菜单按钮。W3C菜单按钮模式提供了打开菜单与焦点进入的基本约定；菜单内部的键盘操作还需与所用组件一致。
对于“归档”这样的低频操作，用分组和清楚文案即可，不要靠鼠标经过时突然重排位置。菜单若需要滚动，应让滚动区域和末尾边界可见；手机端没有可靠的悬停动作，要提供明确可点的展开入口。把同一文档的展开、重命名、操作完成和退出状态放在相邻画板里，就能逐步核对操作是否真的被执行。
3. 总结
组件下拉菜单可以非常方便。组件下拉菜单能够将许多不同的内容压缩到单个UI组件中，从而节省宝贵的屏幕空间。但正如我们所看到的，它并非没有限制。如果做得好，这些组件下拉菜单可以真正帮助用户提升体验，并为设计人员节省大量压力。设计时分别检查入口是否可发现、动作是否清楚、退出后能否继续原任务；表单字段取值还需要单独检查默认值和取消选择的行为。
