龙空技术网

移动应用中的用户6种选择方式

用户体验服务设计 117

前言:

现时你们对“复选框是指列出的多项选择中”大概比较看重,咱们都想要学习一些“复选框是指列出的多项选择中”的相关文章。那么小编在网上网罗了一些关于“复选框是指列出的多项选择中””的相关知识,希望各位老铁们能喜欢,大家快快来了解一下吧!

移动应用中,允许用户进行选择的方式有单选框、复选框、切换开关、步进器、列表框和下拉菜单,本文中,我们将简单介绍几种选择方式。

单选按钮/复选框

单选按钮:选项中存在两个或两个以上互斥的选项中,且用户必须选择一个选项时,将使用单选按钮。

复选框:在选项列表中,用户可以选择任意数量的选项,包括零个,一个或多个时,用复选框。

独立复选框:用于用户可以打开或关闭的单个选项。

移动端常见的单选和复选的表达方式:

使用原则:

使用标准的视觉表示。复选框应该是一个带有选中标记的小方块,或者被选中的✅。单选按钮应该是一个小圆圈,选中该圆圈时,其中应有一个实心圆圈。以视觉方式将所选内容与同一页面上的其内容清楚地分开。使用副标题可将列表比较长的复选框分为多个逻辑组。这使选择的扫描速度更快,更易于理解。风险是用户可能将每个子组视为一组单独的选项,但这对复选框不一定是致命的-无论如何,每个复选框都是一个独立的选择。但是,单选按钮列表必须始终统一显示,因此您不能使用副标题将其拆分。垂直排列列表,每行选择一个。如果必须使用每行具有多个选项的水平布局,请确保将按钮和标签间隔开,以便清楚地知道哪个选项与哪个标签一起使用。对复选框标签使用肯定和有效的措词,以便让用户清楚地知道如果打开复选框,将会发生什么。换句话说,避免使用否定预期,如“不要给我更多的电子邮件,”这将意味着用户将不得不以检查复选框的选择。编写复选框标签,以便用户既知道选中某个特定框会发生什么,又知道未选中该框会发生什么。如果您不能执行此操作,则最好使用两个单选按钮(一个用于打开功能,另一个用于关闭功能),并为两种情况分别写上清晰的标签。如果可能,请使用单选按钮,而不要使用下拉菜单。单选按钮具有较低的认知负担,因为它们使所有选项永久可见,以便用户可以轻松比较它们。对于难以精确移动鼠标的用户,单选按钮也更易于操作。(有限的空间有时可能会迫使您违反此准则,但请尽一切可能使选择保持可见。)始终为单选按钮列表提供默认选择。根据定义,单选按钮始终只选择了一个选项,因此,如果没有默认选择,则不应显示它们。(相反,复选框通常默认情况下未选择任何选项。)如果用户可能需要避免做出选择,则应为此选项提供一个单选按钮,例如标有“无”的按钮。为用户提供明确,中立的单击选项比要求不从列表中进行选择的隐式行为要好,尤其是因为后者违反了始终只选择一个选项的规则。由于单选按钮仅需要一个选择,因此请确保这些选项既全面又明确不同。例如,在针对年长用户的测试中,人们无法填写要求他们选择工作的表格,因为该表格没有提供“退休”选项。如果不可能全面,请提供一个标有“其他”的按钮,并在输入字段中进行补充。让用户通过单击按钮/框本身或其标签来选择一个选项: 根据Fitts定律,较大的目标可以更快地点击。仅使用复选框和单选按钮更改设置,而不能将其用作使事情发生的动作按钮。同样,更改的设置在用户单击命令按钮(例如,标记为“确定”或“继续至XXX”,其中“ XXX”是过程的下一步”)之前不会生效。a、如果用户单击“ 后退”按钮,则对页面上的复选框或单选按钮所做的任何更改都应放弃,并且恢复原始设置。如果用户单击“ 取消”按钮,显然同样适用该准则(尽管导航网页不需要取消选项,因为“ 后退”按钮具有相同的用途)。b、如果用户首先单击Back,然后单击Forward,则将此序列解释为Undo-Redo对最为合适,这意味着控件的外观应显示用户的更改,就像用户从未单击Back一样。在用户单击“确定”或等效命令之前,这些更改在后端仍应无效。切换开关

切换开关提示用户在两个互斥选项之间进行选择,并且始终具有默认值。切换应立即提供结果,使用户可以根据需要自由控制自己的偏好。

拨动开关最适合用于更改系统功能和首选项的状态。切换开关可以替换两个单选按钮或一个复选框,以允许用户在两​​个相反的状态之间进行选择。

有时很难选择要使用的用户界面元素(单选按钮,复选框或切换按钮)。当您想知道哪个选项适合您的用例时,请考虑选项的数量和类型,以及是否有任何明确的默认值。下表总结了有关这些常用UI元素的问题和解答。

切换开关的优点:

提供即时结果:拨动开关应立即生效,并且不要求用户单击“保存”或“提交”以应用新状态。如果无法立即获得结果,可以使用单选框。如下图:在iOS上开启飞行模式时,Apple可以通过将左上角的蜂窝条更改为飞行器图标来立即获得结果。提供简洁,非中性的标签:切换开关的标签应该简短而直接。如果有疑问,可以在末尾附加“ on / off”。遵循标准视觉设计:确保切换开关看起来像滑块,并利用视觉提示(即运动和颜色)来避免混淆。首先,当用户更改切换开关的状态时,开关应更改位置,就像在现实世界中一样。

颜色是切换的重要视觉标志,需要牢记两点:对比和文化差异。当设计师使用低对比度的颜色时,用户将很难知道切换是打开还是关闭。因此,请始终使用高对比度的颜色来指示状态变化。此外,请务必评估对受众的社会和文化影响。例如,打开位置的红色与将其与停车标志或停车灯相关联的颜色是违反直觉的。

此外,状态描述符(切换按钮旁边的“ 开”和“ 关 ”字样)可以使系统状态清晰可见。

遵循平台的一致性:确保平台中所有开关的交互体验一致。不要让用户怀疑带有两个单选按钮的问题或描述与切换开关的功能相同。步进器

步进器(Stepper)用作增加或者减少当前数值,每次增加或者减少的数值是恒定的,数值可自定义,可以为小数,步进器是相对控件,用户的操作,把指定变量的值更改为某个固定变量。

横向和纵向步进器

移动设备上的屏幕空间有限,较高的交互成本可能会使用户难以键入信息。对于变数较小且变动数字恒定的交互,用户通过单击按钮增加或减少数字来选择。对于可变性较大的值,请避免使用此GUI控件。

步进器的应用

大多数使用步进器都是图形用户界面的可视元素,语音和手势界面也可以具有步进器。例如,对声控电视机说“调高音量”或“调低音量”将以设定数量修改音量。尽管输入步进器在某些情况下是输入数字的便捷工具,但并不是在每种情况下的理想选择。

步进器使用的优缺点:

什么时候使用输入步进器:

步进器设计原则:

步进器适用于有明确常用数值。对于数值偏离较少的内容,步进器的效果很好,如果用户通常为某个字段(例如,年龄或出生日期)输入的值的范围内存在很大的可变性,则不适合使用步进器。常用数值设置为默认值。例如,通常定酒店时,默认住宿人数为1人。避免使用步进式连续变量。步进器的数值只能采用步进增量的倍数。当购买房屋时,价格字段的 100K增量将限制太大,因为某些用户可能希望输入的值不是100K的倍数,并且对它进行向上或向下取整可能不会产生相同的结果。最好允许用户键入这样的连续值,而不是强迫他们使用固定增量步进器。明确步进器控制内容:如果使用步进控件来更改时间和日期,则应将调整的时间或日期部分清楚地突出显示,以便用户确切知道他们在更改什么。步进器按钮有足够大的点击区域。在pc和移动设备使用步进器时,目标区域应足够大以支持输入方式。对于触摸屏,建议最小目标尺寸为1 cm x 1 cm。即使鼠标比指尖提供更高的精度,也不要使按钮太小,导致用户点击不到。水平步进器通常比垂直步进器好,因为垂直步进器往往比较拥挤。如果决定垂直放置,请隔开增量和减量控件,以确保避免因意外撞击而打滑。使用+/-或向上/向下箭头作为按钮可视化效果。对于水平步进器,加号和减号通常用作步进器的控制标签。对于垂直步进器(+/-在数字的上方和下方),也可以使用向上和向下箭头按钮。不推荐使用左右箭头按钮作为水平步进器的控制标签,因为它们与使某物变大或变小的概念没有直接的涵义。与其它输入法一起使用。在输入复杂数值或不可预测的情况下,步进器中添加其他输入方法,使用户使用更加灵活。允许长按或单击按钮以更快地连续递增或递减。(对于台式机)允许用户使用键盘箭头进行递增或递减:上下左右应与屏幕上的按钮布局匹配。明确步进值和步进范围。设计人员应明确显示步进值和单位(例如,美元,美分,百分比)。此外,如果输入值有最大或最小限制,请务必注明。通常最好使步进器每按一次按钮就以一个单位为单位更改当前值,但是如果任务分析表明,则在某些情况下其他步进值更合适。列表框

列表框和下拉列表是紧凑的UI控件,允许用户选择选项。列表框立即显示选项并支持多选,而下拉列表则需要单击以查看选项,并且仅支持单选。

列表框包含三个主要部分: 容器框, 项目列表和标签。用户可以单击容器框中列出的项目,以从列表中选择一个或多个。列表框可能会滚动,具体取决于它包含的项目数和可见区域。有时,列表框包含复选框,以明确暗示多选功能可用。更复杂的列表框允许用户通过将项目从一个列表框移动到另一个列表框来调整容器框的大小,重新排序项目列表以及进行选择。

列表框有4种表达方式,可以根据选择类型进行分类。这些列表框中的每一个都可以滚动或不滚动。

单选列表框:使用这种类型的列表框,用户只能从互斥选项列表中选择一项。多选列表框:用户可以选择一个或多个项目,pc端可以通过在单击项目时按住Shift,Command或Control键来选择或取消选择一个或多个项目。 带有复选框的多选列表框:这种类型的列表框包括使多个选择更加明显的复选框。多选双列表框:这种类型的列表框由两个列表框组成。左侧的列表框包含可用选项,右侧的列表框表示所选项目。“ 添加”按钮将项目从可用列表移至所选列表,而“ 删除”按钮将所选选项移回可用列表,以取消选择。用户还可以上下移动选项以重新排序列表中的元素。

单选列表框、多选列表框

多选双列表框

列表框的优点:

列表框的优点是支持单选,多选和容纳许多选项而不会占用过多的屏幕空间。交互成本低:列表框不需要用户点击任何内容即可在可见区域内进行选择(但是,如果有太多项,则可能需要用户滚动列表)。增加的项目可见性:一次查看多个选项的能力可以加快决策速度,并提高选择准确性。单列和多列视图:由于列表框不限于单列,因此如果列表框宽度允许,则可以显示更多选项。但是,应避免在多列列表框中进行水平滚动。概述和重新排序:使用多选双列表框,用户可以控制项目的显示顺序,并获得所选项目的清晰概述,这在列表框包含多个选项时很有用。

列表框的缺点:

屏幕空间:尽管很紧凑,还是会比下拉列表占用更多的屏幕空间。不能快速知道列表框交互:用户可能不能立即知道如何与列表框进行交互-特别是,如果多选列表框中未包含复选框,则他们可能不知道如何选择倍数。(按住Control,Command或Shift键以选择和取消选择多个项目并不是一般Web用户经常执行的操作。)这就是为什么将复选框包含在多选列表框中非常重要的原因,除非它们将注意力集中在多选功能上或增加不必要的屏幕混乱。用户可能无法一次看到所有选定的选项:如果在可见区域中看不到更多的可用项目,则用户可能无法同时看到所有选定的项目。为避免此缺点,请在列表框上方将选定的项目显示为标记,或在不可滚动的列表中突出显示选定的项目。下拉菜单

最简单的下拉列表包含四个主要部分:容器框,向下的箭头按钮,项目列表和标签。用户可以单击向下箭头以显示互斥项的列表,他们只能从中选择一项。像列表框一样,下拉菜单可能会滚动,具体取决于它们在展开时包含多少个项目。对于下拉列表,选定的选项或默认值在容器框中保持可见,而其他列表项仅在单击向下箭头后出现。选择一个项目或在下拉列表的外部单击将其关闭。

列表框的优点:

下拉列表的使用频率比列表框高。它们占用的屏幕空间更少,但可以容纳与列表框一样多的项目。为用户提供最佳选项的功能,默认情况下处于选中状态。淡化替代选项和更改:由于下拉列表隐藏了其他可用选项,因此它们很好地淡化了替代选项并过分强调了进行更改的能力。被大多数用户所接受:下拉列表是大多数用户熟悉的选择机制,因为下拉列表在Web和本机应用程序中得到广泛使用。

列表框的缺点:

下拉列表的一个缺点是它们需要单击以显示其中的选项。包含过多的内容,当包含过多的选项时可能会很麻烦。当用户习惯于捕获众所周知的值时,它们会使用户放慢速度。例如,当输入生日或信用卡到期日期时,与下拉列表进行交互相比,在表单字段中键入内容通常更快,更容易。谨慎:由于非常紧凑,因此用户可能会意外忽略表单,网页和应用程序中的下拉列表。易于消除:不小心将光标从框中移开会关闭下拉菜单,人们不得不重新开始选择过程。列表框和下拉列表:

与使用独立复选框或单选按钮相比,当用户可以选择5个或更多项目时,最好使用列表框或下拉列表。在列表框,下拉列表或其他选择控件之间进行选择时,还需要考虑其他因素,例如可用的屏幕空间量,用户是否可以选择一个或多个项目以及是否需要淡化或鼓励进行更改等所有因素。

1、列表框和下拉列表使表单紧凑-尤其是当许多选项可用时,将这些选项显示为独立单选按钮或复选框的列表将占用不必要的屏幕空间。使用列表框或下拉列表还可以通过将选项限制为列表中的选项并确保用户以正确的格式输入数据来减少错误。

2、当选项较少且单选时,推荐使用独立单选按钮列表。当选项较多时,使用列表框或下拉列表,具体取决于可用的屏幕空间以及要鼓励用户进行更改的数量。与在页面上垂直列出许多项目相比,这两个元素都可以容纳更多项目并且占用更少的屏幕空间。

3、当选项较少且复选时,推荐使用独立复选框的列表。当选项较多时,请使用列表框,因为它们可以容纳更多项目,并且比在页面上垂直列出许多复选框占用的空间更少。

4、列表框和下拉列表用于在本机应用程序和网站中进行选择。它们并非只在执行命令或触发模式窗口,对话框或动态控件的中使用。

5、对于可滚动的列表框和下拉列表,重要的是要考虑它们的大小。其中较短,较宽滑动区域比较长,较窄的滑动区域,用户选择目标的时间更短,更容易为用户导航。因此,限制可滚动列表框和下拉列表中包含的项目数量,并确保将其设计为尽可能宽和尽可能短,将有助于用户快速轻松地进行查看和导航。当下拉列表变得过长和狭窄时,用户更有可能不小心将光标移到有界区域之外,这将关闭下拉菜单并迫使他们重新开始选择过程。

如何判断何时使用列表框和下拉菜单

1、选项列表由对象(名词)或属性(形容词)组成。推荐使用列表框或下拉菜单。

2、用户可以选择的选项很少(5个或更少)。不建议使用列表框或下拉菜单,建议使用单选或者复选框。

3、有5–15个选项。推荐使用列表框或下拉菜单。如果屏幕空间有限,请使用下拉菜单。如果不是,请使用列表框。

4、有15个以上的选项。推荐使用列表框,使所有或大多数选项最初在列表框中可见。如果迫使用户过度滚动,请不要使用列表框。

5、用户只能从互斥选项列表中选择一个值。推荐使用列表框或下拉菜单。如果屏幕空间有限(默认值为最佳),请使用下拉菜单,并淡化其他选项并进行更改。如果有足够的屏幕空间,请使用单选列表框,以更加注意这些选项并鼓励进行更改。

6、用户可以从选项列表中选择一个或多个。推荐使用列表框,将多选列表框与复选框一起使用表示多项选择。

7、查看所选项目比查看其他可用选项更为重要。推荐使用下拉菜单。

8、查看所有项目的概述(是否选择)有助于完成任务。推荐使用列表框。

9、没有明确或最佳的默认选项。 推荐使用列表框。

10、选项的排序顺序是选择的重要因素。推荐使用列表框,使用多选双列表框可以同时进行选择和重新排序。

标签: #复选框是指列出的多项选择中