下拉列表怎么设计？选项、搜索与默认值的设计技巧

下拉列表在UI设计中的应用非常广泛，它可以简化界面，帮助用户缩小选择范围，减轻用户认知负担，并减少超出选项范围的输入。但同时，它也是饱受用户批评的重灾区。在某些情况下，下拉列表不仅存在意义不大，甚至会对用户的体验产生负面影响。选型时先看用户是否需要比较选项、是否知道要找的内容，以及一个字段是否允许多个值，再决定下拉列表的形态。

把下拉列表放回真实表单后，还要检查标签、选中值和错误提示如何共同排版。可以用Pixso 界面设计建立默认、展开和已选择的组件状态，再对照页面空间决定形态。

1. 什么是下拉列表

1.1 下拉列表的概念

下拉列表是界面设计中的常用控件，是选单的一种表现形式，通常包含容器框、向下箭头按钮、选项列表和标签四个部分，它可以用下拉的形式展示多个内容标签，用户能从预定的列表中选择一项或多项，选项过多时，下拉列表可能会滚动。下拉列表中选定的选项或默认值在容器框中将保持可见，而其他选项在展开列表后才会出现，选择完成或单击下拉列表外部的任意一处可将其他选项关闭。

1.2 常见的下拉列表有哪些

在真正地了解下拉列表之前，我们必须先分清楚下拉列表和下拉菜单的区别。这两者从外观上看起来非常相似：它们旁边都有下拉箭头，点击以后都会出现更多内容可以选择。两者的关键区别是任务：下拉列表用于选择并保留字段值；下拉菜单通常提供导航入口或操作命令，不能只凭外观相似就混用。

Pixso工具台的菜单栏是一个下拉菜单，展开后可以让用户获得更多对界面的选择权。

而下拉列表则更多地使用在表单填充和属性选择上，常见做法包括直接选择、输入后匹配候选、带搜索框的选择列表等；它们应根据字段任务选择，而不是套用同一种外观。

• 下拉列表——表单填充

表单填充是最常见的下拉列表形式之一，好处是方便用户从许多不同的选项中进行选择，帮助用户缩小选择范围，减轻用户认知负担，并减少超出选项范围的输入，常用于资料填写、问卷调查、订票信息等。

• 下拉列表——属性选择

在进行属性选择时，为了简化页面和限定选择范围，也常常会设计成下拉列表的形式。允许用户从多个选项中选择一个值，操作方式类似于表单填写。

2. 下拉列表的优点和缺点

3. 下拉列表的设计技巧

在纠结下拉列表的形式选择和具体设计时，设计者应该站在用户体验的角度寻求答案。答案很简单，你想节省多少空间？是否会以更高的交互成本为代价？有哪些坑是最好不要踩的呢？

下拉列表需要用户点击后才能查看到选项，当选项较少、需要让用户同时比较且页面空间允许时，可以优先考虑单选按钮。因为选项不多，用户使用单选按钮可以无需交互便轻松浏览全部选项，快捷选择。

如性别等选项较少的信息，最好使用单选框，而不要使用下拉列表。

过多的选项也是需要避坑的，没有适用于所有任务的固定选项上限；选项较长时，应结合搜索、分组和合理排序来降低查找成本。因为选项变多，则意味着用户大概率要使用滚动，查找难度还取决于选项是否熟悉、命名是否清楚，以及能否通过输入快速缩小范围。因此，在设计时，要注意下拉式选单的选项数量，帮助用户快速轻松查看并作出选择。

当列表没有分组或检索能力时，用户可能需要反复滚动。关闭后再次展开，应保留已选值，并尽量让用户迅速找到它，不必把查找过程从头开始。

京东NutUI 3x移动端组件库

地址的选择通常选项都非常多，这点很难避免。解决办法通常有3种：

① 按字母顺序对国家、地区进行排序。

② 将常用的国家、地区排在前面。

③ 使用具有自动完成功能的文本字段。

这里引入两个心理学上的概念：首因效应和近因效应。

首因效应强调最初接触到的信息会给人留下更深刻的印象，而近因效应是指新接受的刺激更容易被大脑提取。通常而言，人们对于开头部分和末尾部分项目的记忆效果优于中间部分项目。选项中同样存在这样的效应，我们把选项的排列顺序对用户选择的影响，统称为选项的顺序效应。

既然选项的顺序在某种程度上会影响用户的选择，那么设计者可以巧妙地运用一些技巧来规避这些可能出现的顺序效应。如：

• 调查问卷有时会采用经过研究设计的随机顺序；日常业务选择器则应保持稳定且可预测的排序，避免每次展开都重新寻找。

• 结合用户认知机制，减少不合理排序带来的查找负担，如按照符合用户习惯的方式来排序以降低选择的难度。常见的排序方式有逻辑排序、字母排序、数值大小排序、时间先后排序等。

如果下拉列表仅靠悬停展开，且指针离开后立即关闭，用户就必须将指针保持在列表内，增加操作难度。因此更建议通过点击展开下拉列表，并支持键盘操作，而不是仅靠悬停触发。

HarmonyOS 手机/折叠屏/平板组件库

下拉列表设计过于复杂，容易让用户产生疲劳、厌烦。设计者应该要尽可能地使下拉列表变得简单，这里的简单不仅是指选项，还指语言、结构、逻辑等等，核心是简明易懂，节省用户时间。

• 可以优先展示常用选项，但仍应提供找到其他有效选项的路径，不能仅因选择频率低就删除用户需要的答案。

• 使用简短的描述性选项，文本值应尽可能短，长值可以换行、显示辅助说明或提供完整名称，不能只截断到无法区分不同选项。

Accordion UI 设计指南

• 完成路径简洁清晰。多个下拉式选单可优先按表单阅读顺序纵向排列；需要横向分组时，应让标签与字段的对应关系清楚，避免用户反复跳读。

3.5 减少不必要的重复输入

选择器应减少重复输入，同时让用户知道哪些值来自上一次操作、哪些仍需自己确认。具体到下拉式选单的设计，可以考虑如下方法：

• 智能预设默认项。默认值应有可解释的依据，并允许用户修改，如使用用户已保存且仍适用的上一次选择；涉及身份、地区等信息时，需要明确数据来源，并允许用户核对和更正。

如：丁香医APP交互设计源文件展示了医疗资料填写场景。若业务使用已提供的信息辅助填写，仍需让用户核对与更正，而不是把推断值直接视作确认。

• 提供一个简单选项。如果允许用户全选或全部不选，则可提供“全部”、“无”作为选项，并将其放在下拉列表的开头。

• 适当使用视觉化语言。在下拉列表选项的开头添加一个简单的图标可以让它看起来更有 “设计感”，但是建议避免在选项中添加图片，因为后续的更新维护会很麻烦。

用一张报销单，决定三个字段的选择方式

假设团队正在设计报销单：用户要填写结算币种、成本中心和共同出差人。三个字段都能画成带箭头的框，但它们不应该使用完全相同的交互。

• 结算币种：如果业务只允许人民币、美元和欧元，直接列出单选项能让人看到全部选择；如果允许多个地区的币种，则需要稳定排序，并同时显示名称与币种代码，避免只写含义不明的符号。
• 成本中心：员工通常知道部门简称，却未必记得完整组织名称。可搜索选择器应允许按名称查找，并用部门路径区别两个同名团队。输入用于寻找已有项，不等于允许创建新的成本中心。
• 共同出差人：这是多选任务。选中一个人后应保留搜索入口，并把已选人员显示为可移除的项；关掉面板不应让之前选择消失。

默认值也要按字段判断。员工曾经使用的成本中心可以作为可修改的初始值，但不能把列表第一个部门悄悄当成答案。GOV.UK 的 Select 指南也区分了“已有设置”和“需要用户回答的问题”：后者不应通过预选答案影响作答。

搜索之后，是确认新值，还是保留原值？

继续看成本中心字段。原值为“华东销售”，用户输入“研发”查看候选，此时界面应能区分“已保存的字段值”和“正在搜索的文字”。只有明确选中“产品研发／上海”之后，字段值才替换；关闭候选面板则回到原值。用户不是因为看过一个候选就提交了它。

无匹配时可以显示“未找到相关成本中心，请尝试部门简称”，并保留输入，不要自动选择第一项。原值已停用时，应显示原名称和“已停用，请重新选择”，而不是清空后让用户猜测哪里变了。选择器的键盘操作也应清楚：使用方向键查看候选、确认键接受选择、取消键退出面板；具体行为可参照 W3C Combobox 模式，与开发使用的组件保持一致。

在 Pixso 中，可以沿用上面的表单案例，把“原值”“搜索中”“无匹配”“已确认”放在相邻画板里，将字段名、候选项和辅助文字保持一致。评审时让同事按一次真实的报销任务走完，重点观察他能否说出当前保存的是哪个部门。需要理解命令菜单与选择器的区别时，再查看下拉菜单组件的用途，不要把“删除”“导出”等操作放进同一个字段值列表。

4. 小结

设计无小事，提供更优质的用户服务是UI/UX设计的未来。下拉列表虽然不是主要视觉元素，但它在界面中也承担着至关重要的任务，如果使用体验做得不好，会引起用户的反感。当设计师碰到下拉列表的设计需求时，可以把用户体验放在第一位，其次再通过一些设计技巧来加以优化设计、提高设计效率。

新手设计师可以在Pixso社区搜索下拉式选单资源，直接一键复制使用！Pixso内置腾讯、阿里、字节、今日头条、蚂蚁设计等优秀设计规范，提供海量设计模板和素材，本地化字体资源。更有设计技巧和案例教程时时更新，提升创意快人一步。