序
不多想，还是两天一篇的去干。既然说跨出这步，那就好好写了。
前两篇写的是输入框和单选按钮。这次说表单组件中的复选框，下一次是下拉列表。
交互设计师、90后、不喜欢写文章，是我的三个TAG，这是第三篇。
前言
上一篇说单选按钮的时候提到复选框需要用户做出“是”或“否”回答时，可以使用复选框，那这次就说一下复选框的使用。
目录
· 复选框组成
· 复选框原则
· 纵向放置复选框
· 容易理解的选项
· 复选框需要更容易点击
· 一个选项情况下，还能用开关
· 开关组成
· 开关的状态
· 容易理解的语句
· 开关的状态
· 如何使用复选框和开关
· 合理动效的加持
· 最后
复选框组成
IxDKN
复选框[Check Box]由一个方形的选择框和选项组成，复选框在选中状态下有标记。
复选框原则
IxDKN
复选框用在有多个选项，用户可以任意选择(或不选)多个(或一个)选项。包含复选框的选择组，每个选项都是彼此独立存在的。和单选按钮原则相反，选择一项后不会反选其他选项。
纵向放置复选框
这条规则对于单选按钮和复选框都适用，在布局上尽量尝试垂直放置复选框，每一行放置一个复选框。
IxDKN
和单选按钮一样水平放置会遇到相同的问题：水平放置的复选框在整个表单中眼动扫描的效率会下降。如果一定要水平放置复选框，一定要注意选择框和选项间的关联性问题，不然会发生选择框和其两边的哪一边选项有关联的误解，那完成表单的效率就会大大降低。
容易理解的选项
设计复选框时也需要注意，选项的描述也很重要，这样用户就能在选择前有选择后的预期。尽量不要使用如“不要给我发票”这样的否定语句。若这样设计的话选择难度就上升了，结果就是用户不得不再去修改选择状态来理解两个选项后，再去满足自己的目的。
复选框需要更容易点击
IxDKN
和单选按钮一样复选框也需要注意：根据费茨定律，将会很难被点击。需要增加点击热区的大小，让用户不仅仅只能点击选择框才可以选择，点击选项(词)也可以触发选择。这样点击热区的大小就显得极为重要了。
使用指点设备到达一个目标的时间，与当前设备位置和目标位置的距离（D）和目标大小（S）有关。
——Wikipedia(费茨法则)
一个选项情况下，还能用开关
Google
类似于实际生活中台灯的开关。开关由一个能打开/关闭能做切换操作且互斥的两个选项组成。当选择其中一个选项时就会立即执行。
开关组成
IxDKN
单选按钮可以被看作是单个的，易懂版的复选框。复选框和开关[Switches]不同之处在于复选框可以说明选择状态，而开关就可以说明操作状态。
IxDKN
如上图开关就可以很明确的传达WiFi已处于打开状态，若使用复选框则导致用户得去思考WiFi当前已经打开了？还是要取消选中后才打开？
开关的状态
使用开关做设计时，最需要注意的一点是开关的状态。
参考示例截取iOS6
如上图“ON”表达的是当前状态？还是触发操作后是“ON”的状态？这里的“ON”究竟指的是状态ON(形容词)？还是你需要触发的操作ON(动词)？
IxDKN
不要让用户产生疑问，不要将描述文字放在开关内或高亮“打开状态”，那这样就可以传达正确的信息给用户了。
容易理解的语句
因为开关的特性，就能很清楚的知道状态(打开/关闭)，所以标签文案就显得很重要了，只需要说明开关控制什么内容就行。尽量不要使用否定句！
IxDKN
假设上左图：当开关处于关闭状态，是不是会觉得已经就是“不允许所有人查看我的照片”呢，事实上还是可以看到你的照片。因为标签文案是否定句，再加上按钮关闭状态，那"双重否定"就表示肯定了！所以上右图才最清楚表达"不允许所有人查看我的照片"。
如何使用复选框和开关
IxDKN
复选框更多使用在表单中，仅仅代表当前的选择状态。当只有点击“提交”后才可能知道选择(未选择)的不同。
IxDKN
开关按钮更多使用在设置中，在用户切换后就立刻显示出不同了，而不是非得要等用户点击“提交”后才看到变化。正如我们在现实生活中对于开关的所预期一样(例如我们摁下打开台灯开关，台灯就马上亮了)。
合理动效的加持
Dribbble
如果可以在复选框和开关切换时加入一些动效，带来一种清晰的视觉反馈。愉悦用户也提升用户体验，而不单单只是两张(一张selected和一张unselected)的图片做切换。
最后
写到这会发现不管单选按钮、复选框、开关他们需要注意的地方基本差不多，因为的确是这样。每一个组件的原则不尽相同，如果能够妥善利用他们的原则，那目的是相同的：表单只是个收集用户信息的方式，用户需要的是高效愉快的完成填写。
参考书：《Web表单设计》、《交互设计精髓》
以上的观点从我个人总结出发，虽说文笔拙劣，但是如果你有不同的意见，欢迎交流～
又是底部不浪费流量，能做广告的地方啦
网友评论