每个下拉菜单都需要4次点击

【译】移动界面中应当尽量避免使用下拉菜单

移动表单中常会使用下拉菜单来输入,但实际上还有更简单或者更适合的控件。下面是一些下拉菜单的替代品及其优劣分析。

预期会影响转化

没人喜欢填表。尤其是那些又长又复杂的表单–特别是在小屏幕上用手指进行精确输入。

表单越简单越好,左图为痛苦版,右图为微风版
表单越简单越好,左图为痛苦版,右图为微风版

上图的痛苦版本中有两个额外的字段,最大的区别在于同样是定机票表单,但在问问题的方式上面却截然不同。一个几乎所有问题都用下拉菜单,另外一个每个问题都使用适合的控件。

每个下拉菜单都需要4次点击
每个下拉菜单都需要4次点击

不论移动端还是pc端,下拉菜单的操作都需要多个步骤,而且通常需要花费更多精力。首先点击控制杆,滚动(通常不只滚动一次),找到并选择你的目标选项,然后才能开始下一步。我们可以做得更好。

阶梯控件

阶梯控件可以增加或者减少固定的数值,用来做微调很方便。在测试移动端机票预订表格中,我们发现用户更倾向使用阶梯控件来选择乘机人数。不需要使用下拉菜单,因为最大值是8位乘客,同时大量选择都集中于1-2位,阶梯控件足够好用。
“阶梯控件”
“阶梯控件”

在使用阶梯控件时,越简单越好。通常改变阶梯控件的原始设计太多,会让它的功能更不清晰。对决大多数输入控件来说都是如此,真的。

左图为原始阶梯控件,右图为扩展的阶梯控件,增加了详细的说明标签和分开的触摸目标,但是行动更不清晰了,按钮看起来不可点。
左图为原始阶梯控件,右图为扩展的阶梯控件,增加了详细的说明标签和分开的触摸目标,但是行动更不清晰了,按钮看起来不可点。

单选组

单选组或者分段控件,是一组相近,但又独立的选项。在移动机票预订表格中,我们发现单选组很适合用来选择机票等级。
分段控件来选择是经济舱,商务舱还是头等舱
分段控件来选择是经济舱,商务舱还是头等舱

其它控件

除了阶梯控件和单选组,还有其它可以用来替代下拉菜单的控件。开关支持两个简单的、截然相反的选择。滑块允许你选择一段值从允许区域中。在开始设计一个重度依赖下拉菜单的表格之前,检查每个问题,考虑是否有其它可能方式来得到答案。

开关、滑块及分段控件
开关、滑块及分段控件

将原本隐藏在下拉菜单中的选项露出,改为按钮输入,可以将多步操作,减少为单一点击。

两个按钮输入的案例
两个按钮输入的案例

在一些案例中,多个下拉菜单可以考虑合并成一个输入控件。还是机票预订中的例子,痛苦版中需要6个下拉菜单来选择旅行日期。

去程及返程各三个下拉菜单。
去程及返程各三个下拉菜单。

在我们的移动机票预订研究中,我们发现一个单一输入控件对于旅行日期来说更加适用。从6个下拉菜单合并成一个日期选择器。新的流程如下:

在单一日期选择器中选择旅行时间比在分开的两个选择器中选择更快,更简单。
在单一日期选择器中选择旅行时间比在分开的两个选择器中选择更快,更简单。

作为最后手段

如上下拉菜单的替代品并不意味着你永远都不能在界面中使用下拉菜单。良好设计得表单会正对每个问题选用最为合适的输入控件。可能是阶梯控件、单选组或者是下拉菜单。

但是因为它们很难使用,默认将选项隐藏,不支持层次结构,仅支持选择,不支持编辑的特性,下拉菜单不能成为界面中的首席UI控件。虽然在如今的软件设计中,它们经常被使用。
因此,首先考虑其他输入控件,将下拉菜单作为最后选择。

更多

关于该主题的更多内容及其它移动设计相关内容,可以查看我的视频中关于移动端输入的章节。

发表评论

电子邮件地址不会被公开。

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>