【解构ui】复选框vs.开关按钮vs.单选按钮vs.下拉选单
今天我们继续拆分UI界面，单选按钮，多选框，开关切换键以及下拉选单在使用中都是非常容易搞混的几个表单元素。 良好的掌握每个控件的使用场景，可以更加积极的帮助用户完成表单的填写。
先来看一下这几个控件的定义 ：
- 复选框(Check boxes)：从一个系列的选项中同时选中多个。
- 单选按钮Radio buttons):只能从一系列选择中选择一个选项。
- 切换按键（Switches/toggles)：切换开关
- 下拉选单(Drop-downs):从众多的选项中选择一个
复选框（Checkboxes）
- 当要从一系列的选项中选区多个选项的时候，可以使用复选框，和单个选择器不一样的是，选择一个选项的时候，不代表另外一个已选的选项会被取消掉。
]
- 复选框也可以只有一个选项，作为功能的开启。
- 多选框的说明文字应用主动语态, 告知用户如果选中的话会发生什么。
- 通常做好这些选项的选择后， 需要再点击保存，才能将选择好的设置保存起来。
开关按钮(toggles/switches)
开关按钮属于双态按钮， 意思就是指有开和关两个两种状态的控件。 开关按钮就是在两个状态之间切换。
在使用开关按钮的时候要注意需要提供足够的视觉反馈，告知用户什么状态下是开着的。
试着将开关按钮的状态说明文字放在按钮外面， 如果要放在按钮里面，一定要有明确的视觉反馈，不然用户会不知道按钮上的标签文字是现在的状态还是滑动之后的状态。
- 在使用开关按钮之后，不需要让用户再去保存， 这符合用户在现实世界中使用开关的心里模型。
复选框 vs.开关按钮
多选框是用来调整状态，而开关按钮是用来切换动作的。 （可以参考现实生活中的开关按钮）
当用户需要进行下一步来确认，提交，的时候，则使用多选框作为功能开启或者确认。
单选按钮（Radio buttons）
先让我们看一下单选按钮的来历，单选按钮的英文名是Radio buttons,因为最早的老师汽车里的播放器的按钮就是选中一个电台后，之前选中的按键就会弹出。
单选按钮又可称之为分段控件， 分段控件是用来从一些可选项中选取一个选项。在ios和Andriod的Material design里面我们可以经常看到分段控件被用来作为二级导航，它可以展示页面里的内容或应用的分类。
提供默认选择
单选按钮应该一直都有一个选项是选中着的 ， 选择最保险的选项做为默认选项 ，如果最保险的不在考虑因素内的话 ，那就选择用户最有可能选择的一个选项 。
如果用户可能一个都不选择， 那么提供以类似于none的选项 。
但是个人认为这种默认的选项在一些情况下会让用户误以为以及选择好了，而没有做出正确的选择，特别是在问卷填写中，其实这种默认的选择并不可取。
我们可以看到在微信的投票选择器中，微信并没有给我们一个默认的选项。
所有的选项要对齐
单选按钮不应该有什么子选项，这会让用户感到困扰
复选框 vs. 单选按钮。
-
如果只有两个选项，且这两个选项的含义对对立的那么就使用复选框。
-
如果你只有一个简单的是/否,同意/拒绝的问题，那么用复选框比较合适。
- 如果两个选项的有较为清晰的差异，则使用单选按钮。
让我们来看一下gmail的这个设置页面，单选按钮和复选框的使用情况。 按照上面所说的，我们至少可以找到好几处问题。
- Right-to-left editing support off/on 单纯的开关选项，没有必要用单选按钮，用复选框可以很好的同上面的enable input tools保持一致。
- Always use https/Don‘t always use https.同上
- Conversation view on/off同上
- Show/Hide “Send&Archive”button in reply.同上
- Always display external images/Ask before displaying external images.用户阻碍看到Always的时候下意识的反应就是另外一个选项应该是不展示图片，但是Gmail给出的选项是在展示图片前询问，这在逻辑上不是很符合，要么你再加一个不展示图片的选项。
让我们来看一个比较好的例子：
MacOX的显示屏设置项上分辨率有两个选项，由于这两个选项的含义完全各不相同，因此用单选按钮是很合适的。
而在点击Scaled的时候，下面会展开更加细化的选项。 如果用户按错了，也可以直接改变，不会造成困扰。
Automatically adjust brightness算是一个类似于功能开启的简单设置，因此使用多选框比较合适。
设计时要注意的共同点
- 除了复选框和单选按钮的选取框能点击获取外，连同选项的文字部分也应该能够选取。
- 竖直摆放选项
试着将你的选项竖直排放。如果你不得不横着摆放的话就注意就近原则， 不然哪个控件是控制哪个的会搞不清。横着摆放会比较难以扫视或者定位。
我们来看一个比较好的例子： Duolingo这款语言学习App用了横着摆放的选项 但是他们讲选项内容和控件通过椭圆包含起来了。 这样在视觉上就能较清晰的将选项分开了。
- 如上面所说的，使用单选按钮和复选框一样，应视为正在设定，需要一个确认按键，才能最终使用， 而不是点击后直接向开关按钮一样直接开启。 但是我们最近也会看到有些应用开始慢慢的也让复选框和单选按钮可以直接选中确认，如果有问题，给到重设选项恢复之前的设定。 其实这两种设计是不同的思考模式，前者是预防性后者为补救性 。当然有时候是因为技术缘故，让使用者选完之后再一次套用，避免系统一直运算而延缓故障。
下拉选单（Drop-downs）
当页面上只有一个重点的选型需要展示的时候，使用下拉选单是一个比较好的选择，而且下拉框能帮助节省不少屏幕空间。
下拉选单里选项太多
但是当下拉框的选项超过了15个的时候，这时候用户选择起来就会比较困难。
比如说国家的选择， 有超过100多个国家， 一一列出让用户去寻显然不合适。 而用首字母搜寻的方式也不是大部分用户都知道的。 而有时候用户不知道这个选项的排列到底是按照字母顺序， 还是按照最常用国家选项的顺序排列的。 因此 ，有时候用户在选择的时候会要先搞清楚选项的排序逻辑是什么。
解决方式：
- 可以考虑通过定位系统，自动定位用户的地区。 但是这有一个问题，比如用户出差在外，他其实要输入的是家里的地址，那么这时候就需要让用户有修改的功能。
多添加一个输入框
让用户直接输入，或者在输入框旁边放上一个地图icon按时点击后可以自动定位输入。
- 或者将下拉框变成输入框，当用户输入头几个字母的时候， 弹出相关的下拉框选项，让用户去选择。
下拉选单里选项太少
当选项少于7个的时候， 那用户就只能点击展开后才能看到所有的选项。 在这种情况下就应该尽量选择单选按钮 . 这样的话用户才能立刻看到有多少个选项， 而不是要点击打开后才能看到所有选项。
移动端下拉选单替换方案
在桌面端如果有许多下拉框可能不是什么大问题，但是手机是一个较小的容器，它会将一些细小的问题放大 而手机端的屏幕空间有限，下拉框里的选项一旦选择太多，那么就会让用户在选择起来更加困难，并且增加点击次数。
因此我们要尽可能的去删减优化我们的表单，看看有什么好的控件可以用来替换下拉框。
解决方案
- 通过单选按钮将选项分门别类。
- 对于做小幅度的改动来说， 计数器是一个比较好的选择。
- 使用切换按钮操作简单的相反含义的选项
- 使用滑块选择适当的数字反馈。
因此在当你想要用下拉菜单的时候想一想有什么更好的替代办法。 更重要的是要知道如何去简化你的表格。 将不需要的去除掉
单选按钮vs 下拉选单
通常来说，下拉选单会把所有的选项收起来，需要点击才知道选项的内容，而单选按钮会把所有的选项成列出来，因此从可用性的角度来说，单选按钮更好。但是这种情况只有在选择较少的情况下才能体现单选按钮的优势，因此选项一旦较多比如七八个的时候就不适合一一展开，而且会占很多的空间， 因此将选项收起来放在下拉选单里会比较合适。
之前我们也提到了，一旦选项过多比如有十几个可能下拉菜单就不是一个很好的选择。
小结
这上面零零总总的规矩都是人定的，没有说一定的正确与否， 最重要的还是要通过实践，通过观察测试，去理解用户， 从可用性， 美感等各方面去考量， 帮助用户更好的完成任务。
参考资料
Material design - Selection controls
Are radio buttons still useful in modern web and application design?
Principles of Mobile App Design: Engage Users and Drive Conversions
碎碎念
本来这篇文章应该前两天就发的，拖拖拉拉的弄到现在，是因为。。。这两天的小心脏被张继科给勾去了（花痴脸）。于是花了很多的时间在刷微博上，本以为微博是彻底Flop了，但是在刷刷刷的空虚中觉着其实也不然，微博还是很闹腾，而我只是将刷微博的精力给了即刻。。。微博和微信其实也并非什么既生瑜何生亮的关系。
微博还是有其不一样的地方，几百年不开一次微博的我，大概保持着一年一条微博的更新频率，然后说一些非人话，就是觉着微博上应该没啥人会看到我的消息，所以没所谓。
而微信上则是一个密闭空间除了刚开始用的一年我会偶尔发发朋友圈之后，大约有快两年的时间都没怎么发过朋友圈。之前有一个不长发朋友圈但是会常更微博的妹子帮我说，正是因为现在微博flop了上面加的人反而没有微信上那么杂七杂八，所以在上面吐吐槽还是很不错的。突然微博就成了一块朋友圈之外的一块净土。
微信作为封闭的空间，又自带屏蔽功能，而微博作为一个开放空间，你可以任意关注任何人，关注了一个明星就突然觉着你和他的距离近了不少。 这种说不清的感觉很有趣。。。（好吧，我还没关注科科。。。）， 而很多八卦爆料之类的都似乎是从微博兴起，其速度是微信公众平台不能比的。
而从产品的整体角度来说，微博的移动端始终给我一种混乱的感觉，深不见底，不知道某个按键按下去之后会发生什么。而微信则是每个角落我都知道，你说按哪个按钮接下去的反应是什么我大致都知道。 有种完全掌控的感觉。
Anyway我决定今晚去看科科的直播了，这是什么鬼我一直没有研究过，很好，借此机会，酿我感受一下什么是直播，跟上年轻冷的步华（意气风发脸）。
