Halo，這里是設(shè)計(jì)夾，今天為大家分享的是「復(fù)選框設(shè)計(jì)」。

??復(fù)選框（Checkbox）是設(shè)計(jì)中常用到的組件，在B端表單設(shè)計(jì)中用得尤其頻繁。看起來雖然很簡單，但復(fù)選框的尺寸、顏色和位置仍值得我們仔細(xì)考慮，以確保讓用戶更容易理解和使用。

我們首先來介紹最基礎(chǔ)的復(fù)選框樣式，其次分析復(fù)選框+描述/icon/數(shù)值/圖像等多種類型的復(fù)選框形式，最后總結(jié)設(shè)計(jì)復(fù)選框時(shí)的五點(diǎn)注意事項(xiàng)，全面掌握復(fù)選框的設(shè)計(jì)～

一、基礎(chǔ)復(fù)選框

最基礎(chǔ)的復(fù)選框由復(fù)選框+文本標(biāo)簽組成。點(diǎn)擊選中，會(huì)有一個(gè)復(fù)選框選中的效果，取消選中時(shí)復(fù)選框顯示為灰色描邊的方塊。

1. 狀態(tài)

復(fù)選框常見的三種基本狀態(tài)是：未選中、選中和不確定狀態(tài)。

不確定狀態(tài)常用的場景是在級(jí)聯(lián)選擇器中，例如一級(jí)復(fù)選框能控制所有二級(jí)復(fù)選框的內(nèi)容。如果有的二級(jí)勾選了，有的沒勾選，那么一級(jí)復(fù)選框的狀態(tài)就會(huì)判定為不確定。

2. 尺寸

在用一個(gè)產(chǎn)品中，建議頁面中的所有復(fù)選框都使用相同的尺寸，這樣有助于保持設(shè)計(jì)一致性。當(dāng)然在某些特殊的場景下，也可以更改復(fù)選框的尺寸來靈活適應(yīng)。

例如，某些頁面的復(fù)選框比其他頁面的復(fù)選框更重要或者更頻繁使用，就可以將它們放大來吸引用戶的注意力。

是否需要設(shè)計(jì)不同尺寸的復(fù)選框取決于復(fù)選框的數(shù)量、標(biāo)簽的長度、選項(xiàng)的重要性等因素。

將以上提到的復(fù)選框的不同狀態(tài)和尺寸混合起來，可以組合成基礎(chǔ)的復(fù)選框組件。

二、帶有描述的復(fù)選框

復(fù)選框下方的描述通常用來解釋說明該復(fù)選框的功能，或者為復(fù)選框提供功能說明。

這種額外的描述性文字盡量控制在兩行以內(nèi)，為用戶帶來更清晰的體驗(yàn)。

1. 設(shè)計(jì)分析

如果對(duì)這種類型的復(fù)選框采用左居中對(duì)齊方式，將復(fù)選框位于中心，看起來就會(huì)很奇怪：

復(fù)選框應(yīng)該始終保持與主文字左對(duì)齊，可以在距頂行幾個(gè)像素的地方對(duì)齊復(fù)選框。

三、帶提示 icon 的復(fù)選框

復(fù)選框上的信息圖標(biāo)也用來解釋說明關(guān)于復(fù)選框的附加信息。當(dāng)鼠標(biāo)懸停在信息圖標(biāo)上時(shí)，顯示對(duì)應(yīng)的信息提示。

1. 設(shè)計(jì)分析

這里的對(duì)齊方式與基礎(chǔ)復(fù)選框的對(duì)齊方式相同，保持水平對(duì)齊所有內(nèi)容。

四、帶附加文本的復(fù)選框

這里的附加文本常用來展示數(shù)量。例如在產(chǎn)品列表的過濾器中，在左側(cè)顯示屬性(顏色、尺寸或品牌)，在右側(cè)顯示具體的數(shù)量。

又或者在 CRM 系統(tǒng)中，用來過濾不同狀態(tài)的任務(wù)量。

五、帶圖片的復(fù)選框

通過復(fù)選框+圖片相結(jié)合的展示方式，用戶更容易理解他們正在選擇什么。例如看到有同事照片和信息的復(fù)選框，就更容易將任務(wù)分配給他。

1. 設(shè)計(jì)分析

這種類型的復(fù)選框中，首先要保持復(fù)選框與圖像水平居中對(duì)齊。如果有兩行字段，需要將字段與圖像保持上下對(duì)齊，讓整體更協(xié)調(diào)。

六、復(fù)選框設(shè)計(jì)注意點(diǎn)

1. 復(fù)選框和單選按鈕視覺上有差異

在產(chǎn)品設(shè)計(jì)中，方塊通常表示復(fù)選框，圓圈用來表示單選按鈕。這種視覺上的區(qū)別有助于用戶理解兩種控件之間的區(qū)別，并正確地使用它們。

2. 對(duì)單個(gè)復(fù)選框進(jìn)行右對(duì)齊

如果字段文字較多出現(xiàn)折行的情況，復(fù)選框應(yīng)該始終與第一行字段保持對(duì)齊，而不是跟隨整個(gè)文本框居中對(duì)齊。

否則就會(huì)產(chǎn)生類似右圖的效果，看起來很奇怪。

3. 盡量垂直對(duì)齊復(fù)選框

在設(shè)計(jì)中，盡可能使用垂直對(duì)齊復(fù)選框的原因：

可以讓選項(xiàng)更易于閱讀和理解；讓復(fù)選框組更加緊湊，節(jié)省空間；垂直對(duì)齊能讓每個(gè)復(fù)選框在視覺上區(qū)分更加明顯。

當(dāng)然在某些場景中，也可以采用水平對(duì)齊的方式，具體用法需要靈活選擇。

4. 超過 7 個(gè)選項(xiàng)使用多選標(biāo)簽

多選標(biāo)簽?zāi)軌蚝芎玫靥娲哂衅邆€(gè)以上選項(xiàng)的復(fù)選框(5±2 規(guī)則)。允許用戶輕松點(diǎn)選和取消選擇多個(gè)選項(xiàng)，而不需要在復(fù)選框列表中再次去選擇并取消。

5. 擴(kuò)大可點(diǎn)擊區(qū)域

這可能是新手設(shè)計(jì)師和開發(fā)最常犯的錯(cuò)誤之一?？牲c(diǎn)擊區(qū)域應(yīng)該比帶有復(fù)選框和文本的區(qū)域要大得多，這樣能方便用戶操作和選擇。

最后

以上是「復(fù)選框」的類型+用法設(shè)計(jì)分析，希望這些學(xué)習(xí)能幫助大家更快更好地進(jìn)行表單設(shè)計(jì)！

慢慢來比較快，如覺得有幫助，請(qǐng)點(diǎn)個(gè)贊，謝謝！

作者：Clip設(shè)計(jì)夾