一.什么是選擇器

選擇器是一個輸入字段西篓，?用戶必須在其中選擇一個（或多個）選項锣光，這與文本字段中用戶可以自由使用的輸入?yún)^(qū)不同踪危。選擇器具有各種不同的形狀和形式蔬浙。下拉菜單，復選框贞远，切換按鈕畴博，滑塊等都是不同類型的選擇器，但它們看起來彼此并不相似蓝仲。這些類型的選擇器之間的主要功能差異是用戶可以選擇的選項數(shù)量：一個或多個俱病。

二.選擇器的類別

-單選選擇器

-多選選擇器

1.單選選擇器

單選選擇器按效果又可以分為：點擊選擇器官疲、滑動選擇器、多聯(lián)動選擇器亮隙、開關選擇器途凫、可搜索效果的選擇器、地圖選擇器咱揍。

特點：同一時間只能選擇一個選項颖榜，當你已經(jīng)選擇完一項后，準備選取另一項煤裙，那么后選的一項會立刻使先選的一項被取消選擇掩完。

1-1點擊選擇器

點擊選擇器可分為兩種狀態(tài)，狀態(tài)一為立即觸發(fā)硼砰，當你點擊后會立即跳到下一步操作且蓬；狀態(tài)二為再次確認觸發(fā)，當選中某項時题翰，不會立即觸發(fā)操作恶阴，而是需要再點擊別的觸發(fā)類組件（如保存按鈕）后，再執(zhí)行操作豹障。

?

-立即觸發(fā)式：

特點：直接進入冯事，并沒有再次確認的按鈕，可以讓你快速到達想要的目的血公。

建議：雖然目的能快速達到昵仅，不過也很可能會造成誤操作，所以在設定這類選擇器時要多考慮手指的觸碰區(qū)域以及每個選擇元素的距離累魔，同時正因為是直接跳轉摔笤，所以應當加入一些操作提示。

舉例：汽車之家在用戶選擇二手車時就會出現(xiàn)此選擇器垦写，當我在汽車之家想要選擇二手車時吕世，它會彈出立即觸發(fā)式選擇器控件，我們在控件上可以看到有7個圓形選項梯投，分別為：汽車之家誠信聯(lián)盟命辖、準新車、奧迪分蓖、奔馳尔艇、寶馬、三廂轎車咆疗、分期購車漓帚，當我點擊“奧迪”選項時就會立即跳轉選擇后的頁面，為了讓用戶知道自己選擇后的狀態(tài)午磁，在跳轉頁面時還會彈出非模態(tài)彈窗的文字提示“共找到1943輛車”尝抖。

-再次確認觸發(fā)式：

特點：這是最為常見的選擇器類型毡们，當所在選項選上，除了選擇另一個選項之外昧辽，便沒法取消選中狀態(tài)衙熔。（選且只能選擇一個選項）

建議：在設定此類選擇器時我們應該從產(chǎn)品的角度去考慮是否給用戶一個默認選項，甚至是否考慮給出一個重置按鈕搅荞。

舉例：我剛注冊小紅書時红氯，在小紅書填寫信息頁面中，它的默認選項是“男”咕痛，我點擊“女”痢甘，則會自動取消掉“男”，它們兩者并不能同時存在茉贡，并且只有我點擊下一步按鈕時才會正式確認我選擇完成塞栅。

1-2滑動選擇器

特點：滑動選擇器是將需要選中的內(nèi)容滑動至中部，然后點擊確認按鈕確認選中后返回選中內(nèi)容腔丧。大多數(shù)運用在選擇時間或地址上放椰。

建議：滑動選擇器的展示區(qū)域有限，部分選項會被隱藏愉粤，最好是當用戶對所有選項都比較熟悉砾医、有預期的時候，才使用它衣厘。為了保證手機屏幕觸控精度如蚜，以免發(fā)生誤觸，滾輪選擇器建議控制在5列以內(nèi)头滔。

舉例：在小紅書填寫年齡信息時怖亭，我們只需用手指在區(qū)域內(nèi)滑動即可選擇想要的選項涎显。

1-3多聯(lián)動選擇器

特點：多聯(lián)動選擇器是由兩個或兩個以上的中繼器制作而成坤检，第一個中繼器選擇后，一般會對第二個中繼器進行篩選期吓，不過因為顯示的區(qū)域有限早歇，所以當你要切換時，還只能挨個切換讨勤，效率低下箭跳。

建議：可以通過數(shù)據(jù)以及功能來減少選擇時間，例如在選擇地區(qū)時潭千，根據(jù)當前GPS定位地理位置谱姓，定位相關省級信息及名稱，減少滑動操作刨晴。

舉例：如下屉来，當我選擇了內(nèi)蒙古自治區(qū)路翻，那么2級內(nèi)容就應該篩選掉內(nèi)蒙古以外的城市，比較適用于省份-城市或者品牌-產(chǎn)品這種類似的選擇茄靠，當然下面第一張多聯(lián)動選擇器也結合了滑動選擇器茂契。

多聯(lián)動選擇器展示的方式非常多，不僅可以用滑動形式展示慨绳，還可以用點擊掉冶、平鋪列表等形式展示。

在左圖選擇城市時脐雪，我們必須要先選擇省份厌小，再選擇城市，最后才能選擇縣战秋；

右圖則沒有先后順序召锈，不過當你首先選擇顏色時，如果沒有相同尺碼的衣服获询，缺貨的尺碼則不會被選中涨岁，先選擇尺碼也是相同道理。

1-4切換開關選擇器

特點：切換開關選擇器有且只有兩種選項吉嚣，用來在開和關兩種狀態(tài)之間切換梢薪。開關屬于觸發(fā)類組件，撥動開關時尝哆，它所指揮的某個操作會立即生效秉撇，常見的使用就是授權。開關的默認狀態(tài)并不都是關閉的秋泄，還要從產(chǎn)品本身的設定上來決策琐馆。

建議：如果某開關的功能是用戶經(jīng)常使用的狀態(tài)，那么可以在默認狀態(tài)下打開開關恒序，不過需要注意的是在某些特殊的開關按鈕需要打開時瘦麸，必須要提前告知用戶。

舉例：當我打開UC瀏覽器的設置時歧胁，它的輔助功能就使用了切換開關選擇器多糠，切換的開關只需要點擊即可静秆。

1-5可搜索選擇器

特點：可搜索選擇器一般用于選擇項較多時籍凝，特別是對于電商購物類的APP搜索選擇器是必不可少的骡和，搜索選擇器會根據(jù)用戶輸入的內(nèi)容，對中繼器進行模糊的搜索崭参，讓用戶快速找到并選擇內(nèi)容呵曹。

建議：在搜索區(qū)域輸入文字時，可給予用戶更多的文字提示以及以及引導類信息。

舉例：小紅書在搜索時就會出現(xiàn)數(shù)字化的信息提示奄喂，這樣能夠很好的引導用戶進入到想要的搜索結果：筆記或者商品頁面之剧。

1-6地圖選擇器

特點：作為最特別的選擇器，它的功能是復雜的砍聊，它的操作方式也是多樣化的背稼，地圖選擇器的操作可點擊、可拖拽玻蝌、可放大縮小等等蟹肘，它多用于生活類APP。

建議：可以在選擇器中加入更多趣味俯树、互動帘腹、可感知的設計，如加入過節(jié)元素许饿、車輛行駛路徑阳欲、熱門區(qū)域、甚至選取后手機的震動等陋率。

舉例：

打車類APP必用的地圖選擇器球化，滴滴出行的用戶可以實時看到車輛信息，可以采用點擊瓦糟、拖拽筒愚、放大等操作來選取上車地點，選取后還有文字信息提示菩浙，讓用戶確認操作是否正確巢掺。

貝殼APP則用地圖選擇器來讓用戶選擇二手房，同時也采用了聯(lián)動式的效果劲蜻，第一步是查看區(qū)域陆淀，可以明確看到區(qū)域的售房套數(shù)，點擊選擇區(qū)域后我們可以看到每個路段的房子套數(shù)先嬉，點擊路段后就可以看到每個樓盤的套數(shù)以及均價轧苫，直到點擊樓盤就會彈出詳細信息框。這樣有助于用戶在選擇二手房時從大數(shù)據(jù)分析二手房的情況坝初，有更好的對比性與選擇性浸剩。

2.多選選擇器

當單選選擇器不能滿足用戶需要時钾军，這時我們就可以采用多選選擇器鳄袍，一般常用的多選選擇器都是采用點擊的方式，當然也有滑動類型的多選選擇器吏恭。

2-1點擊多選選擇器

特點：當用戶想要選擇多個類別的情況下拗小，我們就可以用點擊多選選擇器來展示提供給用戶選擇，通過屏幕點擊選中或取消選中該選項樱哼，它不會立即觸發(fā)操作哀九，需要再點擊別的觸發(fā)類組件（如保存按鈕）后剿配，再執(zhí)行操作。

建議：從用戶的角度來講盡量不要強制用戶選擇數(shù)量或者默認全部數(shù)量阅束；多選項時觸碰區(qū)域不能太小呼胚，以免造成誤操作。

舉例：小紅書在選擇感興趣的內(nèi)容時就采用了點擊多選選擇器息裸，不過在選擇興趣時它就強制用戶至少關注4個興趣蝇更，而對于單興趣或者少興趣的用戶來講，這無疑會造成用戶體驗的不佳呼盆，被逼再次從中選擇次要的興趣年扩。

2-2滑動多選選擇器

特別注明：從用戶的角度來看，它可以選擇多個區(qū)域段的內(nèi)容访圃，所以我把它分為多選選擇器中厨幻。

特點：當系統(tǒng)給出的選項不在自己的選擇區(qū)間時，可以很好的自定義選擇區(qū)間腿时，把定義權限交在用戶手里况脆。同樣，它需要再點擊別的觸發(fā)類組件（如保存按鈕）后批糟，再執(zhí)行操作漠另。

建議：在用戶滑動操作期間要有明確的操作提示，讓用戶時刻感知目前處于的狀態(tài)跃赚；滑動區(qū)域盡量不要超過100刻度笆搓，如果刻度距離太小，用戶在滑動時也很難精準的選擇范圍纬傲。

舉例：在汽車之家APP中满败，當我要選擇汽車價格范圍時就會出現(xiàn)此選擇器，我們可以用手指滑動來選取它的價格區(qū)間叹括，相對于上半部分的單選價格拓展性更強算墨，用戶可以自行選擇上半部分的單選選擇器，也可以選擇滑動多選選擇器汁雷，給予用戶更多的選擇净嘀。

三、選擇器的十大應用要點

1侠讯、簡單易懂

標題易懂：

在選擇器中標題一定要簡單明了挖藏，很快的讓用戶知道他在為什么做選擇（如：當你關注某烹飪的APP后，它會讓你勾選喜歡的菜譜厢漩，你的標題就可以用“選擇菜譜”四個字膜眠，簡單明了）

文字標簽易懂：

一般使用短語而不是句子，也并不需要用標點符號來結尾。（如：當選擇想要的菜譜時宵膨，菜譜后的文字不需要加入標點符號）

選取狀態(tài)易懂：

用戶能夠明確感知什么是選中狀態(tài)架谎，什么是未選中狀態(tài)，什么是禁用狀態(tài)辟躏。（如：選中狀態(tài)為高亮顯示谷扣，未選中為普通顯示，禁用狀態(tài)為灰度顯示）

反饋提示易懂：

當你在選擇中遇到選項限制或是否需要確認操作時捎琐，反饋提示一定要一目了然抑钟。（如：當你選擇某衣服時，S碼不能選擇野哭，則會用灰度顯示的文字代替在塔，甚至可以用中橫線劃過文字，明確告訴用戶不能選擇）

2拨黔、基本排序

從邏輯順序：

邏輯排序能讓用戶很快很準的找到自己需要的選項蛔溃，特別是對于選擇地址/時間/個數(shù)等常規(guī)的選項時，可以按照字母/遠近/大小來進行排序篱蝇。例如下面在選擇地址時贺待，就是按照A-Z字母排序，這樣可以大大節(jié)省用戶選擇的時間零截。

從產(chǎn)品利益角度排列順序：

當然為了產(chǎn)品自身的利益也可以自己優(yōu)化排序方式麸塞，選項的順序可以說服用戶進行選擇，用戶可能因為第一個選項在列表中的位置而選擇了第一個選項涧衙；可以輔助用戶哪工，也可以讓用戶向著產(chǎn)品所希望的方向傾斜。例如你在選擇菜譜時弧哎，產(chǎn)品為了讓用戶選擇更加優(yōu)質(zhì)的菜譜雁比，就會把用戶評價高的菜譜放在前列；當然商家也會這么做撤嫩，例如你要去買某款商品偎捎，商家會在選項中把熱門、優(yōu)質(zhì)的產(chǎn)品放在最上方序攘，讓你優(yōu)先選擇茴她。

從用戶體驗排列順序：

從用戶角度來說哪些對用戶體驗好，那么就把它排在前面程奠。例如汽車之家在進行車輛類別的排序中就把用戶量最多的轎車排在第一位丈牢，而把用戶量最少的輕客放在了最后一位；同樣它在汽車品牌選擇中梦染，單獨列出了熱門品牌把它放在前列赡麦，讓用戶進行快速選擇朴皆。

3帕识、一致性

視覺布局一致：

每個元素之間的對齊泛粹、元素與元素之間的間距、按鈕不同狀態(tài)的視覺體現(xiàn)肮疗。一般情況下移動端更傾向于左對齊晶姊，這樣有利于快速讀取選擇內(nèi)容，可以提高用戶的瀏覽效率并減少錯誤伪货。

圖片/插畫風格統(tǒng)一：

在圖文結合的選擇器中们衙，我們一定要保證圖片（插畫）的優(yōu)質(zhì)以及風格的統(tǒng)一。

4碱呼、合理運用默認選項

默認選項是選擇器的開始狀態(tài)蒙挑。在不同的選擇器中有不同的默認方式。

默認未選中：

這是最常見的一種狀態(tài)愚臀，特別是對于選擇年齡忆蚀、生日這些個人隱私信息，系統(tǒng)也沒有辦法進行默認選擇姑裂。

默認選中其中一個選項：

要想默認其中一項馋袜，必須考慮兩點因素，因素一：你想要潛意識的像用戶傳達信息舶斧，在單選選擇器中默認選擇一項后欣鳖，就可以潛意識的向用戶傳遞信息必須要在這組單選項之中選擇一個。因素二就是產(chǎn)品的傾向茴厉，例如此產(chǎn)品的性別9成都是女性泽台，那么建議默認選項為女性。

默認選中全部：

其實默認選中全部在用戶體驗上來講真的不是那么的友好矾缓，例如微博這個選擇器界面师痕，剛進這個界面時已經(jīng)全部勾選中，并且當你沒注意習慣性的點擊下面的按鈕時會生立即效而账，沒有返回的余地胰坟。（吐槽：有些APP甚至沒有一鍵取消功能，要一個個的點擊取消...）這也是為了產(chǎn)品犧牲掉了部分用戶體驗吧泞辐！

5笔横、給用戶更多選擇

單選選擇器的更多選擇：

如果用戶不想做出選擇，那么應該提供一個中立選項咐吼，為用戶提供一個明確的方向吹缔，中立選項比勉強選擇要好。例如在選擇行業(yè)領域時锯茄，以上并沒有你所處的領域或你不確定你的領域厢塘，你就可以選擇“不限”或“其他”茶没。

多選選擇器的更多選擇：

在多選選擇器中，如果不能把控到用戶的準確選項區(qū)間晚碾，那么可以考慮滑動多選選擇器抓半，讓用戶有更多的選擇區(qū)間，不管是汽車之家還是懂車帝在選擇車輛價格上兩者都是采用的相同方式格嘁。

6笛求、控件狀態(tài)

選擇控件在操作過程中必須更改其狀態(tài)/外觀，要明確讓用戶知道是否能選中糕簿，是否被選中探入。控件狀態(tài)一般分為三種：未選中懂诗、選中蜂嗽、禁用。

未選中

選擇器的開始狀態(tài)殃恒，向用戶表明植旧，可對該選擇控件進行操作。

選中

用戶操作選取狀態(tài)芋类，選擇控件處于被選中的狀態(tài)隆嗅。

禁用

一般情況會為灰色顯示，用戶將無法與選項進行交互侯繁。

7胖喳、操作提示

指的是用戶在操作中讓用戶得到相應的反饋，用戶根據(jù)這些反饋可以判斷當前狀態(tài)以及操作后狀態(tài)贮竟。在選擇器中丽焊，操作提示一般用輔助文案提示及非模態(tài)彈窗提示。

輔助文案提示（選擇前與選擇中）：

輔助文案指的是在選擇控件主體之外另外放置一些文案信息來充當說明咕别，例如下面是地區(qū)選擇技健，我在選擇不同層級的區(qū)域時，它的上方會出現(xiàn)輔助提示文案惰拱，讓你明確的知道你上一層級選擇的是什么雌贱。

同樣，當我在選擇價格區(qū)間時偿短，滑動選擇器的左上方一樣有文字類的提示：

非模態(tài)彈窗提示（選擇后）：

非模態(tài)彈窗一般出現(xiàn)在用戶操作完的跳轉頁面中欣孤，為了讓用戶感知所選的選項在頁面的狀態(tài)，如下昔逗，非模態(tài)彈窗告知用戶一共有7輛車符合標準降传。

當然除了非模態(tài)彈窗外，還有模態(tài)彈窗勾怒，但是用戶體驗極差婆排，目前很少使用声旺，所以就不列出來了。

8段只、合理使用操作區(qū)域

擴大點擊區(qū)域：

在選取按鈕類的操作時腮猖，容易出現(xiàn)點擊不到或誤操作的現(xiàn)象，我們可以通過擴大點擊區(qū)的交互區(qū)域來提高易用性翼悴，例如下圖缚够，雖然按鈕在左邊幔妨，但是可以把橫向區(qū)域都列為可點擊區(qū)域鹦赎。

當然我們也可以從設計的角度來擴大視覺范圍，從而也提高了點擊范圍误堡，這樣的處理不僅提升了視覺層面古话，還提升了交互體驗。（圖文結合方式）

注意交互間距：

在元素與元素之間一定要有合理的交互間距锁施，不然很容易出現(xiàn)誤選的情況陪踩。

合理利用有效區(qū)域：

在選項較多的選擇器中，我們可以利用好選擇主體控件之外的區(qū)域悉抵，例如在選擇城市/品牌時肩狂，我們可以做A-Z?index式字母交互區(qū)，幫助用戶快速找到想要的選項姥饰。

9傻谁、趣味性

讓用戶選擇本來就是一件枯燥乏味的事情，如果讓這件事變得有趣那么會極大的提升用戶體驗列粪。

從文本層面：

例如當用戶填寫性別信息時审磁，你給予用戶的文字信息并不是“男”/“女”，而是“帥氣的boy”與“酷酷的girl”岂座，這樣會讓用戶覺得這是一件比較有趣的事情态蒂，而不是被動選擇。（注：這樣的取名一定要符合產(chǎn)品的特性）

從視覺層面：

加入可玩兒性的選項费什，例如汽車之家的頭像切換钾恢，可以選擇自己喜歡的頭像。（頭像并不是強制選擇的鸳址，如果不進行操作則是默認選項）

從交互層面：

讓用戶去享受選擇瘩蚪。例如Soul的星球首頁就做的非常棒，在未選擇狀態(tài)他的人物會360度圍繞著轉動氯质，當然你也可以快速拖拽募舟，或者放大縮小，可玩兒性十足闻察，并且在內(nèi)部設定了最匹配/新人的高亮顯示拱礁，協(xié)助用戶去選擇琢锋。

10、合理使用選擇器

不同的產(chǎn)品在使用選擇器時都各有不同呢灶，因為每個選擇器都有他的利弊吴超，而真正要怎么去選擇還要根據(jù)產(chǎn)品本身來定。

那么我就拿目前市面上最常見的5個地址選擇器的類型來分析一下利弊：

1/多聯(lián)動選擇器（平鋪式）

貨車幫采用的是多聯(lián)動平鋪式選擇器鸯乃，它最大的特點就是能夠一眼就看清楚所有地址鲸阻，不過地址多時需要花時間去找，只是當你經(jīng)常使用此功能時便會形成記憶缨睡，再此搜索的時候就能形成記憶點擊鸟悴，效率很高，并且在操作外還有路徑提示奖年，不僅可以幫助你記住層級選項细诸，還可以實時返回路徑進行重新選擇。

手勢操作：點－點－點

2/多聯(lián)動選擇器（列表跳轉式）

閑魚采用的是多聯(lián)動列表跳轉式選擇器陋守，這個選擇器最大的缺陷就是選擇三級之后用戶可能會忘了上一級的內(nèi)容震贵，那么就又要切換到上一級，閑魚采用它的原因是因為它只有二級聯(lián)動水评，不存在遺忘現(xiàn)象猩系，不過這樣列表式的選擇效率并沒有平鋪的效率高，人眼習慣掃視橫向內(nèi)容中燥，所以橫向的內(nèi)容獲取往往要比縱向的多寇甸，在地址選擇器上我個人是不太建議采用多聯(lián)動列表跳轉式，因為并不高效也不直觀褪那。

手勢操作：滑－點－點

3/多聯(lián)動選擇器（列表式）

轉轉采用的是多聯(lián)動列表式選擇器幽纷，它的優(yōu)點是可以根據(jù)右側字母來找城市，數(shù)據(jù)偏大也能夠很快的查找博敬。不過如果在層級的選項中出現(xiàn)錯誤友浸，同樣就要切換到上一級，并且在操作中沒有輔助信息提示偏窝。

手勢操作：滑/點－滑/點

4/多聯(lián)動選擇器（下滑式）

安居客采用的是多聯(lián)動下滑式選擇器收恢，這種形式的選擇器不會遮擋后面的主要內(nèi)容信息，在選擇完地址之后能立即看到地址的篩選結果祭往。優(yōu)點是能快速選擇多級地址伦意，并且層級分明，擴展性較強可以做成地址多選硼补。缺點是不適合3個層級以上的地址選擇驮肉。

手勢操作：點－滑/點－點

5/地圖選擇器

美團外賣采用的是地圖選擇器，這個選擇器一般用在需要精準定位的生活類APP中已骇，它的優(yōu)點就是能夠快速精準定位离钝，并且自動錄取定位信息票编，它的缺點也顯而易見，不能含帶層級并且對范圍也有約束卵渴。

以后盡量每周更一篇文章

本文首發(fā)于微信公眾號 黑獅力（ID:heishilisj）慧域，如需轉載，請聯(lián)系原作者浪读。