在UI界面中的14个按钮和框架选择的设计经验

设计营销   2022-03-26

UI界面中,我们可以看到各种开关按钮和一些组件/控件,下面跟随我们一起梳理14个按钮和框架选择的设计经验,很实用的哦。

在UI界面中,各种开关、按钮和框架选择控制都是非常常见的组件。它们看起来并不复杂,但在实际使用中要注意很多。它们不仅关系到体验,还涉及一些界面逻辑问题。

单选按钮(Radiobuttons),起源自汽车收音机的按钮。旧的汽车控制面板上有一排机械按钮,可以存储预设电台。用户可以快速按下按钮,切换不同的电台。按下其中一个按钮,其他按钮就会弹起。这里的按钮相互排斥,多个按钮不能同时激活。

复选框(Checkboxes)通常有一个或多个选项供用户选择。复选框中的选项通常不相互排斥,用户可以选择一个或多个。

拨号开关(Toggle-Switch)是最常见的按钮样式,点击即可切换状态。

选择按钮(ChoiceChips)是单选按钮的简化模式,通常至少包含两个选项,用户可以选择其中一个,选择按钮大多出现在移动终端界面上。

多选按钮(Multi-selectchips)是复选框的通用替代品,用户可以选择多个选项,而且这个按钮大多用于移动设备。

各种选择控件在用户界面已经存在了很长一段时间,因此用户对其功能、认知和期望都很清楚。以下是一个非常简单的列表,列出了大多数常见的选择控件的类型和使用场景:

1、熟悉按钮的不同显示状态

复选框和单选按钮有两种状态:选择和未选择,拨动开关有两种状态:打开和关闭。在实际使用过程中,它们都有不同的状态,如启用、禁用、悬停、聚焦和按压。虽然这些状态看起来很多,但它们涉及实际交互的需求和不同的场景,是实现可靠交互的基础。

2、不要忘记未定状

对于复选框,通常只有两种状态:选择和未选择。如果涉及多层次、有父子结构的复选框体系,可能会因为选择了复选框的一部分,而不选择一部分,使得父复选框的状态介于全选和未选之间,容易被忽略。

3、不要错用拨动开关

当涉及到层次结构选项时,不要使用拨动开关。它不仅在视觉上容易分散注意力,而且在使用时也容易导致误判。

4、当功能触发立即生效时,使用拨动开关。

拨动开关是标准的数字开关功能。当您使用拨动开关时,确保其触发的功能立即打开/关闭。如果没有,最好使用单个复选框代替拨动开关。

5、避免非常规的控件样式。

按钮风格与整个平台的传统风格相差太大,很容易带来额外的认知负担。例如,圆形复选框很容易与传统的单选按钮混淆。


6、在列表中使用方便用户扫读的排版。

左对齐复选框+标签样式效果最好。这保证了用户能够尽快理解和完成操作,减少了错误的发生。事实上,右对齐复选框是可以的。在移动终端上显示也有优势——单手操作更容易选择,点击勾选时手指不会覆盖标签内容,但标签文本和复选框不能相距太远。

7、如果垂直空间不够,请用按钮代替选框。

使用选框控择控制的问题是它与相应的标签分离。在垂直控制有限的情况下,水平排版将非常此时,用按钮代替框架选择要好得多。

8、尽量使用单选按钮而不是下拉菜单。

使用单选按钮可以使选项始终可见,方便用户直观比较和查看,从而减轻认知负荷,使表单内容更加清晰透明。

9、使用下拉菜单携带大量类似的选项。

如果选项超过6个,最好考虑放在下拉菜单中,因为用户无论如何都无法快速记住和比较所有选项,这也适用于大量类似或可预测的选项,如10%、20%、30%等。

10、单选按钮最好提供默认选项。

通常,一旦选择了单选按钮,用户就不能取消选择并恢复原状态。因此,有些用户可能不愿意做出选择,此时应该提供一个无选项。最好提供默认选项并按逻辑顺序排序。

11、使用清晰的文本标签内容。

在文本标签内容中,尽量不要使用否定的表达方式,这样可以避免误解,方便用户正确理解内容。

12、突出被选选项吸引用户注意力。

在视觉上区分被选择的选项尤为重要。

13、支持批量选择和清除。

对于用户来说,一次选择和清除多个选项应该是一件简单而容易的事情,因此需要支持批量选择和清除功能。

14、确保点击热区足够大。

触发热区是确保用户在移动终端上交互的基础,让触发热区域包含重要信息,如按钮、文本...,提升易用性,根据费茨定律,点击区域的大小对交互起到非常直接的影响。因为一些控件,如:复选框、单选的按钮非常小,不太容易点击准确。


维好维可-用户体验体验创新设计
合作咨询
+86-21-51115850
© 2010-2024  维好维可 | 用户体验创新设计公司
沪ICP备19006116号-1

联系我们,开启一场关于您项目的讨论会吧。

联系电话:
+86-21-51115850
商务邮箱:
hi@wellworks.cn
复制
公司地址:
上海市松江区茸阳路69号(百原PARK)贰号楼2楼

©2010-2024 维好维可 | 用户体验创新设计公司-版权所有

沪ICP备19006116号-1

需求留言 + 获取方案

提交信息后,我们的专属顾问会在1个工作日内与您联系。

怎么称呼?
您的手机?
您的邮箱?
您的需求?
维好维可-微信二维码