UI/UE设计喵交互设计方法论UI/UX Design

不到万不得已时,请勿轻易使用下拉菜单

2015-12-01  本文已影响711人  荷籽记忆

移动端表格常常使用下拉菜单来进行输入控制。今天给大家介绍几个在设计中用来代替下拉菜单的控制器,并简述其理由。

预期会影响用户转化率

没有人喜欢填表格,而且一个表格看上去越长越复杂,用户就越不愿意点击进去填空,尤其是在小屏幕上进行不精确输入。

在上图的两种类型的手机页面中我们会发现,两者最基本的不同在于他们询问问题的方式。一个是利用下拉菜单几乎把所有问题问了个遍,而另一个则针对每个问题采用了最合适的输入控制。

在手机屏幕上或者桌面上与下拉菜单进行交互是一个多步骤的过程,常常比必要的更费力:点击›滚动(常常不止一次)›搜寻&选择目标›最后继续。其实,我们可以做得更简洁更好。

步进器

步进器控制以一个常量来增加或减少数值,这在进行细微的调整时非常有用。在测试手机机票预订表格时,我们发现用户更喜欢使用步进器来选择乘客人数。这个时候就不需要下拉菜单,尤其是当最大可选人数为8,而且绝大部分购票者只会选择1-2名乘客数的时候。

当使用步进器进行填表时,越简单越好。对步进器的基本设计改动越多,其功能就越模糊。对于任何输入控制都是这样的,真的。

选项按钮组

选项按钮组,或者也叫分段控制器,是一组密切相关但又彼此独立的选项。在比较手机机票预订表格时,我们发现选线按钮组对于选择机舱类型非常方便。

附加控制器

并不是只有步进器和选线按钮组可以用来代替下拉菜单。切换按钮对于两个截然相对的选项非常适用。滑块儿使你能够选择值域范围内的精细数值。当你打算使用下拉菜单来处理繁冗的表格时,请先针对每个问题考虑一下是否以上这些控制器能够更好地解决这一问题。

按钮输入将那些原本会隐藏于下拉菜单之后的选项显示出来,从而使得用户只需轻轻一点就可以选择,而不需要多次点击。

在有些情形下,下拉菜单可以被精炼为一次输入控制。例如我在第一张图片里提到的那个令人头疼的机票预订表格中使用了六个下拉菜单来手机乘客的出行日期。

在手机机票预订研究中,我们发现一个单独的输入控制器对于用户选择出行日期来说非常适用。从六个下拉菜单变为一个单独日期选择器,这就是进步。

最后一根稻草

所有这些下拉菜单的替代方式并不意味着我们在UI设计中不要使用下拉菜单。好的设计表格会采用最合适的输入控制来处理他们需要询问的每一个问题。有时需要一个步进器,有时需要一个选线按钮组,而有时则需要一个下拉菜单。但是,由于下拉菜单不便于导航,默认情况下隐藏导航,不支持分层,只使用于不需编辑的选项,因此下拉菜单不应该是你追求的首选UI设计控制器。然而,在今天的软件设计中,设计师们却恰恰是这样做的。

所以呢,先考虑其他的输入控制方式,把下拉菜单作为最后一根救命的稻草。


注:本文原作者Luke Wroblewski,2015-7-17发表于Lukew,译者荷籽记忆

上一篇下一篇

猜你喜欢

热点阅读