你是否經(jīng)常碰到在填寫表單時(shí),提交無數(shù)次卻還是無法通過校驗(yàn)的情況;或者你是否在為不知道填寫中哪里出現(xiàn)錯(cuò)誤而抓狂;再或者你是否碰到過當(dāng)你填寫了一大堆信息,之后點(diǎn)擊按鈕提交時(shí),校驗(yàn)報(bào)錯(cuò)的同時(shí),你發(fā)現(xiàn)你所填寫的所有的信息都被清空;或者你還碰到過很多很多校驗(yàn)當(dāng)中出現(xiàn)的問題,那么我們現(xiàn)在就開始進(jìn)行表單校驗(yàn)設(shè)計(jì)的思考。

那校驗(yàn)有哪些情況呢?
1、READY?
提到校驗(yàn),我們往往會(huì)聯(lián)系到提交表單后出現(xiàn)的錯(cuò)誤提示類信息,但是其實(shí)在填寫表單前的提示信息與表單填寫校驗(yàn)有著莫大的關(guān)系。
此類提示信息能夠幫助用戶在填寫表單前,降低出錯(cuò)的可能性。它出現(xiàn)的形式分為以下幾類:
a) 簡要提示——有如:icon,icon+文字,文字,暗提示。
出現(xiàn)情況:一般提示信息比較簡短,能夠讓用戶一目了然的記住,并且不干擾表單的填寫項(xiàng)。
alipay.com付款頁面
alibaba.com注冊
b) 復(fù)雜提示——以縮略信息或icon來顯示,通過點(diǎn)擊和hover進(jìn)行查看。
出現(xiàn)情況:提示信息內(nèi)容較多,需要用戶仔細(xì)閱讀,并且無法簡單記憶,直接全部顯示會(huì)影響整個(gè)表單填寫,因此此類情況需要hover或者點(diǎn)擊操作進(jìn)行查看。hover或者點(diǎn)擊后有浮層,蒙板,或者跳轉(zhuǎn)新頁面等情況。
taobao.com機(jī)票登機(jī)人填寫頁
ctrip.com機(jī)票登機(jī)人填寫頁
c) 限制操作——在表單填寫前,對(duì)某些需要填寫或者操作項(xiàng)會(huì)有一些disabled的狀態(tài),只有當(dāng)某些條件被激活用戶才能進(jìn)行操作。
出現(xiàn)情況:當(dāng)填寫項(xiàng)與項(xiàng)之間帶有關(guān)聯(lián)性,前面的填寫項(xiàng)會(huì)影響后面填寫項(xiàng)的內(nèi)容或狀態(tài);或當(dāng)填寫項(xiàng)較少,填寫項(xiàng)均可以即時(shí)校驗(yàn),就可以將主提交操作項(xiàng)做狀態(tài)限制。
livestream.com機(jī)票登機(jī)人填寫頁
d) 其他提示——填寫表單的時(shí)候,還有一種比較特殊但又更簡單明了的提示,例如:使用圖片說明。
出現(xiàn)情況:當(dāng)填寫表單項(xiàng)的提示說明很難用文字清晰表述,這時(shí)候可以使用圖片,視頻等輔助方式來幫助用戶快速理解。
alipay.com水電煤繳費(fèi)頁面
2、ING~
當(dāng)您瀏覽完整體的表單,接下來就是進(jìn)行填寫的步驟。在填寫的過程中,我們會(huì)碰到很多類型的校驗(yàn),比如:即時(shí)校驗(yàn)的友情類提示,即時(shí)校驗(yàn)的警示提示,關(guān)聯(lián)性校驗(yàn)的提示。即時(shí)的校驗(yàn)也分為三種狀態(tài)一種是on focus后的幫助提示、輸入中的校驗(yàn)、lost focus后的校驗(yàn)。
出現(xiàn)情況:提示信息內(nèi)容較多,需要用戶仔細(xì)閱讀,并且無法簡單記憶,直接全部顯示會(huì)影響整個(gè)表單填寫,因此此類情況需要hover或者點(diǎn)擊操作進(jìn)行查看。hover或者點(diǎn)擊后有浮層,蒙板,或者跳轉(zhuǎn)新頁面等情況
a) 即時(shí)校驗(yàn)的友情類提示
即時(shí)校驗(yàn)的友情類提示不是提交時(shí)無法通過的出錯(cuò)警示,而是給到用戶一些更合理的建議或者幫助。
Ctrip.com填寫登機(jī)人頁
(當(dāng)你選擇了兒童票時(shí)會(huì)提示兒童票的某些特定限制。當(dāng)你輸入的出生日期與你之前選擇的購買類型不一致的時(shí)候會(huì)建議你去購買更合適的類型,但并不強(qiáng)制。)
Buy360.com的注冊頁
(當(dāng)onfocus的時(shí)候會(huì)出現(xiàn)下方幫助提示類信息,當(dāng)然也有很多網(wǎng)站會(huì)做成暗提示。)
163.com的注冊頁
(當(dāng)onfocus的時(shí)候會(huì)出現(xiàn)右邊密碼的強(qiáng)度,會(huì)根據(jù)你輸入密碼的改變而提示你的密碼強(qiáng)弱。)
文章名稱:表單交互設(shè)計(jì)之二——校驗(yàn)思考
分享鏈接:http://m.kartarina.com/article32/cpjopc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站導(dǎo)航、自適應(yīng)網(wǎng)站、企業(yè)網(wǎng)站制作、企業(yè)建站、App開發(fā)、全網(wǎng)營銷推廣
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)