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

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

预期会影响用户转化率

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


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


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

步进器

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


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


选项按钮组

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


附加控制器

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


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


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


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


最后一根稻草

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

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


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,444评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,421评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,363评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,460评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,502评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,511评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,280评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,736评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,848评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,531评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2 352

推荐阅读更多精彩内容