选择控件:UX设计细节
编辑指南:选择控件是硬件和软件中最常见的组件之一。如何让这个细节脱颖而出?本文结合作者自身的工作经验进行分析总结,希望对你有所帮助。
“拨动”一词是指带有手柄的拨动开关,可以在不同方向拨动,在不同状态之间切换。至于Radio Button这个词,来源于车载收音机。通常在拨号盘下面有一组按钮,可以机械的存储电台的预置,这样用户可以更快的在不同电台之间切换。
复选框:当有一个或多个独立选项时,用户可以选择任意数量的选项,包括无、一个或多个选项
单选按钮:当有两个或多个互斥项目且只能选择一个选项时使用
拨动开关:表示两种相反状态之间的切换,主要用于触发“开/关”
Choice Chips:是收音机盒子的简化样式。通常,至少有两个选项,用户可以从中选择一个
多选筹码:是多选框的通用样式,允许用户选择多个项目。主要用于移动设备上长期存在于UI中的各种选择控件,使用户对其认知、功能和行为有明确的心理预期和感知。
下面列出了最常见选择控件的类型和使用场景:
1.不同的控制状态
单选框和多选框有两种状态:选中和取消选中,而切换开关有两种状态:默认、选中、激活、禁用、悬停、按下等。这些状态涵盖了不同的交互需求和场景,这是实现更好的用户体验的基础。
2.别忘了【未确定状态】
对于多选框,通常只有两种状态:选中和未选中。如果涉及到具有父子结构的多级多箱组,由于子多箱是部分选中和部分未选中的,所以父多箱的状态可能介于全部选中和未选中之间,这种“未确定状态”容易被忽略。
3.不要误用拨动开关
请勿在涉及多级和父子结构的选择中使用切换开关。它不仅在视觉上分散了用户的注意力,而且给用户一种所有子选项都开/关的错误认知。
4.当功能触发生效时,使用拨动开关
拨动开关是标准的数字开关功能。当您使用拨动开关时,请确保由其触发的功能可以立即打开/关闭。如果没有,最好用单个多盒代替拨动开关。
5.避免使用非常规的控制方式
避免过多的创新来改变控制方式,切记要符合行业规范和用户认知,避免带来额外的学习成本和认知负担。
6.使用便于用户在列表中浏览的排版
左对齐多选框+标签样式是最好的,保证用户快速浏览理解并完成操作,提高效率。将多盒右对齐在移动端是有利的& # 8211;单手操作更容易被选中,点击查看也不会覆盖标签内容,但是标签文字和多选框不能相隔太远。
7.如果垂直布局可以用按钮代替方框。
使用多框垂直布局的问题是视觉信息的组合和分离,可以使用tab按钮更清晰地视觉分离选项。
8.尽可能使用单选按钮而不是下拉菜单
使选项始终可见,让用户可以直观地进行比较和查看,从而减少操作负荷,使表单内容更加清晰透明。
9.使用下拉菜单携带大量/类似选项
如果选项数量超过6个,最好考虑使用下拉菜单。因为用户无论如何都无法快速记住和比较所有选项,这也适用于大量类似或增减选项,如:10%、20%、30% & # 8230;
10.最好提供一个默认项目
通常,一旦用户选择了一个无线电盒,它就不能被取消选择并恢复到其原始状态。所以考虑到用户不愿意做选择,不如提供一个[none]选项,提供默认值,按照逻辑顺序组织选项列表。
11.使用明文标签
文本标签尽量不要使用否定表达,这样可以避免误解,方便用户正确理解内容。
12.突出显示选定的状态以吸引用户的注意
从视觉上区分所选选项和数据表中的其他选项尤其重要。
13.支持批量选择和清除
对于用户来说,一次选择和清除多个选项应该是一个简单易行的任务,因此需要支持批量选择和清除功能。
14.确保操作热区足够大
多盒和收音盒通常体积都很小,点击时不容易被【瞄准】,尤其是在手机屏幕上。因此,相对较大的触发区域是保证用户能够在移动终端上进行交互的重要基础。触发热区可以包括按钮、文本标签和周围的空白区域,这使得交互更加容易。根据菲茨定律,可点击区域的大小和距离对交互有直接影响。
本文由设计学习网整理发布,不代表设计学习网立场,转载联系作者并注明出处.