2022-4-15 高勁
之前總結(jié)了B端表單頁設(shè)計(jì)的一些問題，其中信息錄入是比較重要的部分，信息錄入中選擇錄入是最為常用及復(fù)雜的組件，平時(shí)工作中遇到的相關(guān)問題也是最多的，此次針對選擇錄入常用組件的應(yīng)用場景和交互規(guī)則進(jìn)行總結(jié)
選擇錄入的類型比較多，可以簡單的分為兩大類即
基礎(chǔ)選擇組件：單選/多選/開關(guān)/下拉選擇
復(fù)雜選擇組件：時(shí)間/日期/穿梭框/級(jí)聯(lián)選擇/樹形選擇等
B端表單業(yè)務(wù)場景比較多，很多場景具有通用性，有的場景卻有一定的獨(dú)立性，需要了解場景及用戶的需求和組件的適用性才能提高用戶操作體驗(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)的按鈕。
使用場景
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.排列對齊方式，豎直排列相對于水平排列而言，容易讀取和定位，可以提高用戶的瀏覽效率，所有的選項(xiàng)進(jìn)行左對齊，不用受制于選項(xiàng)的標(biāo)簽文字長短，但豎直排列會(huì)占用較多的垂直空間；水平排列要注意每個(gè)選項(xiàng)之間的間距，間距盡量大一點(diǎn)，要不然用戶會(huì)分不清單選按鈕的文字到底是在前邊，pc端水平空間比較大，所以相對而言，水平排列的方式更加常用。
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)行精簡，必須使用多行文字，將單選按鈕與文字頂對齊
7.交互狀態(tài)，每個(gè)選項(xiàng)都有選中和未選中兩種情況，每種情況對應(yīng)了3種交互狀態(tài)，分別為默認(rèn)、懸浮和禁用。
二.多選框
多選框的交互定義是幫助用戶完成從若干個(gè)互斥的選項(xiàng)集合當(dāng)中選取一個(gè)或者多個(gè)選項(xiàng)的任務(wù)，多選框多用于表單中。傳統(tǒng)意義上，多選框是方形，單選框是圓的，用戶已經(jīng)形成這種習(xí)慣認(rèn)知，所以盡量避免使用特殊形狀
使用場景
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)排序/對齊方式/交互區(qū)域/文字標(biāo)簽等邏輯與單選框基本一致
1.選項(xiàng)的設(shè)置，因?yàn)樗羞x項(xiàng)處于外露狀態(tài)，所以超過7個(gè)時(shí)建議使用下拉選擇器，避免選項(xiàng)過多難以展示
2.默認(rèn)選項(xiàng)，相對單選框，默認(rèn)選擇在多選框中并不常見
3.提交操作，單個(gè)多選場景中，提交時(shí)必不可少的，可以是確認(rèn)按鈕或是其他方式；下拉選框中為了提高效率也可不用確認(rèn)，點(diǎn)擊空白處即確認(rèn)選擇。
4.排列對齊方式：縱向排布，適用于選項(xiàng)內(nèi)容較多或信息長度差異較大的情況；橫向，適用于選項(xiàng)數(shù)量多且內(nèi)容簡短的情況
5.特殊狀態(tài)：相對于其他控件，多選有了兩個(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)用場景
1.復(fù)雜選擇器
復(fù)雜選擇器中常常會(huì)用到多選框，可以明確展示選項(xiàng)的選擇狀態(tài)，需要注意的是多選框可以承載的半選，全選狀態(tài)所對應(yīng)的關(guān)系，是否符合業(yè)務(wù)場景。在實(shí)際工作中，我曾遇到過父級(jí)選擇影響子級(jí)但是子級(jí)無法影響父級(jí)的多選場景，不符合常規(guī)的多選習(xí)慣，但是在實(shí)際業(yè)務(wù)場景中真實(shí)存在。
2.權(quán)限設(shè)置
在很多權(quán)限設(shè)置/流程設(shè)置的頁面中，常常會(huì)用到多選框，需要注意的是各個(gè)場景中選中，取消，默認(rèn)，重置等不同狀態(tài)下，頁面的變化，狀態(tài)扭轉(zhuǎn)時(shí)交互邏輯的合理性和易用性。
3.表格多選
表格頁面情況多且復(fù)雜，對于勾選有兩種形式一種是勾選多選框，一種是點(diǎn)擊行數(shù)據(jù)選擇，需要明確哪一種更適合當(dāng)前的業(yè)務(wù)場景。另外表格的中最多的功能即是全選操作或是部分選擇操作，需明確操作后對整個(gè)表格的影響
三.開關(guān)
開關(guān)用于兩種相對對立的狀態(tài)的切換,多用于「開/關(guān)」「啟用/停用」等，不同于單選和多選開關(guān)是一個(gè)即時(shí)性的操作，這也導(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)動(dòng)性，通過開關(guān)去控制下層功能的操作
3.開關(guān)的每一次變更狀態(tài)都要有相應(yīng)的反饋，輔助用戶進(jìn)行狀態(tài)判斷
四.下拉選擇
下拉選擇B端業(yè)務(wù)中最常用的組件，且下拉選擇的類型也比較廣，一般有下拉單選，下拉多選，下拉級(jí)聯(lián)，下拉樹等基本場景是可選項(xiàng)過多時(shí)，會(huì)使用下拉選擇器對所有選項(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ì)配上搜索功能，目的是為了讓用戶快速找到對應(yīng)的選項(xiàng)，而形式主要有以下兩種
3.右側(cè)標(biāo)識(shí)(可選)：每個(gè)選框右側(cè)的圖標(biāo)，都是選框類型的象征。常見的是下拉箭頭，默認(rèn)朝下；展示選項(xiàng)列表時(shí)，箭頭朝上。
4.占位符：保持暗提示的簡潔，避免把暗提示作為選擇器的輔助說明，默認(rèn)占位文字，格式為「請選擇xxx」
5.回顯值：回顯值通常包括兩種類型
1）當(dāng)下拉單選，一般采用純文本回顯即可
2）當(dāng)下拉多選，需要同時(shí)展示多個(gè)選中項(xiàng)，因此在錄入框中采取Tag形式，使單個(gè)選項(xiàng)也可以點(diǎn)擊刪除形成完整的閉環(huán)
6.選項(xiàng)：下拉選擇一般針對選項(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)展示，針對的一般是有所屬關(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ì)對下拉菜單的高度進(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)下全部清空的功能，不是所有場景下配置該功能， 要考慮實(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ī)則
單選，多數(shù)單選選擇后下拉面板自動(dòng)收起，回顯選擇的選項(xiàng)，選項(xiàng)回顯時(shí)有一些特殊情況如存在極端情況文案過長則結(jié)尾用「…」展示， hover 顯示「文字提示氣泡」；或者選項(xiàng)中存在主文本副文本，考慮實(shí)際業(yè)務(wù)場景回顯時(shí)可只顯示主文本。
多選，以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)的場景中，通過改變錄入框的整體高度來展示完整的選型，撐開的高度能在表單中實(shí)現(xiàn)一些疏密變化，一般也不會(huì)無限撐開，會(huì)有一定的限制，并且在右側(cè)增加滾動(dòng)條。
2）選項(xiàng)融合，對選項(xiàng)展示不作要求的場景中可根據(jù)文本框的寬度進(jìn)行選項(xiàng)融合，展示具體的選項(xiàng)數(shù)量即可，這樣能最大程度的保證表單的的整齊，讓選擇器的適配性更高。
3）省略展示選項(xiàng)，以文本形式展示，鼠標(biāo)hover氣泡展示全部選項(xiàng)信息
問題思考
何時(shí)用下拉選框，何時(shí)用彈窗選擇？
大部分情況下，單選優(yōu)先用下拉選框，用戶比較高效的完成選擇，同時(shí)也可以明確自己的選擇。而多選場景中對于選項(xiàng)數(shù)量可控，選項(xiàng)復(fù)雜度較低的可以用下拉選框。但是對于選項(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)的方式。
選擇搜索如何顯示？
如下彈窗選擇中，對于數(shù)量和層級(jí)比較復(fù)雜的選擇項(xiàng)，搜索是很有必要的，對于搜索結(jié)果的展現(xiàn)形式不同的場景可能會(huì)有不同，用戶使用搜索一般是對于選項(xiàng)比較明確，所以推薦搜索結(jié)果展示末級(jí)，用戶可以更高效的做出選擇，避免復(fù)雜的層級(jí)關(guān)系干擾。
五.時(shí)間與日期選擇器
兩種類型
1.時(shí)間點(diǎn)選擇，選定某一個(gè)時(shí)間/日期點(diǎn)，B端時(shí)間點(diǎn)選擇的業(yè)務(wù)場景較少
2.時(shí)間段選擇，選定某一個(gè)時(shí)間范圍，一般有開始時(shí)間和結(jié)束時(shí)間，時(shí)間段的應(yīng)用一般是在數(shù)據(jù)篩選的場景中
確定時(shí)間類型后，要考慮時(shí)間粒度，時(shí)間粒度分為年、季、月、周、天、時(shí)、分、秒，B端圖表頁面中針對年度、季度、月度的篩選時(shí)很常見的，需要結(jié)合場景選擇時(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í)間段，相對而言連體式操作更便捷，但是分段式理解更簡單，連體式存在一定的認(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ì)遇到各種新的場景，總結(jié)會(huì)有不足不全之處，歡迎大家一起探討交流。
文章來源：站酷 作者：MuMu魚
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.ocunn.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ù)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.ocunn.cn