本文作者主要講解表單中的文本和選擇器,enjoy~
根據(jù)組件的用途,可以分為六大類(lèi):Feedback 反饋、form 表單、basic 基礎(chǔ)、data 數(shù)據(jù) 、navigation 導(dǎo)航、other 其他。
表單在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)采集功能;用戶(hù)需要填寫(xiě)輸入數(shù)據(jù)并且提交到數(shù)據(jù)庫(kù),則這種組件就是表單類(lèi)。
本文主要講解表單中的文本和選擇器,其中文本分為input短文本、InputAutocomplete 短文本聯(lián)想和InputMultiline 長(zhǎng)文本。
input 短文本
定義:用于用戶(hù)文本輸入,并以字符串的方式提交到數(shù)據(jù)庫(kù)。
使用場(chǎng)景:
- 用戶(hù)需要輸入字符時(shí)
- 通過(guò)鼠標(biāo)鍵盤(pán)輸入內(nèi)容
- 輸入的文本通常置于輸入框
例如網(wǎng)易考拉優(yōu)惠券兌換的表單填寫(xiě),就是短文本輸入組件,前面是標(biāo)題,后面是文本輸入框。
input短文本組件的展示形式可以分為三類(lèi)。第1類(lèi)是標(biāo)題和輸入框左右排列;第二類(lèi)是標(biāo)題和輸入框上下排列;第三列不需要標(biāo)題的排列。
標(biāo)題和輸入框左右排列時(shí),短文本組件存在的狀態(tài)有:初始態(tài)、激活態(tài)、報(bào)錯(cuò)態(tài)、完成態(tài)和禁用態(tài)。
常見(jiàn)的表單類(lèi)排版都是左右排版,同時(shí)表單之間,標(biāo)題采用左對(duì)齊,輸入框左對(duì)齊的情況比較多。有時(shí)候標(biāo)題名字過(guò)長(zhǎng)這樣話 左右排列就不夠好,這時(shí)候需要采用上下排列。
標(biāo)題和輸入框上下排版時(shí),存在狀態(tài)和左右排列是一致的。
當(dāng)沒(méi)有標(biāo)題時(shí),存在狀態(tài)同左右排列的規(guī)則和邏輯。
InputAutocomplete 短文本聯(lián)想
定義:用戶(hù)用于文本輸入,在輸入過(guò)程中會(huì)聯(lián)想匹配文本選項(xiàng),并以字符串的方式提交到數(shù)據(jù)庫(kù)。
使用場(chǎng)景:
- 需要用戶(hù)輸入文本時(shí)。
- 提供聯(lián)想匹配文本,減少用戶(hù)輸入成本。
- 在輸入過(guò)程中根據(jù)用戶(hù)輸入的內(nèi)容,出現(xiàn)匹配選項(xiàng),提交的數(shù)據(jù)是文本而非枚舉項(xiàng)。
例如百度搜索,在輸入框輸入關(guān)鍵詞時(shí)會(huì)出現(xiàn)對(duì)應(yīng)的聯(lián)想匹配文本。
和input短文本組件相比,InputAutocomplete 短文本聯(lián)想唯一的不同就是新增了聯(lián)想匹配選項(xiàng),并且提交的是文本而非枚舉項(xiàng)。
標(biāo)題和輸入框左右排列時(shí),InputAutocomplete 短文本聯(lián)想組件存在的狀態(tài)有:初始態(tài)、激活態(tài)、報(bào)錯(cuò)態(tài)、完成態(tài)和禁用態(tài)。
上下排列的狀態(tài)和規(guī)則邏輯同左右排列。
不含標(biāo)題的狀態(tài)和規(guī)則邏輯同左右排列。
InputMultiline 長(zhǎng)文本
定義:用戶(hù)用于長(zhǎng)文本輸入,并以文本的方式提交到數(shù)據(jù)庫(kù)。
使用場(chǎng)景:
- 多段文字輸入
- 需要換行
- 輸入的文本通常置于輸入框中
例如新浪微博,在輸入框發(fā)微博時(shí),就是長(zhǎng)文本輸入,可以換行。
標(biāo)題和輸入框左右排列時(shí),InputMultiline 長(zhǎng)文本存在的狀態(tài)有:初始態(tài)、激活態(tài)、報(bào)錯(cuò)態(tài)、完成態(tài)和禁用態(tài)。在輸入過(guò)程中一般有字?jǐn)?shù)統(tǒng)計(jì),超過(guò)限制字?jǐn)?shù),不允許用戶(hù)輸入。
上下排列邏輯和規(guī)則同左右排列。
不含標(biāo)題的邏輯同左右排列。
select 選擇器
定義:用戶(hù)通過(guò)選擇枚舉項(xiàng),提交到服務(wù)器。后端存儲(chǔ)為枚舉項(xiàng)。
使用場(chǎng)景:
- 彈出一個(gè)下拉選項(xiàng)給用戶(hù)選擇操作
- 當(dāng)選項(xiàng)少時(shí)(少于 5 項(xiàng)),建議直接將選項(xiàng)平鋪,使用 Radio 是更好的選擇。
例如淘寶賣(mài)家后臺(tái)篩選訂單的狀態(tài)時(shí),點(diǎn)擊選擇器,出現(xiàn)下拉列表。這就是一個(gè)常見(jiàn)的選擇器,選擇器分為多選和單選兩大類(lèi)。
下圖為選擇器基本樣式,就是簡(jiǎn)單的下拉選項(xiàng),不可進(jìn)行關(guān)鍵詞的搜索。
下圖是可以搜索的選擇器,當(dāng)輸入框處于激活態(tài)時(shí),浮出下拉列表。在輸入過(guò)程中,出現(xiàn)匹配枚舉項(xiàng),點(diǎn)擊枚舉項(xiàng),則輸入的關(guān)鍵詞清空,同時(shí)下拉選項(xiàng)收起。輸入框出現(xiàn)選擇的選項(xiàng)。
有時(shí)候存在一個(gè)場(chǎng)景。用戶(hù)對(duì)需要填寫(xiě)的選項(xiàng)設(shè)為空選項(xiàng),則需要空值的選項(xiàng)。
有時(shí)候存在一個(gè)場(chǎng)景。用戶(hù)選擇了一個(gè)選項(xiàng),但是后面想去掉選擇的選項(xiàng),不進(jìn)行選擇。
選擇器多選組件中需要注意的一點(diǎn)就是:用戶(hù)在輸入關(guān)鍵詞中,選擇對(duì)應(yīng)下拉選項(xiàng),則輸入的字符串清空,同時(shí)出現(xiàn)該選項(xiàng)tag。