不到万不得已，尽量不要使用下拉菜单

Dropdowns Should be the UI of Last Resort

「湾区日报评语」：下拉菜单不好用，用户要点好几下才能选到自己的选项。文中给出了一些替代下拉菜单的 UI component。前两天在夏威夷的人都收到了“导弹来袭”的假警报，造成广大民众的恐慌。这是因为 Hawaii Emergency Management Agency 的一个雇员在演习发送警报的时候，被下拉菜单给弄晕了，点错了选项，发出了真警报。

「原文链接：Dropdowns Should be the UI of Last Resort  」

不到万不得已，尽量不要使用下拉菜单

当你想让移动窗体控件更好的被展现时，通常会使用下拉菜单。以下是在你的设计中考虑的下拉菜单的几种选择以及原因。

预期会影响转换

没人喜欢填写表格。而越长越复杂的形式，我们越不容易开始填写，特别是在小屏幕上进行不精确地输入 ( 比如用我们的手指 )。

几乎都是下拉菜单的输入

虽然在上述的 “Painful” 的版本中还有两个额外的字段，但是这两个版本的飞机航班预定表单最大的区别在于他们是如何提出问题的。一个几乎每个问题都使用下来列表，另一个采用最合适的输入控制。

收集一个信息需要多次的点击

在移动设备和桌面设备上采用下来菜单进行交互是一个多步骤的过程，往往需要比必要步骤更多的操作。你需要首先点击控件，然后滚动 ( 通常还不止一次 )，找到并选择目标，然后继续填写下一个。其实我们可以做的更好。

步进控制器

通过步进控制器来增加或者减少一个数值，能很好的做到微小的调整。当我们测试移动端的机票预订表时，发现人们更喜欢通过步进控制器来增加乘机人数。尤其是在最大限制选择 8 人和大部分人会选择 1-2 人的情况下，没有必要使用下拉菜单。

在设计步进控制器的时候，简单的设计效果更好。如果对于控制器的基本设计做太多的改动，就会让它的功能性不够清晰，这在任何输入控制设计上都适用。

对于步进器的设计尽量简单

RadioGroup

使用 RadioGroup 或者分段控制，他们是一组密切相关但又相互排斥的选项。在比较移动端的机票预定表单的时候，我们发现，RadioGroup 在选择旅行类型上表现良好。

采用 RadioGroup

其他控件

不只是步进控制器和 RadioGroup 可以替代下拉菜单控件，可以使用开关来实现两个截然相反的选择。使用滑块来固定范围内选择精确的值。从每一个下拉菜单开始，尝试着去想每个选项是否都有更适合的解决办法。

采用其它控件代替下拉菜单

除此之外，还可以隐藏下拉菜单，并将按钮输出放在此处，这样就可以做到一次点击操作而不是两次。

采用按钮输入代替下拉菜单

在某些情况下，可以将下拉菜单浓缩成为一个输入控件。就像我上面标的那个“Painful”的航班预定表示列的一样，使用 6 个下拉菜单来收集旅行日期信息。

繁琐的下拉菜单输入

在我们对移动端机票预订的调查中，我们发现，通过单一的输入控制器来收集旅行日期信息效果会更好。从 6 个下拉菜单到一个日期选择器，这就是在进步。

采用一个日期控件代替

作为最后的方法

所有的这些用来代替下拉菜单的设计并不意味着你不能在设计界面中使用下拉菜单，而是精心设计表格中每一个最合适的输入控件。有时候可能是步进控制器更合适，有时候可能是 RadioGroup 有时候也可能是下拉菜单。

因为它们很难被找到，默认情况下会隐藏选项，不支持层次结构，智能选择能编辑，所以下拉菜单不应该是你的首选 UI 控件，尤其是在当今的设计中。

所以首先考虑其他输入控件，把下拉菜单当做最后的选择。

作者： by Luke Wroblewski

编译： by Erlich Liu

此计划面向所有科技进步青年，让您提前对即将改变我们生活的科技有所了解，对有可能成为未来商业主流的公司和产品有所察觉，对您个人的成长有所感悟。文章多来源于「 湾区日报 」的推荐，但不限于「 湾区日报 」。此计划目前由Bianka Chu&Erlich Liu推动，也希望有志于此的您加入和关注。