usdt无需实名(www.caibao.it):控件指南:关于下拉菜单,你知道若干?

原题目:控件指南:关于下拉菜单,你知道若干?

编辑导语:下拉菜单,是举行界面设计的一种常用控件,虽然经常会用到,然则许多人可能并不是很领会它。本文作者为我们先容了下拉菜单的类型、利弊,以及我们应该若何使用下拉菜单。希望通过本篇文章,可以辅助你拓展关于下拉菜单的设计知识。

一、前言

Dropdown(下拉菜单)是界面设计中的常用控件,它可以用下拉列表展示多个内容标签,用户能从预定的列表中选择一项或多项。在研究相关控件时,会发现这个控件有许多差别的名称:下拉菜单、下拉框、选择器、选择框等等。

Ant Design将下拉菜单与选择器划分放在差别的属性里,下拉菜单归属导航、选择器归属数据录入,Fiori Design 将下拉菜单与选择器界说为同一种控件。

实在,凭据W3C规范划定,其应该命名为select element(选择元素)。

为利便表述,下文统一称之为下拉菜单。

二、下拉菜单是什么

最简朴的下拉菜单包罗四个主要部门:一个容器框,一个朝下的箭头按钮,一个项目列表和一个标签。用户可以单击向下箭头以显示项目列表,从中选择一项或多项。

下拉菜单有3种变体,可以凭据选择类型举行分类:

  1. 多选列表框:允许用户选择多个选项
  2. 搜索选择:允许用户搜索大量选项

选项过多时,下拉菜单可能会转动,详细取决于睁开时包罗的项目数目。对于下拉列表,选定的选项或默认值在容器框中保持可见,而其他列表项仅在单击向下箭头后泛起,完成选择或在下拉列表的外部单击可将其关闭。

三、下拉菜单的类型

下拉菜单常见用法有以下几种:

1. 下令菜单

下令菜单主要应用于计算机程序和应用程序(如Microsoft Word)中,目的是为用户提供下一步操作,点击下拉后可以查看更多控制界面的按钮。

2. 导航菜单

水平导航栏中常见的一种导航菜单,用于向用户提供更多链接,可以将用户带到新的位置。

3. 表单填写

用户可以选择一个选项来输入表单字段,辅助用户从许多差别选项中举行便捷选择:

4. 属性选择

允许用户从许多选项中选择一个值,其作用方式类似于表单填写中的下拉菜单。

只管最初“下拉框”和“下拉菜单”可交换使用,但随着设计规范的不断完善,两者之间泛起了功效上的区别。现在,“下拉菜单”更多用于下令和导航列表,而“下拉框”通常用于表单数据填写和属性选择。

四、下拉菜单的利弊

在界面设计中使用下拉菜单是一个很利便的解决方案,然则过分使用会显得界面繁琐粗笨,我们必须领会其优瑕玷来确定什么情形下使用是最佳的。

1. 使用下拉菜单的优势

2. 使用下拉菜单的瑕玷
  • 当下拉菜单包罗太多选项时需要转动,会放慢用户输入速率;
  • 下拉菜单默认情形下会隐藏可用选项,用户无法感知选项内容;
  • 下拉列表看起来像已经完成,当用户填写表格时,会在视觉上扫描要填写的空字段,单选按钮和复选框更容易被发现;

  • 将光标从下拉框中移出时会不小心关闭下拉列表,用户需要重新最先一轮新的选择历程。
五、下拉菜单vs其他控件 1. 切换/开关

若是用户输入的是两个相互对立的选项,则可以使用开关。如:有用或无效、是或否、开或关等。切换开关可以替换两个单选项,允许用户在两个相反的状态之间举行选择,最适合用于更改系统功效和首选项。

,

欧博APP

欢迎进入欧博APP(Allbet Game):www.aLLbetgame.us,欧博官网是欧博集团的官方网站。欧博官网开放Allbet注册、Allbe代理、Allbet电脑客户端、Allbet手机版下载等业务。

,

2. 单选按钮

当选项很少(5个或更少)时,单选按钮可用于替换下拉菜单。与下拉菜单相比,使用单选按钮的利益是可以轻松地扫描选项,而无需强制用户交互来查看可用选项。

心理学家J. A.Bargas Avila及其团队在关于网页表单设计的研究中表明晰使用单选按钮优于下拉菜单:“单选按钮的优势在于所有选项都可以立刻看到,而下拉菜单的优势在于节省了屏幕空间”。

在CXL举行的可用性研究中,他们发现,与使用单选按钮相比,下拉菜单显着降低了用户的速率:“观察参与者完成单选按钮表单(n = 354)的平均速率比使用选择菜单按钮(n = 354)的表单快2.5秒。在置信度为95%的情形下,单选按钮显著更快。”

3. 输入框

对于输入可能更快的情形,应制止使用下拉菜单。例如,当输入金额或岁数时:

与下拉菜单的交相互比,在输入框中输入内容通常更快、更利便,从下拉菜单中选择一个值所需的最小交互次数如下:

对于屏幕显示尺寸有限的界面,特别是移动端界面,单击下拉菜单后,选项列表可能并不完整。因此,用户必须上下转动以查看适合屏幕的选项数目。对于无序列表,找到准确的值需要花费更多时间。

4. 列表框

与使用复选框或单选按钮相比,当用户可以选择5个或更多选项时,最好使用列表框或下拉列表。

在列表框与下拉列表之间举行选择时,还需要思量其他因素,例如可用的屏幕空间量,是否需要用户淡化其他选项或是否允许用户举行更改等。设计师 Anna Kaley针列表框与下拉列表的优劣举行了详细剖析,下面列举了部门剖析效果:

可见当屏幕空间足够、需要查看已选项以及需要对已选项举行更改时,使用列表框比下拉菜单更合适。例如,巨量引擎在填写地域时,为了利便用户对比已选项与未选项以及更改已选内容,使用了双列表框。

六、若何使用下拉菜单 1. 尽可能指定默认选择,若是未指定所选项目可使用占位符

通常情形下请给一个默认选项,若是需要指示所有项目都适用,可提供“所有”作为选项,并将其放在列表的开头;若是允许用户不要选择任何选项,请提供“无”作为选项,并将其放在列表的开头。

若一定要使选项默认选择空,可以通过容器框中使用占位符来解决该问题,使其看起来也为“空”。为了获得优越的可接见性,建议不要使用空缺下拉列表。

2. 以可展望的方式对选项举行排序

排序选项列表应包罗用户可用的所有项目,可选择以下方式排序:

  • 逻辑将项目按有意义的顺序排序,将相关选项组合在一起,并首先显示最常用的选项,然后显示不太常用的选项;
  • 按字母顺序:按字母顺序对钱币,名称和类似内容举行排序;
  • 数值:将数值按顺序排列,通常从最低的数字最先;
  • 时间顺序:将与时间相关的信息按时间顺序排序,通常最新的优先。
3. 使用简短的描述性选项

文本值应尽可能短,由于列表仅限于使用单行,太长的值可能会被截断。

4. 不可用的选项置灰

不能选择的选项不要删除,应保留在视图中并用灰色示意。若是用户将鼠标悬停在变灰的选项上跨越一秒钟,可以思量显示一条简短的气泡辅助说明为什么禁用该选项以及若何使其处于流动状态。

5. 通过点击触发下拉框,而不是悬停触发

悬停菜单会迫使用户必须将指针放在菜单内,若是用户指针脱离下拉菜单,菜单将被关闭,这无疑增加了用户的操作难度。

6. 找到差别控件中的平衡关系

使用下拉菜单是制止用户输入内容的便捷方式,众所周知,打字需要用户支出大量的认知成本,这就是为什么下拉列表在表单设计中很常见的缘故原由。

然则下拉菜单并不是万能的,使用下拉菜单(尤其是表单中的下拉菜单)时,应平衡表单类型、用户类型等种种其他因素的关系,这需要设计师从众多控件中举行权衡。

七、结语

关于下拉菜单的设计指南远不止于此,以上仅是笔者通过学习与事情的小我私家感悟,谢谢阅读。

参考文章链接

  • https://experience.sap.com/fiori-design-web/select/
  • https://www.nngroup.com/articles/listbox-dropdown/
  • https://www.nngroup.com/articles/drop-down-menus/
  • https://cxl.com/research-study/form-field-usability-buttons/
  • https://www.zuko.io/blog/why-drop-downs-are-bad-for-online-forms

本文由 @LIZ酱 原创公布于人人都是产物司理,未经许可,克制转载

发表评论
sunbet声明:该文看法仅代表作者自己,与本平台无关。请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片

您可能还会对下面的文章感兴趣: