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

　　那校驗(yàn)有哪些情況呢? yixieshi

　　1、 READY? yixieshi

　　提到校驗(yàn)，我們往往會(huì)聯(lián)系到提交表單后出現(xiàn)的錯(cuò)誤提示類信息，但是其實(shí)在填寫(xiě)表單前的提示信息與表單填寫(xiě)校驗(yàn)有著莫大的關(guān)系。

yixieshi

　　此類提示信息能夠幫助用戶在填寫(xiě)表單前，降低出錯(cuò)的可能性。它出現(xiàn)的形式分為以下幾類： 互聯(lián)網(wǎng)的一些事

　　a) 簡(jiǎn)要提示——有如：icon，icon+文字，文字，暗提示。 yixieshi

　　出現(xiàn)情況：一般提示信息比較簡(jiǎn)短，能夠讓用戶一目了然的記住，并且不干擾表單的填寫(xiě)項(xiàng)。 yixieshi

　　b) 復(fù)雜提示——以縮略信息或icon來(lái)顯示，通過(guò)點(diǎn)擊和hover進(jìn)行查看。

yixieshi

　　出現(xiàn)情況：提示信息內(nèi)容較多，需要用戶仔細(xì)閱讀，并且無(wú)法簡(jiǎn)單記憶，直接全部顯示會(huì)影響整個(gè)表單填寫(xiě)，因此此類情況需要hover或者點(diǎn)擊操作進(jìn)行查看。hover或者點(diǎn)擊后有浮層，蒙板，或者跳轉(zhuǎn)新頁(yè)面等情況。 互聯(lián)網(wǎng)的一些事

　　c) 限制操作——在表單填寫(xiě)前，對(duì)某些需要填寫(xiě)或者操作項(xiàng)會(huì)有一些disabled的狀態(tài)，只有當(dāng)某些條件被激活用戶才能進(jìn)行操作。 yixieshi

　　出現(xiàn)情況：當(dāng)填寫(xiě)項(xiàng)與項(xiàng)之間帶有關(guān)聯(lián)性，前面的填寫(xiě)項(xiàng)會(huì)影響后面填寫(xiě)項(xiàng)的內(nèi)容或狀態(tài);或當(dāng)填寫(xiě)項(xiàng)較少，填寫(xiě)項(xiàng)均可以即時(shí)校驗(yàn)，就可以將主提交操作項(xiàng)做狀態(tài)限制。

互聯(lián)網(wǎng)的一些事

　　d) 其他提示——填寫(xiě)表單的時(shí)候，還有一種比較特殊但又更簡(jiǎn)單明了的提示，例如：使用圖片說(shuō)明。

yixieshi

　　出現(xiàn)情況：當(dāng)填寫(xiě)表單項(xiàng)的提示說(shuō)明很難用文字清晰表述，這時(shí)候可以使用圖片，視頻等輔助方式來(lái)幫助用戶快速理解。 互聯(lián)網(wǎng)的一些事

　　2、 ING~ yixieshi

　　當(dāng)您瀏覽完整體的表單，接下來(lái)就是進(jìn)行填寫(xiě)的步驟。在填寫(xiě)的過(guò)程中，我們會(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)。

互聯(lián)網(wǎng)的一些事

　　出現(xiàn)情況：提示信息內(nèi)容較多，需要用戶仔細(xì)閱讀，并且無(wú)法簡(jiǎn)單記憶，直接全部顯示會(huì)影響整個(gè)表單填寫(xiě)，因此此類情況需要hover或者點(diǎn)擊操作進(jìn)行查看。hover或者點(diǎn)擊后有浮層，蒙板，或者跳轉(zhuǎn)新頁(yè)面等情況

yixieshi

　　a) 即時(shí)校驗(yàn)的友情類提示

　　即時(shí)校驗(yàn)的友情類提示不是提交時(shí)無(wú)法通過(guò)的出錯(cuò)警示，而是給到用戶一些更合理的建議或者幫助。 互聯(lián)網(wǎng)的一些事

　　(當(dāng)你選擇了兒童票時(shí)會(huì)提示兒童票的某些特定限制。當(dāng)你輸入的出生日期與你之前選擇的購(gòu)買(mǎi)類型不一致的時(shí)候會(huì)建議你去購(gòu)買(mǎi)更合適的類型，但并不強(qiáng)制。)

互聯(lián)網(wǎng)的一些事

　　(當(dāng)onfocus的時(shí)候會(huì)出現(xiàn)下方幫助提示類信息，當(dāng)然也有很多網(wǎng)站會(huì)做成暗提示。) yixieshi

　　(當(dāng)onfocus的時(shí)候會(huì)出現(xiàn)右邊密碼的強(qiáng)度，會(huì)根據(jù)你輸入密碼的改變而提示你的密碼強(qiáng)弱。) 互聯(lián)網(wǎng)的一些事

　　b) 即時(shí)校驗(yàn)的警示提示

　　即時(shí)校驗(yàn)的警示提示是屬于錯(cuò)誤類提示，這類錯(cuò)誤會(huì)影響表單無(wú)法提交。 yixieshi

　　警示提示類的校驗(yàn)重要級(jí)別非常高，因此在顏色和位置上都需要非常明顯。有很多網(wǎng)站甚至將出錯(cuò)內(nèi)容和出錯(cuò)后如何修改的建議都放在了該提示中顯示。 yixieshi

　　c) 關(guān)聯(lián)性校驗(yàn)

yixieshi

　　關(guān)聯(lián)性校驗(yàn)是所填寫(xiě)項(xiàng)之間會(huì)有相互影響的邏輯關(guān)系，后一項(xiàng)的填寫(xiě)是否正確會(huì)取決與前幾項(xiàng)的填寫(xiě)內(nèi)容。 yixieshi

　　(設(shè)置密碼填寫(xiě)項(xiàng)與確認(rèn)密碼填寫(xiě)項(xiàng)不一致時(shí)會(huì)提示錯(cuò)誤。) 互聯(lián)網(wǎng)的一些事

　　(旅行計(jì)劃目的地1和目的地2的時(shí)間段有沖突時(shí)就會(huì)提示錯(cuò)誤。)

互聯(lián)網(wǎng)的一些事

　　3、 ACTION! yixieshi

　　當(dāng)您填寫(xiě)完表單，開(kāi)始觸發(fā)提交按鈕的時(shí)候，表單會(huì)開(kāi)始進(jìn)行表單提交后的校驗(yàn)。目前比較多的有兩種，一種是逐條提示，另一種是一次性全部提示。 互聯(lián)網(wǎng)的一些事

　　a) 逐條提示

互聯(lián)網(wǎng)的一些事

　　逐條提示是在提交表單后，雖然有多項(xiàng)錯(cuò)誤，但是每次提交只按順序顯示一條錯(cuò)誤。逐條告知錯(cuò)誤提示，會(huì)導(dǎo)致用戶改完之后再次提交又需要重復(fù)修改，視線流上下來(lái)回，不停的修改不停的提交，多次操作才能完成整個(gè)表單的過(guò)程。 互聯(lián)網(wǎng)的一些事

　　b) 一次性全部提示

　　一次性全部提示是在提交表單時(shí)將所有錯(cuò)誤全部羅列。 yixieshi

　Yahoo.com注冊(cè)頁(yè)

yixieshi

　Hotels.com預(yù)訂頁(yè) 互聯(lián)網(wǎng)的一些事

　　(該網(wǎng)站設(shè)計(jì)不僅將所有錯(cuò)誤一次性全部羅列在填寫(xiě)框右側(cè)，并且提交按鈕的hover狀態(tài)再次將所有錯(cuò)誤呈現(xiàn)，點(diǎn)擊某項(xiàng)錯(cuò)誤會(huì)直接錨點(diǎn)跳轉(zhuǎn)至該錯(cuò)誤填寫(xiě)區(qū)域。)

互聯(lián)網(wǎng)的一些事

　　思考：

yixieshi

　　出錯(cuò)提示有4個(gè)基本原則：即時(shí)反饋出錯(cuò)提示，出錯(cuò)提示的位置顯示恰當(dāng)并且明顯突出，提示信息內(nèi)容清晰易懂，一次性顯示全部出錯(cuò)提示。
除了這些基本的設(shè)計(jì)原則，在設(shè)計(jì)表單的校驗(yàn)中，還會(huì)有很多讓我很糾結(jié)的點(diǎn)，以下羅列一些我個(gè)人認(rèn)為比較好的經(jīng)驗(yàn)。 互聯(lián)網(wǎng)的一些事

　　1、 在設(shè)計(jì)校驗(yàn)時(shí)雖然需要考慮到出錯(cuò)提示的明顯突出，但是在實(shí)際情況中，會(huì)和頁(yè)面的空間大小和布局相關(guān)，需要考慮實(shí)際情況來(lái)定奪。 yixieshi

　　2、 盡量避免不必要的錯(cuò)誤，一是自動(dòng)噴入值;二是限制型操作; 互聯(lián)網(wǎng)的一些事

比如，在身份證填寫(xiě)項(xiàng)中填寫(xiě)了身份證信息時(shí)，如果下面還需要填寫(xiě)出生日期，完全可以直接噴入身份證上的出生日期值。 互聯(lián)網(wǎng)的一些事

　　3、 有的錯(cuò)誤校驗(yàn)會(huì)自動(dòng)修正一些信息，但是這類行為請(qǐng)不要忘記告知用戶。 互聯(lián)網(wǎng)的一些事

　　4、 友情類提示的校驗(yàn)重要級(jí)別永遠(yuǎn)低于警示類錯(cuò)誤校驗(yàn)，在視覺(jué)和交互的位置上應(yīng)該酌情考慮。

互聯(lián)網(wǎng)的一些事

　　5、 錯(cuò)誤信息出現(xiàn)的位置視覺(jué)等效果應(yīng)該統(tǒng)一，并且在位置上保持在用戶可見(jiàn)的范圍內(nèi)。

yixieshi

　　6、 頁(yè)面自動(dòng)錨記至出錯(cuò)項(xiàng)處，如果是多條可錨記至第一項(xiàng)，最好還能on focus至出錯(cuò)的填寫(xiě)項(xiàng)。 互聯(lián)網(wǎng)的一些事

　　7、 不要輕易清空用戶填寫(xiě)的內(nèi)容。

互聯(lián)網(wǎng)的一些事

　　8、 錯(cuò)誤提示不僅顯示錯(cuò)誤點(diǎn)，更可以推薦用戶一些正確填寫(xiě)建議。

互聯(lián)網(wǎng)的一些事

　　9、 出現(xiàn)了錯(cuò)誤提示后，再次on focus至填寫(xiě)項(xiàng)時(shí)，不要隱藏錯(cuò)誤提示。 互聯(lián)網(wǎng)的一些事

本文鏈接：http://www.yixieshi.com/ucd/10103.html
關(guān)鍵字：交互設(shè)計(jì)|用戶體驗(yàn)|表單設(shè)計(jì)|錯(cuò)誤提示|
版權(quán)所有：轉(zhuǎn)載請(qǐng)注明出處