編輯導(dǎo)語：在前兩篇文章中，我們主要講到 B 端產(chǎn)品最為重要的信息展示組件“表格”的設(shè)計思路，根據(jù)不同的場景對表格進行了答疑。今天本文作者和我們簡單聊聊在「數(shù)據(jù)錄入場景」中的一個小點：選擇錄入。

提前說一句：其實這篇文章快寫完時發(fā)現(xiàn)已經(jīng)有類似的文章，由于自己寫文章并不會在乎市面上是否有同類型的文章，文章的靈感也多來源于自己的工作中遇到的實際問題。

選擇錄入的痛點：

• 選擇類型多：在我們常見的選擇類型中，常使用的有四種：“單選框、多選框、開關(guān)、下拉選擇?！边@四類便是選擇組件當(dāng)中的基礎(chǔ)組件。在實際業(yè)務(wù)的使用中，還會涉及到：“日期選擇、樹形選擇、人員選擇、穿梭框、級聯(lián)選擇、評分” 等一些業(yè)務(wù)層面的組件，類型之多再加上每種組件用法也不盡相同，因此需要在每種組件的區(qū)分上多加思考。

其實我在評審許多設(shè)計師的稿件中，經(jīng)常發(fā)現(xiàn)大家對它使用的場景并不了解。

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

• 細節(jié)多：選擇錄入看起來一個小小的按鈕，好像當(dāng)中的細節(jié)不會特別復(fù)雜，但當(dāng)你實踐過后就知道，其背后有著許許多多的潛臺詞以及默認規(guī)則。比如在單選框是沒有讓用戶進行取消的操作；開關(guān)是不會讓用戶進行提交保存的，默認規(guī)則往往是這類交互本身所包含的。因此讀懂組件中的潛臺詞，也就是我們要做的事。

由于知識點很多，想要把它們完整講清楚需要花大量時間，因此我會在后續(xù)的文章中與大家逐一拆解，掰開揉碎慢慢消化，篇幅有限，今天我們先來聊聊前面幾個稍微容易理解的：「單選框、多選框、開關(guān)」，究竟應(yīng)該如何設(shè)計～

一、單選框 Radio

1. 單選框的歷史

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

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

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

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

2. 單選框的定義

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

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

3. 單選框的交互邏輯

• 選項數(shù)量：使用單選框的選項數(shù)量一般為 2-5 個之間，因為在一個正常的表單中，是不允許寬度過寬導(dǎo)致頁面排布困難，同時使用多于5個的單選框，會十分影響閱讀效率，因此超出5個便可采取「下拉菜單」的方式進行展示。在工作中常見的的單選框為性別、是否選擇等…
• 默認選項：默認值在我們B端的設(shè)計中，往往是一把雙刃劍，你運用得好可以為自己的設(shè)計增加易用性，因為默認值本身在表單中并不常見（不可能給每一個表單都給上默認值），而在特定的場景中使用默認值會有意想不到的效果。

說一個我實際工作中遇到的內(nèi)容，在我之前負責(zé)的一個關(guān)于醫(yī)美客戶系統(tǒng)的的SCRM中，當(dāng)客戶到店后需要由醫(yī)美咨詢師為每一位顧客新建一個客戶資料，而醫(yī)美行業(yè)的特殊性導(dǎo)致我們的大多數(shù)醫(yī)美客戶都為女性，因此在設(shè)計表單中的性別一欄上便可將默認值選擇為女性，這樣方便醫(yī)美咨詢師快速補充用戶信息，可以進行更高效的信息錄入。

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

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

• 容錯機制： 既然單選無法清除選擇，我們就要對單選進行相應(yīng)的優(yōu)化，比如在選項中設(shè)置一個為「為空選項」對這類情況進行容錯處理，不然用戶就會感受到無法回退的尷尬。這都是單選框所帶來的潛在交互，大家在設(shè)計中一定要格外注意。

二、多選框 Checkbox

1. 多選框的定義

多選框，也常叫做復(fù)選框、勾選框，它允許用戶選擇一個或多個獨立選項，將自己想要的選項作為值，多個條件間的邏輯關(guān)系為并列關(guān)系。

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

1）單個多選框

英文叫做（single checkbox）只出現(xiàn)一個多選框提供給用戶進行選擇，只包含“是”與“否”兩種邏輯，用戶可以選擇其一。它與之后「開關(guān)Switch」的邏輯十分接近，但兩者的適用場景也有很大不同。

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

2）多選框

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

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

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

• 半選中：

半選中狀態(tài)（Indeterminate）出現(xiàn)的條件必須具備以下兩點：

1. 擁有「全選」功能，因為半選中狀態(tài)是全選狀態(tài)的一種特殊狀態(tài)形式，它依附于全選。所以是當(dāng)一個選擇框中有全選狀態(tài)才會有幾率出現(xiàn)半選狀態(tài)。
2. 擁有「選中狀態(tài)的子項」，如果我們把全選看作是「父」，則其下的子選項看做是「子」，因為交互底層邏輯便是狀態(tài)的改變需要隨時體現(xiàn)，因為「子」?fàn)顟B(tài)的變化，作為「父」的狀態(tài)也應(yīng)該隨之改變，這樣的父子聯(lián)動才會有半選中狀態(tài)的出現(xiàn)。

上面說到需要父子聯(lián)動，全選是選中其下所有的選項，而我只選擇了其下一個選項時，就應(yīng)該展示半選中狀態(tài)。同時，當(dāng)前多選框正在處于半選中狀態(tài)時，點擊多選框會執(zhí)行全選操作。

• 禁用-已選中：

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

1. 登錄賬號權(quán)限不足，無法對該條數(shù)據(jù)進行修改。且在此之前，該條數(shù)據(jù)已經(jīng)被激活。
2. 該操作為系統(tǒng)級別操作，通常展示出來是為了讓用戶了解到有此類操作；同時并不允許用戶操作此權(quán)限。因而采取禁用已選中進行表示。

當(dāng)然多選框還會有很多不同狀態(tài)，會在章節(jié)末尾進行表格總結(jié)。

3. 多選的交互邏輯

• 選項數(shù)量：與單選基本一致，因為所有選項基本處于外露狀態(tài)，因此不建議放5個以上的選項值，超過5個時可考慮采取下拉菜單的形式，避免選項多且復(fù)雜，難以把控。
• 默認值：默認值在多選框中并不常見，在一個多選框中設(shè)置默認值一定要思考清楚。當(dāng)然這里也會存在用戶之前的數(shù)據(jù)，那就另當(dāng)別論。
• 需要提交操作：在多選的場景中，提交是必不可少的一個操作情況，這里先按下不表，會與第三章的「開關(guān)」進行一個簡單的對比。

4. 典型頁面

在實際工作中，多選框會出現(xiàn)在一些典型的頁面場景中，針對不同的頁面場景，我們來看看究竟應(yīng)該如何進行處理。

• 用戶權(quán)限管理

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

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

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

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

因為在一個正常的B端軟件中，權(quán)限通常會拆分得特別細，對于不同字段與角色，他們的權(quán)限也會不盡相同。

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

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

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

• 流程管理頁面

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

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

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

• 表格頁面

表格頁面最為復(fù)雜多變，也因此在表格中的多選框出現(xiàn)了兩種不同的形式：

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

最后補充一下多選框的所有狀態(tài)的交互邏輯：

三、開關(guān) Switch

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

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

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

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

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

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

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

3. 開關(guān)的交互邏輯

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

• 即時性：開關(guān)是一個立即執(zhí)行的操作，因此它打破了人們對于正常表單的認知（需要有按鈕進行數(shù)據(jù)提交），因此開關(guān)與表單是一個相互排斥的關(guān)系，兩者同時出現(xiàn)必然會產(chǎn)生些許矛盾，表單中使用開關(guān)切記要慎重。那如何處理開關(guān)與表單之間的關(guān)系？就需要理解開關(guān)與表單間的「權(quán)重關(guān)系」。

• 權(quán)重關(guān)系：開關(guān)要比表單的權(quán)重更高。開關(guān)會位于整個表單的頂部，對下面的表單進行整體操作，說起來更點空洞，我們看一個 MacOS 的案例：

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

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

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

• 明確性：開關(guān)能明確的表示當(dāng)前的狀態(tài)，當(dāng)開關(guān)亮起時，則代表開關(guān)進入開啟狀態(tài)，當(dāng)開關(guān)置灰時則進行關(guān)閉狀態(tài)（感覺好像是廢話，但你得需細細的品）并且在開關(guān)的使用中，是通過表達當(dāng)前系統(tǒng)的狀態(tài)，因此在開關(guān)所配合的文案中需要格外注意。
• 重要提示：因為開關(guān)的權(quán)重更高，狀態(tài)也更為明確，因此它的出現(xiàn)多為一些需要系統(tǒng)校驗的操作，對于用戶不滿足條件時，需要進行禁止的提示。比如在明道云的工作流列表中，用戶便可使用開關(guān)對流程進行快速開啟，不滿足條件時，會有提示彈窗進行提示，并能讓用戶快速跳轉(zhuǎn)進行修改操作。

• 加載狀態(tài)：最后開關(guān)作為一個關(guān)鍵操作，在 B端系統(tǒng)層面上同樣會有進行加載的情況，這里就提醒一下大家，不做擴展。

4. 開關(guān)的討論 – 為開關(guān)正名

在互聯(lián)網(wǎng)上，時常看到 DISS 開關(guān)不應(yīng)該出現(xiàn)在網(wǎng)頁設(shè)計中，這里看到了一篇文章中討論到《為什么在web上使用Switch是愚蠢的設(shè)計》，其實我有不同的意見，簡單說一說我對開關(guān)的看法：

因為在 B 端的場景中，會有很多特殊的要求，因此不能一桿子將 Switch 進行一桿子打死，凡事都得辯證看待，需要去看到開關(guān)好的一面，并且規(guī)避它的一些不足。

首先，在 Web 端中不能大面積的去使用開關(guān)，因為大量的開關(guān)導(dǎo)致的就是對頁面設(shè)計的褻瀆，當(dāng)然開關(guān)依然有它的獨特之處，在開關(guān)的交互邏輯中雖然已經(jīng)提到了部分特點，但我還是來簡單說說我的理由：

使用開關(guān)主要是想利用開關(guān)狀態(tài)去“做文章”。使用開關(guān)在比起其他條件，會更加強調(diào)它的狀態(tài)，并能讓用戶通過狀態(tài)去控制下層的其他組件（單選框、多選框等…）這就是開關(guān)在 B端產(chǎn)品中的實際需求。

同時因為開關(guān)是立即執(zhí)行的操作，因此需要在每一次變更狀態(tài)時進行相應(yīng)的反饋，比如表單組件狀態(tài)上的提示，輔助用戶進行判斷狀態(tài)即可。

回到我們討論的開關(guān)在 WEB 中的使用上，并不能因為因為開關(guān)不是 HTML 基礎(chǔ)標(biāo)簽而去否定，并且在我們 B端實際業(yè)務(wù)中，確實會遇到開關(guān)的場景，因此大家在使用開關(guān)時還是應(yīng)該根據(jù)情況，進行使用。

作者：CE青年，2B行業(yè)的2B設(shè)計師～公眾號：CeDesign

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

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