重新认识控件（三）【选择框】

最近总想着，“憋”出一篇“大”文章，但是事实上越是想憋，越是憋不出个满意的，索性写写小的观察和总结。也许写的内容不周全，但是自己写的舒心和惬意

定义

我自己的定义中，就是“单选框”和“复选框”的统称；

操作行为，就是点击选中，和点击取消选中；

单选框在选择组中只能选择一个，复选框在选择组中能选多个

一般样式如图：

复选框和单选框

并且在不同浏览器下，显示的样式不太一样。但可以通过前端开发，使得它们在各个浏览器下保持一致的样式；

要注意的设计细节

一般来说，选择框前部的镂空图形，是暗示当前元素可以选择的。正是因为这个原因，操作选择框时，人会倾向于点击图形。但是由于图形本身所展示的区域较小，根据费茨定律，这是不利于人去完成点击的。所以在这个地方的理想效果是，暗示其实际的可点区域，或者至少增大其实际可点的区域。

下图就是选择框细节做到位的例子

qq 邮箱列表头部的选择框，其实际的可操作区域，比看到的大

百度云文件夹列表中，给予了 hover 的反馈，暗示“整行”都可以点击

当然，图形后面紧挨着的那段文字，是可以点击的，这是个常识，我就不多说了。

上篇：重新认识控件（二）【Web传图控件】

作者：@德川亮；via：简书