美文网首页UI/UE设计喵交互设计方法论UI/UX Design
不到万不得已时,请勿轻易使用下拉菜单

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

作者: 荷籽记忆 | 来源:发表于2015-12-01 14:54 被阅读711次

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

预期会影响用户转化率

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

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

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

步进器

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

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

选项按钮组

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

附加控制器

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

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

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

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

最后一根稻草

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

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


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

相关文章

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

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

  • 借钱

    钱,借出去时是感情,收回来时是仇人!不到万不得已,不要轻易向人借钱,也不要轻易借钱给人。借钱给人,最大的危险...

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

    Dropdowns Should be the UI of Last Resort 「湾区日报评语」:下拉菜单不好...

  • Vue中判断点击是否在组件外

    自己使用div模拟select,有如下需求: 组件获得焦点时,自动弹出下拉菜单 鼠标点击下拉菜单时,下拉菜单不能收...

  • 华为救砖教程|华为手机救砖教程+救砖工具

    华为手机救砖教程,专门为手机变砖的用户们提供的,不到万不得已还请不要轻易使用这个教程,如果不是变砖了非需要恢复的话...

  • 2018-03-17 借钱给人,就是

    俗话说:谈钱伤感情,谈感情伤钱! 不到万不得已,你不要轻易向人借钱,也不要轻易借钱给人。向人借钱,容易被人看不起,...

  • Bootstrap 学习 - 菜单 - 按钮 - 导航

    1、下拉菜单(基本用法) 在使用 Bootstrap 框架的下拉菜单时,必须调用 Bootstrap 框架提供的 ...

  • Bootstrap 10.12

    下拉菜单 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文...

  • 请勿轻易许诺

    我们常常会 忽略自己身边 最亲近的人 忽略了他们的感受 总以这样那样的借口 要求他们理解 而未想到很多的理解 都是...

  • 请勿轻易许诺

    我们常常会 忽略自己身边 最亲近的人 忽略了他们的感受 总以这样那样的借口 要求他们理解 而未想到很多的理解 都是...

网友评论

    本文标题:不到万不得已时,请勿轻易使用下拉菜单

    本文链接:https://www.haomeiwen.com/subject/ievjhttx.html