設計師不再只是為互聯(lián)網(wǎng)創(chuàng )造漂亮美觀(guān)的圖形那么簡(jiǎn)單了，作為一個(gè)WEB設計師，我們還需要考慮一些其他的問(wèn)題，比如用戶(hù)體驗，算法，代碼等等。如今用戶(hù)體驗設計越來(lái)越重要，對于WEB表單的設計尤其如此。

 

WEB表單設計的目標是設計出一套讓用戶(hù)能夠從填表到點(diǎn)擊提交按鈕的最簡(jiǎn)單的流程。這個(gè)過(guò)程中不需要太多的炫目效果，雖然jQuery的表單插件一直都很受歡迎。在這片文章中我們只關(guān)注于表單的用戶(hù)體驗和交互過(guò)程。這里的概念也能夠有效的幫助你減少用戶(hù)在填表過(guò)程中的挫折感。

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

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

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

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

始終與用戶(hù)的期待保持同步

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

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

保密性是最重要的

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

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

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

更大的輸入框

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

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

傳統的Digg注冊表單就是用很相似的方法來(lái)設計的。Twitter的注冊表單同樣都很大，你不會(huì )錯過(guò)任何東西。他們不會(huì )吝嗇于用大量白色的空間來(lái)突出輸入區域。他們的標簽系統也很獨特，空的輸入框中會(huì )有預先設置的占位文字，通過(guò)顏色的變換，你也可以清楚的將用戶(hù)輸入的文字和系統預設文字區分開(kāi)來(lái)。

結論

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

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

---