編輯導(dǎo)語：在B端系統(tǒng)的設(shè)計過程中，設(shè)計師要對基礎(chǔ)控件有充分的認(rèn)識，以及對控件使用影響因素進(jìn)行規(guī)避處理。本文作者對“選擇器”的類型和使用進(jìn)行了分析，一起來看一下吧。

B端系統(tǒng)設(shè)計過程中，基礎(chǔ)設(shè)計控件的重要性不言而喻，需要設(shè)計師對基礎(chǔ)控件有充分的認(rèn)識，以及對控件使用影響因素進(jìn)行規(guī)避處理。

01 選擇器如何使用

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

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

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

設(shè)計解決的就是問題，把問題弄明白了，設(shè)計執(zhí)行就比較順利了。

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

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

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

粗略判斷下，類型與影響因素以及應(yīng)用場景之間的關(guān)系：

02 選擇類型

大多數(shù)朋友對選擇的使用認(rèn)識，在設(shè)計執(zhí)行中，選擇器是應(yīng)用最廣泛的，常用的包含有基礎(chǔ)選擇器單選框、多選框，演變的下拉單選框、下拉多選框，變異體的級聯(lián)選擇器、穿梭框、樹選擇器。

共同的認(rèn)識中，各大設(shè)計系統(tǒng)平臺，組建規(guī)范里將這些內(nèi)容歸類到數(shù)據(jù)錄入模塊內(nèi)。

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

03 單選控件

選項個數(shù)和選項字段長度是雙重影響，常規(guī)思路，產(chǎn)品在畫原型的時候，盡可能的控制選項的個數(shù)、選項字段的長度，通常情況下會控制在4個字以內(nèi)。而在復(fù)雜的數(shù)據(jù)處理系統(tǒng)內(nèi)，選項字段名稱都是專用的，短不了，所以得換思路，單選不行就要轉(zhuǎn)向?qū)で髣e的方式。

1. 篩選區(qū)

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

2. 表格區(qū)

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

3. 表單區(qū)

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

4. 問卷區(qū)

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

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

移動端在布局和顯示上需要做調(diào)整。

04 多選控件

1. 篩選區(qū)

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

2. 表格區(qū)

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

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

表單區(qū)問卷區(qū)不做贅述，同上單選。

當(dāng)新增一些數(shù)據(jù)以及選擇數(shù)據(jù)的部分指標(biāo)時，以及指標(biāo)之間的關(guān)系，單單多選按鈕已經(jīng)不能達(dá)到業(yè)務(wù)需求的表示方式，那么需要對多選方式進(jìn)行改造，區(qū)別的是下拉多選的顯示，各大設(shè)計系統(tǒng)里都有對這部分的基礎(chǔ)展示樣式。在這基礎(chǔ)上進(jìn)行調(diào)整。

05 樹選擇器

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

1. 篩選區(qū)

結(jié)構(gòu)性信息在篩選區(qū)應(yīng)用的不多，有的話，將父子級文案在框內(nèi)顯示出來，且層級一般不會超過三級，要兼顧字段長度，超出了深度太深了，父子級文本在有限的框框內(nèi)顯示意義不在了，需考慮其他方式。

2. 表格區(qū)

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

3. 表單區(qū)

不完全定位在常規(guī)的表單區(qū)內(nèi)，在需要填寫填寫數(shù)據(jù)信息的場景下，都可應(yīng)用到。

問卷區(qū)不用它。

06 級聯(lián)選擇器

級聯(lián)選擇器和樹選擇有著相似的結(jié)構(gòu)，明確指明的父子級關(guān)系。在操作的不同之處是級聯(lián)選擇是單向道，先選擇父級才會有子級，所以在應(yīng)用場景上區(qū)別開來，常用做地址選擇、科室選擇等。

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

1. 篩選區(qū)

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

2. 表格區(qū)

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

3. 表單區(qū)

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

在部分需求里，給新建系統(tǒng)賬戶時，亦會用到級聯(lián)選擇器輔助配置權(quán)限。

07 日期/時間選擇器

也是選擇的一種，有單選日期點、時間點、時間周期。常應(yīng)用在篩選區(qū)，查詢在指定的一段時間內(nèi)符合的患者信息；統(tǒng)計指定周期內(nèi)的數(shù)據(jù)信息，比如走勢圖圖，柱狀圖等；患者隨訪跟蹤，定時提醒。

08 后記

在這里一是向大伙整理選擇器的多種形態(tài)、樣式，二是基于這些樣式結(jié)合各自項目產(chǎn)品的需求進(jìn)行添磚加瓦，稍加改造控件組件，設(shè)計符合業(yè)務(wù)要求的控件樣式。貼合需求的設(shè)計的才算是恰當(dāng)?shù)慕鉀Q方式。

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

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