序
这是第二篇，上一篇写的是《最常见也最基础的表单设计-输入框》，身边朋友看了之后提了些意见，在这先感谢@面包的建议，这篇文章有图片作加持。
昨晚辗转难眠，计划想用5-6篇把表单的组件全写了，如果对于表单设计有不同的看法，欢迎交流。
前言
今天就说表单中的第二个必备元素 - 单选按钮。
单选按钮由按钮和选项组成，一个小小的单选按钮也是有很多细节的。
目录
· 为什么叫单选按钮
· 原则
· 纵向放置单选按钮
· 按照优先级排序选项
· 容易理解的选项
· 默认必须一个被选中
· 单选按钮需要更容易点击
· 必要的视觉反馈
· 有时复选框也是不错的解决方案
· 是下拉列表还是单选按钮？
· 实操案列
· 最后
为什么叫单选按钮
tumblr
单选按钮又叫[Radio button]，为什么是Radio button？按钮跟收音机有什么关系？
单选按钮这个行为受早期汽车上收音机的物理按钮所影响，最开始汽车上调节收音机电台是通过旋转按钮进行切换的，但是随着使用频率的增加，人们发现这个行为在驾驶时很危险，之后便进行了重新设计，把旋转按钮改变成了6个合金按钮组成。每个合金按钮都会预设对应一个电台。试想：是不是只要按下一个按钮，就可以切换到需要的电台呢。
原则
IxDKN
单选按钮必须是互斥的，这意味着当选择一个选项时，之前已选中的选项会被反选。因为有互斥的存在，所以单选按钮都是两个或以上成组的出现，而且成组内只有一个单选按钮可以被选中。
纵向放置单选按钮
IxDKN
在布局上，尽量尝试垂直放置单选按钮，每一行放置一个单选按钮。
水平放置的单选按钮在整个表单中眼动扫描的效率会下降。如果一定要水平放置单选按钮，一定要注意按钮和选项间的关联性问题，不然会发生按钮和其两边的哪一边选项有关联的误解，那完成表单的效率就会大大降低。
确保足够的空间去水平放置单选按钮，并将未选择和已选择的状态做出区分，这样就可以正确看清选项。
按照优先级排序选项
按照逻辑的优先级顺序对单选按钮的选项进行排序，比如哪个选项更有可能被选中，或是最容易理解的选项到最难理解的选项。
不推荐使用字母序，从一定角度上存在问题。如果是个需要适应多种语言的Web，那就会很难本地化(例如：中文的拼音首字母是Z，英文Chinese的首字母C)。
容易理解的选项
设计单选按钮时需要注意，选项的描述也很重要。一个模糊的描述很容易产生误导，会让用户很难决策，虽说可以对应标签去理解，但选项描述的文案设计同样也是交互设计中很重要的一部分。
默认必须一个被选中
IxDKN
用户是可以切换和重做选择的，这个意味着可以控制这个单选按钮恢复到默认状态。那就意味着单选按钮总有一个是默认被选中的。
IxDKN
默认被选中的可以是：有商业目的或大多数用户选择的选项。如果强烈推荐一个选项，可以加上"推荐"的一个标签。
当用户此时不需要在单选按钮上做出决策时，可以提供一个意义为"不选"的选项。提供一个明确的选项总比强迫用户做出一个不准确的决策会要好的多。
单选按钮需要更容易点击
IxDKN
单选按钮的按钮很小，根据费茨定律他将会很难被点击。需要增加点击热区的大小，让用户不仅仅只能点击按钮才可以选择，点击选项(词)也可以触发选择。这样点击热区的大小就显得极为重要了。
使用指点设备到达一个目标的时间，与当前设备位置和目标位置的距离（D）和目标大小（S）有关。
——Wikipedia(费茨法则)
必要的视觉反馈
Dribbble
单选按钮这组件看起来是可点击的，使用必要的动效可在选择后有清晰的视觉反馈。一个适当的动效会给用户带去微妙的用户体验。
有时复选框也是不错的解决方案
IxDKNN
复选表达的意思是用来开启(关闭)或选择(反选)一个选项，而单选按钮可以在不同的选项之间切换。在两个或以上选项且单选的情况下，需采用单选按钮。只有一个简单的问题，就可以选择复选框。
第一种 多个选项且单选的情况下：利用单选按钮的互斥性，让选择变得清晰。
单选按钮默认选中的选项会给用户带去"是单选"的认知。而默认选项同时可以帮助用户做出最适合的决定，还能帮助他们更有信心地使用。
IxDKN
第二种 只有一个简单的问题：比方一个说简单的问题，需要回答"是"或“否”时，使用复选框是正确的选择。
是下拉列表还是单选按钮？
IxDKN
根据选项的数量去判断使用单选按钮还是下拉列表。当2≤选项个数(单选)≤7时，可以使用单选按钮。因为单选按钮比起下拉列表更能减少用户的认知负担。通过扫描就可以知道有多少选项，而且选项都是在页面上可见的，可以让用户对每个选项进行对比。
实操案列
正如我们一直理解的单选按钮是圆形的，复选框是方形的，我们已经对这些养成了习惯。
参考示例截取iOS设置
在很多地方我们会看到圆形的复选框，图标形或TAG形等等的单选按钮(比如iOS设置)。即使在外观上做最大的改变，但是唯一不变的行为——互斥性和默认选中一个，这便构成了单选按钮的原则。
但我们会在一些地方看到和上文冲突的一个点：单选按钮默认必须一个被选中。
为什么这么做？
参考示例截取携程App
其实也会留下很多的思考：假设根据默认选中“男”(比方通过定量数据分析发现用户是90%的男性)，若女性用户如果没有注意就直接跳过了性别的选择，但在完成表单提交信息时也不会触发校验(必填信息且已填)，那收集的信息就会不正确。
猜想
参考示例截取携程App
猜想：是否因为收集了较多的不正确信息，所以对单选按钮进行了重新设计？
默认不选中任何一项，需要用户主动去作选择，在不选的情况也会在提交时触发校验，告知未对性别进行选择。但选择性别后，单选按钮还是互斥的，虽说是违背了单选按钮的原则，但是很巧妙的解决了问题，那这个重新设计就是有意义的，是解决问题的。
最后
一个小小的组件(单选按钮[Radio button])的背后也是有很多可以挖掘的点的，在表单组件设计中只需要注意那么一点，那整体的体验也会提升不止一点。还是那句话：表单只是个收集用户信息的方式，用户需要的是高效愉快的完成填写。
参考书：《交互设计精髓》
以上的观点从我个人总结出发，虽说文笔拙劣，但是如果你有不同的意见，欢迎交流～
文末了流量千万不要浪费！老铁交叉推荐走一波：
网友评论