起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)復(fù)選框類型+用法設(shè)計(jì)分析！B端表單設(shè)計(jì)必備
復(fù)選框（Checkbox）是設(shè)計(jì)中常用到的組件，在B端表單設(shè)計(jì)中用得尤其頻繁?？雌饋黼m然很簡(jiǎn)單，但復(fù)選框的尺寸、顏色和位置仍值得我們仔細(xì)考慮，以確保讓用戶更容易理解和使用。
我們首先來介紹最基礎(chǔ)的復(fù)選框樣式，其次分析復(fù)選框+描述/icon/數(shù)值/圖像等多種類型的復(fù)選框形式，最后總結(jié)設(shè)計(jì)復(fù)選框時(shí)的五點(diǎn)注意事項(xiàng)，全面掌握復(fù)選框的設(shè)計(jì)～
01 基礎(chǔ)復(fù)選框
最基礎(chǔ)的復(fù)選框由復(fù)選框+文本標(biāo)簽組成。點(diǎn)擊選中，會(huì)有一個(gè)復(fù)選框選中的效果，取消選中時(shí)復(fù)選框顯示為灰色描邊的方塊。
狀態(tài)
復(fù)選框常見的三種基本狀態(tài)是：未選中、選中和不確定狀態(tài)。
不確定狀態(tài)常用的場(chǎng)景是在級(jí)聯(lián)選擇器中，例如一級(jí)復(fù)選框能控制所有二級(jí)復(fù)選框的內(nèi)容。如果有的二級(jí)勾選了，有的沒勾選，那么一級(jí)復(fù)選框的狀態(tài)就會(huì)判定為不確定。
尺寸
在用一個(gè)產(chǎn)品中，建議頁面中的所有復(fù)選框都使用相同的尺寸，這樣有助于保持設(shè)計(jì)一致性。當(dāng)然在某些特殊的場(chǎng)景下，也可以更改復(fù)選框的尺寸來靈活適應(yīng)。
例如，某些頁面的復(fù)選框比其他頁面的復(fù)選框更重要或者更頻繁使用，就可以將它們放大來吸引用戶的注意力。
是否需要設(shè)計(jì)不同尺寸的復(fù)選框取決于復(fù)選框的數(shù)量、標(biāo)簽的長度、選項(xiàng)的重要性等因素。
將以上提到的復(fù)選框的不同狀態(tài)和尺寸混合起來，可以組合成基礎(chǔ)的復(fù)選框組件。
02 帶有描述的復(fù)選框
復(fù)選框下方的描述通常用來解釋說明該復(fù)選框的功能，或者為復(fù)選框提供功能說明。
這種額外的描述性文字盡量控制在兩行以內(nèi)，為用戶帶來更清晰的體驗(yàn)。
設(shè)計(jì)分析
如果對(duì)這種類型的復(fù)選框采用左居中對(duì)齊方式，將復(fù)選框位于中心，看起來就會(huì)很奇怪：
復(fù)選框應(yīng)該始終保持與主文字左對(duì)齊，可以在距頂行幾個(gè)像素的地方對(duì)齊復(fù)選框。
03 帶提示icon的復(fù)選框
復(fù)選框上的信息圖標(biāo)也用來解釋說明關(guān)于復(fù)選框的附加信息。當(dāng)鼠標(biāo)懸停在信息圖標(biāo)上時(shí)，顯示對(duì)應(yīng)的信息提示。
設(shè)計(jì)分析
這里的對(duì)齊方式與基礎(chǔ)復(fù)選框的對(duì)齊方式相同，保持水平對(duì)齊所有內(nèi)容。
04 帶附加文本的復(fù)選框
這里的附加文本常用來展示數(shù)量。例如在產(chǎn)品列表的過濾器中，在左側(cè)顯示屬性(顏色、尺寸或品牌)，在右側(cè)顯示具體的數(shù)量。
又或者在CRM系統(tǒng)中，用來過濾不同狀態(tài)的任務(wù)量。
05 帶圖片的復(fù)選框
通過復(fù)選框+圖片相結(jié)合的展示方式，用戶更容易理解他們正在選擇什么。例如看到有同事照片和信息的復(fù)選框，就更容易將任務(wù)分配給他。
設(shè)計(jì)分析
這種類型的復(fù)選框中，首先要保持復(fù)選框與圖像水平居中對(duì)齊。如果有兩行字段，需要將字段與圖像保持上下對(duì)齊，讓整體更協(xié)調(diào)。
06 復(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)然在某些場(chǎ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ì)！
專欄作家
作者：Clippp，微信公眾號(hào)：Clip設(shè)計(jì)夾。每周精選設(shè)計(jì)文章，專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計(jì)思考。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
感謝作者學(xué)習(xí)到了
學(xué)習(xí)了，最近正在畫一些原型圖，感謝作者?。?！