每周设计赏析 #9

这周我们来讲讲一个常用组件的交互设计-下拉菜单

下拉菜单是最早的交互组件之一，几乎所有的web app都有用到，看起来是无脑的操作，开发实现的难度也很低。但是，下拉菜单又是一种非常容易被误用的组件。

先来了解一下下拉菜单本身的一些局限

1. 普通的下拉菜单里面，选项默认是不可见的，而且菜单长度也是不可预知的

2. 在移动设备上，下拉菜单操作比较繁琐，点开菜单，滑动查找选项，选中，关闭

3. 产品和设计师偷懒的利器，无需考虑优先级，把选项全部塞进菜单就完事

4. 很长的下拉菜单特别难用，比如国家选择，尤其是在移动设备上不能通过键盘检索的时候

5. 移动设备上的菜单通常比较小，点按和滑动比较费力

现在的移动设备已经想出了一些方法来规避上面说的这些局限，比如iphone的滚动菜单。但是从设计的角度考虑，我们应该把场景分得更细，为不同的应用场景设计最合适的交互。

考虑选项数量

2选1，下拉菜单是没有必要的，这时候需要一个checkbox或者toggle switch

对于少量选项，且没有优先级区别的情况，segments可以保证所有选项同时被看到。

选项数量要根据屏幕宽度和选项长度综合考虑，但是一般建议不超过5个

针对较多选项的菜单，如果用户知道他们想要找什么，可以尝试提供键盘搜索功能，一两个字就可以把范围缩小很多。

如果数据显示某些有部分高频选项可以覆盖大多数场景，可以尝试这些选项排在前面，然后将其他低频选项放在other里面，这样90%的情况用户可以直接在高频选项里面快速查找而不被低频选项感染

考虑直接输入

很多时候使用下拉菜单是为了减少打字，特别是在移动设备上。但是如果输入内容不多且无需频繁切换大小写或者符合的时候，打字其实更加容易一些。常用的场景有数字，国家/省市等等。

对于数字有增减的情况，可以考虑使用stepper或者slider

“智能”下拉菜单

可以考虑预填充最常用的选项

在输入地址或者日期这类数据的时候，可以借助GPS等传感器预填充选项

考虑不同字段之间的联动，比如输入银行卡号，智能判断银行

使用API，这就是为什么支付宝比银行卡要火的原因之一