起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識重新認識控件（三）【選擇框】
最近總想著，“憋”出一篇“大”文章，但是事實上越是想憋，越是憋不出個滿意的，索性寫寫小的觀察和總結。也許寫的內容不周全，但是自己寫的舒心和愜意
定義
我自己的定義中，就是“單選框”和“復選框”的統稱；
操作行為，就是點擊選中，和點擊取消選中；
單選框在選擇組中只能選擇一個，復選框在選擇組中能選多個
一般樣式如圖：
復選框和單選框
并且在不同瀏覽器下，顯示的樣式不太一樣。但可以通過前端開發，使得它們在各個瀏覽器下保持一致的樣式；
要注意的設計細節
一般來說，選擇框前部的鏤空圖形，是暗示當前元素可以選擇的。正是因為這個原因，操作選擇框時，人會傾向于點擊圖形。但是由于圖形本身所展示的區域較小，根據費茨定律，這是不利于人去完成點擊的。所以在這個地方的理想效果是，暗示其實際的可點區域，或者至少增大其實際可點的區域。
下圖就是選擇框細節做到位的例子
qq 郵箱列表頭部的選擇框，其實際的可操作區域，比看到的大
百度云文件夾列表中，給予了 hover 的反饋，暗示“整行”都可以點擊
當然，圖形后面緊挨著的那段文字，是可以點擊的，這是個常識，我就不多說了。
作者：@德川亮；via：簡書
相信我們會有一天變得牛逼。
評論
- 目前還沒評論，等你發揮！
