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

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

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

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

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

一.單選框

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

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

• 使用場(chǎng)景

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

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

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

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

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

• 交互邏輯

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

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

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

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

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

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

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

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

二.多選框

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

• 使用場(chǎng)景

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

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

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

• 交互邏輯

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

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

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

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

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

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

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

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

• 應(yīng)用場(chǎng)景

1.復(fù)雜選擇器

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

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

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

3.表格多選

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

三.開關(guān)

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

• 使用場(chǎng)景

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

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

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

• 交互邏輯

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

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

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

四.下拉選擇

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 選擇器狀態(tài)

默認(rèn)（Default  

懸停（Hover

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

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

激活（Active

1.未選擇，點(diǎn)擊框體激活下拉面板，單選一般是勾選后自動(dòng)關(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è)計(jì)工程中需要將禁用于正常狀態(tài)之間拉開差距，這樣用戶能快速識(shí)別

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

• 回顯規(guī)則

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

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

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

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

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

問題思考

何時(shí)用下拉選框，何時(shí)用彈窗選擇？

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

選擇搜索如何顯示？

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

五.時(shí)間與日期選擇器

• 兩種類型

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

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

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

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

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

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

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

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

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

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