2021-8-29 濤濤
編輯導讀：在很多設計中，選擇錄入類組件的理解和使用都比較模棱兩可，很多其他產品在實際應用中往往也不夠規范，使產品體驗的一致性受到影響。本文將具體探究下這幾種組件的特性和適用場景，與你分享。
不久前在進行一個Web端HRM系統的需求設計，場景是對于從企業離職的員工，HR可以根據員工能力和表現選擇是否將其設置為優秀離職人才，對于優秀離職人才將進行定期關懷，以便后續重新返聘的可能。在設計過程中，對于設置優秀離職人才這個交互，感覺使用單選框、多選框、開關都能達到目的，究竟哪一種組件才是最合理的選擇呢？
這個問題讓我回想起之前在很多設計中對于這幾種選擇錄入類組件的理解和使用都比較模棱兩可，很多其他產品在實際應用中往往也不夠規范，使產品體驗的一致性受到影響。本文將具體探究下這幾種組件的特性和適用場景：
1）單選框
單選框一般被認為來源于收音機(Radio)上的物理按鈕，當一個按鈕被按下時，另一個按鈕將會被彈起，使得永遠只有一個按鈕處于被按下的狀態。
這種說法可能也不夠嚴謹，因為收音機上的按鈕在被按下后，不僅呈現出了“按下”的狀態，同時也會立馬觸發收音機的廣播，即立即生效。實際上絕大多數UI界面中無論單選框還是多選框一般都是僅作為錄入，觸發生效往往需要配合“提交”操作來進行。
2）多選框
多選框來源于生活中常見的各種多項選擇場景，如飯店菜單、考試多選題等。多選框一般也是作為內容錄入的組件，一般在進行選擇后同樣需要配合后續的“提交”動作，就像選擇菜品后下單，選擇答案后交卷，這種“選擇類”場景多用在表單或者表格中。
多選框還有另一種“設置類”場景，這種場景下多選框用于啟用某種模式、應用某項設置，與開關（Switch）非常類似，這也使得多選框在實際產品中的應用要比單選框復雜得多，后文將詳細闡述多選框與開關的使用區別。
1）單選框
可以概括為從最少兩個或兩個以上的互斥關系選項之中選擇一項的組件，外觀樣式通常由“圓形外框+文字標簽”組成，選中時圓形外框樣式發生改變表明選中狀態。
2）多選框
可以概括為從多個并列關系的選項中選擇多個的組件，多選框最少可以一個都不選。外觀樣式通常由“圓形或方形外框+文字標簽”組成，選中時一般在外框中出現√表明選中狀態。與單選框相比多選框還有一種特殊的“半選中狀態”（half-selected）,一般出現在表格（Table）或者樹選擇（Tree select）中。
1）觸發區域
單選框和多選框本身外框尺寸都比較小，因此需要將觸發區域增大至整個標簽范圍，方便用戶點擊
2）排版
單選框和多選框在B端各類表單中應用較多，在頁面空間允許的范圍內，最好將選項縱向對齊排列，方便用戶直觀比較，需要橫向排布時，選項間應該設置清晰明顯的間隔。
3）單選框的容錯機制
單選框在選擇過后一定要有一個選中項，因此就不能恢復至“空狀態”。在比較典型的社交場景中，一些涉及隱私的信息比如婚姻狀態選擇，可以給用戶提供諸如“保密”“不展示”之類的選項，防止用戶在選擇之后無法回退。
對比單選框、多選框和下拉選擇的外觀樣式不難發現，它們之間最重要的區別在于信息傳達效率和包容度的不同。
1）單選框和多選框的特點
單選框和多選框的所有選項信息都是直接暴露出來，如果選項過多將占用較多界面空間并且影響用戶的閱讀效率和界面整體規整度，信息包容度低但信息傳達直觀高效；
2）下拉選擇的特點
下拉選擇則是收在下拉菜單里，只有選擇值是用戶一眼能看到的，信息包容度高，節省空間，與其他輸入類組件并用時能保持整體界面的規整度，但每次都得點開再進行選擇也犧牲了一定的信息傳達效率和操作便利性。
3）適用單選框和多選框的場景
因此，單選框和多選框更適用于選項數量較少（一般不超過5個），有一定界面編排空間，且用戶需要直觀看到不同選項內容并進行比較選擇的場景，如選擇會員購買方案。
4）適用下拉選擇的場景
相反，下拉選擇更適用于選項數量較多，表單配置復雜、包含各類不同樣式組件或界面空間不足，且用戶對于被隱藏的選項內容有一定預期的場景，比如選擇省份。同時下拉器擴展性更高，下拉菜單可以進行多種類型的變體設計，滿足不同業務場景的需求。
開關（Switch）這個組件就是模仿現實生活中的開關而設計的，現實生活中燈的開關一按，燈馬上就亮了，因此開關有一個最大的特征：即時性。這在Ant Design設計系統的全局規則中也給出了注釋：“當用戶切換「開關」按鈕將直接觸發狀態改變“，因此不同于單選框和多選框這種錄入型組件，開關同時兼備錄入和觸發兩種屬性。
開關是一種特殊的選擇組件，只能從“開啟/關閉”兩種狀態選擇其一，并且選擇的結果會立即生效，通常點擊后頁面或者開關本身會有加載效果，或者點擊后給出反饋，告知用戶操作已生效。
上面提到復選框也經常作為開啟某種模式或者應用某類設置使用，在這種場景下它與開關的邏輯十分相似，讓人容易混淆。對于這兩種組件的使用區別當前已有很多討論，說法各異，這里根據我自己的探究和經驗，從以下幾點闡述下自己的看法：
1）開關的即時性
開關的即時性決定了當開關與需要提交的表單一起出現時會存在矛盾，因此在表單中進行狀態選擇時，盡量選擇單選框、多選框，避免使用開關。
2）開關更適合控制一組設置嗎
蘋果官方人機界面指南中指出“開關比復選框具有更多的視覺權重，因此當它控制的功能比復選框通常更多時，它看起來更好。例如，您可以使用開關讓人們打開或關閉一組設置”，然而在復選框的設計指南中又舉了用復選框控制一組設置的例子。
再來看一個飛書的例子，飛書管理后臺中使用了開關來控制一組設置的開啟，而在飛書客戶端的設置里用的都是復選框。
對于這個問題，個人認為蘋果官方人機指南所說的因為開關比復選框具有更多視覺權重，所以更適合用來控制一組設置的說法并不準確，復選框本身也具有明顯的選中和非選中狀態，盡管開關組件自身大小以及在視覺效果上可進行設計的空間都更大，但是好像并不足以成為決定性的因素。
同時因為開關的即時性，如果是在需要提交的表單或者模態彈窗中用開關控制一組設置，反而是多選框更合適。
3）從組件的來源分析
從組件的來源及發展歷史來看，勾選的交互是基于PC鍵鼠操作設計的，單選框和多選框組件本身尺寸較小，因而觸發區域會擴大至整體標簽區域，方便鼠標點擊；而開關是誕生于移動設備觸控交互的組件，在移動端界面本身配置就比較簡化，這時候配合開關自身相對較大的觸發區域，用手指點擊起來非常方便順暢。
而在PC端，因為屏幕尺寸更大，同時很多B端系統配置項多、界面布局相較移動端要復雜很多，這時候要把鼠標移至開關熱區去點擊，反而沒有勾選框來得方便，這種操作體驗在一個縱列中有多個連續的開關時尤為明顯。
4）我的觀點
依據開關的即時生效特性，開關更適合用在不需要提交操作的頁面中，用來控制功能或設置的開啟/關閉，在需要提交操作的表單或者彈窗中，建議使用多選框。
開關和勾選框都可以用來控制一組設置的開啟/關閉，使用開關進行控制時，最好將它控制的下屬組件都設置為立即生效，這取決于設置本身對于系統的影響，如果設置對于系統重要功能影響較大，則建議改用多選框去控制，讓用戶多一步“提交”操作進行確認，提升容錯性。
回到開頭設置優秀離職人才場景中的組件問題，這個需求流程涉及到的不只是在離職人員的編輯彈窗中操作，還涉及到在離職人員表格中的狀態展示和設置優秀人才的單獨操作。首先彈窗中的編輯操作是需要提交的，用開關比較矛盾；單選框和多選框在彈窗中都可以適用，但考慮還需要在離職人員表格中的狀態展示和單獨編輯，為了保持整體的交互一致性，最后選用了單選框。
總的來說，這幾種選擇錄入類組件在B端系統中應用非常廣泛，可能正是因為太司空見慣了，所以容易忽略它們細節上的特性和區別。盡管有時候這些組件的使用問題并不會對用戶體驗產生決定性的影響，但對細節的探究正是設計師嚴謹的工作態度和工匠精神的體現，只有秉持著這種對細節的打磨和追求才能不斷提升產品的用戶體驗。
另外雖然文中做了一些各個組件的特性和適用總結，但可能在不同產品和系統中情況會更加復雜，需要設計師根據實際情況靈活處理。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務