編輯導(dǎo)讀：開關(guān)不僅是生活中必不可少的組件，在產(chǎn)品設(shè)計中的地位也是非常重要。本文作者基于自身工作經(jīng)驗，圍繞選擇控件展開分析，希望對你有幫助。

“toggle”這個詞是指一個帶有短柄的開關(guān)，每次啟動時，它都會在兩種狀態(tài)之間切換，每次 “開關(guān) “車燈的時候都會使用上它。

至于“Radio Buttons”這個詞來自于汽車收音機，通常的做法是在儀表盤下有一組按鈕，可以機械地存儲電臺預(yù)設(shè)，以便用戶更快地在電臺之間切換。按下其中一個按鈕會使其保持向下，直到按下另一個按鈕，才會彈出。

一、選擇類控件的類型

復(fù)選框（Checkboxes）—— 當有一個或多個獨立選項時，用戶可以選擇任意數(shù)量的選項，包括零個、一個或多個選項。

單選按鈕（Radio Buttons）—— 當有兩個或更多互斥的選項時，用戶只能選擇其中一個時。

切換開關(guān)（Toggle Switches）—— 當有兩個互斥選項并且總是有一個默認值時使用。撥動開關(guān)即立即生效。

選擇標簽（Choice Chips）—— 是單選按鈕的一個替代方案。包含至少兩個選項，選擇標簽代表用戶可以做出的單一選擇。

多選標簽（Multi-select chips）—— 是復(fù)選框的一個替代方案。允許用戶選擇多個選項，主要用于移動端上進行篩選。

選擇類型的控件在用戶界面中已經(jīng)使用了很長一段時間，所以我們對它們的行為有了強烈的期望。下面是一個簡單的備忘單，你可以根據(jù)它為正確的情況選擇正確的類型。

怎么樣知道什么時候該使用什么類型的控件？

上圖的靈感來源于Nilsen Norman Group的文章“復(fù)選框 vs. 單選按鈕”（注：上圖看不懂的同學(xué)可以看下圖）。

二、選擇類控件的狀態(tài)

復(fù)選框和單選按鈕可以選擇或取消選擇，切換開關(guān)可以關(guān)閉或開啟。所有這些都有啟用、禁用、懸停、聚焦和按下狀態(tài)。我知道這看起來很多，但是為了可靠的交互，創(chuàng)建所有這些狀態(tài)是好的。

選擇類控件的狀態(tài)

三、不要忘記為“不確定（indeterminate）”設(shè)計不同狀態(tài)

“indeterminate”表現(xiàn)為既不勾選也不取消勾選的復(fù)選框的狀態(tài)。該狀態(tài)并非完全肯定，因此命名為“indeterminate”?？梢岳斫鉃楫斠粋€父復(fù)選框有多個子復(fù)選框時，有些子復(fù)選框被選中，有些則未被選中。

“indeterminate”的不同狀態(tài)

四、禁止濫用切換開關(guān)

不要為切換開關(guān)創(chuàng)建層次結(jié)構(gòu)。這在視覺上更容易分散注意力，而且會造成一種錯誤的印象，即所有的子選項都是開著/關(guān)著的。

實用技巧：禁止濫用開關(guān)按鈕。

五、當選擇即生效時，請使用開關(guān)

切換開關(guān)是一種數(shù)字開關(guān)。任何由切換開關(guān)觸發(fā)的效果應(yīng)立即生效。如果不是這樣，最好用單個復(fù)選框替換切換開關(guān)。

實用技巧：當選擇即將生效時，請使用切換開關(guān)。

六、不符合當下設(shè)計標準的樣式會使用戶困惑

任何偏離你所設(shè)計的平臺標準的行為都會給用戶帶來額外的認知負擔(dān)，我經(jīng)?？吹綀A形復(fù)選框很容易與單選按鈕混淆。

實用技巧：不符合當下標準的設(shè)計會混淆用戶的感觀。

七、在垂直列表中顯示選項將幫助用戶輕松地掃描它們

左側(cè)對齊的控件和標簽將發(fā)揮最佳效果，因為它們相互之間的位置緊密，這將最快的支持完成時間并減少較少的錯誤。

但是右對齊的控件在移動端有一些好處，因為標簽和按鈕之間不能相隔太遠，讓按鈕靠近右側(cè)邊緣，使得單手握住設(shè)備時更容易觸及。同時，我們在選擇時也不會用手指遮擋標簽。

實用技巧：左對齊的控件和標簽效果最好。

八、如果垂直空間出問題，考慮標簽

你應(yīng)該防止出現(xiàn)很難看清選擇哪個控件的情況（確保按鈕和文本標簽的間距），可以考慮使用選擇標簽以此來在視覺上清晰地分隔選項。

實用技巧：當垂直空間出現(xiàn)問題，可以考慮使用選擇標簽。

九、如果可以的話，使用單選按鈕而不是下拉菜單

讓所有選項都可見，使用戶可以方便地進行比較，這樣可以減少認知負荷，幫助表單也更加透明。

實用技巧：如果只有幾個選項，請使用單選按鈕。

十、對數(shù)量多或類似的選項使用下拉菜單

如果選項的數(shù)量超過6-7個，你應(yīng)該考慮把它們放在下拉列表中，因為用戶無論如何都無法記住所有的選項。這同樣適用于可預(yù)測的、類似的或增量的選項，如(縮放- 10%、20%、30% )。

實用技巧：為數(shù)量較多且相類似的選項選擇用下拉菜單整合。

十一、在默認情況下最好有一個選中的單選按鈕

一旦選擇了一個單選按鈕，用戶可能就不能取消選擇，也不能將其設(shè)置回原來的狀態(tài)。如果用戶不想做選擇，你應(yīng)該提供一個標有 “無 “的單選按鈕。按邏輯順序設(shè)計選項列表，并利用“默認”的能力。

實用技巧：在大多數(shù)情況下，默認選擇一個單選按鈕。

十二、寫清楚文本標簽，避免否定詞

避免用戶為了避免某些事情發(fā)生而需要打勾的情況。

實用技巧：寫清文本標簽，避免否定詞語。

十三、高亮顯示選中的選項以吸引用戶的注意

在視覺上區(qū)分所選選項與其他選項，這對于數(shù)據(jù)表中的行選擇尤其重要。

實用技巧：高亮顯示所選選項以此吸引用戶的注意。

十四、支持批量選擇和清除

一次選擇或清除多個項目對用戶來說應(yīng)該是毫不費力的。

實用技巧：設(shè)計成支持批量選擇和清除多個選項的列表。

十五、使可點擊區(qū)域足夠大，以實現(xiàn)可靠的交互

熱區(qū)中可點擊/可點擊區(qū)域中應(yīng)同時包含按鈕和標簽。根據(jù)菲茨定律，目標的大小起著重要作用。復(fù)選框和單選按鈕一般都很小，點擊或點選會很麻煩，尤其是在移動設(shè)備上。

實用技巧：使控件的可點擊區(qū)域足夠大，以便進行可靠的交互

作者：LDesign1，公眾號ID：LDesign1

本文由@LDesign1 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash， 基于CC0協(xié)議