編輯導語：在B端系統的設計過程中，設計師要對基礎控件有充分的認識，以及對控件使用影響因素進行規避處理。本文作者對“選擇器”的類型和使用進行了分析，一起來看一下吧。

B端系統設計過程中，基礎設計控件的重要性不言而喻，需要設計師對基礎控件有充分的認識，以及對控件使用影響因素進行規避處理。

01 選擇器如何使用

那么對這個主題議題分解下，聊幾個小問題。

在各個場景中，明確的是選擇器是從設計層面來解決問題——控件如何在特定場景中適用——怎么判定場景適用的控件依據——從需求挖掘。

1. 了解選擇器，以及選擇器有哪些常用的衍生選擇控件
2. 為什么要用不同的選擇器
3. 誰來操作使用選擇器
4. 什么場景下使用不同的選擇器
5. 在特定的場景下，適用什么樣的選擇器
6. 使用選擇器需要注意哪些問題

設計解決的就是問題，把問題弄明白了，設計執行就比較順利了。

那么選擇器類型、場景、影響因素結合起來表述比較適合，分開說沒有意義。且相互之間互有穿插。

選擇器大家都不陌生，能叨叨明白的事情，就別動手；能用選擇的，就別手動輸入。選擇比輸入操作有著更好的便利性。大多數情況下，都希望鼠標點點就把事情處理掉，在B端這方面也更是為此付出更多的努力。由基礎的單選控件，在不同的場景中，演化出不同的選擇方式。

但不能說輸入類控件不重要，然而恰恰相反，越復雜的數據處理系統，輸入類控件也是占據重要的位置。因為是選擇無法處理的事項需要手動輸入（區別于篩選區的輸入模糊搜索）。

粗略判斷下，類型與影響因素以及應用場景之間的關系：

02 選擇類型

大多數朋友對選擇的使用認識，在設計執行中，選擇器是應用最廣泛的，常用的包含有基礎選擇器單選框、多選框，演變的下拉單選框、下拉多選框，變異體的級聯選擇器、穿梭框、樹選擇器。

共同的認識中，各大設計系統平臺，組建規范里將這些內容歸類到數據錄入模塊內。

在之前的文章中「數據錄入控件的使用」，有提到選擇類控件在實際應用中的不同表現形式，這里從個體角度去介紹場景中應用選擇器。

03 單選控件

選項個數和選項字段長度是雙重影響，常規思路，產品在畫原型的時候，盡可能的控制選項的個數、選項字段的長度，通常情況下會控制在4個字以內。而在復雜的數據處理系統內，選項字段名稱都是專用的，短不了，所以得換思路，單選不行就要轉向尋求別的方式。

1. 篩選區

比較少用單選按鈕控件，且考慮統一性的前提下，用下拉單選控件替代，即使是「是」「否」單選項內容。

2. 表格區

表格范圍更容易理解，單選按鈕方式不行，下拉選擇框是優選。另一個延伸問題字段長度過長顯示問題。分兩種情況，一種是必須全顯示；另一種是省略部分字段，選中的選項顯示如下展示。

3. 表單區

表單對選擇的可操作性、容忍度都挺高，在這里都是根據操作用戶的行為，怎么方便怎么來。有種情況下，即使選項字段明確簡短，出于不干擾讀取的角度考慮，還會用下拉選擇框控件顯示。表明只顯示只想要的。

4. 問卷區

需求用提到需要用到問卷的功能，問卷區就比較單一，所以單選/多選按鈕控件是最常見的，向使用者展示擁有的選項，且是全顯示。

web端不受選項字段長度和選項個數影響。

移動端在布局和顯示上需要做調整。

04 多選控件

1. 篩選區

篩選里每一選擇的選項都是單個，可以理解為精選指定的某一項，目標很明確。也有個別場景需要，比如醫療科研研究的病例數據信息，篩選的條件如同電商那樣，分類篩選。本身關鍵詞長度也不是固定的，有長有短，所以在樣式上，考慮橫向空間的最大化利用，容納更多選項，取消點選按鈕樣式。

2. 表格區

多選按鈕多在表格區里常見，一般與批量處理搭配，比如批量刪除。

業務需求的要求，在圖表里也需要多選。簡單可以理解為圖表可視化的篩選，篩選的結果也是圖表展示。字段長度和選項也不再是重要的影響因素。

表單區問卷區不做贅述，同上單選。

當新增一些數據以及選擇數據的部分指標時，以及指標之間的關系，單單多選按鈕已經不能達到業務需求的表示方式，那么需要對多選方式進行改造，區別的是下拉多選的顯示，各大設計系統里都有對這部分的基礎展示樣式。在這基礎上進行調整。

05 樹選擇器

樹選擇器的標志性特點就是父子層級關系很明確，應用場景也很廣，導航目錄、病例資料等。常和多選按鈕結合在一起使用。部分專業用詞長度不可縮減，限定長度，參考方式依據上述的單選。

1. 篩選區

結構性信息在篩選區應用的不多，有的話，將父子級文案在框內顯示出來，且層級一般不會超過三級，要兼顧字段長度，超出了深度太深了，父子級文本在有限的框框內顯示意義不在了，需考慮其他方式。

2. 表格區

表格里樹結構參與度不高。層級過深，表格需求的意義就不大了，不超過三級，控制在二級以內，且二級的信息量不超過父級，更多的信息是放在詳情里。

3. 表單區

不完全定位在常規的表單區內，在需要填寫填寫數據信息的場景下，都可應用到。

問卷區不用它。

06 級聯選擇器

級聯選擇器和樹選擇有著相似的結構，明確指明的父子級關系。在操作的不同之處是級聯選擇是單向道，先選擇父級才會有子級，所以在應用場景上區別開來，常用做地址選擇、科室選擇等。

地址選擇：僅受字段長度的影響，特別是新疆西藏等地方名稱，展開選項時，展開樣式不受頁面影響，可全顯示文本，亦可做部分缺失處理（依然可看完整名稱）。完成地址選擇顯示即為全顯示。

1. 篩選區

在權限高的賬戶體系的系統界面里，篩選患者需要用到科室的篩選。而一般一線操作員的權限系統界面基本不需要篩選科室。

2. 表格區

部分表格也會將表格的表頭名科室香作為篩選按鈕，而省去篩選區里的科室篩選。

3. 表單區

新增患者信息，會讓輸入患者地址信息，方便藥品配送。一般在表單區填寫患者信息一并將患者地址完成掉。

在部分需求里，給新建系統賬戶時，亦會用到級聯選擇器輔助配置權限。

07 日期/時間選擇器

也是選擇的一種，有單選日期點、時間點、時間周期。常應用在篩選區，查詢在指定的一段時間內符合的患者信息；統計指定周期內的數據信息，比如走勢圖圖，柱狀圖等；患者隨訪跟蹤，定時提醒。

08 后記

在這里一是向大伙整理選擇器的多種形態、樣式，二是基于這些樣式結合各自項目產品的需求進行添磚加瓦，稍加改造控件組件，設計符合業務要求的控件樣式。貼合需求的設計的才算是恰當的解決方式。

本文由 @Ychen（啊嗚計） 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash，基于 CC0 協議。