返回顶部

好的单选框设计具备哪些特质?

[复制链接]
玫瑰黑糖Lv.2 显示全部楼层 发表于 2022-4-6 16:31:06 |阅读模式 打印 上一主题 下一主题

  一、什么是单选框?

  顾名思义,单选框表示只能选择一个选项,再具体一点,可以理解为只能从一组相互排斥的选项中选择其中一个选项。单选框有选中和未选中两种状态,样式上用填充的圆表示选中,描边的圆表示未选中,通过改变状态来给用户反馈。



  二、何时使用单选框?

  除了单选框,选择类组件还有很多其他形式,比如下拉列表、复选框等,我们首先来对比区分一下这几个易混淆的组件。

  单选框VS下拉列表:当用户需要从大量选项中进行选择时,为了节省空间,可以使用下拉列表代替单选按钮。但是下拉列表将内容都隐藏在下一层级中,需要用户多做一次选择,操作成本和认知成本都会变高。当选择不多于3项,建议使用单选框,这样选项可以直接展示出来,用户只需要点击选择即可;当选择超过5项时,可以考虑使用下拉列表,确保选项不会占用大量空间。

  单选框VS复选框:复选框允许用户一次选择多个选项,选中其中一个选项,不会对其他选项产生影响。对于何时使用单选框还是复选框没有明确的界定,需要具体问题具体分析。这里提一个使用复选框时需要注意的小问题,比如在只有两个选项时使用复选框,用户可能会以为只需要从这两个选项里面选择一个,反而造成误导。

  三、单选框设计指南

  始终确保良好的可用性:对于这样一个简单的组件,想要做好用好,在设计上有一些不可忽视的细节。首先要避免在单选框列表中嵌套下一层级的选项,因为使用单选框的目的之一就是为了让所有选项清晰呈现给用户,嵌套过多层级会导致整个结构的混乱。另外要明确的是,单选按钮不应该是唯一可点击的热区,而是要将按钮和标签一起作为热区,便于用户准确点击操作。这个选择模块由单选按钮、文字标签和图标共同组成,可操作的范围很大,视觉层次也很清晰,设计得既整洁又实用。

  保证可读性:单选框列表的布局要有逻辑性,尽量减轻用户的认知负荷。用户习惯于上下浏览选项和列表,如果将这些选项水平排布,可能会造成两点问题:一个是浏览时视线移动的不习惯,另一个就是如果选项位置过于紧凑,用户可能不知道每个标签到底对应哪个按钮。除了列表要垂直布局,标签也需要很简洁。标签越长,用户需要花费更多的时间和精才能了解整个列表。

  
【免责声明】本文系转载,原文来源于Clip设计夹,作者:Clippp。转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与联系我们,我们会予以更改或删除相关文章,以保证您的权益!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

达内教育:成立于2002年。致力于面向IT互联网行业,培养软件开发工程师、测试工程师、系统管理员、智能硬件工程师、UI设计师、网络营销、会计等职场人才 达内使命:缔造年轻人的中国梦、缔造达内员工的中国梦 达内愿景:做管理一流的教育公司
  • 商务合作

  • 微信公众号

  • Powered by Discuz! X3.4 | Copyright © 2002-2021, 达内教育 Tedu.cn
  • 京ICP备08000853号-56 |网站地图 | 京公网安备 11010802029508号