編輯導(dǎo)讀：【多選框】是一個(gè)常用的交互設(shè)計(jì)組件，能幫助用戶勾選多個(gè)選項(xiàng)，是一項(xiàng)基礎(chǔ)的功能組件。本文作者圍繞【多選框】，提出了幾點(diǎn)設(shè)計(jì)要點(diǎn)，一起來(lái)看一下吧。

最近講了這么多交互設(shè)計(jì)組件，終于等到了要寫(xiě)「Check Box 多選框」的時(shí)候。就小編自身而言其實(shí)蠻不想寫(xiě)「多選框」這部分內(nèi)容的，其原因有二：首先就小編自己做這么多年設(shè)計(jì)其實(shí)蠻討厭做多選類的需求，其中都是深坑真是坑了又坑；再者前幾篇組件短文當(dāng)中已經(jīng)把一些注意點(diǎn)都講的七七八八，這些類似點(diǎn)沿用到「多選框」身上也八九不離十。

但是本著處女座心態(tài)，漏點(diǎn)東西總覺(jué)得不太舒服，今天還是簡(jiǎn)短的把「多選框」能想到的點(diǎn)寫(xiě)一寫(xiě)，希望各位看官賞臉。

一、「Check Box 多選框」的隱喻

經(jīng)歷過(guò)讀書(shū)時(shí)代考試的同學(xué)們應(yīng)該都對(duì)答題卡記憶猶新，其實(shí)它作為「Check Box 多選框」在物理世界當(dāng)中的隱喻本體再適合不過(guò)了，兩者同時(shí)都兼有在一堆互斥的后選項(xiàng)當(dāng)中選取一個(gè)或者幾個(gè)作為反饋答案的功能。（此靈感概念來(lái)源于Hozin老師）

二、「Check Box 多選框」的含義

1.「Check Box 多選框」交互定義

幫助用戶完成從若干個(gè)互斥的選項(xiàng)集合當(dāng)中選取一個(gè)或者多個(gè)后選項(xiàng)任務(wù)的交互形式稱作為「Check Box 多選框」。

我們根據(jù)定義其實(shí)可以得出「Check Box 多選框」的兩個(gè)重要特質(zhì)：

• 從多個(gè)后選項(xiàng)當(dāng)中選擇，完成N選N的任務(wù)。
• 其實(shí)當(dāng)后選項(xiàng)數(shù)量為一個(gè)時(shí)，「Check Box 多選框」還能當(dāng)作開(kāi)關(guān)使用（記住這點(diǎn)哦，以后還會(huì)重點(diǎn)講解）。

2.「Check Box 多選框」交互形態(tài)

「Check Box 多選框」的交互形態(tài)其實(shí)與「Radio button」比較相似，兩者的共同點(diǎn)都具有「選中」、「未選中」、「不可選」三態(tài)，但是「Check Box 多選框」比較獨(dú)特的是還存在一個(gè)「不確定」的狀態(tài)，往往在出現(xiàn)在父子構(gòu)造的多選框當(dāng)中。

3.「Check Box 多選框」視覺(jué)樣式

在尼爾森諾曼集團(tuán)的官網(wǎng)文章當(dāng)中特別指出「Check Box 多選框」應(yīng)該使用標(biāo)準(zhǔn)的視覺(jué)表示。具體形式就是復(fù)選框應(yīng)該是一個(gè)小方塊，選中時(shí)帶有復(fù)選標(biāo)記。

https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/

當(dāng)然負(fù)責(zé)視覺(jué)的設(shè)計(jì)師有想象力是好的，但是它獨(dú)有的視覺(jué)樣式已經(jīng)存在超過(guò)20年，突然改變用戶心中的形象，應(yīng)該不是個(gè)優(yōu)雅的設(shè)計(jì)，強(qiáng)如微信設(shè)計(jì)團(tuán)隊(duì)的視覺(jué)設(shè)計(jì)師也有一顆改變世界的心。

三、一些能想到的小竅門(mén)

由于前幾篇「radio button」「toggle」相關(guān)一些短文內(nèi)講到的小技巧與「Check Box 多選框」多有重復(fù)，所以這里小編盡量再擠點(diǎn)干貨出來(lái)。

1. 關(guān)于「Check Box 多選框」的布局

當(dāng)時(shí)在「手把手帶你重新認(rèn)識(shí)Radio Button」一文當(dāng)中提出單選按鈕最好從上往下排列后選項(xiàng)，其實(shí)在「Check Box 多選框」一般情況下，也是推薦垂直排列多個(gè)復(fù)選框，這樣更容易區(qū)分它們的狀態(tài)。

但是如果復(fù)選框數(shù)量有很多，那不斷往下拉也會(huì)讓用戶十分頭疼，在這種情況下我們完全可以用「Toggle Token」來(lái)替代使用「Check Box」，因?yàn)樗耐庠跇邮皆斐闪怂鼨M向排列不會(huì)出問(wèn)題，可以讓用戶很好的識(shí)別出后選項(xiàng)之間的差異。

2. 積極主動(dòng)的標(biāo)簽措辭

對(duì)復(fù)選框標(biāo)簽使用積極主動(dòng)的措辭，以便讓用戶清楚如果勾選復(fù)選框會(huì)發(fā)生什么。換句話說(shuō)假如有一個(gè)選項(xiàng)是“不要給我發(fā)更多的電子郵件”那么用戶就會(huì)有一種被要挾之感，破壞了用戶體驗(yàn)，同時(shí)這種情況往往在使用「single check box」場(chǎng)景下比較多出現(xiàn)。

這里肯定有人會(huì)問(wèn)什么叫「single check box」請(qǐng)看下圖：

3. 擴(kuò)大點(diǎn)選區(qū)域

本質(zhì)上「Check Box 多選框」點(diǎn)擊區(qū)域很小，因此，根據(jù)菲茨定律，它們跟「radio button」一樣可能很難被點(diǎn)擊到。所以我們要要擴(kuò)大目標(biāo)點(diǎn)擊區(qū)域，讓用戶可以點(diǎn)擊一個(gè)選項(xiàng)（包括相關(guān)標(biāo)簽），而不是點(diǎn)擊那個(gè)小方塊。

4. 「single check box」的開(kāi)關(guān)屬性

在某些設(shè)計(jì)系統(tǒng)（比如蘋(píng)果macOS）之下會(huì)建議將「single check box」看作是一種首選項(xiàng)的控制開(kāi)關(guān)，當(dāng)總控制的「single check box」未選中時(shí)，相關(guān)的首選項(xiàng)都是不可用的，只有選中「single check box」時(shí)所屬的選項(xiàng)才能進(jìn)行配置。

5. 合理時(shí)使用不確定狀態(tài)

在一些父子級(jí)復(fù)選框的框架中（比如樹(shù)形選擇器）應(yīng)準(zhǔn)確反映其狀態(tài)，例如當(dāng)所屬的幾個(gè)子復(fù)選框并非都處于同一狀態(tài)時(shí)，父級(jí)復(fù)選框應(yīng)該處于「不確定狀態(tài)」（由破折號(hào)反映）。

四、關(guān)于「選擇」這件事

這里我們先拋開(kāi)「check box」這個(gè)交互組件，單純的來(lái)談下如果一個(gè)交互組件或者交互模式要滿足用戶完成「選擇」這個(gè)任務(wù)需要具備幾個(gè)要素（概念來(lái)源于Hozin老師）。

• 對(duì)于「未選中」的選項(xiàng)易于識(shí)別
• 從「未選中」到「選中」到過(guò)程易于操作
• 「已選中」的選項(xiàng)容易識(shí)別
• 方便用戶取消「已選中」
• 「不可選」的選項(xiàng)容易讓用戶判別并了解原因

當(dāng)一個(gè)組件滿足以上五點(diǎn)時(shí)才能算得上是一個(gè)好用的易于完成選擇任務(wù)的交互組件或者交互模式。

五、文末小結(jié)

對(duì)于「Check Box 多選框」的介紹到這里算是結(jié)束了，它很多的注意點(diǎn)與竅門(mén)與「radio button」「switich」十分雷同，所以這里小編就不展開(kāi)過(guò)多贅述，如果有不太清楚的小伙伴可以去翻看我之前的「手把手帶你重新認(rèn)識(shí)Radio Button」與「為什么總監(jiān)說(shuō)我連開(kāi)關(guān)組件都用不好」兩篇文章。同時(shí)最后留個(gè)小問(wèn)題，各位觀眾老爺們?nèi)绻脩粢瓿啥噙x任務(wù)的話，有哪些交互組件或者交互模式是符合上述五點(diǎn)的要求并且可以讓用戶優(yōu)雅的完成多選任務(wù)？有想法的朋友可以在評(píng)論區(qū)留言哦。

相關(guān)知識(shí)推薦：手把手帶你重新認(rèn)識(shí)Radio Button

作者：月亮與六便士；公眾號(hào)：月亮體驗(yàn)設(shè)計(jì)坊

本文由 @月亮與六便士 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)Pexels，基于CC0協(xié)議。