最近總想著，“憋”出一篇“大”文章，但是事實(shí)上越是想憋，越是憋不出個(gè)滿意的，索性寫(xiě)寫(xiě)小的觀察和總結(jié)。也許寫(xiě)的內(nèi)容不周全，但是自己寫(xiě)的舒心和愜意

定義

我自己的定義中，就是“單選框”和“復(fù)選框”的統(tǒng)稱；

操作行為，就是點(diǎn)擊選中，和點(diǎn)擊取消選中；

單選框在選擇組中只能選擇一個(gè)，復(fù)選框在選擇組中能選多個(gè)

一般樣式如圖：

復(fù)選框和單選框

并且在不同瀏覽器下，顯示的樣式不太一樣。但可以通過(guò)前端開(kāi)發(fā)，使得它們?cè)诟鱾€(gè)瀏覽器下保持一致的樣式；

要注意的設(shè)計(jì)細(xì)節(jié)

一般來(lái)說(shuō)，選擇框前部的鏤空?qǐng)D形，是暗示當(dāng)前元素可以選擇的。正是因?yàn)檫@個(gè)原因，操作選擇框時(shí)，人會(huì)傾向于點(diǎn)擊圖形。但是由于圖形本身所展示的區(qū)域較小，根據(jù)費(fèi)茨定律，這是不利于人去完成點(diǎn)擊的。所以在這個(gè)地方的理想效果是，暗示其實(shí)際的可點(diǎn)區(qū)域，或者至少增大其實(shí)際可點(diǎn)的區(qū)域。

下圖就是選擇框細(xì)節(jié)做到位的例子

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

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

當(dāng)然，圖形后面緊挨著的那段文字，是可以點(diǎn)擊的，這是個(gè)常識(shí)，我就不多說(shuō)了。

上篇：重新認(rèn)識(shí)控件（二）【W(wǎng)eb傳圖控件】

作者：@德川亮；via：簡(jiǎn)書(shū)