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

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

01 基礎(chǔ)復(fù)選框

最基礎(chǔ)的復(fù)選框由復(fù)選框+文本標簽組成。點擊選中，會有一個復(fù)選框選中的效果，取消選中時復(fù)選框顯示為灰色描邊的方塊。

狀態(tài)

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

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

尺寸

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

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

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

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

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

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

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

設(shè)計分析

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

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

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

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

設(shè)計分析

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

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

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

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

05 帶圖片的復(fù)選框

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

設(shè)計分析

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

06 復(fù)選框設(shè)計注意點

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

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

2）對單個復(fù)選框進行右對齊

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

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

3）盡量垂直對齊復(fù)選框

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

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

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

4）超過7個選項使用多選標簽

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

5）擴大可點擊區(qū)域

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

最后

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