序
前三篇說了表單中的"輸入框"、“單選按鈕”、“復(fù)選框”，那這次就說下拉列表。
下一篇說文本域和按鈕。
前言
眾所周知沒有任何人，愿意填寫表單，輸入框讓過程看起來會變得很復(fù)雜。那此時就會用到另外一個組件就是 - 下拉列表。
他所包含的是選項，因為不需要讓用戶去進(jìn)行輸入，所以就可以防止用戶在輸入時帶來錯誤這問題了。
實際在設(shè)計中，下拉列表也有很多的“弊端”，所以需要嘗試不同的方法去解決問題。
目錄
· 下拉列表組成
·?下拉列表步驟
·?下拉列表提示也很重要
·?合理排列下拉選項
·?下拉列表選項數(shù)量
·?下拉列表還能做的更多
·?簡單的數(shù)字可以輸入
· 選日期沒那么麻煩
·?步進(jìn)器原則
·?步進(jìn)器組成
·?滑塊原則
·?滑塊的細(xì)節(jié)
·?最后
下拉列表組成
下拉列表由標(biāo)簽[Label]、下拉的列表和選項組成，下拉列表常見的選擇為單選。
下拉列表步驟
呼出下拉列表的步驟：點擊下拉列表控件→展開列表→滾動掃描列表選擇選項關(guān)閉→關(guān)閉下拉列表。
下拉列表提示也很重要
在輸入框中有個元素叫暗提示[placeholder]，作用是在用戶填寫信息時提供幫助，這條原則也同樣適用于下拉列表。這個提示需要簡短準(zhǔn)確且告訴用戶需要選什么，且在展開菜單之后依舊能夠看得到選的是什么。
例如上圖：“出發(fā)日期”就比“請選擇”要好的多。
合理排列下拉選項
可以根據(jù)以往用戶的選擇數(shù)據(jù)進(jìn)行分析，嘗試將選擇較多的選項放置在優(yōu)先級靠前的位置。
選項較多時可以嘗試只列出幾個用常選的，好處在于90%的用戶會立即選擇滿足自己目的的選項，還有10%的人可以選擇“其他”(可以嘗試加入一個下拉選擇或輸入框再滿足目的)。雖然這樣做會忽略10%的用戶，但這樣優(yōu)先級排序能夠提高90%用戶體驗。
90%以上的用戶最常選的選項，就可以作為默認(rèn)選項了。
下拉列表選項數(shù)量
避免在列表中放置太多的選項，當(dāng)下拉列表中的選項超過15個時，他們將變得很難掃描。在Web端用戶需要不斷的滾動鼠標(biāo)才可以找到滿足自己目的的選項。再說在移動端有限的屏幕空間內(nèi)滾動，體驗可以說是非常不好了。
假設(shè)我們現(xiàn)在有個下拉列表，是需要收集用戶的國家信息。一眼就能看出這個下拉列表是按照拼音首字母進(jìn)行排序的，那“阿爾巴尼亞(A)”是排在首位的。當(dāng)我要選擇“中國(Z)”時候，就會很費力了。
當(dāng)我要選擇“中國”時？那我很清楚我需要選擇的是什么，那就可以考慮把下拉選擇改變成自動填充選擇的列表？那這樣只需要通過鍵盤輸入一個“中”，就過濾出包含“中”(或者zhong)的候選選項了。通過簡單的輸入配合去提高選擇的效率。
選項太多需要避免使用下拉列表，選項太少也避免使用下拉列表。
之前在《最常見也最基礎(chǔ)的表單設(shè)計-單選按鈕》中說當(dāng)2≤選項個數(shù)(單選)≤7時，當(dāng)下拉列表中選項少于7個時，可以考慮使用單選按鈕了。
使用單選按鈕，用戶只需通過掃描就可以了解這問題有幾個選項和每個選項是什么，從而可以去除點擊觸發(fā)下拉框的動作。
同樣如果是簡單的問題，需要回答(是/否)或(打開/關(guān)閉)時，就避免使用下拉列表了，使用復(fù)選框和開關(guān)。
下拉列表還能做的更多
通過程序的幫助去減少選擇次數(shù)。
例如：如果在充值手機號必須需要用戶選擇運營商，當(dāng)用戶輸入手機號后，那下拉列表就可以幫助用戶選擇運營商。如果在支付綁卡時需要用戶選擇銀行，當(dāng)用戶輸入了銀行卡號后，下拉列表就可以幫助用戶選擇發(fā)卡銀行和卡片類型了。對于不同的下拉選擇會有著成千上萬種的設(shè)計方法。
在移動端，我們也可以通過“調(diào)用位置”這個系統(tǒng)硬件功能來預(yù)填選項給到用戶。
簡單的數(shù)字可以輸入
下拉列表中選項是簡單數(shù)字的話，下拉列表相比輸入費力度更高?？梢钥紤]配合數(shù)字鍵盤輸入，這樣比下拉選擇更簡單。根據(jù)場景的不同有著不同的解決方法，適合精確數(shù)值小范圍調(diào)整可以考慮使用步進(jìn)器；那不精確數(shù)值大范圍調(diào)整可以考慮使用滑塊；選日期可以使用日期選擇器。
選日期沒那么麻煩
選擇日期肯定會也經(jīng)常遇見，如果使用多個(年/月/日)下拉列表給用戶帶去的是非常不好的體驗。那我們可以嘗試去使用日期選擇器(date picker)。
步進(jìn)器組成
步進(jìn)器[Stepper]由增加按鈕、減少按鈕和按鈕控制的數(shù)值組成。每次點擊增加按鈕(或減少按鈕)數(shù)字去增加(或減少)固定的數(shù)量。比方用戶更喜歡在電商App里用步進(jìn)器選擇商品數(shù)量，此時步進(jìn)器比起下拉列表更直觀，使用起來也就更輕松了。
步進(jìn)器原則
需要注意最大限制和最小限制，在最大或最小限制時，加入禁用增加(減少)按鈕。如果能通過數(shù)據(jù)分析(90%用戶經(jīng)常選擇的)預(yù)填一個默認(rèn)值是提升效率的辦法。
試想：步進(jìn)器的默認(rèn)值離用戶預(yù)期的數(shù)值越遠(yuǎn)，點擊的次數(shù)也就越多，那完成選擇的效率也就越低。當(dāng)默認(rèn)值無法滿足(10%用戶經(jīng)常選擇的)，還可以把數(shù)值顯示改成輸入框，再配合上數(shù)字鍵盤輸入去做精確的修改。
滑塊原則
常見的滑塊[Sliders]由可以拖動的按鈕、軸、最大數(shù)值、最小數(shù)值組成。和單選按鈕一樣，滑塊這個行為受現(xiàn)實生活的行為所影響。
場景：我在聽歌聲音有點輕，我想讓聲音響點。我使用滑塊配和聽覺在0%-100%這個區(qū)間內(nèi)調(diào)整音量，而不是我要75%的音量這個精確值，這個范圍內(nèi)(近似值)就行，那此時滑塊比起下拉列表使用起來更簡單了。
滑塊的細(xì)節(jié)
根據(jù)不同的設(shè)計場景，精確值可能是很重要的，那滑塊也可以滿足。加入一個數(shù)值顯示，數(shù)值隨著每次滑動改變。同時數(shù)字也當(dāng)可以點擊變成輸入框，再配合上數(shù)字鍵盤輸入去修改滑塊位置。
在移動端，建議把滑塊的最大數(shù)值、最小數(shù)值的位置放置在上方。那在使用時永遠(yuǎn)可以保持可見。如果在下方就容易被手指遮蓋。
拖動時，使用動效做加持，給與用戶交互的反饋
最后
選擇比輸入的效率高，但也不是說什么時候都可以使用下拉列表。根據(jù)不同的場景利用他們(下拉列表/步進(jìn)器/滑塊)的原則做出變形，選擇也可以變很不一樣。例如：可以在下拉列表中把相關(guān)的選項分組展示，也可以讓下拉列表變形為多選控件等。方便好用的選擇和表單目的一樣：表單只是個收集用戶信息的方式，用戶需要的是高效愉快的完成填寫。
在上面提到一個日期選擇器(date picker)沒往細(xì)里說，之后在另外說一下。
參考書：《交互設(shè)計精髓》
以上的觀點從我個人總結(jié)出發(fā)，雖說文筆拙劣，但是如果你有不同的意見，歡迎交流～
如果你看到這，下面就是其他組件的文章(廣告)了：
《最常見也最基礎(chǔ)的表單設(shè)計-復(fù)選框》
能放三條廣告，心里覺得超爽了...
