提升下拉列表设计体验，掌握这 10 个小窍门就够了

欢迎来到专业设计师学习交流社区

三分设｜连接知识，帮助全球 1 亿设计师成长

本文共 2517 字，预计阅读 7 分钟

作者｜Danny Sapio

译者｜弹跳

审校｜胖鱼、Seven
编辑｜皮皮

译者推荐：初级设计师在进行设计时，往往会被原始样式和固定思维局限。本文从下拉列表组件（Dropdown）的使用方法出发，从小见大，不仅依据场景拓展了下拉列表的展现形式，甚至提供了可替代下拉列表的组件与设计模式，帮助设计师在进行设计创作时有更广的思考方向和更丰富的设计表达。

作为最广泛且频繁使用的UI组件之一，下拉列表 (Dropdown) 为设计者提供了一个简易的、可以将多个选项组合在一个容器内的方法。

然而依然有一些改善下拉列表使用体验的手段。如果你遵循了这些小窍门，既可以享受下拉列表的灵活性和简单性，又可以锦上添花地提升产品的体验。

此文结合了Golden Krishna（「最佳界面就是没有界面」的作者，Google员工）在2016年SXSW上的主题演讲，以及Eric Campbell的“嘿，去他的下拉列表”文中的内容。

1.智能预设默认项

我们通过大量的数据分析以及观测总体模式，可以判断出下拉列表内最常用的选项是哪个。如果80％的用户选择了这个特定选项，那么可将该选项设置为智能的默认显示项，让这批用户完全跳过此步骤。

例如，如果用户居住于科罗拉多州且要在线支付超速罚单，明智的方式是将支付网站内“请选择您所在州”的默认选项直接设置为科罗拉多州。

2.尽量精简

如果有可能，我们可以通过分析得知下拉菜单中哪些选项不太需要。若用户仅选择少数几个选项，而很少选择或从未选择其他选项，那么我们可以考虑删除不常选择的选项。简洁的下拉菜单将让用户更容易快速选中与目标最相关的选项。

3.记住操作，定制化显示默认项

与智能预设默认项类似，我们可以针对不同的用户个体预勾选一个特定项。例如，如果登录用户经常订购越南菜，那么我们可以为他们预勾选“越南菜”选项，并展示其他相关选择。输入框的显示越智能，用户的体验就越好。

这也适用于航空或旅行软件。一旦预订的网站知道用户经常往返的目的地，这些选项都可以设置为默认选项。

4.识别地区，智能显示默认项

设置地区模式会预先选择与特定地理位置相关的选项。例如，如果用户要进行换汇或寻找附近的商店，“允许应用/网站使用位置”可以让我们猜测最合适的默认选项。“选择位置”选项，始终可以视作改善体验的开始。

5.使用单选项来代替下拉菜单

如果只有少数选项，请考虑使用单选按钮。

单选按钮将所有选项一目了然地呈现给用户，并且只需点击几下即可获得所需的选项。有一个极具适用性的经验是，如果仅有六个及以下的选项，通常用单选项替代下拉菜单。

6.使用滑块来代替下拉菜单

滑块以线性方式呈现最小值到最大值的排序方式，是展示选项的一种好方法。它可以使用户轻松地从视觉上看到最小值和最大值。如果下拉菜单中的内容是定量的，并且只有少量选项，那么使用滑块组件就对了。

“选择快递种类”就是一个很好的例子。在滑块中显示快递到达时间：“3天达——隔夜达” 选项，从视觉上直观呈现了最快和最慢的选项。

7.使用视觉化语言

有时，下拉菜单中的选项可作为视觉元素呈现。与其将它们放置在下拉列表中，还不如将界面设计成展示他们原有状态——一个视觉元素的样式。

我们经常在电商网站内“选择颜色”的选项看到这种情况。用直接显示可选颜色项（而不是展示颜色名）去替换下拉列表的样式，可以优化体验。

8. 提供智能联想功能

提供智能联想对于长列表很有用，因为它不需要用户滚动全部列表去查找所需的选项。当遇到数量众多且无法进行删减的选项时，我们应该提供前面提到的智能联想功能，起到过滤下拉菜单的作用。

例如在“选择您所在地区”的下拉菜单里，智能联想能让用户跳过所有州后，快速定位至科罗拉多州。

9. 让输入框更加聪明

如果我们的程序能够理解并认可人类的语言，那么可以让大多数用户跳过通过下拉列表进行选择的操作步骤。

与其为每种货币或国家/地区代码提供对应的下拉选择菜单，不如简化操作，将程序设计成可以识别用户输入的信息，然后对应显示。将软件设计成用户输入信息后可以显示类型的方式，这比要求用户繁琐地定义每种输入类型的界面要聪明得多。

10. 使用单选列表框（而不是下拉列表)

下拉菜单需要用户点击后才能查看到选项。而列表框则相反，由于列表框直接呈现选项而不是将它们隐藏在下拉列表中，这用户可以直观地看到各种可选项。

列表框包含单选列表框、复选列表框以及滑动开关列表框等种类。在显示种类、型号、价格范围，颜色等选项时，电商网站经常使用列表框，而不是下拉表单的形式。

---

原文：https://uxdesign.cc/10-ways-to-improve-dropdowns-in-ui-ux-design-59d61a304b70

注：感谢阅读，以上内容由 TCC 翻译情报局提供，如有收获，还望各位设友动动手指点下广告和在看，也可分享到你的朋友圈！

- 最新消息 - 

三分设有丰富的社群组织，每个社群都有一线大厂的设计师，欢迎大家在群内沟通交流，可以选择地区群或是兴趣群加入，和志同道合的小伙伴一起前进～

所有的资料（报告、规范、文档...）和素材（工具、源文件、样机...）可以在三分设的乌托邦找到，有需求的小伙伴们在乌托邦 APP/PC端 搜索 三分设，申请加入即可，和我们一起打造优质的分享氛围～

各位小伙伴们一定发现了，微信官方对公众号文章的推送规则进行了改动，推文不是按照发布时间进行排序了。

如果小伙伴们想及时看到三分设的文章更新，一定要多多点击文章末尾的“在看”或是点击文章右上角“...”将三分设设为星标，这样就不会错过三分设精选的每一篇文章啦～三分设会持续陪伴大家的成长～

- 更多 TCC 好文推荐 - 

- 更多服务 -

点“在看”给 TCC 更多支持