从四个部分，帮你完全掌握单选框的设计方法

单选框是常常见表单元素。它常被用来从组互斥相关选项选择个单独选项。击个未选单选框时，它会被选，其他按钮则会变成未选状态。

发展历史

单选框命名（Radio）来于旧收音上物理按钮，时被用来在频率和预电台切换。个按钮被按下时，所有其他按钮都会弹出，使被按下按钮成为唯处于「按下」状态按钮。

该概念后来被用在磁带录音、盒录音以及大名鼎鼎「随身听」上。

计算出现后，施乐公司提出了GUI概念， Xerox Star 8010工作站是第个在图形用户界上使用单选框设备。

后来被Apple Lisa，Apple Macintosh以及Microsoft Windows采用，成为了标准用户界组件，沿用至今。

何时使用

当用户需要在一组互斥的选项中进行单一选择时使用单选框；果要进行个选择，推荐使用多选框。

当选项数目2-7之间时使用单选框；如果选项超过7，推荐使用下拉框。

如果两含义相反的选项，如「同意」「不同意」，「接受」「拒绝」，建议使用一多选框或者关。

如果每选项都同的优先级，推荐选项时，使用单选框；如果需向用户推荐某选项，可以使用下拉框。

提供的选项用户不很熟悉？如果用户看了第一选项就能预见到所的内，如「周一」，那么后的选项「周二到周日」，这种况下就不需将所的选项都展示出，可以使用下拉框简化界面。

行为交互指南

1. 选项

在设计单框的项时，要充分考虑户的实际情况，给的项要覆盖到有的情况。例如，要考虑到户进行择的情况，这时需要供一个「无」的项。

同样，给的项有可都符合户的情况，如果有的项户都可会，就需要供一个「它」项。

有项应该满足「互斥」的原则，因此项之间要避免存在交集。例如，在一个年龄的择设置上，如果供的项为「20-30岁」和「30-40岁」，那么如果户好30岁该如何择？

项覆盖要全面，现遗漏。如果遗漏某种情况，户可无法进行择。例如，在一个年龄的择设置上，如果供的项为「20-30岁」、「31-40岁」、「40岁上」，那如果户小于20岁该如何择？

默认选项

为单选框代表了组互斥选择，所以默认情况下是要选择个单选项。如默认情况没有选择，用户进选择后，法返回默认情况，这违反了「可撤销做」交互原则。

将第个选项作为默认选项，这符合用户认知。如将第个或其他选项作为默认选项，用户会以为出现了问题并感到疑惑。这时需要调选项序，确保第个选项为默认。

为默认选项是第个，此需要选择最安全，最有可能选项作为默认选项，提前预判用户操作，提升选择效率。

选项排序

选项排序影响用户操，因此需要遵守一定原则。一般情况下，按逻辑顺序，选择概率由高到低；或者按照复程度排序，由简单到复；也以按照操风险排序，将最安的操放在前边，由风险最低到最高进行排序。

排列对齐方式
默认情况下，推荐竖直排列。竖直排列相对于水平排列而言，容易读取和定位，可以提高用户的浏览效率，所有的选项进行左对齐，不用受制于选项的标签文字长短。

但竖直排列会占用较多的垂直空间，如果垂直空间受限，可以考虑水平排列。水平排列的时候，注意每选项之间的间距，间距尽一点，不然用户会分不清单选按钮的文字到底还后。

交互区域

选框的面积较，用户在点击的候会比较困难。可以通过扩大点击的交互域来提高易用性，将标签文字也置为可点击，增加操作域的面积，方便用户操作。

文字标签

每个项都要配合相应的字标签来指示该项代表的含义。字标签需要简洁明了，一般使短语而是句子，因此需要句号来结尾。

尽量保证每个文字标签用语的表达的一致性，不要出现有的用名词，有的用动词的情况。

仅体现每个选项之间的差异，不用重复选项之间相同的部，将重复部提出来放在整个选项的上方。

保证选项尽量简洁，如果需要解释说，可以在选项下方使用独一行文字。

如果标签文字无法进行简，必须使用多行文字，将选按钮文字顶对齐。

状态

每个项都有中和未中两种情况，每种情况对应了3种交互状态，分别为默认、悬浮和禁。

上就是我对单框的总结，分为定义、发展历史、使场景和行为交互个分。中难免有遗漏和错误，大一起来讨论！

欢迎关注作者公众号：「瓦力UX」