這個序可能會有些長
先作個自我介紹，我是一名交互設(shè)計師，90后。我并不怎么喜歡編輯文章或?qū)扅c什么，就是因為懶，所以就總覺得很難。但決定跨出這步，在簡書寫了五篇以《表單設(shè)計》開頭去介紹組件的文章，邊寫也在邊規(guī)劃應(yīng)該如何去寫好下一篇我文章、同時也能提升自己的技能。在過程中也經(jīng)歷了不少事兒，也更讓我深深的決定還是繼續(xù)做這個事情——交互設(shè)計。
前言
之前在工作空閑時間去翻譯文章、跪著看看設(shè)計類的書或大廠的Guideline，但也沒怎么好好去總結(jié)沉淀過變成自己的。在這五篇的沉淀總結(jié)中對于自己過去自己在表單設(shè)計時遇到的問題收貨頗多，表單是由：輸入框、單選按鈕、開關(guān)、復(fù)選框、選擇列表、按鈕等組件組成。
表單只是個收集用戶信息的方式，用戶需要的是高效愉快的完成填寫。
寫給自己
【21天養(yǎng)成習(xí)慣】這個說法在我身上好像無效，只希望自己可以堅持下去，不斷去修訂這東西。
目錄
- 動手前冷靜思考
- 各組件的自我介紹
- 輸入框
- 單選按鈕
- 復(fù)選框
- 下拉列表
- 按鈕
- 交互設(shè)計是什么？
- 寫在最后
- 參考文獻(xiàn)
動手前冷靜思考
當(dāng)碰到表單設(shè)計的需求時，把問題按照優(yōu)先級去排序，我認(rèn)為需要考慮的第一問題是只需要用戶輸入什么，第二個問題通過技術(shù)的手段去考量是否可以利用最少的字段做最多的事兒，再把字段在先后邏輯上進(jìn)行排序、把關(guān)聯(lián)的信息成組，最終的目的是便于用戶更快速的理解自己要輸入什么。
各組件的自我介紹
輸入框[input]、單選按鈕[Radio button]、復(fù)選框[Check box]、開關(guān)[Switches]、下拉列表[Dropdown]、步進(jìn)器[Stepper]、滑塊[Sliders]、按鈕[Button]
輸入框
輸入框元素
標(biāo)簽[Label]、輸入框[Input]、提示[Assistance]、校驗[Validation]，這四個元素組成標(biāo)準(zhǔn)的輸入框。
標(biāo)簽[Label]
它需要明確告訴用戶輸入什么
輸入框[lnput]
它包括文本字段，數(shù)字字段，混合字段，密碼字段等。
在移動端產(chǎn)品中，友好的使用系統(tǒng)鍵盤是提升體驗的一個方法，在移動端應(yīng)用中根據(jù)填寫內(nèi)容的屬性，例如：填寫手機(jī)號可以直接彈出系統(tǒng)的數(shù)字鍵盤；在web或桌面應(yīng)用中可以配合自動填充選擇也是提升體驗的方法，例如：填寫郵箱當(dāng)用戶輸入用戶名，出現(xiàn)自動填充的@域名。
對于不同的輸入內(nèi)容有著不同的解決辦法，但最終的目的都是為了讓完成表單變得更高效。
提示[Assistance]
讓用戶能在標(biāo)簽和輸入框之間獲取信息，幫助他完成輸入。常見的幾種方法：
把提示的內(nèi)容置于輸入框內(nèi)，會把這個叫做暗提示[Placeholder]。
當(dāng)輸入框獲取焦點時，出現(xiàn)文字氣泡提示會叫做[Tooltip]。
當(dāng)說明文案較長時，你可以使用一個icon圖標(biāo)去提示[Popover]。
當(dāng)需要輸入提醒，你可以將其放置在輸入框附近[Help text]（位置不建議放在下放，建議把校驗反饋放在輸入框下方）。
以上四種是在提示的四種用法(還有更多)。對于不同的表單頁可以利用不一樣的方法去進(jìn)行嘗試。
校驗[Validation]
用戶厭惡當(dāng)他們在填寫過程中到等提交時才發(fā)現(xiàn)他們之前輸入錯了東西。
試想：這個表單有10項信息的收集，當(dāng)我第一項填錯后沒有校驗反饋，然后我繼續(xù)表單填寫任務(wù)，十項填寫完畢后，點擊[Submit]后，良心點的回滾到第一項輸入框出現(xiàn)錯誤提示并獲取焦點告訴我錯了讓我修改，惡心的停留在當(dāng)前屏幕，整個人會懵為什么任務(wù)不能繼續(xù)？然后就會思考是不是填寫哪里出了錯？再返回檢查問題，這樣效率就會下降。
點擊[Submit]這種校驗屬于第二道校驗：提交校驗(復(fù)雜的校驗，有些可能需要走后端校驗)。所以當(dāng)用戶在輸入框錄入后完成失去焦點后就有義務(wù)告知所錄入的內(nèi)容是否正確/錯誤。
這是第一道校驗：即時校驗(利用前端校驗比如：通過正則表達(dá)式校驗手機(jī)號的位數(shù)，手機(jī)號的有效性等)。
這種方法允許用戶更快的糾正錯誤，無需等待。文案的描述也應(yīng)當(dāng)更明確，告訴他們什么錯了，這樣在輸入過程中也能給用戶帶來更多的信心。
適量的減少輸入項
盡量可能減少輸入項個數(shù)，這樣可使得表單更輕松，尤其是當(dāng)我們需要向用戶收集大量信息，根據(jù)實際情況考慮做減法，用最少的收集內(nèi)容去做更多的事。
打個比方：現(xiàn)在有個表單，需要收集姓名、性別、出生日期、身份證號四個輸入項。我們可以通過技術(shù)的一些手段從身份證號中提取出信息，那4個輸入項就可以變成變成2個。身份證的倒數(shù)第二位可以判斷性別：奇數(shù)是男，偶數(shù)表示女，出生年月大家都知道。
再來個比方：假設(shè)手機(jī)充值時需要選擇手機(jī)號的歸屬地信息，是做一個城市選擇列表讓用戶去選擇？這我也不清楚手機(jī)號是不是有規(guī)律，如果沒有，那不妨通過接口去查詢用戶手機(jī)的歸屬地，這樣操作成本大大下降，歸屬地選擇錯誤的可能也會下降。
結(jié)合不同的場景去思考會發(fā)現(xiàn)無限多的做法，減少輸入項個數(shù)的目的也只是為了讓完成表單變得更加高效。
明確的標(biāo)簽
標(biāo)簽不是暗提示或者幫助文本的信息，應(yīng)該精簡，簡短到不能失去說明性的，這樣用戶通過快速掃描表單就可以了解自己需要填什么的預(yù)期了。
比方說：[請輸入你的姓名]精簡成-[姓名]等。
對齊方式
左對齊、右對齊、頂對齊三種我們不論在哪都可以見到的對齊方式。結(jié)合以上所說的表單元素接來下討論一下三種對齊方式：
頂對齊
頂對齊的優(yōu)點：相比其他兩種對齊方式，它更適用于不同字?jǐn)?shù)的標(biāo)簽，讓標(biāo)簽和輸入框更加緊密，標(biāo)簽的長度多變時也不會影響表單整體的布局，效率最高，但有個缺點：占用更多縱向空間（我覺得更適合移動端橫向屏幕有限的情況下）。
例如：Material Design中的浮動標(biāo)簽就是很優(yōu)秀的頂對齊輸入框設(shè)計。
左對齊
左對齊的標(biāo)簽也是最常見的對齊方式，相比頂對齊：他的標(biāo)簽可讀性變強(qiáng)了，也減少縱向空間占用。但是無法避免標(biāo)簽和輸入框聯(lián)系不緊密的這個劣勢。在標(biāo)簽和輸入框之間的可視距離遠(yuǎn)。
實操層：在長短標(biāo)簽的組合表單中，會使輸入框離短的標(biāo)簽更遠(yuǎn)，這時就得想如何縮短標(biāo)簽的字?jǐn)?shù)，如何精簡出一個便于用戶理解的標(biāo)簽。如果不去設(shè)計標(biāo)簽，那么效率就會變的緩慢。但是完成率緩慢，并不見得是一件壞事，尤其是表單需要重要的數(shù)據(jù)，如果需要用戶提供敏感信息時，可以暗示用戶放慢一點節(jié)奏，并確保他們正確的輸入。
右對齊
右對齊字符是第二常見的對齊方式，相比頂對齊和左對齊涵蓋了他們部分優(yōu)點：和輸入框聯(lián)系緊密，也減少縱向空間的占用。
標(biāo)簽和輸入框顯得更加緊密了，將相關(guān)聯(lián)信息放置接近的這一原則也不是新的理論，實際上它接近格式塔心里學(xué)中的接近性法則。
對于較短的表單，右對齊的字符也可以完成的很快。但是標(biāo)簽的可讀性會減弱，這種對齊方式在左側(cè)邊緣的標(biāo)簽看起來不舒服，更難閱讀，同時也需要去注意標(biāo)簽字?jǐn)?shù)。
格式塔心里學(xué)中的接近性法則：
“接近性法則”指出當(dāng)對象彼此接近時，他們往往被認(rèn)為是一個整體。基本上相近是在一起的。如果我們使用清晰的結(jié)構(gòu)和視覺層次，我們將不再被有限的用戶認(rèn)知所指責(zé)，所以他們才能快速辨認(rèn)和給出反應(yīng)。
——原作者：Norbi Gaal? ? 翻譯：Tiger, Run! 原文鏈接：https://uxdesign.cc/ux..?來源：知乎
對齊方式總結(jié)
如果希望用戶快速掃描表單，把標(biāo)簽放在輸入框上面，這種布局更便于眼睛向下掃描頁面。
如果你希望用戶仔細(xì)得閱讀，把標(biāo)簽放在輸入框的左側(cè)，這個布局掃描較慢，向下向右(Z的形狀）的眼動。
如果表單中需要填寫的內(nèi)容比較少，也可以使用內(nèi)聯(lián)標(biāo)簽(登錄注冊)，但如果有輸入信息較多，切記別用！雖說這是很受歡迎的輸入框做法 ，他們也很美觀，但當(dāng)用戶點擊輸入框，標(biāo)簽消失就無法對應(yīng)了，用戶因此會不知需要去填什么(可以嘗試把暗提示[placeholder]改成和標(biāo)簽一樣內(nèi)容)。
但這么做會產(chǎn)生另一個問題，當(dāng)用戶看到一個輸入框內(nèi)已經(jīng)填寫了內(nèi)容，而填寫完內(nèi)容，標(biāo)簽就消失了，需要回憶再復(fù)查表單信息，此時就顯得很困難了。
選填與必填
在表單中盡量避免選填字段，但是如果選填字段是真實有需求的，但不一定需要收集時，把必填和選填做出區(qū)分，不能為空的必填字段規(guī)范使用星號(*)指出。
對于表單中必填vs選填數(shù)量上我是這樣看的：
1.必填＞選填時，在選填項上指出(選填)；
2.必填＜選填時，在必填項上指出(*)；
3.必填=選填時，在選填項上指出(選填)或在必填項上指出(*)；
4.全必填時，無需指出(*)即可，全部(*)會增加表單的信息量；
5.全選填時，先考慮這個表單是否有必要去做，有必要就在更高一級上指出(選填)
還要個原則：優(yōu)先級上必填項＞選填項
信息分組
根據(jù)用戶的認(rèn)知將相關(guān)進(jìn)行分組，分組后的相關(guān)信息還能幫助用戶弄懂哪些是必填和選填。
一列和多列
表單不建議有多列，如果水平放置輸入框，用戶必須Z形的眼動進(jìn)行掃描，會減緩理解速度和弄亂清晰的完成路徑。垂直向下放置的表單在頁面完成路徑是垂直向下的。
總結(jié)
結(jié)合場景，通過思考和研究可以探索出一個好的表單(輸入框)。在設(shè)計上可以采用很多方案，同時也需要經(jīng)過不斷的測試去做出調(diào)整。
根據(jù)需求和使用平臺(App/Pc/H5)可以在基礎(chǔ)的表單(輸入框)原理上做出很多變化(開始填寫時已預(yù)填了信息，在移動端需要修改時逐字刪除太麻煩了，可以考慮在輸入框內(nèi)加個x的icon，點擊icon即清除輸入框中的所有內(nèi)容等等)，但是唯一不變的是讓完成表單變得更愉快高效，也是初衷。
單選按鈕
為什么叫單選按鈕
單選按鈕又叫[Radio button]，為什么是Radio button？按鈕跟收音機(jī)有什么關(guān)系？
單選按鈕這個行為受早期汽車上收音機(jī)的物理按鈕所影響，最開始汽車上調(diào)節(jié)收音機(jī)電臺是通過旋轉(zhuǎn)按鈕進(jìn)行切換的，但是隨著使用頻率的增加，人們發(fā)現(xiàn)這個行為在駕駛時很危險，之后便進(jìn)行了重新設(shè)計，把旋轉(zhuǎn)按鈕改變成了6個合金按鈕組成。每個合金按鈕都會預(yù)設(shè)對應(yīng)一個電臺。試想：是不是只要按下一個按鈕，就可以切換到需要的電臺呢。
單選按鈕原則
單選按鈕必須是互斥的，這意味著當(dāng)選擇一個選項時，之前已選中的選項會被反選。因為有互斥的存在，所以單選按鈕都是兩個或以上成組的出現(xiàn)，而且成組內(nèi)只有一個單選按鈕可以被選中。
縱向放置單選按鈕
在布局上，盡量嘗試垂直放置單選按鈕，每一行放置一個單選按鈕。
水平放置的單選按鈕在整個表單中眼動掃描的效率會下降。如果一定要水平放置單選按鈕，一定要注意按鈕和選項間的關(guān)聯(lián)性問題，不然會發(fā)生按鈕和其兩邊的哪一邊選項有關(guān)聯(lián)的誤解，那完成表單的效率就會大大降低。
確保足夠的空間去水平放置單選按鈕，并將未選擇和已選擇的狀態(tài)做出區(qū)分，這樣就可以正確看清選項。
按照優(yōu)先級排序選項
按照邏輯的優(yōu)先級順序?qū)芜x按鈕的選項進(jìn)行排序，比如哪個選項更有可能被選中，或是最容易理解的選項到最難理解的選項。
不推薦使用字母序，從一定角度上存在問題。如果是個需要適應(yīng)多種語言的Web，那就會很難本地化(例如：中文的拼音首字母是Z，英文Chinese的首字母C)。
容易理解的選項
設(shè)計單選按鈕時需要注意，選項的描述也很重要。一個模糊的描述很容易產(chǎn)生誤導(dǎo)，會讓用戶很難決策，雖說可以對應(yīng)標(biāo)簽去理解，但選項描述的文案設(shè)計同樣也是交互設(shè)計中很重要的一部分。
默認(rèn)必須一個被選中
用戶是可以切換和重做選擇的，這個意味著可以控制這個單選按鈕恢復(fù)到默認(rèn)狀態(tài)。那就意味著單選按鈕總有一個是默認(rèn)被選中的。
默認(rèn)被選中的可以是：有商業(yè)目的或大多數(shù)用戶選擇的選項。如果強(qiáng)烈推薦一個選項，可以加上"推薦"的一個標(biāo)簽
當(dāng)用戶此時不需要在單選按鈕上做出決策時，可以提供一個意義為"不選"的選項。提供一個明確的選項總比強(qiáng)迫用戶做出一個不準(zhǔn)確的決策會要好的多。
單選按鈕需要更容易點擊
單選按鈕的按鈕很小，根據(jù)費茨定律他將會很難被點擊。需要增加點擊熱區(qū)的大小，讓用戶不僅僅只能點擊按鈕才可以選擇，點擊選項(詞)也可以觸發(fā)選擇。這樣點擊熱區(qū)的大小就顯得極為重要了。
使用指點設(shè)備到達(dá)一個目標(biāo)的時間，與當(dāng)前設(shè)備位置和目標(biāo)位置的距離（D）和目標(biāo)大小（S）有關(guān)。
——Wikipedia(費茨法則)
必要的視覺反饋
單選按鈕這組件看起來是可點擊的，使用必要的動效可在選擇后有清晰的視覺反饋。一個適當(dāng)?shù)膭有o用戶帶去微妙的用戶體驗。
有時復(fù)選框也是不錯的解決方案
復(fù)選表達(dá)的意思是用來開啟(關(guān)閉)或選擇(反選)一個選項，而單選按鈕可以在不同的選項之間切換。在兩個或以上選項且單選的情況下，需采用單選按鈕。只有一個簡單的問題，就可以選擇復(fù)選框。
第一種 多個選項且單選的情況下：利用單選按鈕的互斥性，讓選擇變得清晰。
單選按鈕默認(rèn)選中的選項會給用戶帶去"是單選"的認(rèn)知。而默認(rèn)選項同時可以幫助用戶做出最適合的決定，還能幫助他們更有信心地使用。
第二種 只有一個簡單的問題：比方一個說簡單的問題，需要回答"是"或“否”時，使用復(fù)選框是不錯的選擇。
是下拉列表還是單選按鈕？
根據(jù)選項的數(shù)量去判斷使用單選按鈕還是下拉列表。當(dāng)2≤選項個數(shù)(單選)≤7時，可以使用單選按鈕。因為單選按鈕比起下拉列表更能減少用戶的認(rèn)知負(fù)擔(dān)。通過掃描就可以知道有多少選項，而且選項都是在頁面上可見的，可以讓用戶對每個選項進(jìn)行對比。
實操案列
正如我們一直理解的單選按鈕是圓形的，復(fù)選框是方形的，我們已經(jīng)對這些養(yǎng)成了習(xí)慣。
在很多地方我們會看到圓形的復(fù)選框，圖標(biāo)形或TAG形等等的單選按鈕(比如iOS設(shè)置)。即使在外觀上做最大的改變，但是唯一不變的行為——互斥性和默認(rèn)選中一個，這便構(gòu)成了單選按鈕的原則。
但我們會在一些地方看到和上文沖突的一個點：單選按鈕默認(rèn)必須一個被選中。
為什么這么做？
其實也會留下很多的思考：假設(shè)根據(jù)默認(rèn)選中“男”(比方通過定量數(shù)據(jù)分析發(fā)現(xiàn)用戶是90%的男性)，若女性用戶如果沒有注意就直接跳過了性別的選擇，但在完成表單提交信息時也不會觸發(fā)校驗(必填信息且已填)，那收集的信息就會不正確。
猜想
猜想：是否因為收集了較多的不正確信息，所以對單選按鈕進(jìn)行了重新設(shè)計？
默認(rèn)不選中任何一項，需要用戶主動去作選擇，在不選的情況也會在提交時觸發(fā)校驗，告知未對性別進(jìn)行選擇。但選擇性別后，單選按鈕還是互斥的，雖說是違背了單選按鈕的原則，但是很巧妙的解決了問題，那這個重新設(shè)計就是有意義的，是解決問題的。
總結(jié)
一個小小的組件(單選按鈕[Radio button])的背后也是有很多可以挖掘的點的，在表單組件設(shè)計中只需要注意那么一點，那整體的體驗也會提升不止一點。還是那句話：表單只是個收集用戶信息的方式，用戶需要的是高效愉快的完成填寫。
復(fù)選框
復(fù)選框組成
復(fù)選框[Check Box]由一個方形的選擇框和選項組成，復(fù)選框在選中狀態(tài)下有標(biāo)記。
復(fù)選框原則
復(fù)選框用在有多個選項，用戶可以任意選擇(或不選)多個(或一個)選項。包含復(fù)選框的選擇組，每個選項都是彼此獨立存在的。和單選按鈕原則相反，選擇一項后不會反選其他選項。
縱向放置復(fù)選框
這條規(guī)則對于單選按鈕和復(fù)選框都適用，在布局上盡量嘗試垂直放置復(fù)選框，每一行放置一個復(fù)選框。
和單選按鈕一樣水平放置會遇到相同的問題：水平放置的復(fù)選框在整個表單中眼動掃描的效率會下降。如果一定要水平放置復(fù)選框，一定要注意選擇框和選項間的關(guān)聯(lián)性問題，不然會發(fā)生選擇框和其兩邊的哪一邊選項有關(guān)聯(lián)的誤解，那完成表單的效率就會大大降低。
容易理解的選項
設(shè)計復(fù)選框時也需要注意，選項的描述也很重要，這樣用戶就能在選擇前有選擇后的預(yù)期。盡量不要使用如“不要給我發(fā)票”這樣的否定語句。若這樣設(shè)計的話選擇難度就上升了，結(jié)果就是用戶不得不再去修改選擇狀態(tài)來理解兩個選項后，再去滿足自己的目的。
復(fù)選框需要更容易點擊
和單選按鈕一樣復(fù)選框也需要注意：根據(jù)費茨定律，將會很難被點擊。需要增加點擊熱區(qū)的大小，讓用戶不僅僅只能點擊選擇框才可以選擇，點擊選項(詞)也可以觸發(fā)選擇。這樣點擊熱區(qū)的大小就顯得極為重要了。
使用指點設(shè)備到達(dá)一個目標(biāo)的時間，與當(dāng)前設(shè)備位置和目標(biāo)位置的距離（D）和目標(biāo)大小（S）有關(guān)。
——Wikipedia(費茨法則)
一個選項情況下，還能用開關(guān)
類似于實際生活中臺燈的開關(guān)。開關(guān)由一個能打開/關(guān)閉能做切換操作且互斥的兩個選項組成。當(dāng)選擇其中一個選項時就會立即執(zhí)行。
開關(guān)組成
單選按鈕可以被看作是單個的，易懂版的復(fù)選框。復(fù)選框和開關(guān)[Switches]不同之處在于復(fù)選框可以說明選擇狀態(tài)，而開關(guān)就可以說明操作狀態(tài)。
如上圖開關(guān)就可以很明確的傳達(dá)WiFi已處于打開狀態(tài)，若使用復(fù)選框則導(dǎo)致用戶得去思考WiFi當(dāng)前已經(jīng)打開了？還是要取消選中后才打開？
開關(guān)的狀態(tài)
使用開關(guān)做設(shè)計時，最需要注意的一點是開關(guān)的狀態(tài)。
如上圖“ON”表達(dá)的是當(dāng)前狀態(tài)？還是觸發(fā)操作后是“ON”的狀態(tài)？這里的“ON”究竟指的是狀態(tài)ON(形容詞)？還是你需要觸發(fā)的操作ON(動詞)？
不要讓用戶產(chǎn)生疑問，不要將描述文字放在開關(guān)內(nèi)或高亮“打開狀態(tài)”，那這樣就可以傳達(dá)正確的信息給用戶了。
容易理解的語句
因為開關(guān)的特性，就能很清楚的知道狀態(tài)(打開/關(guān)閉)，所以標(biāo)簽文案就顯得很重要了，只需要說明開關(guān)控制什么內(nèi)容就行。盡量不要使用否定句！
假設(shè)上圖錯誤狀態(tài)：當(dāng)開關(guān)處于關(guān)閉狀態(tài)，是不是會覺得已經(jīng)就是“不允許所有人查看我的照片”呢，事實上還是可以看到你的照片。因為標(biāo)簽文案是否定句，再加上按鈕關(guān)閉狀態(tài)，那"雙重否定"就表示肯定了！所以上右圖才最清楚表達(dá)"不允許所有人查看我的照片"。
如何使用復(fù)選框和開關(guān)
復(fù)選框更多使用在表單中，僅僅代表當(dāng)前的選擇狀態(tài)。當(dāng)只有點擊“提交”后才可能知道選擇(未選擇)的不同。
開關(guān)按鈕更多使用在設(shè)置中，在用戶切換后就立刻顯示出不同了，而不是非得要等用戶點擊“提交”后才看到變化。正如我們在現(xiàn)實生活中對于開關(guān)的所預(yù)期一樣(例如我們摁下打開臺燈開關(guān)，臺燈就馬上亮了)。
合理動效加持
如果可以在復(fù)選框和開關(guān)切換時加入一些動效，帶來一種清晰的視覺反饋。愉悅用戶也提升用戶體驗，而不單單只是兩張(一張selected和一張unselected)圖片做切換。
總結(jié)
寫到這會發(fā)現(xiàn)不管單選按鈕、復(fù)選框、開關(guān)他們需要注意的地方基本差不多，因為的確是這樣。每一個組件的原則不盡相同，如果能夠妥善利用他們的原則，那目的是相同的：表單只是個收集用戶信息的方式，用戶需要的是高效愉快的完成填寫。
下拉列表
下拉列表組成
下拉列表由標(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)的候選選項了。通過簡單的輸入配合去提高選擇的效率。
選項太多需要避免使用下拉列表，選項太少也避免使用下拉列表。
之前在單選按鈕那部分說當(dāng)2≤選項個數(shù)(單選)≤7時，當(dāng)下拉列表中選項少于7個時，可以考慮使用單選按鈕了。
使用單選按鈕，用戶只需通過掃描就可以了解這問題有幾個選項和每個選項是什么，從而可以去除點擊觸發(fā)下拉框的動作。
同樣如果是簡單的問題，需要回答(是/否)或(打開/關(guān)閉)時，就避免使用下拉列表了，使用復(fù)選框和開關(guān)。
下拉列表還能做的更多
通過程序的幫助去減少選擇次數(shù)。
例如：如果在充值手機(jī)號必須需要用戶選擇運營商，當(dāng)用戶輸入手機(jī)號后，那下拉列表就可以幫助用戶選擇運營商。如果在支付綁卡時需要用戶選擇銀行，當(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)可以保持可見。如果在下方就容易被手指遮蓋。
拖動時，使用動效做加持，給與用戶交互的反饋。
總結(jié)
選擇比輸入的效率高，但也不是說什么時候都可以使用下拉列表。根據(jù)不同的場景利用他們(下拉列表/步進(jìn)器/滑塊)的原則做出變形，選擇也可以變很不一樣。例如：可以在下拉列表中把相關(guān)的選項分組展示，也可以讓下拉列表變形為多選控件等。方便好用的選擇和表單目的一樣：表單只是個收集用戶信息的方式，用戶需要的是高效愉快的完成填寫。
按鈕
讓按鈕看起來像按鈕
如何讓用戶一眼就看出這個形狀的組件是按鈕就顯得很重要了。最簡單的做法就是使用形狀、標(biāo)簽、顏色等元素讓這個形狀更像按鈕。
雖說可以更使用更與眾不同的其他形狀(圓形、菱形、甚至自定義任何形狀)但要切記，與眾不同的的形狀會有風(fēng)險，需要確保用戶一看就可以看出這個形狀是按鈕。比如說Material Design中的浮動操作按鈕(FAB：Floating Action Button)
熱區(qū)的大小
需要考慮到按鈕在頁面上對比其他組件的大小，需要確保所設(shè)計的按鈕足夠大，便于用戶點擊。
當(dāng)需要設(shè)計按鈕供用戶點擊時，可以參考MIT Touch Lab的研究去設(shè)計合適的按鈕大小。該研究發(fā)現(xiàn)，指腹的平均尺寸在10-14mm之間，指尖為8-10mm，因此物理尺寸約10mm×10mm是最小觸摸的最佳尺寸。
既然注意了按鈕點擊熱區(qū)的大小，同時也要注意如果有多個按鈕或其他可點擊組件，他們之間的間距也有助于區(qū)分、明確點擊的對象。
用標(biāo)簽說明按鈕用途
避免設(shè)計出讓用戶不知道他們做什么的按鈕，按鈕上的文案需要清晰準(zhǔn)確的表達(dá)按鈕的操作行為。
例如“提交”就會比“確認(rèn)”來的更合適
按鈕應(yīng)該表明當(dāng)前需要做的任務(wù)是什么，讓用戶知道他們點擊按鈕后會發(fā)生什么。使用動詞作為按鈕標(biāo)簽是很好的做法。例如：用戶正在登錄的流程中，一個說寫著“登錄”的按鈕，就能傳達(dá)給用戶按下按鈕后會怎么樣，它清楚地表達(dá)了當(dāng)前的任務(wù)。這樣的按鈕的標(biāo)簽起著承上啟下的作用隨時都在幫助用戶，給予用戶進(jìn)行操作的信心。
突出最重要的按鈕
讓重要任務(wù)相關(guān)的按鈕被高亮出來，高亮的顏色或增大按鈕的大小讓按鈕引導(dǎo)用戶決策。
重要操作按鈕(CTA按鈕:Call To Action)用于引導(dǎo)用戶進(jìn)行你希望的操作。創(chuàng)建有效的CTA按鈕，需要抓住用戶的注意力并誘導(dǎo)他們點擊。
使用高亮按鈕顏色是很好的方法。一旦寫完一封郵件，馬上就會注意到這個藍(lán)色按鈕亮起。
在表單(Form)或?qū)υ捒?Alert)中，按鈕可以用另一種方法來突出重要的按鈕。當(dāng)用戶需要在主要和次要按鈕之間進(jìn)行選擇時，增大按鈕的大小也是方法。
容易發(fā)現(xiàn)按鈕
別讓用戶去尋找按鈕。把按鈕放在用戶可以顯眼的地方。
如果在設(shè)計一個原生環(huán)境的App(Native)，可以參照按照平臺的Guideline去設(shè)計擺放合適的按鈕位置和順序，采用符合用戶與期望一致的設(shè)計可以節(jié)省人們的時間。
按鈕的視覺反饋
這個要求不是關(guān)于用戶看到按鈕時的視覺體驗，而是用戶與按鈕組件交互的體驗。通常，按鈕不是單一狀態(tài)的控件， 它具有多狀態(tài)，并向用戶提供視覺反饋以當(dāng)前任務(wù)的狀態(tài)。
Material Design用圖示清楚地說明了如何傳達(dá)不同的按鈕狀態(tài)
總結(jié)
按鈕是一個普通的、日常生活的交互中經(jīng)常會使用到的組件，按鈕在表單中也承擔(dān)至關(guān)重要的任務(wù)。
交互設(shè)計是什么？
我覺得是兩個動作組成的一個詞兒，有“交互”和“設(shè)計”。
首先什么是設(shè)計？
我認(rèn)為設(shè)計的目的是解決問題，因為產(chǎn)生了問題同時再去發(fā)現(xiàn)問題，所以有了設(shè)計這個行為，又有了很多人在做解決問題的事兒，就有了設(shè)計師這個職業(yè)。
交互是什么？
交互是無處不在的，哪怕是電梯的樓層按鈕，一個微波爐，一個導(dǎo)航等等。就看一下咱們的數(shù)字產(chǎn)品。我覺得交互是結(jié)合產(chǎn)品本身，去為目標(biāo)用戶的目的設(shè)計出高效的功能。
那誰是目標(biāo)用戶？他們的目的是什么？高效的功能是什么？
“目標(biāo)用戶是什么”、“目的是什么”這兩個能通過定量、定性的用研方法，結(jié)合用戶模型等一系列方法可以得出。
“高效的功能是什么”，我覺得所有的功能可以理解成一個工具(結(jié)合生活講，有可能是一本書，或者一個錘子或是其他等等)，這個工具目的是可用、合理，且能讓用戶更高效的完成自己的目的，在完成目的的同時可以收獲驚喜和愉快。
驚喜和愉快是什么？
我覺得有個很難量化也很難標(biāo)準(zhǔn)化的一個術(shù)語，叫用戶體驗。我想這就是在交互設(shè)計這環(huán)中能有所支撐的一部分“用戶體驗”了吧
我是一名交互設(shè)計師，我覺得無論什么設(shè)計始終都值得敬畏，最近閑著又刷了一遍《交互設(shè)計精髓》，前言中有句話說的超棒：
交互設(shè)計本身也是一項人文事業(yè)，與產(chǎn)品和服務(wù)互動的是人，交互設(shè)計的首要目標(biāo)是滿足人的需求和欲望。理解這些目標(biāo)和需求的最佳方式是把他們當(dāng)成故事——邏輯和情感隨時間而演變，要回應(yīng)用戶的這些的這些故事，數(shù)字產(chǎn)品必須表達(dá)自身的行為故事，不僅要在邏輯、數(shù)據(jù)條目和展示層次做出恰當(dāng)?shù)幕貞?yīng)，還要在更加人性化的層面有所響應(yīng)。? ?
——Alan Cooper
寫在最后
在寫之前幾篇的時候梳理了一下自己的思路，也發(fā)現(xiàn)在過去有些沒做好的地方。就像一開始說的，這文章上會有很多點沒有完善，不斷去修訂這東西，這句話寫給自己。最近還對一句話感觸頗深，分享給大家。
Stay Hungry, Stay Foolish
——Steve Jobs
感謝@面包給到的建議，也要感謝的贊賞過我之前文章的朋友@74好幾K、@Jason、@nomeet、@Shumi、@藍(lán)胖子_Simon、@jeremywf、@簡叔，給你們鞠躬了~
到這也就看完了我叨逼叨，也不知說恭喜你還是佩服你…總之先雙手合十的感謝你！
參考文獻(xiàn)
書籍：
《交互設(shè)計精髓4》、《Web表單設(shè)計：點石成金的藝術(shù)》、《Web界面設(shè)計》
Guideline：
iOS HIG、Material Design、Ant Design
Tips:
忘了從哪收藏的一個集合各廠Guideline的網(wǎng)站，各位如果有興趣可以看看。鏈接
參考文章：
輸入框：Designing More Efficient Forms
復(fù)選框：UX Design: Checkbox and Toggle in?Forms
下拉列表：UX Design: Drop-Downs in?Forms、Dropdown alternatives for better (mobile)?forms、Mobile UX Design:?Sliders
按鈕：How To Design Better Buttons、Button UX Design: Best Practices, Types and?States
