如今用戶體驗(yàn)設(shè)計(jì)越來越重要，對(duì)于WEB表單的設(shè)計(jì)尤其如此。設(shè)計(jì)師不再只是為互聯(lián)網(wǎng)創(chuàng)造漂亮美觀的圖形那么簡(jiǎn)單了，作為一個(gè)WEB設(shè)計(jì)師，我們還需要考慮一些其他的問題，比如用戶體驗(yàn)，算法，代碼等等WEB表單設(shè)計(jì)的目標(biāo)是設(shè)計(jì)出一套讓用戶能夠從填表到點(diǎn)擊提交按鈕的最簡(jiǎn)單的流程。這個(gè)過程中不需要太多的炫目效果，雖然jQuery的表單插件一直都很受歡迎。在這片文章中我們只關(guān)注于表單的用戶體驗(yàn)和交互過程。這里的概念也能夠有效的幫助你減少用戶在填表過程中的挫折感。

始終與用戶的期待保持同步

用戶們最討厭的事情就是頁面有出乎他們意料的跳轉(zhuǎn)。你絕對(duì)希望你的表單行為保持自然，并且將額外的JavaScript代碼減到最少，彈出氣泡和Ajax都是很有用的東西。好用的表單不應(yīng)該被劃分成許多小的項(xiàng)目，用隔斷將他們彼此分離，那不是好辦法。

另一個(gè)我們經(jīng)常犯的錯(cuò)誤是錯(cuò)過了HTML的tabindex屬性。這個(gè)屬性從可用性角度來說真是棒極了，因?yàn)橥ㄟ^它用戶不使用鼠標(biāo)就能填寫完整個(gè)表格。但是如果你沒有保持tabindex屬性的有序性，或者只在某些輸入框中使用了這個(gè)屬性，而另外一些沒有使用，那么整個(gè)系統(tǒng)一定會(huì)出亂子。這一點(diǎn)適用于所有的注冊(cè)表單，而且同樣適用于其他的輸入頁面，特別是網(wǎng)上購物的信息輸入頁面。

更大的輸入框

我聽過很多關(guān)于WEB表單輸入框大小的爭(zhēng)論。vBulletin，Joomla！和Drupal使用的都是相當(dāng)小的輸入框，大都是10px-12px的文字和很小的內(nèi)邊距。

Diigo的注冊(cè)表單結(jié)構(gòu)就很大氣！你需要緩和不同輸入元素之間的沖突。加粗的文字提示你哪些區(qū)域已經(jīng)填寫了，哪些區(qū)域還空著，當(dāng)激活某一輸入框時(shí)，它會(huì)變成淡藍(lán)色，提示你光標(biāo)現(xiàn)在所處的位置。

傳統(tǒng)的Digg注冊(cè)表單就是用很相似的方法來設(shè)計(jì)的。Twitter的注冊(cè)表單同樣都很大，你不會(huì)錯(cuò)過任何東西。他們不會(huì)吝嗇于用大量白色的空間來突出輸入?yún)^(qū)域。他們的標(biāo)簽系統(tǒng)也很獨(dú)特，空的輸入框中會(huì)有預(yù)先設(shè)置的占位文字，通過顏色的變換，你也可以清楚的將用戶輸入的文字和系統(tǒng)預(yù)設(shè)文字區(qū)分開來。

保持醒目和簡(jiǎn)潔

我聽過不計(jì)其數(shù)的用戶抱怨注冊(cè)表單需要太多的信息。如果你正在想辦法增加注冊(cè)用戶數(shù)量，那么你必須保證你的表單盡可能的易于填寫。這點(diǎn)同樣適用于其他地方的數(shù)據(jù)輸入。

根據(jù)項(xiàng)目的不同，用戶需要填寫的信息數(shù)量也有所不同。注冊(cè)表格可能會(huì)要求用戶輸入用戶名，電子郵件地址，然后兩次輸入密碼，這樣當(dāng)然很合理并且是用戶所期待的注冊(cè)方式。但是也有特殊情況，看看WordPress的默認(rèn)注冊(cè)頁面。

這里用戶只需要填寫用戶名和電子郵件地址，之后系統(tǒng)會(huì)自動(dòng)生成一個(gè)密碼并發(fā)到你所填寫的電子郵件地址當(dāng)中，這樣做減少了原始表格的數(shù)量，并且將惡意注冊(cè)者擋在了門外。你不需要去郵箱點(diǎn)擊激活鏈接，但是你必須在你的郵箱中取得新的登陸密碼。

保密性是最重要的

不論用戶輸入的是他們的信用卡號(hào)碼還是電子郵件地址，你都應(yīng)該將保證這些數(shù)據(jù)的安全放在第一位。用戶信任你的網(wǎng)站和后端代碼正確的收集了他們的信息并將之保存在一個(gè)安全的地方。

如果可能的話我建議在你的整個(gè)網(wǎng)站中都使用SSL認(rèn)證，這不僅僅保護(hù)了用戶的注冊(cè)信息，用戶瀏覽網(wǎng)站的整個(gè)過程都被HTTPS保護(hù)了。這可能會(huì)有點(diǎn)麻煩，但是有些WEB主機(jī)會(huì)輔助你安裝這些功能。當(dāng)然并不是每個(gè)網(wǎng)站都必須這么做，但是你只需要多費(fèi)一點(diǎn)兒時(shí)間和精力就能保護(hù)用戶數(shù)據(jù)的安全，你的用戶會(huì)因此而覺得安全，你和用戶之間也能建立起一種相互信任的紐帶，何樂而不為呢？

另外，不要使用那些很容易被探測(cè)的信息。除非信息是完全非“個(gè)人”的，都需要使用POST數(shù)據(jù)類型。只有在URL結(jié)構(gòu)能夠從數(shù)據(jù)中獲益的時(shí)候（比如說搜索頁面中的search.php?q=my+search+terms）才使用Ajax的GET requests。

結(jié)論

現(xiàn)在的WEB設(shè)計(jì)出現(xiàn)了許多新的設(shè)計(jì)趨勢(shì)。最新的CSS3正在越來越多的被設(shè)計(jì)師們所采用，表單設(shè)計(jì)也不例外的需要設(shè)計(jì)師們投入更多的關(guān)注和思考。

我希望這些用戶體驗(yàn)背后的指導(dǎo)原則能夠指引你創(chuàng)造更好的WEB表單。對(duì)于后端數(shù)據(jù)來說，即使是PHP這樣簡(jiǎn)單的語言也能夠很好的處理。但是通過一到兩個(gè)星期的時(shí)間，你應(yīng)該能創(chuàng)造出一套你自己的系統(tǒng)。網(wǎng)絡(luò)開發(fā)者們，不論是前端還是后端，都應(yīng)該盡力去理解這些設(shè)計(jì)原則和范例。