B端設(shè)計(jì)指南：選擇錄入提前說一句：其實(shí)這篇文章快寫完時(shí)發(fā)覺已經(jīng)有類似的文章，由于自己寫文章并不會(huì)在乎市面上是否有同類型的文章，文章的靈感也多來源于自己的工作中遇到的實(shí)際問題。

選擇錄入的痛點(diǎn)：

選擇類型多：在我們常見的選擇類型中，常使用的有四種：“單選框、多選框、開關(guān)、下拉選擇?！边@四類便是選擇組件當(dāng)中的基礎(chǔ)組件。在實(shí)際業(yè)務(wù)的使用中，還會(huì)涉及到：“日期選擇、樹形選擇、人員選擇、穿梭框、級(jí)聯(lián)選擇、評(píng)分”等一些業(yè)務(wù)層面的組件，類型之多再加上每種組件用法也不盡相同，因此需要在每種組件的區(qū)分上多加思索。其實(shí)我在評(píng)審很多設(shè)計(jì)師的稿件中，常常發(fā)覺大家對(duì)它使用的場景并不了解。

比如在一個(gè)表單中，讓用戶選擇性別時(shí)，是實(shí)行下拉選擇、單選框、多選框甚至是開關(guān)呢？那假如我們選擇家庭住址又應(yīng)當(dāng)如何設(shè)計(jì)呢？這一系列問題都需要去解決。

細(xì)節(jié)多：選擇錄入看起來一個(gè)小小的按鈕，似乎當(dāng)中的細(xì)節(jié)不會(huì)特殊簡單，但當(dāng)你實(shí)踐過后就知道，其背后有著許很多多的潛臺(tái)詞以及默認(rèn)規(guī)章。比如在單選框是沒有讓用戶進(jìn)行取消的操作；開關(guān)是不會(huì)讓用戶進(jìn)行提交保存的，默認(rèn)規(guī)章往往是這類交互本身所包含的。因此讀懂組件中的潛臺(tái)詞，也就是我們要做的事。由于學(xué)問點(diǎn)許多，想要把它們完整講清晰需要花大量時(shí)間，因此我會(huì)在后續(xù)的文章中與大家逐一拆解，掰開揉碎漸漸消化，篇幅有限，今日我們先來聊聊前面幾個(gè)略微簡單理解的：「單選框、多選框、開關(guān)」，畢竟應(yīng)當(dāng)如何設(shè)計(jì)～

一、單選框Radio

1.單選框的歷史

單選框，也常叫做單選按鈕、單選，它最早來源于收音機(jī)上的物理按鈕，當(dāng)時(shí)用于收音調(diào)頻之間的相互切換。當(dāng)一個(gè)按鈕被按下時(shí)，另一個(gè)按鈕將會(huì)被彈起，使收音機(jī)只能擁有一個(gè)“按下狀態(tài)的”按鈕。

而早在計(jì)算機(jī)用戶界面誕生之初（TheXeroxAlto）就已經(jīng)有了單選框的消失。同時(shí)在HTML的底層中，Radio就作為一個(gè)最基礎(chǔ)的標(biāo)簽，擁有「無法撼動(dòng)的地位」所以在各大設(shè)計(jì)系統(tǒng)中始終作為基礎(chǔ)組件被沿用至今。

但隨著移動(dòng)互聯(lián)網(wǎng)的普及，單選框這一形式在用戶心中被漸漸的弱化，取而代之的是各類功能相同但形式繁多的按鈕，這也是目前許多B端設(shè)計(jì)師存在的認(rèn)知誤區(qū)之一。

單選按鈕：依據(jù)移動(dòng)移動(dòng)端的交互形式與「菲茲定律」，單選按鈕主要將自己的熱區(qū)擴(kuò)大，能夠更便利使用鼠標(biāo)進(jìn)行點(diǎn)擊操作，可針對(duì)特定的B端產(chǎn)品進(jìn)行優(yōu)化。但面積增大的同時(shí)帶來的是屏效降低，作為B端產(chǎn)品，屏效比也是一個(gè)特別重要的因素之一，因此需要權(quán)衡兩者的利弊。單選組：通過上面的單選按鈕，將兩個(gè)以上的按鈕進(jìn)行排布，而形成的單選組，能夠盡可能增加展現(xiàn)效率。單選組的功能與Tab特別類似，也因此單選按鈕與單選組是一個(gè)相輔相成的過程。

2.單選框的定義

單選框：允許用戶從多個(gè)選項(xiàng)中，選擇一個(gè)選項(xiàng)，且選項(xiàng)之間存在互斥關(guān)系，這也是「單選」名稱的由來。

單選框的外觀一般是一個(gè)空白的圓洞，旁邊則通常有文字標(biāo)簽；標(biāo)簽的用途除了描述之外，還可以作為操作熱區(qū)，當(dāng)用戶點(diǎn)擊標(biāo)簽，所應(yīng)的單選框就會(huì)被選中；已選上的單選按鈕一般會(huì)在圓洞內(nèi)加上一小圓點(diǎn)。

3.單選框的交互規(guī)律

選項(xiàng)數(shù)量：使用單選框的選項(xiàng)數(shù)量一般為2-5個(gè)之間，由于在一個(gè)正常的表單中，是不允許寬度過寬導(dǎo)致頁面排布困難，同時(shí)使用多于5個(gè)的單選框，會(huì)非常影響閱讀效率，因此超出5個(gè)便可實(shí)行「下拉菜單」的方式進(jìn)行展現(xiàn)。在工作中常見的的單選框?yàn)樾詣e、是否選擇等…默認(rèn)選項(xiàng)：默認(rèn)值在我們B端的設(shè)計(jì)中，往往是一把雙刃劍，你運(yùn)用得好可以為自己的設(shè)計(jì)增加易用性，由于默認(rèn)值本身在表單中并不常見（不行能給每一個(gè)表單都給上默認(rèn)值），而在特定的場景中使用默認(rèn)值會(huì)有意想不到的效果。說一個(gè)我實(shí)際工作中遇到的內(nèi)容，在我之前負(fù)責(zé)的一個(gè)關(guān)于醫(yī)美客戶系統(tǒng)的的SCRM中，當(dāng)客戶到店后需要由醫(yī)美詢問師為每一位顧客新建一個(gè)客戶資料，而醫(yī)美行業(yè)的特別性導(dǎo)致我們的大多數(shù)醫(yī)美客戶都為女性，因此在設(shè)計(jì)表單中的性別一欄上便可將默認(rèn)值選擇為女性，這樣便利醫(yī)美詢問師快速補(bǔ)充用戶信息，可以進(jìn)行更高效的信息錄入。

當(dāng)然，我說了雙刃劍確定代表它也有弊的一面，我舉一個(gè)反例，比如我們?cè)谠O(shè)計(jì)一個(gè)調(diào)查問卷中，去預(yù)設(shè)一些默認(rèn)值就不太合理，由于問卷中需要削減對(duì)選項(xiàng)值的干預(yù)，保證其真實(shí)性，才能讓默認(rèn)選項(xiàng)會(huì)導(dǎo)致錄入的數(shù)據(jù)產(chǎn)生精確?????，避開為后期的數(shù)據(jù)分析埋下“深坑”。

清除選擇：不知道大家有沒有發(fā)覺，單選框在你選擇過后，就不能成為「為空狀態(tài)」。由于單選框沒有讓你跳過的回退機(jī)制，導(dǎo)致你在設(shè)計(jì)時(shí)就需要非常當(dāng)心比如在一個(gè)表單中消失自己的婚姻狀況的單選框（非必填），里面有未婚、已婚、離異三種選擇，當(dāng)我選擇未婚后，突然覺得這個(gè)信息較為私密，為了保證我自己的信息平安需要清除我剛才的選擇，這時(shí)我完全就沒有任何方法，想要回退就只有一種選擇，刷新這個(gè)頁面，進(jìn)行重新填寫。而我們?cè)谠O(shè)計(jì)中不能避開此類方式，這時(shí)候就需要選項(xiàng)的「容錯(cuò)機(jī)制」。

容錯(cuò)機(jī)制：既然單選無法清除選擇，我們就要對(duì)單選進(jìn)行相應(yīng)的優(yōu)化，比如在選項(xiàng)中設(shè)置一個(gè)為「為空選項(xiàng)」對(duì)這類狀況進(jìn)行容錯(cuò)處理，不然用戶就會(huì)感受到無法回退的尷尬。這都是單選框所帶來的潛在交互，大家在設(shè)計(jì)中肯定要非常留意。二、多選框Checkbox

1.多選框的定義

多選框，也常叫做復(fù)選框、勾選框，它允許用戶選擇一個(gè)或多個(gè)獨(dú)立選項(xiàng)，將自己想要的選項(xiàng)作為值，多個(gè)條件間的規(guī)律關(guān)系為并列關(guān)系。

多選框在實(shí)際業(yè)務(wù)中其實(shí)也分為兩種不同形態(tài)：單個(gè)多選框與多選框。

1）單個(gè)多選框

英文叫做（singlecheckbox）只消失一個(gè)多選框供應(yīng)給用戶進(jìn)行選擇，只包含“是”與“否”兩種規(guī)律，用戶可以選擇其一。它與之后「開關(guān)Switch」的規(guī)律非常接近，但兩者的適用場景也有很大不同。

比如在我們常常遇到的用戶協(xié)議的頁面中，同意協(xié)議通常都是實(shí)行單個(gè)多選框的形式，而開關(guān)相比單個(gè)多選框，更加強(qiáng)調(diào)選中的狀態(tài)。之后會(huì)與開關(guān)進(jìn)行深度對(duì)比，不做延展。

2）多選框

是多選框的一種通用樣式，允許用戶選擇多個(gè)項(xiàng)，主要用于各類表單設(shè)計(jì)中，所以用戶對(duì)于它的認(rèn)知、功能以及行為操作有明確的心理預(yù)期和感知。

2.多選框的特別狀態(tài)

多選框相比其它控件，增加了兩個(gè)較為特別的狀態(tài)“半選中”“禁用（已選中）”，因此這里僅僅單獨(dú)講解，其他狀態(tài)便不做過多贅述。

半選中：半選中狀態(tài)（Indeterminate）消失的條件必需具備以下兩點(diǎn)：

擁有「全選」功能，由于半選中狀態(tài)是全選狀態(tài)的一種特別狀態(tài)形式，它依附于全選。所以是當(dāng)一個(gè)選擇框中有全選狀態(tài)才會(huì)有幾率消失半選狀態(tài)。擁有「選中狀態(tài)的子項(xiàng)」，假如我們把全選看作是「父」，則其下的子選項(xiàng)看做是「子」，由于交互底層規(guī)律便是狀態(tài)的轉(zhuǎn)變需要隨時(shí)體現(xiàn)，由于「子」?fàn)顟B(tài)的變化，作為「父」的狀態(tài)也應(yīng)當(dāng)隨之轉(zhuǎn)變，這樣的父子聯(lián)動(dòng)才會(huì)有半選中狀態(tài)的消失。上面說到需要父子聯(lián)動(dòng)，全選是選中其下全部的選項(xiàng)，而我只選擇了其下一個(gè)選項(xiàng)時(shí)，就應(yīng)當(dāng)展現(xiàn)半選中狀態(tài)。同時(shí)，當(dāng)前多選框正在處于半選中狀態(tài)時(shí)，點(diǎn)擊多選框會(huì)執(zhí)行全選操作。

禁用-已選中：禁用-已選中狀態(tài)（Checked-disable）消失多表示該多選框已經(jīng)被激活，只是在當(dāng)前狀況下不能進(jìn)行操作。通常不能進(jìn)行操作的場景有以下兩點(diǎn)：

登錄賬號(hào)權(quán)限不足，無法對(duì)該條數(shù)據(jù)進(jìn)行修改。且在此之前，該條數(shù)據(jù)已經(jīng)被激活。該操作為系統(tǒng)級(jí)別操作，通常展現(xiàn)出來是為了讓用戶了解到有此類操作；同時(shí)并不允許用戶操作此權(quán)限。因而實(shí)行禁用已選中進(jìn)行表示。當(dāng)然多選框還會(huì)有許多不同狀態(tài)，會(huì)在章節(jié)末尾進(jìn)行表格總結(jié)。

3.多選的交互規(guī)律

選項(xiàng)數(shù)量：與單選基本全都，由于全部選項(xiàng)基本處于外露狀態(tài)，因此不建議放5個(gè)以上的選項(xiàng)值，超過5個(gè)時(shí)可考慮實(shí)行下拉菜單的形式，避開選項(xiàng)多且簡單，難以把控。默認(rèn)值：默認(rèn)值在多選框中并不常見，在一個(gè)多選框中設(shè)置默認(rèn)值肯定要思索清晰。當(dāng)然這里也會(huì)存在用戶之前的數(shù)據(jù)，那就另當(dāng)別論。需要提交操作：在多選的場景中，提交是必不行少的一個(gè)操作狀況，這里先按下不表，會(huì)與第三章的「開關(guān)」進(jìn)行一個(gè)簡潔的對(duì)比。4.典型頁面

在實(shí)際工作中，多選框會(huì)消失在一些典型的頁面場景中，針對(duì)不同的頁面場景，我們來看看畢竟應(yīng)當(dāng)如何進(jìn)行處理。

用戶權(quán)限管理在用戶權(quán)限管理頁面中，常常會(huì)消失多選框的身影，而在權(quán)限這類頁面中，往往是一個(gè)不斷重復(fù)排列的多選框，針對(duì)不同的角色，去選擇不同的權(quán)限。且每一個(gè)權(quán)限都是開啟或關(guān)閉狀態(tài)，也因此實(shí)行多選框也尤為合適。我們來看看不同產(chǎn)品中，都有著哪些權(quán)限頁面設(shè)置的技巧。

語雀：權(quán)限作為語雀的一個(gè)亮點(diǎn)功能，便將全部角色分為三類：管理員、成員、只讀成員。

在定義中，由于管理員擁有全部權(quán)限，所以不需要用戶單獨(dú)進(jìn)行配置。只讀成員同樣只會(huì)擁有單獨(dú)的查看權(quán)限，而我們需要去對(duì)成員進(jìn)行單獨(dú)的配置，然后將成員的權(quán)限進(jìn)行細(xì)分，由于權(quán)限的數(shù)量并不多，因此實(shí)行縱向排列，便利用戶對(duì)于多個(gè)權(quán)限進(jìn)行對(duì)比。

上面語雀的權(quán)限配置頁面過于簡潔，在真實(shí)B端業(yè)務(wù)時(shí)就會(huì)顯得有些弱不經(jīng)風(fēng)。我們實(shí)際工作中面對(duì)多維度多層級(jí)的權(quán)限管理時(shí)，又應(yīng)當(dāng)如何設(shè)計(jì)？我們來看看Coding它是如何做的。

由于在一個(gè)正常的B端軟件中，權(quán)限通常會(huì)拆分得特殊細(xì)，對(duì)于不同字段與角色，他們的權(quán)限也會(huì)不盡相同。

Coding首先在左側(cè)會(huì)展現(xiàn)“用戶組”也就是我們上面說到的角色分類，用戶可以去自定義角色類型有哪些，其次在對(duì)角色權(quán)限的配置中，會(huì)展現(xiàn)出用戶可以自定義的全部功能，粗略估算也許會(huì)有100+個(gè)權(quán)限，也就意味著會(huì)有100+個(gè)多選框需要展現(xiàn)。

當(dāng)100+的多選框放在你面前，最為基礎(chǔ)的對(duì)齊則顯得尤為關(guān)鍵。通過限制多選框標(biāo)簽的整體寬度，強(qiáng)制將其縱向?qū)R，雖然遇到長文本時(shí)省略給用戶帶來不太友好的體驗(yàn)，但對(duì)齊所帶來的留白、節(jié)奏感是遠(yuǎn)比省略帶來的好處要多（當(dāng)然在對(duì)長文本寬度的定義中，需要多考慮下常見字段的長度即可）。

其次，在每一個(gè)大功能中，Coding都設(shè)置有一個(gè)全選功能，目前放置在整個(gè)列表的末尾，是一個(gè)特殊贊的設(shè)計(jì)，能夠關(guān)心用戶對(duì)每一個(gè)字段的權(quán)限進(jìn)行統(tǒng)一配置，是一個(gè)常常使用的快捷入口。

流程管理頁面在流程管理頁面中，多選框也是不行忽視的頁面。由于在整個(gè)流程頁面中會(huì)對(duì)每個(gè)狀態(tài)執(zhí)行開啟與關(guān)閉操作，因此在這里同樣會(huì)重復(fù)多選框。

比如在ONES的流程管理頁面中，看起來像是表格，其中縱向代表每個(gè)「流程開頭狀態(tài)」，橫向代表每個(gè)流程階段所要去向哪些狀態(tài)，每個(gè)表格都會(huì)展現(xiàn)一個(gè)復(fù)選框，去配置它是否要流轉(zhuǎn)到此狀態(tài)，從而實(shí)現(xiàn)業(yè)務(wù)流轉(zhuǎn)的需求。

而在這里的設(shè)計(jì)，最令人頭疼的是整體的表現(xiàn)形式，由于目前而言，需要將初始狀態(tài)、新增狀態(tài)、激活狀態(tài)、禁用狀態(tài)等在一個(gè)表格中進(jìn)行表示，更重要的是要能夠讓用戶理解整個(gè)表格所代表的含義，這也是目前能看到的最好的設(shè)計(jì)成品，大家有什么更好的建議，歡迎在評(píng)論區(qū)留言，大家一起爭論。

表格頁面表格頁面最為簡單多變，也因此在表格中的多選框消失了兩種不同的形式：

一種將多選框直接展現(xiàn)，讓用戶更直接選擇；另一種則是Hover到每一行顯示多選框，同時(shí)肯定要去留意全選與半選中的規(guī)律，在表格的設(shè)計(jì)上尤為重要，不能消失規(guī)律上的漏洞，這里也就不過多贅述。

最終補(bǔ)充一下多選框的全部狀態(tài)的交互規(guī)律：

三、開關(guān)Switch

1.開關(guān)的定義

開關(guān)，它是一種特別的選擇，其含義代表你的選擇非黑即白。

它不同于上面的控件，當(dāng)用戶點(diǎn)擊后，開關(guān)需要經(jīng)受一個(gè)加載狀態(tài)，然后「馬上執(zhí)行」。這樣的差別就導(dǎo)致開關(guān)的用法與其它控件并不相同，馬上執(zhí)行所帶來的準(zhǔn)時(shí)性也是設(shè)計(jì)師最簡單與其他組件進(jìn)行混淆的點(diǎn)。

2.開關(guān)的由來

在開關(guān)的早期，為了降低用戶的學(xué)習(xí)成本，仿照現(xiàn)實(shí)生活中的開關(guān)進(jìn)行設(shè)計(jì)，而隨著扁平風(fēng)格的到來，開關(guān)便得到了精簡，去掉原本產(chǎn)品中的質(zhì)感、投影，轉(zhuǎn)向更加明確的「狀態(tài)信息」。

轉(zhuǎn)瞬到了B端產(chǎn)品中，許多設(shè)計(jì)師都會(huì)沿用這一習(xí)慣，但是在HTML的代碼規(guī)律里，并沒有Switch的標(biāo)簽，也就意味著開關(guān)并不是網(wǎng)頁本身所支持的形式，在程序員處理上則需要花費(fèi)更多心思。

不過在目前常見的前端框架中，對(duì)開關(guān)都進(jìn)行了支持，比如Element、Antdesign可以直接引用。

3.開關(guān)的交互規(guī)律

雖然在組件上可以直接進(jìn)行引用，但并不代表我們作為設(shè)計(jì)者，不需要去考慮它基本的交互規(guī)律以及使用場景。

即時(shí)性：開關(guān)是一個(gè)馬上執(zhí)行的操作，因此它打破了人們對(duì)于正常表單的認(rèn)知（需要有按鈕進(jìn)行數(shù)據(jù)提交），因此開關(guān)與表單是一個(gè)相互排斥的關(guān)系，兩者同時(shí)消失必定會(huì)產(chǎn)生些許沖突，表單中使用開關(guān)切記要慎重。那如何處理開關(guān)與表單之間的關(guān)系？就需要理解開關(guān)與表單間的「權(quán)重關(guān)系」。權(quán)重關(guān)系：開關(guān)要比表單的權(quán)重更高。開關(guān)會(huì)位于整個(gè)表單的頂部，對(duì)下面的表單進(jìn)行整體操作，說起來更點(diǎn)空洞，我們看一個(gè)MacOS的案例：

在最新BigSur系統(tǒng)中，設(shè)置頁面就實(shí)行了類似操作，我們打開設(shè)置-通知，發(fā)覺開關(guān)與表單同時(shí)存在。這里也可看到，允許通知的開關(guān)在最頂層，是掌握整個(gè)表單權(quán)重最高的操作，同時(shí)下方單選、多選框、下拉菜單都受到頂部開關(guān)掌握。

當(dāng)然，我們?cè)趯?shí)際的設(shè)計(jì)中，同樣會(huì)遇到類似的狀況，比如在飛書的自建應(yīng)用免審規(guī)章配置中：首先用戶需要去選擇開啟此功能，開啟后下方會(huì)綻開一個(gè)基本表單，用于用戶對(duì)應(yīng)用規(guī)章中更為細(xì)致的配置，并且要留意，全部的配置都是實(shí)時(shí)生效，因此在每一次修改配置時(shí)，飛書上都會(huì)有Loading效果。

當(dāng)然我們可以將開關(guān)換成單一多選框，但切換后用戶就很難理一二級(jí)之間的規(guī)律關(guān)系，因此開關(guān)更為適合權(quán)重更高的操作。

明確性：開關(guān)能明確的表示當(dāng)前的狀態(tài)，當(dāng)開關(guān)亮起時(shí)，則代表開關(guān)進(jìn)入開啟狀態(tài)，當(dāng)開關(guān)置灰時(shí)則進(jìn)行關(guān)閉狀態(tài)（感覺似乎是廢話，但你得需細(xì)細(xì)的品）并且在開關(guān)的使用中，是通過表達(dá)當(dāng)前系統(tǒng)的狀態(tài)，因此在開關(guān)所協(xié)作的文案中需要非常留意。重要提示：由于開關(guān)的權(quán)重更高，狀態(tài)也更為明確，因此它的消失多為一些需要系統(tǒng)校驗(yàn)的操作，對(duì)于用戶不滿意條件時(shí)，需要進(jìn)行禁止的提示。比如在明道云的工作流列表中，用戶便可使用開關(guān)對(duì)流程進(jìn)行快速開