編輯導讀_在很多設計中_選擇錄入類組件的理解和使用都比較模棱兩可_很多其他產品在實際應用中往往也不夠規范_使產品體驗的一致性受到影響。本文將具體探究下這幾種組件的特性和適用場景_與你分享。

一、前言

不久前在進行一個Web端HRM系統的需求設計_場景是對于從企業離職的員工_HR可以根據員工能力和表現選擇是否將其設置為優秀離職人才_對于優秀離職人才將進行定期關懷_以便后續重新返聘的可能。在設計過程中_對于設置優秀離職人才這個交互_感覺使用單選框、多選框、開關都能達到目的_究竟哪一種組件才是最合理的選擇呢？

這個問題讓我回想起之前在很多設計中對于這幾種選擇錄入類組件的理解和使用都比較模棱兩可_很多其他產品在實際應用中往往也不夠規范_使產品體驗的一致性受到影響。本文將具體探究下這幾種組件的特性和適用場景_

二、單選框（Radio）和多選框（Checkbox）

1._來源

1）單選框

單選框一般被認為來源于收音機(Radio)上的物理按鈕_當一個按鈕被按下時_另一個按鈕將會被彈起_使得永遠只有一個按鈕處于被按下的狀態。

這種說法可能也不夠嚴謹_因為收音機上的按鈕在被按下后_不僅呈現出了“按下”的狀態_同時也會立馬觸發收音機的廣播_即立即生效。實際上絕大多數UI界面中無論單選框還是多選框一般都是僅作為錄入_觸發生效往往需要配合“提交”操作來進行。

2）多選框

多選框來源于生活中常見的各種多項選擇場景_如飯店菜單、考試多選題等。多選框一般也是作為內容錄入的組件_一般在進行選擇后同樣需要配合后續的“提交”動作_就像選擇菜品后下單_選擇答案后交卷_這種“選擇類”場景多用在表單或者表格中。

多選框還有另一種“設置類”場景_這種場景下多選框用于啟用某種模式、應用某項設置_與開關（Switch）非常類似_這也使得多選框在實際產品中的應用要比單選框復雜得多_后文將詳細闡述多選框與開關的使用區別。

2._簡單定義及外觀樣式

1）單選框

可以概括為從最少兩個或兩個以上的互斥關系選項之中選擇一項的組件_外觀樣式通常由“圓形外框+文字標簽”組成_選中時圓形外框樣式發生改變表明選中狀態。

2）多選框

可以概括為從多個并列關系的選項中選擇多個的組件_多選框最少可以一個都不選。外觀樣式通常由“圓形或方形外框+文字標簽”組成_選中時一般在外框中出現√表明選中狀態。與單選框相比多選框還有一種特殊的“半選中狀態”（half-selected）,一般出現在表格（Table）或者樹選擇（Tree_select）中。

3._交互細節

1）觸發區域

單選框和多選框本身外框尺寸都比較小_因此需要將觸發區域增大至整個標簽范圍_方便用戶點擊

2）排版

單選框和多選框在B端各類表單中應用較多_在頁面空間允許的范圍內_最好將選項縱向對齊排列_方便用戶直觀比較_需要橫向排布時_選項間應該設置清晰明顯的間隔。

3）單選框的容錯機制

單選框在選擇過后一定要有一個選中項_因此就不能恢復至“空狀態”。在比較典型的社交場景中_一些涉及隱私的信息比如婚姻狀態選擇_可以給用戶提供諸如“保密”“不展示”之類的選項_防止用戶在選擇之后無法回退。

4._單選框、多選框和下拉選擇（Select）的使用辨析

對比單選框、多選框和下拉選擇的外觀樣式不難發現_她們之間最重要的區別在于信息傳達效率和包容度的不同。

1）單選框和多選框的特點

單選框和多選框的所有選項信息都是直接暴露出來_如果選項過多將占用較多界面空間并且影響用戶的閱讀效率和界面整體規整度_信息包容度低但信息傳達直觀高效；

2）下拉選擇的特點

下拉選擇則是收在下拉菜單里_只有選擇值是用戶一眼能看到的_信息包容度高_節省空間_與其他輸入類組件并用時能保持整體界面的規整度_但每次都得點開再進行選擇也犧牲了一定的信息傳達效率和操作便利性。

3）適用單選框和多選框的場景

因此_單選框和多選框更適用于選項數量較少（一般不超過5個）_有一定界面編排空間_且用戶需要直觀看到不同選項內容并進行比較選擇的場景_如選擇會員購買方案。

4）適用下拉選擇的場景

相反_下拉選擇更適用于選項數量較多_表單配置復雜、包含各類不同樣式組件或界面空間不足_且用戶對于被隱藏的選項內容有一定預期的場景_比如選擇省份。同時下拉器擴展性更高_下拉菜單可以進行多種類型的變體設計_滿足不同業務場景的需求。

三、開關（Switch）

1._來源

開關（Switch）這個組件就是模仿現實生活中的開關而設計的_現實生活中燈的開關一按_燈馬上就亮了_因此開關有一個最大的特征_即時性。這在Ant_Design設計系統的全局規則中也給出了注釋_“當用戶切換「開關」按鈕將直接觸發狀態改變“_因此不同于單選框和多選框這種錄入型組件_開關同時兼備錄入和觸發兩種屬性。

2._簡單定義及樣式

開關是一種特殊的選擇組件_只能從“開啟/關閉”兩種狀態選擇其一_并且選擇的結果會立即生效_通常點擊后頁面或者開關本身會有加載效果_或者點擊后給出反饋_告知用戶操作已生效。

3._開關和多選框的使用辨析

上面提到復選框也經常作為開啟某種模式或者應用某類設置使用_在這種場景下她與開關的邏輯十分相似_讓人容易混淆。對于這兩種組件的使用區別當前已有很多討論_說法各異_這里根據我自己的探究和經驗_從以下幾點闡述下自己的看法_

1）開關的即時性

開關的即時性決定了當開關與需要提交的表單一起出現時會存在矛盾_因此在表單中進行狀態選擇時_盡量選擇單選框、多選框_避免使用開關。

2）開關更適合控制一組設置嗎

蘋果官方人機界面指南中指出“開關比復選框具有更多的視覺權重_因此當她控制的功能比復選框通常更多時_她看起來更好。例如_您可以使用開關讓人們打開或關閉一組設置”_然而在復選框的設計指南中又舉了用復選框控制一組設置的例子。

再來看一個飛書的例子_飛書管理后臺中使用了開關來控制一組設置的開啟_而在飛書客戶端的設置里用的都是復選框。

對于這個問題_個人認為蘋果官方人機指南所說的因為開關比復選框具有更多視覺權重_所以更適合用來控制一組設置的說法并不準確_復選框本身也具有明顯的選中和非選中狀態_盡管開關組件自身大小以及在視覺效果上可進行設計的空間都更大_但是好像并不足以成為決定性的因素。

同時因為開關的即時性_如果是在需要提交的表單或者模態彈窗中用開關控制一組設置_反而是多選框更合適。

3）從組件的來源分析

從組件的來源及發展歷史來看_勾選的交互是基于PC鍵鼠操作設計的_單選框和多選框組件本身尺寸較小_因而觸發區域會擴大至整體標簽區域_方便鼠標點擊；而開關是誕生于移動設備觸控交互的組件_在移動端界面本身配置就比較簡化_這時候配合開關自身相對較大的觸發區域_用手指點擊起來非常方便順暢。

而在PC端_因為屏幕尺寸更大_同時很多B端系統配置項多、界面布局相較移動端要復雜很多_這時候要把鼠標移至開關熱區去點擊_反而沒有勾選框來得方便_這種操作體驗在一個縱列中有多個連續的開關時尤為明顯。

4）我的觀點

依據開關的即時生效特性_開關更適合用在不需要提交操作的頁面中_用來控制功能或設置的開啟/關閉_在需要提交操作的表單或者彈窗中_建議使用多選框。

開關和勾選框都可以用來控制一組設置的開啟/關閉_使用開關進行控制時_最好將她控制的下屬組件都設置為立即生效_這取決于設置本身對于系統的影響_如果設置對于系統重要功能影響較大_則建議改用多選框去控制_讓用戶多一步“提交”操作進行確認_提升容錯性。

四、總結

回到開頭設置優秀離職人才場景中的組件問題_這個需求流程涉及到的不只是在離職人員的編輯彈窗中操作_還涉及到在離職人員表格中的狀態展示和設置優秀人才的單獨操作。首先彈窗中的編輯操作是需要提交的_用開關比較矛盾；單選框和多選框在彈窗中都可以適用_但考慮還需要在離職人員表格中的狀態展示和單獨編輯_為了保持整體的交互一致性_最后選用了單選框。

總的來說_這幾種選擇錄入類組件在B端系統中應用非常廣泛_可能正是因為太司空見慣了_所以容易忽略她們細節上的特性和區別。盡管有時候這些組件的使用問題并不會對用戶體驗產生決定性的影響_但對細節的探究正是設計師嚴謹的工作態度和工匠精神的體現_只有秉持著這種對細節的打磨和追求才能不斷提升產品的用戶體驗。

另外雖然文中做了一些各個組件的特性和適用總結_但可能在不同產品和系統中情況會更加復雜_需要設計師根據實際情況靈活處理。

本文由@齊治設計_原創發布于人人都是產品經理_未經許可_禁止轉載

題圖來自Unsplash_基于CC0協議