![]()
設計師不再隻是爲互聯網創造漂亮美觀的圖形那麽簡單了，作爲一(yī)個WEB設計師，我(wǒ)(wǒ)們還需要考慮一(yī)些其他的問題，比如用戶體(tǐ)驗，算法，代碼等等。如今用戶體(tǐ)驗設計越來越重要，對于WEB表單的設計尤其如此。
WEB表單設計的目标是設計出一(yī)套讓用戶能夠從填表到點擊提交按鈕的最簡單的流程。這個過程中(zhōng)不需要太多的炫目效果，雖然jQuery的表單插件一(yī)直都很受歡迎。在這片文章中(zhōng)我(wǒ)(wǒ)們隻關注于表單的用戶體(tǐ)驗和交互過程。這裏的概念也能夠有效的幫助你減少用戶在填表過程中(zhōng)的挫折感。
保持醒目和簡潔
我(wǒ)(wǒ)聽(tīng)過不計其數的用戶抱怨注冊表單需要太多的信息。如果你正在想辦法增加注冊用戶數量，那麽你必須保證你的表單盡可能的易于填寫。這點同樣适用于其他地方的數據輸入。
根據項目的不同，用戶需要填寫的信息數量也有所不同。注冊表格可能會要求用戶輸入用戶名，電子郵件地址，然後兩次輸入密碼，這樣當然很合理并且是用戶所期待的注冊方式。
始終與用戶的期待保持同步
用戶們最讨厭(yàn)的事情就是頁面有出乎他們意料的跳轉。你絕對希望你的表單行爲保持自然，并且将額外(wài)的JavaScript代碼減到最少，彈出氣泡和Ajax都是很有用的東西。好用的表單不應該被劃分(fēn)成許多小(xiǎo)的項目，用隔斷将他們彼此分(fēn)離(lí)，那不是好辦法。
另一(yī)個我(wǒ)(wǒ)們經常犯的錯誤是錯過了HTML的tabindex屬性。這個屬性從可用性角度來說真是棒極了，因爲通過它用戶不使用鼠标就能填寫完整個表格。但是如果你沒有保持tabindex屬性的有序性，或者隻在某些輸入框中(zhōng)使用了這個屬性，而另外(wài)一(yī)些沒有使用，那麽整個系統一(yī)定會出亂子。這一(yī)點适用于所有的注冊表單，而且同樣适用于其他的輸入頁面，特别是網上購物(wù)的信息輸入頁面。
保密性是最重要的
不論用戶輸入的是他們的信用卡号碼還是電子郵件地址，你都應該将保證這些數據的安全放(fàng)在第一(yī)位。用戶信任你的網站和後端代碼正确的收集了他們的信息并将之保存在一(yī)個安全的地方。
如果可能的話(huà)我(wǒ)(wǒ)建議在你的整個網站中(zhōng)都使用SSL認證，這不僅僅保護了用戶的注冊信息，用戶浏覽網站的整個過程都被HTTPS保護了。這可能會有點麻煩，但是有些WEB主機會輔助你安裝這些功能。當然并不是每個網站都必須這麽做，但是你隻需要多費(fèi)一(yī)點兒時間和精力就能保護用戶數據的安全，你的用戶會因此而覺得安全，你和用戶之間也能建立起一(yī)種相互信任的紐帶，何樂而不爲呢？
另外(wài)，不要使用那些很容易被探測的信息。除非信息是完全非“個人”的，都需要使用POST數據類型。隻有在URL結構能夠從數據中(zhōng)獲益的時候（比如說搜索頁面中(zhōng)的search.php?q=my+search+terms）才使用Ajax的GET requests。
更大(dà)的輸入框
我(wǒ)(wǒ)聽(tīng)過很多關于WEB表單輸入框大(dà)小(xiǎo)的争論。vBulletin，Joomla！和Drupal使用的都是相當小(xiǎo)的輸入框，大(dà)都是10px-12px的文字和很小(xiǎo)的内邊距。
Diigo的注冊表單結構就很大(dà)氣！你需要緩和不同輸入元素之間的沖突。加粗的文字提示你哪些區域已經填寫了，哪些區域還空着，當激活某一(yī)輸入框時，它會變成淡藍(lán)色，提示你光标現在所處的位置。
傳統的Digg注冊表單就是用很相似的方法來設計的。Twitter的注冊表單同樣都很大(dà)，你不會錯過任何東西。他們不會吝啬于用大(dà)量白(bái)色的空間來突出輸入區域。他們的标簽系統也很獨特，空的輸入框中(zhōng)會有預先設置的占位文字，通過顔色的變換，你也可以清楚的将用戶輸入的文字和系統預設文字區分(fēn)開(kāi)來。
結論
現在的WEB設計出現了許多新的設計趨勢。最新的CSS3正在越來越多的被設計師們所采用，表單設計也不例外(wài)的需要設計師們投入更多的關注和思考。
我(wǒ)(wǒ)希望這些用戶體(tǐ)驗背後的指導原則能夠指引你創造更好的WEB表單。對于後端數據來說，即使是PHP這樣簡單的語言也能夠很好的處理。但是通過一(yī)到兩個星期的時間，你應該能創造出一(yī)套你自己的系統。網絡開(kāi)發者們，不論是前端還是後端，都應該盡力去(qù)理解這些設計原則和範例。
24小(xiǎo)時咨詢熱線：134 8202 6469
E-mail：cmm@jiasu.cn
QQ咨詢：1256635055
上海市浦東新區三林路88弄1号A323