【转帖】选择类控件设计解析（7）

前文传送门：
选择类控件设计解析（1）
选择类控件设计解析（2）
选择类控件设计解析（3）
选择类控件设计解析（4）
选择类控件设计解析（5）
选择类控件设计解析（6）


我们很容易陷入到特定控件的中，所以我最好是从整体上开始思考。然后做出最佳决定，决定使用哪种选择设计最有利于一致性、差异性和层次感，控件的高度，宽度，样式设计和选项数量都是至关重要的因素。我们可以从被选择对象是单选还是多选出发，来确定使用哪种选择控件，可以根据下图情况选择，当然由于使用场景和内容的不同，请选择性参考。

3.1 单选时
选项6个以下时，使用单选框&Tab标签
单选按钮认知成本低，它能可见所有选项并让用户容易做出选择。
单选框，用户能够很快看到有几个选项以及每个选项是什么，而不用点击或其他操作再去发现这些信息。让所有选项都可见，使用户可以方便地进行比较，这样可以减少认知负荷，帮助表单更加透明。
涉及到选择项与内容组之间以及在相同层次结构中进行导航时，使用Tab标签。不要将标签用于无关的目的地，也不要加载选项卡的整个页面，只有选项卡及其内容区域进行更改。

选项多于6个时，使用下拉列表&列表单选
如果选项的数量超过6个时，应考虑使用下拉列表中或列表单选，因为单选按钮太多，也会令人不知所措并引起混乱，用户无论如何都无法记住所有的选项。
下拉列表简洁。更多适用于可预测的、类似的或增量的选项(年份选择 )。数量较多且相类似的选项选择用下拉菜单整合。

如果屏幕空间有限，请使用下拉菜单。如果不是，请使用列表框。使用下拉菜单，可以使用默认选项，并淡化其它选择。
3.2 多选时
选项6个以下时，使用复选框
选择项标签短小且一致时，使用复选框，可以方便地进行比较，这样可以减少认知负荷，帮助表单也更加透明。
选项多于6个时，使用列表多选
列表多选一般应用于6个以上选择项进行多选的情况，数量更多出现将翻页或滚动情况，需要[color=rgba(0, 0, 0, 0.84)]告知用户已选多少条数据，并在选中选项时出现相关操作。

选项3-10个之间，考虑使用多选标签
选择项数量在3-10之间，标签不能过长，考虑使用多选标签。多选标签它们给人的印象是轻量的，有趣的。
3.3 其他
当选择即生效时，使用开关
切换开关是一种数字开关。任何由切换开关触发的效果应立即生效。如果不是这样，最好用单个复选框替换切换开关。
存在长词时，尽量不使用多选标签
多选标签不能很好的处理长词。不建议对文本进行折行或者调整大小，因为会不便于用户阅读，使用两行以上的标签会使得每个标签非常难以快速扫描。

如果垂直空间出问题，考虑标签
你应该防止出现很难看清选择哪个控件的情况（确保按钮和文本标签的间距），可以考虑使用选择标签或拉大间距以此来在视觉上清晰地分隔选项。

写在最后
本文介绍了多种选择类控件，从用户使用选择类控件的角度阐释了模式定义，涵盖了大多数录入场景。选择类控件本身也需要不断进行迭代、优化和拓展，以适应更多的应用场景。后续我将持续关注，希望本文的能帮助你。
欢迎留言纠正，感谢阅读。
我是一只小龙，请鞭挞我吧！


参考：
1.Material Design & Developer
2.拆解「开关」背后的设计细节https://www.zcool.com.cn/article/ZMTAxMDMzMg==.html
3.单选框历史与使用https://www.zcool.com.cn/article/ZMTE0NzEwNA==.html
4.UI备忘单https://uxdesign.cc/ui-cheat-she ... ectors-bf56777ad59e
5.选择控件指南https://medium.com/tap-to-dismiss/select-to-proceed-996d19c8a7a4

设计知识很重要啊