一.什么是選擇器

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

二.選擇器的類別

-單選選擇器

-多選選擇器

1.單選選擇器

單選選擇器按效果又可以分為：點擊選擇器、滑動選擇器、多聯(lián)動選擇器、開關(guān)選擇器、可搜索效果的選擇器、地圖選擇器。

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

 

1-1點擊選擇器

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

 

-立即觸發(fā)式：

特點：直接進(jìn)入，并沒有再次確認(rèn)的按鈕，可以讓你快速到達(dá)想要的目的。

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

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

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

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

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

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

1-2滑動選擇器

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

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

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

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

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

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

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

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

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

右圖則沒有先后順序，不過當(dāng)你首先選擇顏色時，如果沒有相同尺碼的衣服，缺貨的尺碼則不會被選中，先選擇尺碼也是相同道理。

1-4切換開關(guān)選擇器

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

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

舉例：當(dāng)我打開UC瀏覽器的設(shè)置時，它的輔助功能就使用了切換開關(guān)選擇器，切換的開關(guān)只需要點擊即可。

1-5可搜索選擇器

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

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

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

1-6地圖選擇器

特點：作為最特別的選擇器，它的功能是復(fù)雜的，它的操作方式也是多樣化的，地圖選擇器的操作可點擊、可拖拽、可放大縮小等等，它多用于生活類APP。

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

舉例：

打車類APP必用的地圖選擇器，滴滴出行的用戶可以實時看到車輛信息，可以采用點擊、拖拽、放大等操作來選取上車地點，選取后還有文字信息提示，讓用戶確認(rèn)操作是否正確。

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

2.多選選擇器

當(dāng)單選選擇器不能滿足用戶需要時，這時我們就可以采用多選選擇器，一般常用的多選選擇器都是采用點擊的方式，當(dāng)然也有滑動類型的多選選擇器。

2-1點擊多選選擇器

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

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

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

2-2滑動多選選擇器

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

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

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

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

三、選擇器的十大應(yīng)用要點

1、簡單易懂

標(biāo)題易懂：

在選擇器中標(biāo)題一定要簡單明了，很快的讓用戶知道他在為什么做選擇（如：當(dāng)你關(guān)注某烹飪的APP后，它會讓你勾選喜歡的菜譜，你的標(biāo)題就可以用“選擇菜譜”四個字，簡單明了）

文字標(biāo)簽易懂：

一般使用短語而不是句子，也并不需要用標(biāo)點符號來結(jié)尾。（如：當(dāng)選擇想要的菜譜時，菜譜后的文字不需要加入標(biāo)點符號）

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

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

反饋提示易懂：

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

2、基本排序

從邏輯順序：

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

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

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

從用戶體驗排列順序：

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

3、一致性

視覺布局一致：

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

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

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

4、合理運用默認(rèn)選項

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

默認(rèn)未選中：

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

默認(rèn)選中其中一個選項：

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

默認(rèn)選中全部：

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

5、給用戶更多選擇

單選選擇器的更多選擇：

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

多選選擇器的更多選擇：

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

6、控件狀態(tài)

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

未選中

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

選中

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

禁用

一般情況會為灰色顯示，用戶將無法與選項進(jìn)行交互。

7、操作提示

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

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

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

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

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

非模態(tài)彈窗一般出現(xiàn)在用戶操作完的跳轉(zhuǎn)頁面中，為了讓用戶感知所選的選項在頁面的狀態(tài)，如下，非模態(tài)彈窗告知用戶一共有7輛車符合標(biāo)準(zhǔn)。

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

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

擴大點擊區(qū)域：

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

當(dāng)然我們也可以從設(shè)計的角度來擴大視覺范圍，從而也提高了點擊范圍，這樣的處理不僅提升了視覺層面，還提升了交互體驗。（圖文結(jié)合方式）

注意交互間距：

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

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

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

9、趣味性

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

從文本層面：

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

從視覺層面：

加入可玩兒性的選項，例如汽車之家的頭像切換，可以選擇自己喜歡的頭像。（頭像并不是強制選擇的，如果不進(jìn)行操作則是默認(rèn)選項）

從交互層面：

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

10、合理使用選擇器

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

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

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

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

手勢操作：點－點－點

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

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

手勢操作：滑－點－點

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

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

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

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

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

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

5/地圖選擇器

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

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系

作者：黑獅力   來源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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