最近總想著，“憋”出一篇“大”文章，但是事實上越是想憋，越是憋不出個滿意的，索性寫寫小的觀察和總結。也許寫的內容不周全，但是自己寫的舒心和愜意

定義

我自己的定義中，就是“單選框”和“復選框”的統稱；

操作行為，就是點擊選中，和點擊取消選中；

單選框在選擇組中只能選擇一個，復選框在選擇組中能選多個

一般樣式如圖：

復選框和單選框

并且在不同瀏覽器下，顯示的樣式不太一樣。但可以通過前端開發，使得它們在各個瀏覽器下保持一致的樣式；

要注意的設計細節

一般來說，選擇框前部的鏤空圖形，是暗示當前元素可以選擇的。正是因為這個原因，操作選擇框時，人會傾向于點擊圖形。但是由于圖形本身所展示的區域較小，根據費茨定律，這是不利于人去完成點擊的。所以在這個地方的理想效果是，暗示其實際的可點區域，或者至少增大其實際可點的區域。

下圖就是選擇框細節做到位的例子

qq 郵箱列表頭部的選擇框，其實際的可操作區域，比看到的大

百度云文件夾列表中，給予了 hover 的反饋，暗示“整行”都可以點擊

當然，圖形后面緊挨著的那段文字，是可以點擊的，這是個常識，我就不多說了。

上篇：重新認識控件（二）【Web傳圖控件】

作者：@德川亮；via：簡書