如果表單的結(jié)構(gòu)沒有給你足夠的空間顯示清晰的錯誤信息，你可以使用Vimeo這種形式。

Vimeo，使用提示條的形式來顯示錯誤的字段信息，避免了布局的混亂。顏色的相關(guān)性也是很有用的，錯誤的字段紅色的信息提示和一個紅色的背景、邊框相一致。

錯誤信息被放在了操作上下文的位置，提供了一個很好的溝通基礎(chǔ)。

當(dāng)然這里的問題是“提交驗證”需要等到服務(wù)器驗證通過后才能獲取錯誤信息。然而，對于這樣一個短小的表單，我不希望它是一個關(guān)鍵性的設(shè)計錯誤。

Twitter 表單驗證 – 錯誤信息

　　合適的位置

驗證信息所在的顯示位置與正確的顯示時機一樣重要。在討論的Twitter例子中-如果提示信息不在文本域后面，而是在它下面，我就不會很快的注意到它。如果我沒有留意它···好吧，這將產(chǎn)生了困惑，迫使我離開沒有完成的表單。

當(dāng)你疑惑把驗證信息放在哪個位置時，遵循下面的一條原則-總是把信息放到操作的上下文中。如果你想通知用戶一個特殊字段發(fā)生了錯誤-在文本域后面顯示信息，如果錯誤是通用的(比如向服務(wù)器發(fā)送數(shù)據(jù)錯誤)并且沒有刷新頁面-可以在提交按鈕后面顯示信息，如果刷新了頁面-在頁面的頂部顯示信息。

看看下面的例子。Light CMS把錯誤信息顯示到了每一個文本域的下一行，這很容易注意和理解它。

Etsy的表單也是一個很好的放置驗證信息位置的例子。在這種情況下我也很喜歡表單的結(jié)構(gòu)和錯誤信息的視覺效果。明確的劃分成段(使用facebook注冊，主要的注冊表單)為注冊流程提供了清晰的向?qū)А?/p>

錯誤信息有了一個可視化的視覺效果-文本域使用紅色邊框標(biāo)紅并且有了一個紅色的信息框-溝通的意圖清晰明了。

　　恰到好處的色彩

顏色就像數(shù)字1、2、3一樣簡單–錯誤為紅色，通知為藍色，警告為黃色，成功確認為綠色。這個色系是你能想到的最直觀的搭配。至少其中一部分(紅和黃可以使人引起注意并提高血壓)被進化備份乃至整個系統(tǒng)的顏色–意味著已存在，比如在公路上。不要混淆它，你就會沒事。

在上面所有例子中，我們已在實際中見過這個規(guī)則。讓我們回顧一下一些更有趣的解決方案，這樣你將更有靈感。當(dāng)談到合適的表單驗證時，我們再看看Twitter規(guī)則，確認信息被非常清晰地用綠色標(biāo)記并且將小的驗證圖標(biāo)嵌入到整個大框體中。

注意密碼輸入字段。綠色的指示條顯示了你密碼的安全級別。任務(wù)完成，享受它吧!

Pinterest也是一個在驗證信息中使用合理色彩的有趣例子。一個紅色的框環(huán)繞整個文本域，錯誤信息被著重強調(diào)，整齊的內(nèi)聯(lián)驗證使他成為了一個完美的解決方案。.

再關(guān)注下表單的結(jié)構(gòu)，六個字段被分成兩個區(qū)段。一個區(qū)段是關(guān)于登錄到服務(wù)器的信息和要求格式。另一個區(qū)段是個人信息-姓名和性別。這樣的劃分很有意義，因為你的姓名和性別不是必填項。

然而，沒有指明哪些字段是必填項哪些是非必填項，用戶處在一個盲區(qū)的邊緣。人們可能會感覺這是在誘使他們輸入姓名和性別(可能用于定位廣告宣傳的原因)。

我可以看到他們獲取數(shù)據(jù)非常有效的策略，但是我將小心的做這樣的實踐。通常，我推薦在注冊流程完成后詢問用戶是否要填寫非必要信息。

　　正確的語言

最后，是語言——這也是一個坑爹的地方。我本來想找個恰當(dāng)?shù)睦樱上д伊撕芫枚疾蝗缫狻?/p>

作為一條驗證消息，它應(yīng)該能夠清晰地表明：

當(dāng)前發(fā)生了什么事

下一步用戶應(yīng)該做什么(成功的確認消息除外)

還應(yīng)避免使用專業(yè)術(shù)語。

盡管這幾條規(guī)則看起來很簡單，但往往會被人們忘記。比如，光光告訴用戶“Email無效”，卻不說明為什么無效(到底是輸入錯誤呢，還是已被其他人占用?)這會給用戶帶來困擾，十分危險。

當(dāng)然，又要拿Twitter來說事兒了，它的語言用的相當(dāng)簡明扼要。如果你的Email地址可用，Twitter會告訴你「我們會把確認信息Email給你」;如果Email早已被其他人注冊過了，她會讓你選擇，是登錄呢，還是恢復(fù)密碼。如果你創(chuàng)建了一個很完美的密碼，她甚至?xí)淠恪竿昝赖拿艽a!」

是不是很nice?所有這一切，都像是日常閑聊一樣自然。

Delicious在表單驗證方面犯了許多錯，不過在語言這個部分倒是蠻有意思的。

首先，他們在密碼輸入的地方加了提示信息“試試用句子作為強密碼?！保@個我超喜歡。很不錯吧?這種東西我可等了好久了。在密碼的安全性方面確實很有意義，比那種要求用戶使用大寫字母和數(shù)字什么的做法要好太多了。

然后，Delicous在提示用戶名錯誤的時候也做的很漂亮：

1) “抱歉，用戶名marcin已經(jīng)被別人用了” – 很明確地告訴用戶發(fā)生了什么事情。

2) “請選擇另一個名字” – 明確地告訴用戶下一步應(yīng)該做什么。

可惜，他們忘了一個后備選項。萬一我已經(jīng)有賬號，只是一下子忘了這回事而已?

不管怎么說，Delicous雖然在時間、地點、顏色等等各個方面都搞砸了，但是勝在語言方面干的不壞，所以它們的表單依然還具有相當(dāng)?shù)目捎眯?。反過來也說明，語言是多么重要啊。

　　總結(jié)

在表單驗證方法我們看到了很多經(jīng)典例子，但是我們?nèi)匀粵]有看到一個完美的。接下來我們將創(chuàng)建一個例子來演示下遵循下面的四個規(guī)范的表單驗證是多么簡單:

　　合適的時間 通知驗證的成功與失敗

　　合適的地方 來顯示驗證信息

　　合適的顏色

　　清晰的表達

　　一步步的教程!

按照上面提到的四個簡單原則，我們創(chuàng)建一個完美的表單驗證。表單驗證最小化了在服務(wù)端流失一個用戶的風(fēng)險。

為了證明我的觀點，我將設(shè)計一個分區(qū)段的表單，包含額外的一些非必填信息。有些地方很類似于Pinterest的表單。如我所言，通常我不推薦使用那樣的方式，但是如果你確實需要，你可以通過做一些處理讓用戶使用起來感覺更簡單。

　　1. 結(jié)構(gòu)& 頭部

我只需畫一個簡單的盒子，填充空白地方，加上我的設(shè)計結(jié)構(gòu)

接下來增加一個表頭-一些普通的文本，把打動人心的信息作為副標(biāo)題。再次-我正尋找一種解決混亂布局的方案。

　　2. 表單字段

接下來這一步，我將在表單中添加文本域和標(biāo)簽。因為我強烈反對在文本域內(nèi)寫標(biāo)簽(非?；靵y，如果你在文本域里輸入信息，停頓數(shù)分鐘后再開始···這里沒有一個指示告訴你輸入什么)，我將把它們放在表單文本域的上面。

　　3. 表單字段信息

表單字段信息是一個容易忽略的地方，但是作為與用戶會話的一個開始是非常有用的。通過使用一句或者最多兩個句子，你可以解釋一些用戶疑慮的事情像“為什么我需要填寫郵箱?”，這樣和用戶之間建立一個基本的信任。

接下來我將在幾乎所有的文本域上添加相關(guān)信息:

用戶名 – “XYZ里面你的名字，你也可以用來登錄系統(tǒng)。”

E-mail 地址 – “我們將發(fā)送一個確認信息，并且使用它來和您做基本溝通。不是垃圾郵件喲:)”

密碼– “為了安全性-請使用一句容易記住并且難以破解的話!”

名字 – “在交流時我們方便通過真實名字稱呼您!”

性別– “方便告訴我們?yōu)槟喼七m合你的服務(wù)!”

　　4. 錯誤信息

當(dāng)涉及到錯誤信息時，我們需要認真考慮下我們的原則。

顯示錯誤信息的合適時機是在發(fā)現(xiàn)錯誤后。我們設(shè)計為內(nèi)聯(lián)驗證。

顯示錯誤信息的合適的地方是在文本域后面-所以我要把附加信息放到文本域下面，在后面顯示錯誤信息

顯示錯誤信息合適的顏色當(dāng)然是紅色，我把一個紅色背景盒子放到整個錯誤字段下面。

清理掉不專業(yè)的用語-如“數(shù)據(jù)庫錯誤”等。

看一下結(jié)果:

– 用戶名 錯誤– “用戶名已經(jīng)存在了，請保證用戶名的唯一性。如果這是你的用戶名請嘗試:

* 登錄或者重置密碼

如果不是你的用戶名 – “請先注冊一個新用戶吧”

– E-mail 錯誤– “郵箱地址不正確，檢查下你輸入的是否正確。或許你忘記了某個地方的 “.” 或者 “@”?”

– 密碼 錯誤– “試著把密碼設(shè)定長些。輸入一句話是一個不錯的主意!如果你喜歡冒險-最少允許輸入3個字符”

在這些錯誤信息中你能看到我們提過的模式嗎?我明確的指出了某個問題，然后立刻給出了解決方案。

　　確認信息

最后是確認信息，對設(shè)計來說，這純粹是為了高興。在輸入文本字段后彈出操作正確，我就決定想出一個更微妙的解決方案。我不想人們停在確認信息上。他們可以快速掃描這些信息并跳到之前他們感覺良好的某個字段。

沒有多余的彩色信息，沒有長長的句子–只是一個快速確認信息。

你需要更多的細節(jié)嗎?那就看看按視頻一步步做吧.