編輯導讀：【多選框】是一個常用的互動設計元件，能幫助使用者勾選多個選項，是一項基礎的功能元件。本文作者圍繞【多選框】，提出了幾點設計要點，一起來看一下吧。
最近講了這麼多互動設計元件，終於等到了要寫「Check Box 多選框」的時候。就小編自身而言其實蠻不想寫「多選框」這部分內容的，其原因有二：首先就小編自己做這麼多年設計其實蠻討厭做多選類的需求，其中都是深坑真是坑了又坑；再者前幾篇元件短文當中已經把一些注意點都講的七七八八，這些類似點沿用到「多選框」身上也八九不離十。
但是本著處女座心態，漏點東西總覺得不太舒服，今天還是簡短的把「多選框」能想到的點寫一寫，希望各位看官賞臉。
一、「Check Box 多選框」的隱喻
經歷過讀書時代考試的同學們應該都對答題卡記憶猶新，其實它作為「Check Box 多選框」在物理世界當中的隱喻本體再適合不過了，
兩者同時都兼有在一堆互斥的後選項當中選取一個或者幾個作為反饋答案的功能。
（此靈感概念來源於Hozin老師）
二、「Check Box 多選框」的含義
1。「Check Box 多選框」互動定義
幫助使用者完成從若干個互斥的選項集合當中選取一個或者多個後選項任務的互動形式稱作為「Check Box 多選框」。
我們根據定義其實可以得出「Check Box 多選框」的兩個重要特質：
從多個後選項當中選擇，完成N選N的任務。
其實當後選項數量為一個時，「Check Box 多選框」還能當作開關使用（記住這點哦，以後還會重點講解）。
2。「Check Box 多選框」互動形態
「Check Box 多選框」的互動形態其實與「Radio button」比較相似，兩者的共同點都具有「選中」、「未選中」、「不可選」三態，
但是「Check Box 多選框」比較獨特的是還存在一個「不確定」的狀態，往往在出現在父子構造的多選框當中。
3。「Check Box 多選框」視覺樣式
在尼爾森諾曼集團的官網文章當中特別指出「Check Box 多選框」應該使用標準的視覺表示。
具體形式就是複選框應該是一個小方塊，選中時帶有複選標記。
https：//www。nngroup。com/articles/checkboxes-vs-radio-buttons/
當然負責視覺的設計師有想象力是好的，但是它獨有的視覺樣式已經存在超過20年，突然改變使用者心中的形象，應該不是個優雅的設計，強如微信設計團隊的視覺設計師也有一顆改變世界的心。
三、一些能想到的小竅門
由於前幾篇「radio button」「toggle」相關一些短文內講到的小技巧與「Check Box 多選框」多有重複，所以這裡小編儘量再擠點乾貨出來。
1。 關於「Check Box 多選框」的佈局
當時在「手把手帶你重新認識Radio Button」一文當中提出單選按鈕最好從上往下排列後選項，其實在「Check Box 多選框」一般情況下，也是推薦垂直排列多個複選框，這樣更容易區分它們的狀態。
但是如果複選框數量有很多，那不斷往下拉也會讓使用者十分頭疼，在這種情況下我們完全可以用「Toggle Token」來替代使用「Check Box」，因為它的外在樣式造成了它橫向排列不會出問題，可以讓使用者很好的識別出後選項之間的差異。
2。 積極主動的標籤措辭
對複選框標籤使用積極主動的措辭，以便讓使用者清楚如果勾選複選框會發生什麼。
換句話說假如有一個選項是“不要給我發更多的電子郵件”那麼使用者就會有一種被要挾之感，破壞了使用者體驗，同時這種情況往往在使用「single check box」場景下比較多出現。
這裡肯定有人會問什麼叫「single check box」請看下圖：
3。 擴大點選區域
本質上「Check Box 多選框」點選區域很小，因此，根據菲茨定律，它們跟「radio button」一樣可能很難被點選到。
所以我們要要擴大目標點選區域，讓使用者可以點選一個選項（包括相關標籤），而不是點選那個小方塊。
4。 「singlecheck box」的開關屬性
在某些設計系統（比如蘋果macOS）之下會建議將「single check box」看作是一種首選項的控制開關，
當總控制的「single check box」未選中時，相關的首選項都是不可用的，只有選中「single check box」時所屬的選項才能進行配置。
5。 合理時使用不確定狀態
在一些父子級複選框的框架中（比如樹形選擇器）應準確反映其狀態，
例如當所屬的幾個子複選框並非都處於同一狀態時，父級複選框應該處於「不確定狀態」（由破折號反映）。
四、關於「選擇」這件事
這裡我們先拋開「check box」這個互動元件，單純的來談下如果一個互動元件或者互動模式要滿足使用者完成「選擇」這個任務需要具備幾個要素（概念來源於Hozin老師）。
對於「未選中」的選項易於識別
從「未選中」到「選中」到過程易於操作
「已選中」的選項容易識別
方便使用者取消「已選中」
「不可選」的選項容易讓使用者判別並瞭解原因
當一個元件滿足以上五點時才能算得上是一個好用的易於完成選擇任務的互動元件或者互動模式。
五、文末小結
對於「Check Box 多選框」的介紹到這裡算是結束了，它很多的注意點與竅門與「radio button」「switich」十分雷同，所以這裡小編就不展開過多贅述，如果有不太清楚的小夥伴可以去翻看我之前的「手把手帶你重新認識Radio Button」與「為什麼總監說我連開關元件都用不好」兩篇文章。
同時最後留個小問題，各位觀眾老爺們如果使用者要完成多選任務的話，有哪些互動元件或者互動模式是符合上述五點的要求並且可以讓使用者優雅的完成多選任務？有想法的朋友可以在評論區留言哦。
相關知識推薦：手把手帶你重新認識Radio Button
作者：月亮與六便士；公眾號：月亮體驗設計坊
本文由 @月亮與六便士 原創釋出於人人都是產品經理，未經作者許可，禁止轉載。
題圖來Pexels，基於CC0協議。