大家好，我是Clippp。本日为大家分享的是「单选框」设计。组件的功能在于提升可用性，帮助用户轻松做出决策。虽然单选框只是一个很大略的组件，但在设计上从不缺少细节，更不能疏于考虑。
一起来看看好的单选框设计须要具备哪些特点，如何结合当下的利用场景，灵巧利用单选框得到最优解。
一、什么是单选框？
顾名思义，单选框表示只能选择一个选项，再详细一点，可以理解为只能从一组相互排斥的选项中选择个中一个选项。
单选框有选中和未选中两种状态，样式上用添补的圆表示选中，描边的圆表示未选中，通过改变状态来给用户反馈。
常见的样式是按钮在左标签在右，在结合特定的场景利用时，两者的位置可以视情形灵巧调换。
二、何时利用单选框？
除了单选框，选择类组件还有很多其他形式，比如下拉列表、复选框等，我们首先来比拟区分一下这几个易稠浊的组件。
1. 单选框VS下拉列表
当用户须要从大量选项中进行选择时，为了节省空间，可以利用下拉列表代替单选按钮。但是下拉列表将内容都隐蔽不才一层级中，须要用户多做一次选择，操作本钱和认知本钱都会变高。
当选择不多于3项，建议利用单选框，这样选项可以直接展示出来，用户只须要点击选择即可；当选择超过5项时，可以考虑利用下拉列表，确保选项不会占用大量空间。
2. 单选框VS复选框
复选框许可用户一次选择多个选项，选中个中一个选项，不会对其他选项产生影响。对付何时利用单选框还是复选框没有明确的界定，须要详细问题详细剖析。
这里提一个利用复选框时须要把稳的小问题，比如在只有两个选项时利用复选框，用户可能会以为只须要从这两个选项里面选择一个，反而造成误导。
三、单选框设计指南1. 始终确保良好的可用性
对付这样一个大略的组件，想要做好用好，在设计上有一些不可忽略的细节。
首先要避免在单选框列表中嵌套下一层级的选项，由于利用单选框的目的之一便是为了让所有选项清晰呈现给用户，嵌套过多层级会导致全体构造的混乱。
其余要明确的是，单选按钮不应该是唯一可点击的热区，而是要将按钮和标签一起作为热区，便于用户准确点击操作。
这个选择模块由单选按钮、笔墨标签和图标共同组成，可操作的范围很大，视觉层次也很清晰，设计得既整洁又实用。
2. 担保可读性
单选框列表的布局要有逻辑性，只管即便减轻用户的认知负荷。
用户习气于高下浏览选项和列表，如果将这些选项水平排布，可能会造成两点问题：一个是浏览时视线移动的不习气，另一个便是如果选项位置过于紧凑，用户可能不知道每个标签到底对应哪个按钮。
除了列表要垂直布局，标签也须要很简洁。标签越长，用户须要花费更多的韶光和精才能理解全体列表。
3. 供应默认选择
想象这样一个利用场景，我们下载了一个新的设计软件，第一次打开时跳出一个弹窗，提示我们是选择经典布局，还是个性化布局，但是我们对这个软件不是很理解，可能并不清楚这两个布局到底是什么样子。
在这种情形下，最好默认选中个中一个选项，这样做一方面可以减轻用户对付选项的纠结，另一方面还能有目的地勾引用户利用。
#专栏作家#
作者：Clippp，微信"大众号：Clip设计夹。每周精选设计文章，专注分享关于产品、交互、UI视觉上的设计思考。
本文原创发布于大家都是产品经理，未经作者容许，禁止转载。
题图来自Unsplash，基于CC0协议。
