【51CTO精選譯文】在Web設(shè)計(jì)和開發(fā)領(lǐng)域，創(chuàng)意是基礎(chǔ)，而遵循最佳實(shí)踐確保更好的可用性、功能性和易于使用更為重要。表單是用戶在Web上處理事務(wù)時(shí)最討厭的功能，因?yàn)榻?jīng)常看到難以理解的或者布局不清晰的表單。因此，在設(shè)計(jì)Web表單時(shí)遵循最佳實(shí)踐非常重要。本文為你介紹一些Web表單設(shè)計(jì)的最佳實(shí)踐，希望在你的下一次設(shè)計(jì)中充分采用這些最佳實(shí)踐。

一、內(nèi)聯(lián)驗(yàn)證

 
圖 1 內(nèi)聯(lián)驗(yàn)證

這是一個(gè)偉大的技術(shù)，因?yàn)樗跀?shù)據(jù)提交前就先行進(jìn)行了一番驗(yàn)證，它立即將驗(yàn)證未通過的表單區(qū)域反饋給用戶，使用戶一下子就知道哪里需要進(jìn)行修改。

二、不要使用有歧義的標(biāo)簽

不要使用雙關(guān)語(yǔ)或模棱兩可的語(yǔ)言，那樣用戶會(huì)不知所措，因此確保最終用戶看到的都是清晰的語(yǔ)言表達(dá)，并容易找到哪些地方需要輸入。

三、每個(gè)控件都使用一個(gè)標(biāo)簽

 
圖 2 每個(gè)控件都使用一個(gè)標(biāo)簽

這個(gè)技巧看上去很平淡，但互聯(lián)網(wǎng)上很多表單確實(shí)沒有使用標(biāo)簽，假設(shè)一個(gè)表單有多個(gè)輸入控件都缺少清晰的標(biāo)簽，用戶就不知道該向表單中輸入什么信息，保證每個(gè)輸入控件都包含一個(gè)標(biāo)簽描述要輸入的數(shù)據(jù)會(huì)讓用戶的體驗(yàn)變得輕松許多。

四、輸入控件的長(zhǎng)度保持適中

 
圖 3 輸入控件的長(zhǎng)度保持適中（文字大意：如果字?jǐn)?shù)限定是74個(gè)字符，為什么文本輸入框要這么大）

這個(gè)方法指明輸入控件的長(zhǎng)度應(yīng)該與放入它的文本長(zhǎng)度保持一致，例如，輸入控件的長(zhǎng)度要滿足輸入的文本的長(zhǎng)度，同樣也不能讓輸入控件的長(zhǎng)度太長(zhǎng)。最好增加一個(gè)計(jì)數(shù)器，實(shí)時(shí)顯示用戶還可輸入的字符數(shù)是一個(gè)很好的主意。

五、數(shù)據(jù)輸入更加靈活

制作Web表單時(shí)靈活性也非常重要，要允許輸入不同類型的信息，什么提示信息都沒有比不知道輸入該輸入什么信息更讓人窩火，例如，對(duì)于一個(gè)電話號(hào)碼，允許輸入如5555555555這樣的一組數(shù)字，或者放上破折號(hào)，以便讓用戶清楚地知道要輸入多少位。

六、如果輸入有限制，最好提供一個(gè)實(shí)例

如果對(duì)用戶的輸入有特殊要求，最好在適當(dāng)?shù)奈恢媒o出一個(gè)實(shí)例進(jìn)行說(shuō)明，就那上面的電話號(hào)碼來(lái)說(shuō)，如果你在旁邊標(biāo)注了輸入格式為5555555555，那么用戶就知道該如何輸入電話號(hào)碼了。

七、把次要按鈕設(shè)計(jì)得小一點(diǎn)

 
圖 4 按鈕主次分明

次要按鈕要比主要按鈕設(shè)計(jì)得小一點(diǎn)，這樣可以突出顯示主要按鈕，例如，不要讓“確定”按鈕和“取消”按鈕的大小一樣，“確定”按鈕是主要按鈕，因此它應(yīng)當(dāng)設(shè)計(jì)大一點(diǎn)。

八、一致性

既要確保單個(gè)表單的一致性，又要確保整個(gè)站點(diǎn)的所有表單的一致性，首先確保表單中的所有輸入控件都是一致的，用戶的體驗(yàn)才會(huì)保持一致，此外，如果在同一站點(diǎn)上表單風(fēng)格不一樣，最好糾正過來(lái)，例如，不要在一個(gè)表單中使用下拉列表，而在另一個(gè)表單中卻使用輸入控件，一致性是關(guān)鍵。

九、把相關(guān)的數(shù)據(jù)放在一起

 
圖 5 相關(guān)數(shù)據(jù)放在一起

這個(gè)技巧非常有用，因?yàn)樗梢园褍?nèi)容組織得更好，具有更好的用戶體驗(yàn)。設(shè)計(jì)人員遵循這個(gè)最佳實(shí)踐把相關(guān)數(shù)據(jù)組織在相鄰位置，例如，將個(gè)人數(shù)據(jù)放在一個(gè)區(qū)域，與工作相關(guān)的數(shù)據(jù)放在一個(gè)區(qū)域，與賬號(hào)相關(guān)的數(shù)據(jù)放在一個(gè)區(qū)域，這樣用戶看到表單就不會(huì)茫然不知所措，并且這樣做對(duì)用戶有一個(gè)指導(dǎo)性作用，用戶只要跟隨表單一步一步往下填寫便可以了，如果有可能，盡量使用圖例對(duì)每個(gè)區(qū)域進(jìn)行標(biāo)注。

十、按種類對(duì)數(shù)據(jù)進(jìn)行排序，按字母表對(duì)種類進(jìn)行排序

 
圖 6 合理排序

在表單中組織數(shù)據(jù)的另一個(gè)方法是按字母順序排列它，這樣做有一個(gè)好處是，你的用戶可以預(yù)知下一條信息是什么，他們知道信息的組織和排列方式，使用起來(lái)就會(huì)得心應(yīng)手。

十一、使用tabindex屬性組織Tab鍵的順序

確保表單的Tab鍵順序是組織良好的，用戶按下Tab鍵，焦點(diǎn)是有規(guī)律地在各個(gè)輸入控件之間移動(dòng)，這樣表單的易用性不僅更好，也更具有親和力，因?yàn)橛辛薚ab鍵的幫助，用戶完全可以脫離鼠標(biāo)了。

十二、盡可能重新填充內(nèi)容

這個(gè)技巧是非常受用戶歡迎的，盡一切可能填入需要用戶重填的內(nèi)容，不要讓用戶輸入兩次相同的回答，如果可以，可以提供一個(gè)按鈕“使用上面相同的內(nèi)容”，讓用戶自行決定。

十三、拆分表單

 
圖 7 將很長(zhǎng)的表單拆分成多個(gè)短小的表單

如果表單非常長(zhǎng)，應(yīng)該按數(shù)據(jù)的相關(guān)性將其拆分成多個(gè)步驟，就象是把一個(gè)很大的任務(wù)分解成多個(gè)小任務(wù)一樣，這樣用戶才不會(huì)有畏懼感，也不容易產(chǎn)生疲勞，同時(shí)拆分后可管理性會(huì)更好，用戶前面填寫的表單是可以先保存起來(lái)的，如果用戶在填寫后面表單的時(shí)候遇到計(jì)算機(jī)故障，不至于所有填入的表單內(nèi)容全部丟失。注意，如果你將一個(gè)長(zhǎng)表單進(jìn)行了拆分，最好給用戶一個(gè)提示，讓其知道當(dāng)前所處的位置，如2/4頁(yè)，這樣用戶就知道完成了多少內(nèi)容，還剩多少內(nèi)容未完成。

十四、突出顯示錯(cuò)誤位置

當(dāng)Web表單上出現(xiàn)錯(cuò)誤信息時(shí)，確保使用了突出的表達(dá)形式，以便讓用戶準(zhǔn)確地知道錯(cuò)誤在哪里，以及如何修復(fù)它，如果什么提示都沒有，那是非常糟糕的，用戶會(huì)滾動(dòng)到表單的末尾，直到提交可能才會(huì)發(fā)現(xiàn)問題。比如將有錯(cuò)誤的輸入控件標(biāo)識(shí)為紅色，用戶可能會(huì)很容易就發(fā)現(xiàn)問題所在之處了。

十五、保存正確的信息

如果用戶不小心犯了一個(gè)低級(jí)錯(cuò)誤，那么用戶應(yīng)該只需要返回糾正這個(gè)錯(cuò)誤即可，其它輸入正確的信息就應(yīng)該得到保存，其實(shí)也就是不要讓用戶再輸入一次內(nèi)容。

十六、使用恰當(dāng)?shù)念伾?/strong>