好的单选框设计具备哪些特质?把握住这些知识点!

2021-10-27    lanlanwork


一、什么是单选框?

顾名思义,单选框表示只能选择一个选项,再具体一点,可以理解为只能从一组相互排斥的选项中选择其中一个选项。

单选框有选中和未选中两种状态,样式上用填充的圆表示选中,描边的圆表示未选中,通过改变状态来给用户反馈。

图片

▲ 常见的样式是按钮在左标签在右,在结合特定的场景使用时,两者的位置可以视情况灵活调换。

 

二、何时使用单选框?

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

 

单选框VS下拉列表

当用户需要从大量选项中进行选择时,为了节省空间,可以使用下拉列表代替单选按钮。但是下拉列表将内容都隐藏在下一层级中,需要用户多做一次选择,操作成本和认知成本都会变高

图片

▲ 当选择不多于3项,建议使用单选框,这样选项可以直接展示出来,用户只需要点击选择即可;当选择超过5项时,可以考虑使用下拉列表,确保选项不会占用大量空间。

 

单选框VS复选框

复选框允许用户一次选择多个选项,选中其中一个选项,不会对其他选项产生影响。对于何时使用单选框还是复选框没有明确的界定,需要具体问题具体分析。

图片

▲ 这里提一个使用复选框时需要注意的小问题,比如在只有两个选项时使用复选框,用户可能会以为只需要从这两个选项里面选择一个,反而造成误导。

 

三、单选框设计指南

始终确保良好的可用性

对于这样一个简单的组件,想要做好用好,在设计上有一些不可忽视的细节。

首先要避免在单选框列表中嵌套下一层级的选项,因为使用单选框的目的之一就是为了让所有选项清晰呈现给用户,嵌套过多层级会导致整个结构的混乱。

图片

▲ 另外要明确的是,单选按钮不应该是唯一可点击的热区,而是要将按钮和标签一起作为热区,便于用户准确点击操作

图片

▲ 这个选择模块由单选按钮、文字标签和图标共同组成,可操作的范围很大,视觉层次也很清晰,设计得既整洁又实用。

 

保证可读性

单选框列表的布局要有逻辑性,尽量减轻用户的认知负荷。

图片

▲ 用户习惯于上下浏览选项和列表,如果将这些选项水平排布,可能会造成两点问题:一个是浏览时视线移动的不习惯,另一个就是如果选项位置过于紧凑,用户可能不知道每个标签到底对应哪个按钮。

除了列表要垂直布局,标签也需要很简洁。标签越长,用户需要花费更多的时间和精力才能了解整个列表。

 

提供认选择

想象这样一个使用场景,我们下载了一个新的设计软件,第一次打开时跳出一个弹窗,提示我们是选择经典布局,还是个性化布局,但是我们对这个软件不是很了解,可能并不清楚这两个布局到底是什么样子。

图片

▲ 在这种情况下,最好默认选中其中一个选项,这样做一方面可以减轻用户对于选项的纠结,另一方面还能有目的地引导用户使用。

 

最后

最后为大家精选了单选框设计样式资源,学习好的单选框设计风格和样式,获取最新的设计灵感!

图片

关注公众号后台回复【单选框】获取设计文件。

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》好的单选框设计具备哪些特质?把握住这些知识点!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



分享本文至:

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档