目錄：
一、文本輸入框
二、下拉框
三、單選框
四、複選框
五、開關按鈕
六、穿梭框
七、日期選擇
八、步進器
九、標籤
十、提示
十一、按鈕
一、文本輸入框
1.輸入框簡介
輸入框用於數據輸入，表單的部分輸入框會驗證數據準確性。
2.輸入框狀態
有6種狀態，分別是一般、激活、輸入、輸入成功、輸入失敗、禁用狀態。
1）輸入框一般狀態，輸入框常爲淺灰色，也有部分重要輸入框爲飽和度較高的顏色。
2）激活狀態，即鼠標移上或點擊時，鼠標會變成可輸入標誌，輸入框常爲高亮色，給用戶一個選中的反饋。當鼠標移入後移出或輸入框選中後失焦時，輸入框會變回一般狀態，輸入框呈淺灰色。現實中有的輸入框也有激活狀態輸入框顏色不變的情況。
3）輸入狀態，輸入框常爲高亮色，起聚焦作用，現實中也有輸入狀態輸入框顏色不變。文本框一般可輸入字符、數字、密碼等。
4）輸入成功狀態，一般無需驗證的輸入框都不存在輸入成功的狀態，有的需要驗證的輸入框存在輸入成功的狀態。
輸入成功一般有兩種，一是跟平常的輸入框狀態一樣，輸入完成後沒有明顯提示，大多數用在不需要驗證的輸入；
二是輸入完成後顯示‘√’（+文字提示）表示輸入成功。‘√’（+文字提示），大多出現在驗證用戶身份是否唯一的情況，比如用戶名、手機號等。
5）輸入錯誤狀態，需要驗證的輸入框會存在錯誤狀態，比如用於識別用戶身份是否唯一時的用戶名或手機號等、對輸入格式或內容有限制的輸入框。會通過用把輸入框標紅和‘×’+文字，提示用戶輸入錯誤。錯誤狀態的樣式有多種，也有輸入框不標紅，只出現‘×’+文字或輸入框標紅+文字。
6）禁用狀態，整個文本框爲淺灰色，不可編輯。常用於編輯時，輸入框內容爲固定不可更改的情況。
3.輸入框類型
輸入框分爲單行輸入框和多行輸入框，其中單行輸入框包括一般輸入框、自動匹配輸入框。
1）單行輸入文本框。一般有無提示輸入框（有外標籤）、有提示輸入框（內標籤）、icon+提示輸入框（內標籤） 。根據實際場景運用不同的單行輸入框。
2）自動匹配文本輸入框。可識別用戶輸入的內容，在下拉框顯示與輸入內容相關的列表。這種輸入框也稱聯想輸入框。
主要有兩種場景：
一種是識別在本IP上輸入過的內容，保護用戶隱私。比如在某臺電腦上登錄QQ，輸入用戶名，會識別出登陸過的用戶名而不是QQ系統的所有的用戶名。
第二種是篩選系統內部內容，比如在後臺系統某個字段數據十分多，希望通過輸入實現字段填充，在輸入框中輸入後，後臺自動篩選包含該字段的系統內容，比如百度的搜索輸入框，在輸入中，在輸入框底部顯示匹配你輸入的內容，按照搜索熱度和你關鍵字的匹配度進行排序。
另外如果你輸入的是拼音，自動匹配下拉框也能顯示出你可能想要搜索的內容，自動匹配下拉框也起着防錯的功能。
自動匹配文本輸入框能幫用戶快速輸入，也能有效防錯， 節省時間，提高體驗。
3）多行文本輸入框。可輸入備註等會有多行文本的信息。要是信息行數超過文本框長度，信息可在文本框內用滾動條滾動展示。
二、下拉框
1.下拉框簡介
當選項過多或操作命令過多時，此控件可用於收納數據/操作元素。
優點：不需要佔用屏幕大空間，可以把元素隱藏，可預計屏幕需預留的空間，可擴展性強。
缺點：一次只能看到一個選項，不便於看到剩下的選項，對於選項選擇增加了一個層級。
2.下拉框狀態
有2種狀態，分別是一般、激活狀態。
1）一般狀態，下拉框常爲淺灰色。初始框內一般會有描述性文字。
2）激活狀態，有兩種情況，一種是點擊激活，一種是移上激活。
1-鼠標移上下拉框時，或點擊下拉框時，下拉框呈展開激活狀態。
2-鼠標移上下拉框時，下拉框呈展開激活狀態。
3.下拉框類型
下拉框存在單選下拉框和多選下拉框，多選下拉框有兩種不同的形式，一種是列表多選，一種是樹多選。若列表內容長於下拉框展示區，內容用滾動條滾動展示。
1）單選下拉框。單選下拉框可在下拉列表中選擇一個選項。
選擇某個選項，輸入框的數據會被替換，下拉列表收起。或沒選中選項，下拉列表失焦，下拉列表收起。
2）多選下拉框。多選下拉框可在下拉列表中選擇多個選項。
選擇多個選項，輸入框的數據會顯示選中的數據或數據數量，下拉框失焦時列表收起。
3）樹形菜單下拉框。樹形菜單下拉框可在下拉列表中選擇多個選項。
三、單選框
1.單選框簡介
用於選擇2個或以上一組選項中的某一個選項，選項之間呈互斥關係。
優點：能直觀看到有哪些選項。
缺點：元素多的時候，佔用屏幕空間較大。
2.單選框狀態
單選框有四種狀態，分別爲：未選中、選中、未選中且禁用、選中且禁用
3.單選框樣式
1）傳統的radio樣式
傳統radio樣式常用於表單設計，多用於選擇‘是’、‘否’或者選項較少的一組選項
2）按鈕樣式
目前的單選按鈕控件樣式也多用按鈕樣式，因爲按鈕樣式選中區域大且視覺效果明顯，有利於轉化。
按鈕樣式不僅用到表單中，也會用於單個條件篩選。
四、複選框
1.複選框簡介
用於需要同時選中多個選項的情況，選項呈並列關係。
2.複選框框狀態
複選框也有四種狀態，分別爲：未選中、選中、未選中且禁用、選中且禁用
3.複選框類型
1）單複選框
類似於選‘是’、‘否’，在這種場景下用單複選框能極大地節省了空間，也能較好傳達信息。
2）多複選框
多個並列選項皆可選的時候，常用到多複選框。
五、開關按鈕
1.開關簡介
類似於現實場景中的開關按鈕，一般用於選擇‘開’、‘關’兩種狀態。
優點：通過開關兩種不同狀態，模擬現實，符合用戶心理邏輯，且佔用屏幕面積小。
缺點：不像現實場景按一下會有明顯的反饋，比如按一下燈會開或關。在軟件上，即使通過顏色區分，若沒有明顯反饋，開關兩種狀態容易會讓用戶混淆。
2.開關按鈕狀態
開關按鈕有兩種狀態，分別爲：開和關，進行開或關操作，按鈕會有明顯的顏色變化。
六、穿梭框
從左到右多選控件一般用於表單新增或編輯。
此控件是把左側的列表元素選擇到右側，右側爲選中元素。也可以取消選中元素，把右側元素轉移到左側。可多選操作，也可全部操作。
優點：可以從多個選項中直觀看到選中了哪些選項，且選中或取消操作成本低。
缺點：佔用屏幕面積固定且大，沒用過此控件的用戶需要花一定的學習成本。
question：
上述這麼多的單選和多選控件，用的時候要怎麼選呢？
用於單選的控件有：
1）單選下拉框
2）單選框，radio樣式
3）單選框，按鈕樣式
4）單複選框
5）開關按鈕
遇到這麼多的單選控件，要根據使用場景去選擇合適的控件。
1）單選下拉框
可以把多個數據隱藏起來。適用於做查詢條件、做表單輸入、合併隱藏多個並行操作等。
如：
2）單選框，radio樣式
把多個選項展示出來。適用於表單填寫時，用於選擇互斥的一組選項。
與按鈕樣式相比，選中狀態較爲不突出。若希望用戶弱化的某個選項，相比按鈕樣式，用radio樣式會比較好。
如： 1-
2-
3）單選框，按鈕樣式
把多個選項展示出來，且選中效果直觀明顯，有利於轉化。
適用於表單填寫時，用於選擇互斥的一組選項，和查詢條件中的單個條件篩選。
如：
4）單複選框
單個複選框，只存在選中或未選中狀態，用於表示是否，能極大節省空間。
常用於購買、登錄、安裝等 需要同意某一協議場景，或選中是否使用工具的場景，或有無完成等場景。
5）開關按鈕
只存在‘開’、‘關’兩種狀態，常用於啓動或停用某種功能或產品狀態。
用於多選的控件有：
1）多選下拉
2）組合複選框
3）選擇從左到右
思考：每一種多選控件適用於哪一種場景
七、日期選擇
1.日期選擇（一天）：選擇某天的日期（年月日）。
2.日期選擇（一天＋時間）：選擇某天的日期＋時間。選擇完日期之後，在下拉框底部可以輸入具體時間，點擊確定即完成輸入。
3.時間段選擇（多天）：選擇時間段（年月日）。通過點擊開始時間和結束時間來選擇時間段。
下面的控件區別於兩個單獨選擇日期的控件優點在於可以保證開始時間是在結束時間之前的，存在防錯機制。
如果單獨兩個選擇時間控件，容易選到開始時間晚於結束時間，出錯機率較大。
八、步進器
通過增減符號對中間的數字進行+1或-1操作。
步進器適合做細小數值調整，比如購買商品時選擇商品數量。如：
九、文本標籤
文本標籤有多種對齊用法：
1）頂對齊
標籤可讀性強，可節省大量的橫向空間，浪費縱向空間。
2）左對齊
標籤可讀性弱，若標籤與輸入框間距過大，不符合格式塔原理。
3）右對齊
標籤可讀性強，減少佔用垂直空間。
市面的軟件用頂對齊和右對齊的相對比較多。
十、提示
1）幫助提示：用於可隱藏的不那麼重要的信息提醒。鼠標移動到圖標，會自動出現文字提示，移開提示消失。
2）一般提示：一般重要信息的提示，不可隱藏。
3）文字警告提示：用戶輸入錯誤後提醒或重要信息提醒，不可隱藏。
4）懸停重要／警告提示：用戶 輸入錯誤後提醒或重要信息提醒，消息可隱藏。
5）帶背景文字提示（正常）：一般重要信息提示，不可關閉或隱藏。
6）帶背景文字提示（可關閉）：一般重要信息提示，可關閉。適用於初次使用系統提示，或會多次重複出現的提醒提示。
7）帶背景重要信息提醒：不可忽略的重要信息提示。跟一般重要提示用飽和度更高的顏色區分開，突出重要性。
十一、按鈕
1、按鈕作用：點擊按鈕時，幫我們觸發某個動作。
2、按鈕狀態
按鈕有4種狀態：正常、懸停、按下、禁用 4種。
其中懸停和選中狀態顏色要與正常狀態區分，作爲懸停或選中的反饋。禁用一般文字與按鈕都置灰，表示不能點擊。
3、按鈕類型
按鈕有4種類型：一般按鈕、突出按鈕、線性按鈕、複合按鈕
1）一般按鈕
一般按鈕主要用來觸發特定操作的，當操作不是特別重要的時候，會用一般按鈕配色，讓用戶容易發現該操作。
2）突出按鈕
突出按鈕主要用來突出重要操作的，當操作爲高頻重要操作時，且與一般操作放到一起時，顏色上做區分，讓用戶一眼能發現該操作。
4）線性按鈕
線性按鈕主要用來展示頻率偏低或重要性較低的操作。
5）複合按鈕
複合按鈕主要用在有多個操作並列展示時，把低頻且重要性低的操作放到‘更多’裏面，減少頁面複雜度與用戶認知負荷。
最後說兩句，
控件知識是交互工作中最基礎的知識，以上的控件只是日常工作中後臺設計的部分常用控件，很多控件還沒提及，另外控件還有優化的地方，以後會在日常工作中不斷思考、積累與補充。
寫於2016年12月
來源：http://ued.chinanetcenter.com/?p=1439