UX Pedia Presents
本文约2850字，阅读需要8分钟
 选择控件设计
这是「UI组件要点狙击」系列的最后一篇啦，之前的2篇戳这里直达~！
辞典精译 | UI组件要点「狙击」：按钮设计的这些坑别再踩啦！（第一弹）
辞典精译 | UI组件要点「狙击」：文本栏及表单设计奥秘解析（第二弹）
单词“ toggle”是指带有短手柄的开关，这种开关每次使用时，仅会在两种状态间切换，比如我们每次“打开”台灯时都会用到它。
至于“收音机按钮”，这个词来自汽车收音机。通常情况下，在表盘下方有一组按钮，以机械地形式存储电台预设，用户使用时可以快速地在电台之间切换。按下其中一个按钮，它会一直保持同一中状态，直到按下另一个按钮为止。
单选框——当有一个或多个独立选项时使用，用户可以选择任意数量的选项（包括无，一个或多个）；
单选按钮——当存在两个或多个互斥选项，用户只能选择其中一个使用；
拨动切换按钮——当有两个互斥选项，并且始终出现一个默认值时使用。切换选择后，按钮会立即生效；
选择控件——是单选按钮的精简版，至少包含两个选项，选择控件也能让用户进行的单个选择；
多选控件——是复选框的精简版，允许用户选择多个选项，主要用于在移动设备上的筛选。
选择控件已在用户界面中被使用了很长时间，怎么应用它们呢？以下是有详细列举：
01 选择控件的状态
单选、复选框都可以选择或取消，波动开关可以切换开/关。它们全部具有：激活、禁用、悬停、选中和按下等各式状态。虽然状态看起来很多，但若想打造一套完整的选择交互，这些状态必不可少。
02 别忽视不确定状态
复选框中会同时出现未选中&选中的选项，比如涉及到父子级、多层级的复选框时，因为并不是每个选项都能用得到，这种不确定、未知性的交互，别忽视了。
03 禁止滥用拨动开关
禁止在层级结构中使用拨动开关，它在视觉上大大分散了用户注意力，还会误导用户以为所有子选项都处于开/关状态。
04 拨动开关&立即触发
使用拨动开关，最好保证要触发的功能是需要立即生效的，否则就失去了它的意义。如果不是，最好用单个复选框去替换拨动开关。
05 使用常规样式风格
任何偏离设计标准、常规的样式风格都会给用户增加额外负担，注意设计语言的统一和规范。
06 垂直列表中的对齐版式
左对齐的控件和标签组合一起时效果最佳，这样能方便用户快速浏览，不会出现读串行等错误。右对齐控件在移动设备上相对效果更好，控件和按钮不能分开太远，这种设计方便用户单手操作，也不在勾选时遮挡标签。
07 垂直排版时用按钮代替选框
避免出现用户无法快速识别控件状态的情况，下图中，标签按钮相对比选框更容易清晰识别主要、次要信息。
08 用单选按钮代替下拉菜单
使所有选项永久可见，方便用户比较它们，从而减轻了认知负担帮助表单更透明。
09 选项过多时使用下拉菜单
如果选项数量超过6个，建议将其置于下拉菜单里，因为用户无法牢记所有选项。这同样适用于可预测的，一些相似或是增量的选项，例如10％，20％，30％…
10 设置一个默认选项
一旦单选按钮被选中，用户就不能取消选择或将其设置回原来的状态了。当用户不愿选择时，可以提供一个标记为None的默认单选按钮，再依据此排列选项列表，使用效果也会更好。
11 设置清晰的标签
文本标签应以用户第一视角设置，避免否定样式出现，造成误解。
12 突出选定项，吸引用户注意
在视觉上，将数据中表内的所选项与其他选项区分开，尤为重要。
13 支持批量选择和清除
对用户而言，一次性选择或清除多个项目，应该是毫不费力的，不要忽略批量选择和批量删除功能。
14 增大点击区域实现可靠交互
根据菲茨定律，目标的大小起着重要作用。复选框和单选按钮通常都很小，尤其在移动设备上，在点击时可能会比较棘手，所以交互区域可以包含按钮、文本标签及周围一些空白区域，甚至加大触发面积，对于交互来说都是非常友好的。
／End. 
相关引用
-翻译自原文
https://uxdesign.cc/selection-controls-ui-component-series-3badc0bdb546
-封面图来自网络；GIF图 by Gur Margalit
-未经UX Pedia允许不得转载
往期推荐：
辞典说 | 极简风的「金拱门」你还爱吗？那些打动我们的好创意
辞典精译 | UI组件要点「狙击」：文本栏及表单设计奥秘解析

辞典甄选 | 书单03：去实际案例中体会设计思维
辞典说 | Shutterstock：大数据驱动下的2021年创意设计趋势
  UX 辞典  
策划│雪诗
翻译│梦奇
编辑│梦奇
• 扫码加辞典酱 •
• 成为学习交流小队一员吧 •
形象理解用户体验，时刻关注设计趋势
Powered by Canopy Institute of Design
2021©UX Pedia. All Rights Reserved
「喜欢UX辞典的推送，请设置个 星标☆ 」
「下次就能 第一时间 看到惹」
 赞了吗  在看吗 
 戳下这里呗  别害羞 :  ) 
继续阅读
阅读原文