在web設計和開發領域，創意是基礎，而遵循最佳實踐確保更好的可用性、功能性和易於使用更為重要。表單是使用者在web上處理事務時最討厭的功能，因為經常看到難以理解的或者布局不清晰的表單。因此，在設計web表單時遵循最佳實踐非常重要。本文為你介紹一些web表單設計的最佳實踐，希望在你的下一次設計中充分採用這些最佳實踐。
一、內聯驗證
圖 1 內聯驗證
這是乙個偉大的技術，因為它在資料提交前就先行進行了一番驗證，它立即將驗證未通過的表單區域反饋給使用者，使使用者一下子就知道**需要進行修改。
二、不要使用有歧義的標籤
不要使用雙關語或模稜兩可的語言，那樣使用者會不知所措，因此確保終端使用者看到的都是清晰的語言表達，並容易找到哪些地方需要輸入。
三、每個控制項都使用乙個標籤
圖 2 每個控制項都使用乙個標籤
這個技巧看上去很平淡，但網際網路上很多表單確實沒有使用標籤，假設乙個表單有多個輸入控制項都缺少清晰的標籤，使用者就不知道該向表單中輸入什麼資訊，保證每個輸入控制項都包含乙個標籤描述要輸入的資料會讓使用者的體驗變得輕鬆許多。
四、輸入控制項的長度保持適中
圖 3 輸入控制項的長度保持適中（文字大意：如果字數限定是74個字元，為什麼文字輸入框要這麼大）
這個方法指明輸入控制項的長度應該與放入它的文字長度保持一致，例如，輸入控制項的長度要滿足輸入的文字的長度，同樣也不能讓輸入控制項的長度太長。最好增加乙個計數器，實時顯示使用者還可輸入的字元數是乙個很好的主意。
五、資料輸入更加靈活
製作web表單時靈活性也非常重要，要允許輸入不同型別的資訊，什麼提示資訊都沒有比不知道輸入該輸入什麼資訊更讓人窩火，例如，對於乙個**號碼，允許輸入如5555555555這樣的一組數字，或者放上破折號，以便讓使用者清楚地知道要輸入多少位。
六、如果輸入有限制，最好提供乙個例項
如果對使用者的輸入有特殊要求，最好在適當的位置給出乙個例項進行說明，就那上面的**號碼來說，如果你在旁邊標註了輸入格式為5555555555，那麼使用者就知道該如何輸入**號碼了。
七、把次要按鈕設計得小一點
圖 4 按鈕主次分明
次要按鈕要比主要按鈕設計得小一點，這樣可以突出顯示主要按鈕，例如，不要讓「確定」按鈕和「取消」按鈕的大小一樣，「確定」按鈕是主要按鈕，因此它應當設計大一點。
八、一致性
既要確保單個表單的一致性，又要確保整個站點的所有表單的一致性，首先確保表單中的所有輸入控制項都是一致的，使用者的體驗才會保持一致，此外，如果在同一站點上表單風格不一樣，最好糾正過來，例如，不要在乙個表單中使用下拉列表，而在另乙個表單中卻使用輸入控制項，一致性是關鍵。
九、把相關的資料放在一起
圖 5 相關資料放在一起
這個技巧非常有用，因為它可以把內容組織得更好，具有更好的使用者體驗。設計人員遵循這個最佳實踐把相關資料組織在相鄰位置，例如，將個人資料放在乙個區域，與工作相關的資料放在乙個區域，與賬號相關的資料放在乙個區域，這樣使用者看到表單就不會茫然不知所措，並且這樣做對使用者有乙個指導性作用，使用者只要跟隨表單一步一步往下填寫便可以了，如果有可能，盡量使用圖例對每個區域進行標註。
十、按種類對資料進行排序，按字母表對種類進行排序
圖 6 合理排序
在表單中組織資料的另乙個方法是按字母順序排列它，這樣做有乙個好處是，你的使用者可以預知下一條資訊是什麼，他們知道資訊的組織和排列方式，使用起來就會得心應手。
十一、使用tabindex屬性組織tab鍵的順序
確保表單的tab鍵順序是組織良好的，使用者按下tab鍵，焦點是有規律地在各個輸入控制項之間移動，這樣表單的易用性不僅更好，也更具有親和力，因為有了tab鍵的幫助，使用者完全可以脫離滑鼠了。
十二、盡可能重新填充內容
這個技巧是非常受使用者歡迎的，盡一切可能填入需要使用者重填的內容，不要讓使用者輸入兩次相同的回答，如果可以，可以提供乙個按鈕「使用上面相同的內容」，讓使用者自行決定。
十三、拆分表單
圖 7 將很長的表單拆分成多個短小的表單
如果表單非常長，應該按資料的相關性將其拆分成多個步驟，就象是把乙個很大的任務分解成多個小任務一樣，這樣使用者才不會有畏懼感，也不容易產生疲勞，同時拆分後可管理性會更好，使用者前面填寫的表單是可以先儲存起來的，如果使用者在填寫後面表單的時候遇到計算機故障，不至於所有填入的表單內容全部丟失。注意，如果你將乙個長表單進行了拆分，最好給使用者乙個提示，讓其知道當前所處的位置，如2/4頁，這樣使用者就知道完成了多少內容，還剩多少內容未完成。
十四、突出顯示錯誤位置
當web表單上出現錯誤資訊時，確保使用了突出的表達形式，以便讓使用者準確地知道錯誤在**，以及如何修復它，如果什麼提示都沒有，那是非常糟糕的，使用者會滾動到表單的末尾，直到提交可能才會發現問題。比如將有錯誤的輸入控制項標識為紅色，使用者可能會很容易就發現問題所在之處了。
十五、儲存正確的資訊
如果使用者不小心犯了乙個低階錯誤，那麼使用者應該只需要返回糾正這個錯誤即可，其它輸入正確的資訊就應該得到儲存，其實也就是不要讓使用者再輸入一次內容。
十六、使用恰當的顏色
改善web表單的另乙個重要建議是按照顏色本意使用顏色，有些顏色不管是否有殘疾、不管年齡大小、語言或計算機知識，人們都能理解，適當使用這些顏色是至關重要的，因為它們超越了所有理解限制。例如，紅色代表錯誤，綠色代表正確，黃色代表報警，但也要考慮到色盲，例如，不要僅僅使用紅色表示必填字段，最好是使用紅色字型的「必填」單詞進行標註。
十七、記住目標讀者
圖 8 記住目標讀者
無論什麼設計，記住你的目標讀者，按照他們的想法進行設計是非常重要的，因此，如果你的目標讀者是年輕一族，非技術出身，那最好不要使用技術或科學詞彙，如果你要使用技術或模稜兩可的話，最好對那些專業詞彙進行解釋。
十八、簡明扼要
盡可能做到簡潔明瞭，因為人們不喜歡閱讀不必要的資訊，如果你放了太多不必要的資訊，要能確定哪些資訊是使用者不會閱讀的，最好將其精簡掉。
十九、必需的資訊 vs. 可選的資訊
請務必明確哪些資訊是必需的，哪些資訊是可選的，這樣可以保證可用性更好。因為首先輸入的是必需的資訊，然後再決定要輸入哪些可選的資訊。如果大部分欄位都必需輸入，那麼就將可選字段進行標註，如果大部分欄位都是可選的，那麼就標註必需字段。
關於戀愛的十九個比喻
1 戀愛就象吃辣椒，不吃的時候它總是奇香無比，但真正吃的時候卻辣的你痛不欲生，後悔莫及，發誓永不再吃，然而辣勁剛過，你又對它朝思暮想。越辣越香，越香越辣，你永遠在思念與後悔之間游離，這就是戀愛的邏輯。2 戀愛就象電腦，永遠都有n個毛病等待修理，等你修好後卻發現等待修理的新毛病大於n。3 戀愛就象公共...
5個改進web表單設計的建議
最為常見的資訊收集表單，卻最容易忽視它的體驗。對於設計師而言，如何設計出乙個體驗優秀的表單？我總結了這 5 大策略 填寫流程與問題設計 1.足夠精簡的填寫流程 想讓使用者不設防 還不被打斷填寫完資訊，填寫流程就需要足夠精簡，才能讓使用者順暢地完成資訊採集，同時需要確保產品所有表單頁面操作的一致性。你...
20個資料庫設計的最佳實踐
1 使用定義明確的表或列名，並保持一致 例如，school studentcourse courseid 2 使用單數形式的表名 即，用studentcourse而非studentcourses 表代表了實體的合集，不需要複數形式。3 不要在表名中使用空格。否則你將在定義表時不得不使用 等字元 即為...