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