之前總結(jié)了B端表單頁設(shè)計的一些問題，其中信息錄入是比較重要的部分，信息錄入中選擇錄入是最為常用及復(fù)雜的組件，平時工作中遇到的相關(guān)問題也是最多的，此次針對選擇錄入常用組件的應(yīng)用場景和交互規(guī)則進(jìn)行總結(jié)

選擇錄入的類型比較多，可以簡單的分為兩大類即

基礎(chǔ)選擇組件：單選/多選/開關(guān)/下拉選擇

復(fù)雜選擇組件：時間/日期/穿梭框/級聯(lián)選擇/樹形選擇等

B端表單業(yè)務(wù)場景比較多，很多場景具有通用性，有的場景卻有一定的獨(dú)立性，需要了解場景及用戶的需求和組件的適用性才能提高用戶操作體驗(yàn)和效率 

一.單選框

單選框(Radio)是表單中比較常用的控件，它通常被用來從一組互斥的相關(guān)選項(xiàng)中選擇一個單獨(dú)的選項(xiàng)。

當(dāng)點(diǎn)擊一個未選中的單選名時，它會被選中，其他按鈕為未選中狀態(tài)。英文命名Radio來源于舊收音機(jī)上的按鈕，用于舊收音機(jī)不同頻道的切換，當(dāng)一個按鈕被按下時，其他按鈕會彈起，使被按下的按鈕處于唯一被選擇狀態(tài)的按鈕。

• 使用場景

1.當(dāng)用戶需要在一組互斥的選項(xiàng)中進(jìn)行單一選擇時使用單選框；如果要進(jìn)行多個選擇，推薦使用多選框。

2.當(dāng)選項(xiàng)數(shù)目在2-7個之間時使用單選框；如果選項(xiàng)超過7個，推薦使用下拉框。

3.如果有兩個含義相反的選項(xiàng)，如“同意”和“不同意”，“接受”和“拒絕”等，建議使用一個多選框或者開關(guān)勾選為同意，不勾選為不同意。

4.如果每個選項(xiàng)都有同等的優(yōu)先級，沒有推薦選項(xiàng)時，使用單選框；如果需要向用戶推薦某個選項(xiàng)，可以使用下拉框。

5.如果提供給用戶的選項(xiàng)很熟悉，看了第一個選項(xiàng)就能預(yù)見到所有的內(nèi)容，如“周一”，那么后邊的選項(xiàng)是“周二到周日”等，這種情況下就不需要將所有的選項(xiàng)都展示出來，可以使用下拉框來簡化界面。

• 交互邏輯

1.選項(xiàng)的設(shè)置，在設(shè)計單選框的選項(xiàng)時，要充分考慮用戶的實(shí)際情況，給出的選項(xiàng)要覆蓋到所有的情況。應(yīng)該滿足“互斥”的原則，因此選項(xiàng)之間要避免存在交集，同時也要注意選項(xiàng)覆蓋要全面，不能出現(xiàn)遺漏。

例如，要考慮到用戶不進(jìn)行選擇的情況，這時需要提供一個“無”的選項(xiàng)。給出的選項(xiàng)有可能都不符合用戶的情況，如果所有的選項(xiàng)用戶都可能不會選，就需要提供一個“其它”選項(xiàng)。

2.默認(rèn)選項(xiàng)，一般情況下為第一個選項(xiàng)，需要選擇最安全，最有可能的選項(xiàng)作為默認(rèn)選項(xiàng)，提前預(yù)判用戶的選擇，提升用戶選擇效率。

3.選項(xiàng)排序會影響用戶選擇效率，所以需要遵循一定的原則。按照邏輯順序，選擇概率由高到低；或者按照復(fù)雜程度排序，由簡單到復(fù)雜；也可以按照操作后風(fēng)險排序，將最安全的操作放在前邊，由風(fēng)險最低到最高進(jìn)行排序

4.排列對齊方式，豎直排列相對于水平排列而言，容易讀取和定位，可以提高用戶的瀏覽效率，所有的選項(xiàng)進(jìn)行左對齊，不用受制于選項(xiàng)的標(biāo)簽文字長短，但豎直排列會占用較多的垂直空間；水平排列要注意每個選項(xiàng)之間的間距，間距盡量大一點(diǎn)，要不然用戶會分不清單選按鈕的文字到底是在前邊，pc端水平空間比較大，所以相對而言，水平排列的方式更加常用。

5.交互區(qū)域，單選框的面積較小，用戶在點(diǎn)擊的時候會比較困難?？梢酝ㄟ^擴(kuò)大點(diǎn)擊區(qū)的交互區(qū)域來提高易用性，將標(biāo)簽文字也設(shè)置為可點(diǎn)擊，增加操作區(qū)域的面積，方便用戶操作

6.文字標(biāo)簽，每個選項(xiàng)的文字都要簡潔明了的表達(dá)該選項(xiàng)所代表的含義。一般使用短語而不是句子，因此不需要以句號來結(jié)尾。盡量保證每個文字標(biāo)簽用語的表達(dá)的一致性，不要出現(xiàn)有的用名詞，有的用動詞的情況。如果需要解釋說明，可以在選項(xiàng)下方使用單獨(dú)一行文字。如果標(biāo)簽文字無法進(jìn)行精簡，必須使用多行文字，將單選按鈕與文字頂對齊

7.交互狀態(tài)，每個選項(xiàng)都有選中和未選中兩種情況，每種情況對應(yīng)了3種交互狀態(tài)，分別為默認(rèn)、懸浮和禁用。

二.多選框

多選框的交互定義是幫助用戶完成從若干個互斥的選項(xiàng)集合當(dāng)中選取一個或者多個選項(xiàng)的任務(wù)，多選框多用于表單中。傳統(tǒng)意義上，多選框是方形，單選框是圓的，用戶已經(jīng)形成這種習(xí)慣認(rèn)知，所以盡量避免使用特殊形狀

• 使用場景

1.當(dāng)用戶需要在一組互斥的選項(xiàng)中進(jìn)行多個選擇，完成N選n的任務(wù)，使用多選框

2.當(dāng)選項(xiàng)數(shù)目在3-7個之間時使用多選框；如果選項(xiàng)超過7個，推薦使用下拉選擇

3.當(dāng)選項(xiàng)數(shù)量為一個，包含“是”和“否”的邏輯，也可叫單個多選框 比如常見的用戶協(xié)議頁面，通常采用單個多選框。

• 交互邏輯

選項(xiàng)排序/對齊方式/交互區(qū)域/文字標(biāo)簽等邏輯與單選框基本一致

1.選項(xiàng)的設(shè)置，因?yàn)樗羞x項(xiàng)處于外露狀態(tài)，所以超過7個時建議使用下拉選擇器，避免選項(xiàng)過多難以展示

2.默認(rèn)選項(xiàng)，相對單選框，默認(rèn)選擇在多選框中并不常見

3.提交操作，單個多選場景中，提交時必不可少的，可以是確認(rèn)按鈕或是其他方式；下拉選框中為了提高效率也可不用確認(rèn)，點(diǎn)擊空白處即確認(rèn)選擇。

4.排列對齊方式：縱向排布，適用于選項(xiàng)內(nèi)容較多或信息長度差異較大的情況；橫向，適用于選項(xiàng)數(shù)量多且內(nèi)容簡短的情況

5.特殊狀態(tài)：相對于其他控件，多選有了兩個較為特殊的狀態(tài)“半選中”“禁用(已選)”

1）半選中狀態(tài)是全選狀態(tài)的一種特殊狀態(tài)，依附于全選狀態(tài)，所以當(dāng)多選框中存在全選時才可能出現(xiàn)半選狀態(tài)，同時還需要有選中狀態(tài)的子項(xiàng)，全選半選狀態(tài)屬于【父級】狀態(tài)，交互的邏輯是狀態(tài)的變化是隨時體現(xiàn)的，所以【子級】狀態(tài)的變化，作為【父級】狀態(tài)也應(yīng)該隨之變化，這樣父子級聯(lián)動才會有半選中狀態(tài)的出現(xiàn)。

2）禁用狀態(tài)有未選禁用和已選禁用，未選禁用一般是該條數(shù)據(jù)不滿足條件無法選中進(jìn)行操作。而已選禁用一般用戶的權(quán)限不足無法進(jìn)行操作，通常展示出來只是為了讓用戶了解到有此操作。 

• 應(yīng)用場景

1.復(fù)雜選擇器

復(fù)雜選擇器中常常會用到多選框，可以明確展示選項(xiàng)的選擇狀態(tài)，需要注意的是多選框可以承載的半選，全選狀態(tài)所對應(yīng)的關(guān)系，是否符合業(yè)務(wù)場景。在實(shí)際工作中，我曾遇到過父級選擇影響子級但是子級無法影響父級的多選場景，不符合常規(guī)的多選習(xí)慣，但是在實(shí)際業(yè)務(wù)場景中真實(shí)存在。

2.權(quán)限設(shè)置

在很多權(quán)限設(shè)置/流程設(shè)置的頁面中，常常會用到多選框，需要注意的是各個場景中選中，取消，默認(rèn)，重置等不同狀態(tài)下，頁面的變化，狀態(tài)扭轉(zhuǎn)時交互邏輯的合理性和易用性。

3.表格多選

表格頁面情況多且復(fù)雜，對于勾選有兩種形式一種是勾選多選框，一種是點(diǎn)擊行數(shù)據(jù)選擇，需要明確哪一種更適合當(dāng)前的業(yè)務(wù)場景。另外表格的中最多的功能即是全選操作或是部分選擇操作，需明確操作后對整個表格的影響 

三.開關(guān)

開關(guān)用于兩種相對對立的狀態(tài)的切換,多用于「開/關(guān)」「啟用/停用」等，不同于單選和多選開關(guān)是一個即時性的操作，這也導(dǎo)致開關(guān)使用的特殊性。開關(guān)能明確的展示當(dāng)前的功能狀態(tài)，讓用戶能高效的進(jìn)行跳轉(zhuǎn)操作。

• 使用場景

1.用于對流程的快速開啟，如表格中開啟或關(guān)閉某條數(shù)據(jù)/功能

2.權(quán)重較高的功能或設(shè)置，如配置表單的停用/啟用，用戶權(quán)限的啟用/停用

3.用于開啟/關(guān)閉全局權(quán)限，后設(shè)置其他功能的操作，如業(yè)務(wù)規(guī)則的設(shè)置等

• 交互邏輯

1.開關(guān) 配有對應(yīng)的文字說明，開啟/關(guān)閉某種功能或權(quán)限

2.開關(guān)具有聯(lián)動性，通過開關(guān)去控制下層功能的操作

3.開關(guān)的每一次變更狀態(tài)都要有相應(yīng)的反饋，輔助用戶進(jìn)行狀態(tài)判斷

四.下拉選擇

下拉選擇B端業(yè)務(wù)中最常用的組件，且下拉選擇的類型也比較廣，一般有下拉單選，下拉多選，下拉級聯(lián)，下拉樹等基本場景是可選項(xiàng)過多時，會使用下拉選擇器對所有選項(xiàng)進(jìn)行整合方便用戶高效錄入信息。選項(xiàng)層級建議不超過 三層且需要有一定的邏輯排序，通常包括觸發(fā)器和下拉面板兩個部分當(dāng)選項(xiàng)數(shù)量過多的時候，建議增加「搜索」功能。

• 下拉選擇結(jié)構(gòu)

1.標(biāo)簽文本：選擇器標(biāo)題，明確選擇內(nèi)容

2.選框：與文本框類似，需有一個外邊框，為可操作的熱區(qū)范圍，主要功能是與下拉菜單進(jìn)行聯(lián)動

當(dāng)選項(xiàng)較多的時候，多選框會配上搜索功能，目的是為了讓用戶快速找到對應(yīng)的選項(xiàng)，而形式主要有以下兩種

3.右側(cè)標(biāo)識(可選)：每個選框右側(cè)的圖標(biāo)，都是選框類型的象征。常見的是下拉箭頭，默認(rèn)朝下；展示選項(xiàng)列表時，箭頭朝上。

4.占位符：保持暗提示的簡潔，避免把暗提示作為選擇器的輔助說明，默認(rèn)占位文字，格式為「請選擇xxx」

5.回顯值：回顯值通常包括兩種類型

1）當(dāng)下拉單選，一般采用純文本回顯即可

2）當(dāng)下拉多選，需要同時展示多個選中項(xiàng)，因此在錄入框中采取Tag形式，使單個選項(xiàng)也可以點(diǎn)擊刪除形成完整的閉環(huán)

6.選項(xiàng)：下拉選擇一般針對選項(xiàng)數(shù)超過5個

內(nèi)容：1）選框 + 文本 + 副文本； 2）選框 + 文本； 3）文本 + 副文本； 4）文本。除了選項(xiàng)內(nèi)容的不同，形式中也有較為復(fù)雜的，重點(diǎn)分析級聯(lián)選擇和樹：

1)樹展示，可選擇的數(shù)據(jù)是一個樹形結(jié)構(gòu)時，例如公司層級、學(xué)科系統(tǒng)、分類目錄等，樹結(jié)構(gòu)中可以自由選擇子節(jié)點(diǎn)和根結(jié)點(diǎn)。

2)級聯(lián)展示，針對的一般是有所屬關(guān)系的選項(xiàng)且所屬關(guān)系比較明確，層級一般3-5級，選擇到最末子級才能完成選擇一般是由大到小進(jìn)行選擇，選項(xiàng)數(shù)量上3>2>1，比如省市縣選擇

3)分組展示,選項(xiàng)過多時考慮使用的方式，使用分割線將同一類選項(xiàng)進(jìn)行劃分，用戶選擇時會思考從大的分類到具體的選項(xiàng)。但選項(xiàng)過多則還是建議用樹結(jié)構(gòu)

7.選項(xiàng)面板：承載所有可選擇的選項(xiàng)列表，在選項(xiàng)數(shù)量過多時會對下拉菜單的高度進(jìn)行限制，即設(shè)置下拉菜單的最大高度，當(dāng)超過最大高度時，出現(xiàn)滾動條。面板相當(dāng)于一個容器可以根據(jù)業(yè)務(wù)需求承載復(fù)雜的形式 例如tab分類、錨點(diǎn)、字母定位等，

• 選擇器狀態(tài)

默認(rèn)（Default  

懸停（Hover

1.未選擇，若選框有搜索功能則光標(biāo)變成文本輸入狀態(tài)，若沒有搜索功能則光標(biāo)變成小手（示例

2.已選擇，選擇后懸停狀態(tài)下全部清空的功能，不是所有場景下配置該功能， 要考慮實(shí)際業(yè)務(wù)中是否需要清空

激活（Active

1.未選擇，點(diǎn)擊框體激活下拉面板，單選一般是勾選后自動關(guān)閉面板，多選則需要點(diǎn)擊面板以外確認(rèn)關(guān)閉面板

2.已選擇，若是已選擇再次激活，需要將已選擇的選項(xiàng)高亮，再次點(diǎn)擊已選選項(xiàng)則取消選擇；選項(xiàng)熱區(qū)，一般將整行作為熱區(qū)擴(kuò)大點(diǎn)擊范圍，方便用戶操作。

禁用（Disable

1.選框禁用，用戶無法激活，選框置灰，在設(shè)計工程中需要將禁用于正常狀態(tài)之間拉開差距，這樣用戶能快速識別

2.選項(xiàng)禁用，表示該選項(xiàng)無法被選擇，不影響整個選擇器的功能，只用將該選項(xiàng)置灰即可，光標(biāo)置入時會變成Not allowed

• 回顯規(guī)則

1. 單選，多數(shù)單選選擇后下拉面板自動收起，回顯選擇的選項(xiàng)，選項(xiàng)回顯時有一些特殊情況如存在極端情況文案過長則結(jié)尾用「…」展示， hover 顯示「文字提示氣泡」；或者選項(xiàng)中存在主文本副文本，考慮實(shí)際業(yè)務(wù)場景回顯時可只顯示主文本。

2. 多選，以Tag形式展示已選擇項(xiàng)使單個選項(xiàng)也可以點(diǎn)擊刪除形成完整的閉環(huán)；存在的極端情況是當(dāng)選項(xiàng)過多時的展示效果，一般有兩種形式撐開高度和選項(xiàng)融合

      1）撐開高度，一般用在需要完全展示選擇項(xiàng)同時可快速調(diào)整已選項(xiàng)的場景中，通過改變錄入框的整體高度來展示完整的選型，撐開的高度能在表單中實(shí)現(xiàn)一些疏密變化，一般也不會無限撐開，會有一定的限制，并且在右側(cè)增加滾動條。

     2）選項(xiàng)融合，對選項(xiàng)展示不作要求的場景中可根據(jù)文本框的寬度進(jìn)行選項(xiàng)融合，展示具體的選項(xiàng)數(shù)量即可，這樣能最大程度的保證表單的的整齊，讓選擇器的適配性更高。

     3）省略展示選項(xiàng)，以文本形式展示，鼠標(biāo)hover氣泡展示全部選項(xiàng)信息

問題思考

何時用下拉選框，何時用彈窗選擇？

大部分情況下，單選優(yōu)先用下拉選框，用戶比較高效的完成選擇，同時也可以明確自己的選擇。而多選場景中對于選項(xiàng)數(shù)量可控，選項(xiàng)復(fù)雜度較低的可以用下拉選框。但是對于選項(xiàng)結(jié)構(gòu)復(fù)雜，內(nèi)容過載，用戶頻繁的滾動容易造成誤操作影響選擇的準(zhǔn)確性和高效性，此時會考慮使用彈窗，且多選彈窗一般需要配有搜索區(qū)，選項(xiàng)區(qū)，已選區(qū)。需要注意的是，已選項(xiàng)在彈窗內(nèi)的顯示以及回顯形式。多選彈窗一般可以比較直觀的展示已選項(xiàng)，所以可以采用省略展示選項(xiàng)的方式。

選擇搜索如何顯示？

如下彈窗選擇中，對于數(shù)量和層級比較復(fù)雜的選擇項(xiàng)，搜索是很有必要的，對于搜索結(jié)果的展現(xiàn)形式不同的場景可能會有不同，用戶使用搜索一般是對于選項(xiàng)比較明確，所以推薦搜索結(jié)果展示末級，用戶可以更高效的做出選擇，避免復(fù)雜的層級關(guān)系干擾。

五.時間與日期選擇器

• 兩種類型

1.時間點(diǎn)選擇，選定某一個時間/日期點(diǎn)，B端時間點(diǎn)選擇的業(yè)務(wù)場景較少

2.時間段選擇，選定某一個時間范圍，一般有開始時間和結(jié)束時間，時間段的應(yīng)用一般是在數(shù)據(jù)篩選的場景中

確定時間類型后，要考慮時間粒度，時間粒度分為年、季、月、周、天、時、分、秒，B端圖表頁面中針對年度、季度、月度的篩選時很常見的，需要結(jié)合場景選擇時間粒度。

日期選擇器中一般是通過點(diǎn)擊讓用戶選擇時間，除了讓用戶點(diǎn)選外，時間選擇器還會提供一些快捷選項(xiàng)例如“今天、本周、本月，本季度“等。選擇后回顯的時間顯示格式有多種如“2022-01-01”“2022年01月01日”“2022.01.01”“20220101”“2022年01月01日”平臺需要確定統(tǒng)一的樣式，避免增加用戶的認(rèn)知成本。

時間段選擇，常見兩種形式分段式和連體式，在不同的平臺都有應(yīng)用，在交互上的區(qū)別分段式需要用戶點(diǎn)擊兩次分別選擇開始時間和結(jié)束時間，連體式是用戶點(diǎn)擊一次調(diào)起時間選擇時間段，相對而言連體式操作更便捷，但是分段式理解更簡單，連體式存在一定的認(rèn)知成本，總體上來說其實(shí)區(qū)別并不大，平臺需要建立統(tǒng)一的標(biāo)準(zhǔn)，這樣能形成較為統(tǒng)一的體驗(yàn)和習(xí)慣。 

選擇器在實(shí)際工作中應(yīng)用廣泛，B端業(yè)務(wù)復(fù)雜，總會遇到各種新的場景，總結(jié)會有不足不全之處，歡迎大家一起探討交流。

文章來源：站酷   作者：MuMu魚

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)