Halo，這里是設計夾，今天為大家分享的是「復選框設計」。

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

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

更多控件設計干貨：

一、基礎復選框

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

1. 狀態

復選框常見的三種基本狀態是：未選中、選中和不確定狀態。

不確定狀態常用的場景是在級聯選擇器中，例如一級復選框能控制所有二級復選框的內容。如果有的二級勾選了，有的沒勾選，那么一級復選框的狀態就會判定為不確定。

2. 尺寸

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

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

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

將以上提到的復選框的不同狀態和尺寸混合起來，可以組合成基礎的復選框組件。

二、帶有描述的復選框

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

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

1. 設計分析

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

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

三、帶提示 icon 的復選框

復選框上的信息圖標也用來解釋說明關于復選框的附加信息。當鼠標懸停在信息圖標上時，顯示對應的信息提示。

1. 設計分析

這里的對齊方式與基礎復選框的對齊方式相同，保持水平對齊所有內容。

四、帶附加文本的復選框

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

又或者在 CRM 系統中，用來過濾不同狀態的任務量。

五、帶圖片的復選框

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

1. 設計分析

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

六、復選框設計注意點

1. 復選框和單選按鈕視覺上有差異

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

2. 對單個復選框進行右對齊

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

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

3. 盡量垂直對齊復選框

在設計中，盡可能使用垂直對齊復選框的原因：

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

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

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

多選標簽能夠很好地替代具有七個以上選項的復選框(5±2 規則)。允許用戶輕松點選和取消選擇多個選項，而不需要在復選框列表中再次去選擇并取消。

5. 擴大可點擊區域

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

最后

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

慢慢來比較快，如覺得有幫助，請點個贊，謝謝！

歡迎關注作者微信公眾號：「Clip設計夾」