下拉列表广泛应用于UI设计中，可以简化界面，帮助用户缩小选择范围，减轻用户认知负担，防止数据输入错误。但与此同时，它也是一个受到用户批评的灾区。在某些情况下，下拉列表不仅意义不大，而且对用户体验产生负面影响。本文将与您分享下拉列表的基本概念、应用场景和设计技巧。

下拉列表是什么？

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

即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具，支持 Sketch、Figma、XD 格式导入，海量优质设计资源即拿即用。支持创建交互原型、获取设计标注，为产设研团队提供一站式协同办公体验。https://js.design/community?category=explore&source=bjh&plan=btt0304

常见的下拉列表有哪些？

一般来说，下拉列表可分为五种形式：标准形式、自动提示形式、自动补充形式、搜索框形式和特殊提醒形式。

下拉列表的优点

简化界面空间

通过将类似选项或输入选项分组到可折叠字段，可以帮助您节省 UI 在屏幕空间上，一个小的下拉列表可以包含大量的选项，后期更改非常灵活，不需要根据选项数量更改设计。

减轻用户负担

节省他们思考或输入响应的时间，因为用户只需从预先选择的答案列表中进行选择。

默认设置优选

可以设置为用户提供最佳选项的功能，在默认状态下隐藏其他可用选项，并将最佳选项默认为选项状态，这对非专业用户非常友好。

符合用户认知

下拉列表广泛应用于Web和APP中，是大多数用户熟悉的选择机制。

输入可预测

通过输入文本字段收集用户信息是不可预测的，而下拉菜单可以通过提供有限的选项来预测用户的输入内容，防止信息输入错误。

即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具，支持 Sketch、Figma、XD 格式导入，海量优质设计资源即拿即用。支持创建交互原型、获取设计标注，为产设研团队提供一站式协同办公体验。https://js.design/community?category=explore&source=bjh&plan=btt0304

下拉列表的设计技巧

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

避免选项数量过多或过少

下拉列表需要用户点击查看选项。当选项较少（一般小于5个）时，选择单个选项按钮将比下拉列表更合适。由于选项不多，用户可以轻松浏览所有选项，无需交互即可快速选择。

过多的选项也需要避免坑，下拉列表的选项一般不应设置超过15个。因为选项越多，用户使用滚动的概率就越大。根据轨道滑动定律，较短、较宽、较长、较窄的区域更快，因此更容易为用户找到所需的信息。因此，在设计中，应注意下拉选项的数量，以帮助用户快速、轻松地查看和做出选择。

想象一下：当用户看到它时：当用户看到它时： 15 一个未分类的选项很容易不知所措。此时，用户只能小心翼翼地将鼠标保持在滚动条中，并在许多选项中慢慢找到鼠标。更可悲的是，一旦鼠标不小心点击下拉列表，就需要重新开始。

选择地址通常有很多选项，这是很难避免的。通常有三种解决方案：

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

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

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

合理排序下拉列表的选项

这里有两个心理概念：首因效应和近因效应。

首因效应强调，最初接触到的信息会给人留下更深刻的印象，而近因效应意味着新接受的刺激更容易被大脑提取。一般来说，人们对开头和结尾项目的记忆效果优于中间项目。选项中也有这样的效果。我们把这个问题选项的排列顺序对用户选择的影响统称为选项的顺序效应。

由于选项的顺序会在一定程度上影响用户的选择，设计师可以巧妙地使用一些技巧来避免这些可能的顺序效应。例如：

平衡是通过混乱的顺序来实现的。由于用户倾向于选择前后选项，因此在统计意义上打乱选项的顺序可以减少这种效果。

结合用户认知机制，从根本上解决顺序效应，如按照用户习惯排序，降低选择难度。常见的排序方法有逻辑排序、字母排序、数值排序、时间排序等。

点击触发取代悬停

如果用户的指针离开下拉菜单，下拉菜单将被关闭，这迫使用户将指针放在下拉菜单中，增加了用户的操作难度。因此，建议点击触发下拉菜单，而不是悬停触发。

尽可能精简

下拉菜单的设计太复杂了，很容易让用户感到疲劳和无聊。设计师应该尽可能简化下拉菜单，这里的简单不仅指选项，还指语言、结构、逻辑等，核心是简单易懂，节省用户时间。

考虑删除不常选择的选项，使用户更容易快速选择与目标最相关的选项。

使用简短的描述性选项，文本值应尽可能短，因为列表仅限于单行，过长的值可能会被切断。

完成路径简单清晰。多个下拉式选项应垂直向下排列。如果输入框水平放置，用户必须用Z形眼睛扫描，这将减缓理解速度，扰乱完成路径。

包容用户的“懒惰”

只有抓住用户的心理，才能设计出具有良好用户体验的产品。每个人都有惰性，有时用户的懒惰，让他们追求享受成功。设计师应以用户体验为中心，在合理的范围内容忍用户的懒惰，减轻用户的负担。具体到下拉选项的设计，可考虑以下方法：

智能预设默认项。默认为用户设置最佳选项。定制显示默认项，记住下拉菜单越智能，用户体验越好，如自动识别区域、手机号码、基本身份信息、上次操作等，智能显示默认项。

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

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

小结

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

新手设计师可以在即时设计社区搜索下拉选择资源，直接一键复制使用！即时设计内置腾讯、阿里巴巴、字节、今日头条、蚂蚁设计等优秀设计规范，提供大量设计模板和材料，本地化字体资源。更多的设计技能和案例教程不断更新，以提高创造力。

即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具，支持 Sketch、Figma、XD 格式导入，海量优质设计资源即拿即用。支持创建交互原型、获取设计标注，为产设研团队提供一站式协同办公体验。https://js.design/community?category=explore&source=bjh&plan=btt0304