產(chǎn)品經(jīng)理B端設(shè)計指南：選擇錄入

1、編輯導(dǎo)語：在前兩篇文章中，我們主要講到 B 端產(chǎn)品最為重要的信息展示組件 “表格 ”的設(shè)計思路，根據(jù)不同的場景對表格進行了答疑。今天本文作者和我們簡單聊聊在數(shù)據(jù)錄入場景中的一個小點：選擇錄入。提前說一句：其實這篇文章快寫完時發(fā)現(xiàn)已經(jīng)有類似的文章，由于自己寫文章并不會在乎市面上是否有同類型的文章，文章的靈感也多來源于自己的工作中遇到的實際問題。其實我在評審許多設(shè)計師的稿件中，經(jīng)常發(fā)現(xiàn)大家對它使用的場景并不了解。比如在一個表單中，讓用戶選擇性別時，是采取下拉選擇、單選框、多選框甚至是開關(guān)呢？那如果我們選擇家庭住址又應(yīng)該如何設(shè)計呢？這一系列問題都需要去解決。由于知識點很多，想要把它們完整講清楚需要花

2、大量時間，因此我會在后續(xù)的文章中與大家逐一拆解，掰開揉碎慢慢消化，篇幅有限，今天我們先來聊聊前面幾個稍微容易理解的：單選框、多選框、開關(guān)，究竟應(yīng)該如何設(shè)計單選框，也常叫做單選按鈕、單選，它最早來源于收音機上的物理按鈕，當時用于收音調(diào)頻之間的相互切換。當一個按鈕被按下時，另一個按鈕將會被彈起，使收音機只能擁有一個 “按下狀態(tài)的 ”按鈕。而早在計算機用戶界面誕生之初( The Xerox Alto )就已經(jīng)有了單選框的出現(xiàn)。同時在HTML的底層中，Radio就作為一個最基礎(chǔ)的標簽，擁有無法撼 動的地位所以在各大設(shè)計系統(tǒng)中一直作為基礎(chǔ)組件被沿用至今。但隨著移動互聯(lián)網(wǎng)的普及，單選框這一形式在用戶心中被

3、逐漸的弱化，取而代之的是各類功能相同但形式繁多的按鈕，這也是目前很多 B 端設(shè)計師存在的認知誤區(qū)之一。單選框：允許用戶從多個選項中，選擇一個選項，且選項之間存在互斥關(guān)系，這也是單選名稱的由來。單選框的外觀一般是一個空白的圓洞，旁邊則通常有文字標簽；標簽的用途除了描述之外，還可以作為操作熱區(qū)，當用戶點擊標簽，所應(yīng)的單選框就會被選中；已選上的單選按鈕一般會在圓洞內(nèi)加上一小圓點。說一個我實際工作中遇到的內(nèi)容，在我之前負責的一個關(guān)于醫(yī)美客戶系統(tǒng)的的 SCRM 中，當客戶到店后需要由醫(yī)美咨詢師為每一位顧客新建一個客戶資料，而醫(yī)美行業(yè)的特殊性導(dǎo)致我們的大多數(shù)醫(yī)美客戶都為女性，因此在設(shè)計表單中的性別一欄上便

4、可將默認值選擇為女性，這樣方便醫(yī)美咨詢師快速補充用戶信息，可以進行更高效的信息錄入。當然，我說了雙刃劍肯定代表它也有弊的一面，我舉一個反例，比如我們在設(shè)計一個調(diào)查問卷中，去預(yù)設(shè)一些默認值就不太合理，因為問卷中需要減少對選項值的干預(yù)，保證其真實性，才能讓默認選項會導(dǎo)致錄入的數(shù)據(jù)產(chǎn)生準確，避免為后期的數(shù)據(jù)分析埋下 “深坑” 。多選框，也常叫做復(fù)選框、勾選框，它允許用戶選擇一個或多個獨立選項，將自己想要的選項作為值，多個條件間的邏輯關(guān)系為并列關(guān)系。多選框在實際業(yè)務(wù)中其實也分為兩種不同形態(tài)：單個多選框與多選框。1)單個多選框英文叫做（single checkbox只出現(xiàn)一個多選框提供給用戶進行選擇，只

5、包 含 是“與 否”兩種邏輯，用戶可以選擇其一。它與之后開關(guān) Switch的邏輯 十分接近，但兩者的適用場景也有很大不同。比如在我們經(jīng)常遇到的用戶協(xié)議的頁面中，同意協(xié)議通常都是采取單個多選框的形式，而開關(guān)相比單個多選框，更加強調(diào)選中的狀態(tài)。之后會與開關(guān)進 行深度對比，不做延展。2）多選框是多選框的一種通用樣式，允許用戶選擇多個項，主要用于各類表單設(shè)計中，所以用戶對于它的認知、功能以及行為操作有明確的心理預(yù)期和感知。多選框相比其它控件，增加了兩個較為特殊的狀態(tài) “半選中 ” 禁用（已選“ 中） ” ，因此這里僅僅單獨講解，其他狀態(tài)便不做過多贅述。半選中X犬態(tài)（Indeterminate出現(xiàn)的條件

6、必須具備以下兩點：上面說到需要父子聯(lián)動，全選是選中其下所有的選項，而我只選擇了其下一個選項時，就應(yīng)該展示半選中狀態(tài)。同時，當前多選框正在處于半選中狀態(tài)時，點擊多選框會執(zhí)行全選操作。禁用-已選中狀態(tài)（Checked-disable出現(xiàn)多表示該多選框已經(jīng)被激活，只 是在當前情況下不能進行操作。通常不能進行操作的場景有以下兩點：當然多選框還會有很多不同狀態(tài)，會在章節(jié)末尾進行表格總結(jié)。在實際工作中，多選框會出現(xiàn)在一些典型的頁面場景中，針對不同的頁面場景，我們來看看究竟應(yīng)該如何進行處理。在用戶權(quán)限管理頁面中，經(jīng)常會出現(xiàn)多選框的身影，而在權(quán)限這類頁面中，往往是一個不斷重復(fù)排列的多選框，針對不同的角色，去選

7、擇不同的權(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)風。我們實際工作中面對多維度多層級的權(quán)限管理時，又應(yīng)該如何設(shè)計？我們來看看 Coding 它是如

8、何做的。因為在一個正常的 B 端軟件中，權(quán)限通常會拆分得特別細，對于不同字段與角色，他們的權(quán)限也會不盡相同。Coding首先在左側(cè)會展示用戶組”也就是我們上面說到的角色分類，用戶可以去自定義角色類型有哪些，其次在對角色權(quán)限的配置中，會展示出用戶可以自定義的所有功能，粗略估算大概會有100+個權(quán)限，也就意味著會有100+個多選框需要展示。當 100+的多選框放在你面前，最為基礎(chǔ)的對齊則顯得尤為關(guān)鍵。通過限制多選框標簽的整體寬度，強制將其縱向?qū)R，雖然遇到長文本時省略給用戶帶來不太友好的體驗，但對齊所帶來的留白、節(jié)奏感是遠比省略帶來的好處要多（當然在對長文本寬度的定義中，需要多考慮下常見字段的長度

9、即可）。其次，在每一個大功能中，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)

10、、禁用狀態(tài)等在一個表格中進行表示，更重要的是要能夠讓用戶理解整個表格所代表的含義，這也是目前能看到的最好的設(shè)計成品，大家有什么更好的建議，歡迎在評論區(qū)留言，大家一起討論。表格頁面最為復(fù)雜多變，也因此在表格中的多選框出現(xiàn)了兩種不同的形式：一種將多選框直接展示，讓用戶更直接選擇；另一種則是Hover 到每一行顯示多選框，同時一定要去注意全選與半選中的邏輯，在表格的設(shè)計上尤為重要，不能出現(xiàn)邏輯上的漏洞，這里也就不過多贅述。最后補充一下多選框的所有狀態(tài)的交互邏輯：開關(guān)，它是一種特殊的選擇，其含義代表你的選擇非黑即白。它不同于上面的控件，當用戶點擊后，開關(guān)需要經(jīng)歷一個加載狀態(tài)，然后立即執(zhí)行。這樣的差別就

11、導(dǎo)致開關(guān)的用法與其它控件并不相同，立即執(zhí)行所帶來的及時性也是設(shè)計師最容易與其他組件進行混淆的點。在開關(guān)的早期，為了降低用戶的學習成本，模仿現(xiàn)實生活中的開關(guān)進行設(shè)計，而隨著扁平風格的到來，開關(guān)便得到了精簡，去掉原本產(chǎn)品中的質(zhì)感、投影，轉(zhuǎn)向更加明確的狀態(tài)信息。轉(zhuǎn)眼到了 B 端產(chǎn)品中，很多設(shè)計師都會沿用這一習慣，但是在HTML 的代碼邏輯里，并沒有Switch 的標簽，也就意味著開關(guān)并不是網(wǎng)頁本身所支持的形式，在程序員處理上則需要花費更多心思。不過在目前常見的前端框架中，對開關(guān)都進行了支持，比如Element、Antdesign 可以直接引用。雖然在組件上可以直接進行引用，但并不代表我們作為設(shè)計者，

12、不需要去考慮它基本的交互邏輯以及使用場景。在最新 Big Sur 系統(tǒng)中，設(shè)置頁面就采取了類似操作，我們打開設(shè)置-通知，發(fā)現(xiàn)開關(guān)與表單同時存在。這里也可看到，允許通知的開關(guān)在最頂層，是控制整個表單權(quán)重最高的操作，同時下方單選、多選框、下拉菜單都受到頂部開關(guān)控制。當然，我們在實際的設(shè)計中，同樣會遇到類似的情況，比如在飛書的自建應(yīng)用免審規(guī)則配置中：首先用戶需要去選擇開啟此功能，開啟后下方會展開一個基本表單，用于用戶對應(yīng)用規(guī)則中更為細致的配置，并且要注意，所有的配置都是實時生效，因此在每一次修改配置時，飛書上都會有Loading 效果。當然我們可以將開關(guān)換成單一多選框，但切換后用戶就很難理一二級之間的邏輯關(guān)系，因此開關(guān)更為適合權(quá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è)計的褻瀆，當