細節思考表單交互設計二 表單校驗設計思考

　　你是否經常碰到在填寫表單時，提交無數次卻還是無法通過校驗的情況;或者你是否在為不知道填寫中哪裡出現錯誤而抓狂;再或者你是否碰到過當你填寫了一大堆信息，之後點擊按鈕提交時，校驗報錯的同時，你發現你所填寫的所有的信息都被清空;或者你還碰到過很多很多校驗當中出現的問題，那麼我們現在就開始進行表單校驗設計的思考。

　　那校驗有哪些情況呢?

　　1、 READY?

　　提到校驗，我們往往會聯系到提交表單後出現的錯誤提示類信息，但是其實在填寫表單前的提示信息與表單填寫校驗有著莫大的關系。

　　此類提示信息能夠幫助用戶在填寫表單前，降低出錯的可能性。它出現的形式分為以下幾類：

　　a) 簡要提示——有如：icon，icon+文字，文字，暗提示。

　　出現情況：一般提示信息比較簡短，能夠讓用戶一目了然的記住，並且不干擾表單的填寫項。

　　alipay.com付款頁面

　　alibaba.com注冊

　　b) 復雜提示——以縮略信息或icon來顯示，通過點擊和hover進行查看。

　　出現情況：提示信息內容較多，需要用戶仔細閱讀，並且無法簡單記憶，直接全部顯示會影響整個表單填寫，因此此類情況需要hover或者點擊操作進行查看。hover或者點擊後有浮層，蒙板，或者跳轉新頁面等情況。

　　taobao.com機票登機人填寫頁

　　ctrip.com機票登機人填寫頁

　　c) 限制操作——在表單填寫前，對某些需要填寫或者操作項會有一些disabled的狀態，只有當某些條件被激活用戶才能進行操作。

　　出現情況：當填寫項與項之間帶有關聯性，前面的填寫項會影響後面填寫項的內容或狀態;或當填寫項較少，填寫項均可以即時校驗，就可以將主提交操作項做狀態限制。

　　livestream.com機票登機人填寫頁

　　d) 其他提示——填寫表單的時候，還有一種比較特殊但又更簡單明了的提示，例如：使用圖片說明。

　　出現情況：當填寫表單項的提示說明很難用文字清晰表述，這時候可以使用圖片，視頻等輔助方式來幫助用戶快速理解。

alipay.com水電煤繳費頁面

　　2、 ING~

　　當您浏覽完整體的表單，接下來就是進行填寫的步驟。在填寫的過程中，我們會碰到很多類型的校驗，比如：即時校驗的友情類提示，即時校驗的警示提示，關聯性校驗的提示。即時的校驗也分為三種狀態一種是on focus後的幫助提示、輸入中的校驗、lost focus後的校驗。

　　出現情況：提示信息內容較多，需要用戶仔細閱讀，並且無法簡單記憶，直接全部顯示會影響整個表單填寫，因此此類情況需要hover或者點擊操作進行查看。hover或者點擊後有浮層，蒙板，或者跳轉新頁面等情況

　　a) 即時校驗的友情類提示

　　即時校驗的友情類提示不是提交時無法通過的出錯警示，而是給到用戶一些更合理的建議或者幫助。

　　Ctrip.com填寫登機人頁

　　(當你選擇了兒童票時會提示兒童票的某些特定限制。當你輸入的出生日期與你之前選擇的購買類型不一致的時候會建議你去購買更合適的類型，但並不強制。)

　　Buy360.com的注冊頁

　　(當onfocus的時候會出現下方幫助提示類信息，當然也有很多網站會做成暗提示。)

　　163.com的注冊頁

　　(當onfocus的時候會出現右邊密碼的強度，會根據你輸入密碼的改變而提示你的密碼強弱。)

　　b) 即時校驗的警示提示

　　即時校驗的警示提示是屬於錯誤類提示，這類錯誤會影響表單無法提交。

　　警示提示類的校驗重要級別非常高，因此在顏色和位置上都需要非常明顯。有很多網站甚至將出錯內容和出錯後如何修改的建議都放在了該提示中顯示。

　　163.com的注冊頁

　　Buy360.com的注冊頁

　　c) 關聯性校驗

　　關聯性校驗是所填寫項之間會有相互影響的邏輯關系，後一項的填寫是否正確會取決與前幾項的填寫內容。

　　Buy360.com的注冊頁

　　(設置密碼填寫項與確認密碼填寫項不一致時會提示錯誤。)

　　招商銀行信用卡支付頁

　　攜程旅行計劃創建頁

　　(旅行計劃目的地1和目的地2的時間段有沖突時就會提示錯誤。)

　　3、 ACTION!

　　當您填寫完表單，開始觸發提交按鈕的時候，表單會開始進行表單提交後的校驗。目前比較多的有兩種，一種是逐條提示，另一種是一次性全部提示。

　　a) 逐條提示

　　逐條提示是在提交表單後，雖然有多項錯誤，但是每次提交只按順序顯示一條錯誤。逐條告知錯誤提示，會導致用戶改完之後再次提交又需要重復修改，視線流上下來回，不停的修改不停的提交，多次操作才能完成整個表單的過程。

　　yihaodian.com注冊頁

　　b) 一次性全部提示

　　一次性全部提示是在提交表單時將所有錯誤全部羅列。

　　Yahoo.com注冊頁

　　Hotels.com預訂頁

　　(該網站設計不僅將所有錯誤一次性全部羅列在填寫框右側，並且提交按鈕的hover狀態再次將所有錯誤呈現，點擊某項錯誤會直接錨點跳轉至該錯誤填寫區域。)

　　思考：

　　出錯提示有4個基本原則：即時反饋出錯提示，出錯提示的位置顯示恰當並且明顯突出，提示信息內容清晰易懂，一次性顯示全部出錯提示。

　　除了這些基本的設計原則，在設計表單的校驗中，還會有很多讓我很糾結的點，以下羅列一些我個人認為比較好的經驗。

　　1、 在設計校驗時雖然需要考慮到出錯提示的明顯突出，但是在實際情況中，會和頁面的空間大小和布局相關，需要考慮實際情況來定奪。

　　2、 盡量避免不必要的錯誤，一是自動噴入值;二是限制型操作;

　　比如，在身份證填寫項中填寫了身份證信息時，如果下面還需要填寫出生日期，完全可以直接噴入身份證上的出生日期值。

　　3、 有的錯誤校驗會自動修正一些信息，但是這類行為請不要忘記告知用戶。

　　4、 友情類提示的校驗重要級別永遠低於警示類錯誤校驗，在視覺和交互的位置上應該酌情考慮。

　　5、 錯誤信息出現的位置視覺等效果應該統一，並且在位置上保持在用戶可見的范圍內。

　　6、 頁面自動錨記至出錯項處，