请选择 进入手机版 | 继续访问电脑版
分享
查看: 546|回复: 1

[分享] 【转帖】选择类控件设计解析(7)

[复制链接]

【转帖】选择类控件设计解析(7)

发表于 2021-3-10 10:04:40 来自 分享 只看大图 阅读模式 倒序浏览
zzv_icon546 zzr_icon1 查看全部
本帖最后由 嗨,狗子 于 2021-3-16 18:07 编辑

前文传送门:
选择类控件设计解析(1)
选择类控件设计解析(2)
选择类控件设计解析(3)
选择类控件设计解析(4)
选择类控件设计解析(5)
选择类控件设计解析(6)

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

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

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

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

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

如果垂直空间出问题,考虑标签
你应该防止出现很难看清选择哪个控件的情况(确保按钮和文本标签的间距),可以考虑使用选择标签或拉大间距以此来在视觉上清晰地分隔选项。
【转帖】选择类控件设计解析(7)

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


参考:
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


avatar

41

主题

71

帖子

460

积分

中级会员

Rank: 3Rank: 3

积分
460
干饭小天才 发表于 2021-3-11 16:16:32 显示全部楼层
设计知识很重要啊【转帖】选择类控件设计解析(7)
avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t