♝點擊上方「互動設計學堂」關注我們,送電子書
根據組件的用途，可以分為六大類：Feedback 反饋、form 表單、basic 基礎、data 數據 、navigation 導航、other 其他。
表單在網頁中主要負責數據採集功能；用戶需要填寫輸入數據並且提交到資料庫，則這種組件就是表單類。
本文主要講解表單中的文本和選擇器，其中文本分為input短文本、InputAutocomplete 短文本聯想和InputMultiline 長文本。
input 短文本定義：用於用戶文本輸入，並以字符串的方式提交到資料庫。
使用場景：
1.用戶需要輸入字符時
2.通過滑鼠鍵盤輸入內容
3.輸入的文本通常置於輸入框
例如網易考拉優惠券兌換的表單填寫，就是短文本輸入組件，前面是標題，後面是文本輸入框。
input短文本組件的展示形式可以分為三類。第1類是標題和輸入框左右排列；第二類是標題和輸入框上下排列；第三列不需要標題的排列。
標題和輸入框左右排列時，短文本組件存在的狀態有：初始態、激活態、報錯態、完成態和禁用態。
常見的表單類排版都是左右排版，同時表單之間，標題採用左對齊，輸入框左對齊的情況比較多。有時候標題名字過長這樣話 左右排列就不夠好，這時候需要採用上下排列。
標題和輸入框上下排版時，存在狀態和左右排列是一致的。
當沒有標題時，存在狀態同左右排列的規則和邏輯。
InputAutocomplete 短文本聯想定義：用戶用於文本輸入，在輸入過程中會聯想匹配文本選項，並以字符串的方式提交到資料庫。
使用場景：
1.需要用戶輸入文本時。
2.提供聯想匹配文本，減少用戶輸入成本。
3.在輸入過程中根據用戶輸入的內容，出現匹配選項，提交的數據是文本而非枚舉項。
例如百度搜索，在輸入框輸入關鍵詞時會出現對應的聯想匹配文本。
和input短文本組件相比，短文本聯想唯一的不同就是新增了聯想匹配選項，並且提交的是文本而非枚舉項。
標題和輸入框左右排列時，短文本聯想組件存在的狀態有：初始態、激活態、報錯態、完成態和禁用態。
上下排列的狀態和規則邏輯同左右排列。
不含標題的狀態和規則邏輯同左右排列。
InputMultiline 長文本定義：用戶用於長文本輸入，並以文本的方式提交到資料庫。
使用場景：
1.多段文字輸入
2.需要換行
3.輸入的文本通常置於輸入框中
例如新浪微博，在輸入框發微博時，就是長文本輸入，可以換行。
標題和輸入框左右排列時，InputMultiline 長文本存在的狀態有：初始態、激活態、報錯態、完成態和禁用態。在輸入過程中一般有字數統計，超過限制字數，不允許用戶輸入。
上下排列邏輯和規則同左右排列。
不含標題的邏輯同左右排列。
select 選擇器定義：用戶通過選擇枚舉項，提交到伺服器。後端存儲為枚舉項。
使用場景：
1.彈出一個下拉選項給用戶選擇操作
2.當選項少時（少於 5 項），建議直接將選項平鋪，使用 Radio 是更好的選擇。
例如淘寶賣家後臺篩選訂單的狀態時，點擊選擇器，出現下拉列表。這就是一個常見的選擇器，選擇器分為多選和單選兩大類，
下圖為選擇器基本樣式，就是簡單的下拉選項，不可進行關鍵詞的搜索。
下圖是可以搜索的選擇器，當輸入框處於激活態時，浮出下拉列表。在輸入過程中，出現匹配枚舉項，點擊枚舉項，則輸入的關鍵詞清空，同時下拉選項收起。輸入框出現選擇的選項。
有時候存在一個場景。用戶對需要填寫的選項設為空選項，則需要空值的選項。
有時候存在一個場景，用戶選擇了一個選項，但是後面想去掉選擇的選項，不進行選擇。
選擇器多選組件中需要注意的一點就是：用戶在輸入關鍵詞中，選擇對應下拉選項，則輸入的字符串清空，同時出現該選項tag。
轉載自：公眾號 UEDC，Echo的個人知識心得總結分享平臺
作者：Echo
歡迎投稿：jhsjxt@163.com
加老D私人微信18605817040，和老D一起學交互，老D會在朋友圈發精選文章和招聘信息
互動設計學堂已經開設了新的欄目-行知書院，旨在幫助小夥伴們來高效的學習現在市面上優秀的用戶體驗書籍比如《互動設計精髓》等等，同時結合老D的工作經驗來幫助你們從不同的高度和角度來解讀書中的內容。每天一課，積少成多。已有222位小夥伴加入。詳細了解行知書院