如何正确设计下拉菜单?

在表单中使用下拉菜单有很多优点:

1. 它们在UI上占用的空间不多;

2. 支持自动验证输入;

3. 所有浏览器和平台都支持它们;

4.它们实现起来既方便又便宜,用户熟悉;

同时,虽然下菜单是最常被滥用的表单控件之一,但是也是公认的“应该是不得已的选项”


下面我们来看看一些局限性和关注点:

1. 使用下拉菜单时,在点击展开之前,无法一眼看出菜单选项,因此用户无法预知里面是2个还是50个选项。

2.从下拉列表中选择一个选项(特别是在移动设备上)步骤繁琐:

(1)您必须点击下拉列表以打开选项列表

(2)滚动并浏览项目以选择一个项目

(3)然后关闭下拉菜单

3. 设计师设计下拉菜单更轻松:只需将所有可能的选项添加到下拉列表中,不需要考虑优先级(类似汉堡菜那样)

4. 较长的下拉菜单(如国家/地区选择器)寻找起来会很麻烦,特别是在没有搜索功能的移动设备上。

5. 在列表中可见和可滚动区域很小,某些移动屏幕上滚动浏览选项会不方便。


不过除了下拉菜单之外,还有很多代替输入控件可以更符合具体的场景使用。

一 考虑选项的数量


1. 例如:下表中示例1(开/关)决策,使用下拉菜单是一个非常糟糕的选择。应该使用一个复选框或切换开关。

示例1


2.如果选项较少时,建议使用单选按钮或分段控件,以便所有选项一次显示,而无需打开列表。

示例2-1


示例2-2


3. 如果选项数量多时,并且当用户确切地知道他们在找什么时,请考虑一个“ 开始输入... ”解决方案,而不是滚动列表,允许用户输入,只显示过滤的选项。节省翻看列表的时间。

示例3


4. 对于数量多且多样化的列表,可以使用现有的用户数据来确定选项的优先顺序,并仅列出用户的前几个最受欢迎的选项。这样一来,有90%的用户可以立即找到自己的偏好,只有10%的用户需要选择其他,然后在下一个问题中选择。尽管“其它”看起来不是非常完美,但这种方式可以提升大部分用户的体验。


考虑什么场景中需要用户输入

1. 下拉列表的好处之一是用户不必输入太多内容。但是,如果不需要输入太长并且经常被询问(例如个人信息),那么通常输入更容易,而不是从列表中选择;

使用数字键盘在移动设备上输入出生年份比通过滚动长列表更容易


2. 一般来说,在手机上输入数字通常比使用菜单选择数字更加方便。

即使数字下拉列表的排序顺序清晰,但键入仍然比滚动更容易


3. 如果需要验证用户的输入,那么在输入字段用于搜索,一边打字一边过滤出可能的选项,让用户选择。

列出美国的州时,只需输入一个字母即可过滤列表


4. 当选项的排序顺序不明确时,在选项列表中搜索的功能尤其有用。

货币的排序顺序可能不清楚,因此确保他们可以搜索名称和货币代码

例如:国家列表:与其一次列出超过两百个国家名称,还不如通过输入和过滤来帮助用户


5.对于表示数量精确值(例如乘客购物车中的物品数量),可以允许用户通过单击快速增加或减少数量。

6. 对于位于刻度上的不精确数值,可以使用滑块。


7. 用多个选择菜单选择一个日期可能是一个非常痛苦的经历,所以为了输入最近的日期,需要使用日期选择器。(但用它来输入较远的日期是不方便的)


三、如何让下拉菜单更加智能

不言而喻,不应该总是避免下拉菜单。当选择菜单是最适合的输入控件时,请根据以上情况的考量,设计的更加方便。

使用有意义的文案:即使列表打开,仍然可以看到。在选择菜单中,使用描述性文案告诉用户他们正在选择什么(即“ 选择类别”而不是“ 请选择 ”)。

以合理的方式对项目进行排序:根据用户数据,尝试将最受欢迎的选项放在列表顶部。甚至默认选择最常选的一个。

先为用户默认选择:手机和浏览器都有办法知道用户的位置,日期和其他信息。使用该数据为每个用户预先选择最可能的选项。

减少字段数量并让计算机完成工作:如果用户输入邮政编码,计算机就可以知道城市和州 - 无需询问。如果用户输入信用卡号码,计算机就已经知道信用卡信息 - 不需要问。

考虑使用API: 使用微信、QQ注册比填写注册表更容易。用Paypal支付比输入信用卡数据要容易得多。

原文链接

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

推荐阅读更多精彩内容