劉艷

摘要：眾所周知，表單是網(wǎng)頁中的重要元素。從用戶的角度考慮操作表單時的喜好與感受來設(shè)計Web網(wǎng)頁中的表單，從表單的布局，表單元素的選擇，表單的操作幾個方面闡述了表單設(shè)計中一些注意事項與技巧。

關(guān)鍵詞：Web表單；頁面布局；設(shè)計技巧

中圖分類號：TP311 文獻標(biāo)識碼：A 文章編號：1009-3044（2014）12-2845-02

一個網(wǎng)站不僅需要各種供用戶瀏覽的網(wǎng)頁，而且還需要與用戶進行交互的表單，表單實現(xiàn)了瀏覽器和服務(wù)器之間的信息傳遞，它使網(wǎng)頁有單向瀏覽變成了雙向的交互。表單是實現(xiàn)用戶調(diào)查、產(chǎn)品訂單和對象搜索等功能的重要手段。利用表單處理程序，可以收集、分析用戶的反饋意見，做出科學(xué)的、合理的決策。表單是用戶和軟件之間的對話，用戶是否愿意、樂意去填寫表單，能否快速、輕松、正確填寫表單，這就要看設(shè)計者是否設(shè)計了一個優(yōu)秀的表單。當(dāng)設(shè)計一個表單的時候，不要認(rèn)為好的設(shè)計就是要應(yīng)用好看的CSS效果或者是添加漂亮的jQuery特效。在設(shè)計中需要從用戶的角度出發(fā)，考慮用戶的感受，用戶的使用習(xí)慣，讓用戶快速，正確的填寫表單，降低填寫錯誤的幾率等。一個設(shè)計優(yōu)秀的表單會讓用戶有一種填寫的沖動，并且可以最大限度地降低用戶的出錯率。下面將從表單布局，表單元素的選擇，表單的操作三個方面進行探討。

用戶瀏覽表單頁時，首先接觸的是表單布局。如表單中各元素的的對齊方式、各自的標(biāo)簽樣式，以及周圍的視覺元素都會或多或少影響用戶的行為。

布局表單元素時，一般采用表格進行布局，可采用三列，第一列為標(biāo)簽，第二列為表單元素，第三列為對表單元素填寫的說明。對于標(biāo)簽，必須讓用戶迅速且輕松閱讀，知道自己要填寫什么信息。如果一個表單上的數(shù)據(jù)并不為人熟悉或者在邏輯上分組有困難，讓標(biāo)簽左對齊，用戶只需要上下看看左側(cè)一欄的標(biāo)簽就可以很輕松的通覽表單的信息，而不會被輸入框打斷思路。第二列為左對齊的輸入框及其他表單元素，這樣的布局有時會受到過長標(biāo)簽的影響：標(biāo)簽與其對應(yīng)的輸入框被分離開來，用戶不得不左右來回的跳轉(zhuǎn)目光找兩個對應(yīng)的標(biāo)簽和輸入框，這樣勢必會影響填寫表單的時間。如果讓標(biāo)簽和對應(yīng)的輸入框聯(lián)系緊密，可以采用標(biāo)簽右對齊的布局，但又會有新的問題出現(xiàn)：左邊參差不齊的空白和標(biāo)簽讓用戶很難快速瀏覽表單要填寫的內(nèi)容。因此標(biāo)簽的定義就需要給與一定的關(guān)注：在表達清晰的前提下，要簡明扼要，短小精悍。若仍有標(biāo)簽較長，還是采用“左對齊標(biāo)簽”的布局，因為人們習(xí)慣于從左到右的瀏覽書寫，這就需要解決標(biāo)簽和輸入框的分離問題，有一種簡單的解決方案就是利用背景色和分割線，給一列垂直的標(biāo)簽添加一種背景色，一列垂直的輸入框添加另一種背景色，每一組標(biāo)簽和輸入框利用清晰的水平線分開。

需要注意的是不要在表單中使用垂直分欄，在表單中使用列的最大問題是流動。表單開始于上面，結(jié)束于底部，而列的出現(xiàn)會打破這種流動。 不要假設(shè)用戶通過標(biāo)簽訪問表單，而因此以列的形式導(dǎo)航表單。絕大部分的用戶輸入習(xí)慣于從上而下，使用鼠標(biāo)/觸控板/手指點擊進入下一個字段，然后再輸入內(nèi)容。

用戶填寫完表單后只有提交了，才達到我們收集信息的目的。所以“提交”或“保存”按鈕一定要設(shè)計的格外醒目。比如可加強視覺比重，設(shè)置成亮色調(diào)，粗字體等。另外，如果一個表單有多個操作，比如“繼續(xù)”和“返回”，就有必要加重主要操作的視覺重量。這可以最小化用戶潛在的操作錯誤的風(fēng)險。例如，不要讓“繼續(xù)”按鈕和“返回”按鈕的樣式一樣，“繼續(xù)”按鈕是主要按鈕，因此它應(yīng)當(dāng)設(shè)計的醒目一些。

每個填寫表單的用戶都希望填寫時間越短越好，而且填寫的數(shù)據(jù)都是用戶熟悉的?？焖?、準(zhǔn)確的填寫表單是用戶與設(shè)計者共同的目標(biāo)，表單中的元素是否設(shè)計合理是實現(xiàn)此目標(biāo)的基本。

在瀏覽網(wǎng)站時經(jīng)常會遇到一些Web表單，其中的下拉框包含了太多的選項，如100多個國家； 31個日期等等，這樣的選擇讓人很厭倦。Web表單除了文本框（input）和提交按鈕（submit），還有單選按鈕（radio）、復(fù)選框（checkbox）、下拉框（select）和超鏈接等，尤其下拉框的使用需要進行慎重考慮。大多情況下，表單是用來收集信息的，比如呈現(xiàn)給用戶一些問題，并且這些問題都具有有限的答案供用戶選擇（如職業(yè)）。如何設(shè)計才能良好地呈現(xiàn)這些答案并且減小用戶選錯的幾率？下面以某旅游網(wǎng)站調(diào)查問卷為例，來描述表單設(shè)計過程中合理選擇表單元素的過程。

在本例子中，想從用戶那里收集如下信息：姓名，性別，職業(yè)，地區(qū)，聯(lián)系電話，E-mail，來過幾次，游玩過哪些項目，建議與意見。

1 表單元素的確定

這些信息的收集是讓游客自己輸入還是選擇作答，通過哪些表單元素實現(xiàn)？通過下面幾個問題的解答可以做出決定：

1）輸入答案是否比選擇答案更加自然？

本例中的姓名、電話、地址等這些我們熟知的信息，使用輸入的方式收集比使用選擇的方式收集更加自然并且簡單。況且對于姓名來說，也無法選擇，所以確定需要使用文本框。

2）答案是否不方便統(tǒng)計或者容易輸錯？

容易輸錯的信息，就不能使用輸入框來收集。不同的游客有不同的答案，不方便后臺的統(tǒng)計，在本例中，職業(yè)、地區(qū)的信息若是輸入的話，相同的職業(yè)可能會出現(xiàn)不同的表述，給統(tǒng)計帶來不便、可以用下拉框或單選按鈕讓用戶進行選擇。游玩過哪些項目讓用戶填寫的話，會沒有耐心認(rèn)真填寫，可以用復(fù)選框讓用戶選擇。

3）用戶是否需要瀏覽完所有的選項，才能理解問題？

比如“職業(yè)”這個問題，如果不先瀏覽所有選項，有時不知自己歸屬于哪一類。在這種情況下，推薦根據(jù)情況使用下拉框。

4）有多少個選項？

滾動條是個老大難問題了，如果下拉框的選項很多，很有可能導(dǎo)致頁面需要滾動，下拉框選擇也需要滾動。一般來說4個以內(nèi)選項的問題，使用單選按鈕或復(fù)選框會比用下拉框好的多。endprint

5）用戶是否可以同時選擇多項？

一般如果用戶可以同時選擇多項，那么推薦使用復(fù)選框。游玩過哪些項目讓用戶填寫的話，會沒有耐心認(rèn)真填寫，可以用復(fù)選框讓用戶選擇。

以這些問題解決后，可以列出一張表格，然后平衡選擇，決定哪些信息使用哪種形式表現(xiàn)。

2 表單的整體效果和局部調(diào)整

盡管對表單元素進行了篩選與確定，但是還需要針對表單整體和局部進行調(diào)整。主要有以下3方面。

1）避免太多種類的表單元素

在一個表單中，若既有輸入框又有超鏈接，還有下拉框，對于一般的用戶熟悉某種元素的操作，更樂意一直這樣操作下去。再換成另一種會讓用戶有陌生的感覺。

2）使選項精簡、易讀

單選、復(fù)選的選項，盡可能減少選項的數(shù)量，短句也可以作為選項。下拉框選項的確定原則是：用戶瀏覽選項的時候方便，不費眼神，不會點錯。

3）注意選項的順序和默認(rèn)值

對選項進行一個合理的邏輯排序，比如按聲母排序，按首字母排序、按數(shù)字大小排序，這樣當(dāng)選項多時，用戶大體知道所選內(nèi)容在什么位置，以便能快速找到。最好能根據(jù)普遍情況確定一個默認(rèn)值。

3 表單操作的易用性

1）使用tabindex屬性設(shè)置Tab鍵的順序：即設(shè)置鍵盤中的TAB鍵在各表單元素中的移動順序，即焦點的順序。 有了Tab鍵的幫助，用戶可以完全脫離鼠標(biāo)，更加快捷地填寫內(nèi)容。

2）如果一個輸入框可以滿足需求就不要用兩個，大部分用戶不熟悉盲打。很多用戶在輸入內(nèi)容時候都要看鍵盤。 當(dāng)要往表單中輸入電話號碼的時候，會要求添加區(qū)號和電話號碼。用戶看不到，或確實記不住這兒有兩個輸入框，結(jié)果第一個框輸入了完整數(shù)字，如果這個文本框限制了一定數(shù)目的字符限制，問題就更糟了。電話號碼就使用一個字段，同樣的，門牌號/街道什么的都是如此，只使用一個文本輸入框。

3）進行內(nèi)聯(lián)驗證，即在數(shù)據(jù)提交前就先行進行驗證。有些文本框輸入的內(nèi)容若有限定，（如密碼，必須包含字母和數(shù)字，字符長度不小于6），在用戶輸入后就應(yīng)及時驗證，如果沒通過驗證，要以突出的表達形式給出出錯的原因，而不是等到用戶滾動到表單的末尾，提交時才發(fā)現(xiàn)問題，讓用戶再返回前面，重新進行填寫。這樣會給用戶帶來不快的體驗。

瀏覽者在操作表單時，越方便越好。對于瀏覽者，什么樣的人群都有，有些瀏覽著可能對電腦操作不熟練，尤其是文本框中輸入內(nèi)容，首先要在文本框中單擊，才能輸入信息，而有些瀏覽者不清楚，若讓鼠標(biāo)指向文本框就可獲得焦點，可添加如下代碼：

請輸入姓名….

類似地，可以加入代碼到。

在文本輸入框中，如果加入了提示信息，瀏覽者往往需要用鼠標(biāo)選取后刪除，再輸入有用的信息。有了代碼onMouseOver=”this.focus（）” onFous=”this.select（）” 就可以不必刪除提示信息而直接在文本域中輸入有用的信息。

更方便的方式是提示信息直接被刪除，可添加如下代碼：

為了讓操作者清楚的知道自己目前操作的對象，還可以作如下設(shè)置：

1）表單輸入單元的邊框設(shè)置：更改傳統(tǒng)的表單單元邊框，會讓你的主頁增色不少。如：

其中”style=***” 為上、下、左、右和背景色設(shè)置，適用于其他單元。

2）表單輸入單元的文字設(shè)置：表單中單元的字體是可以修改的，如：

參考文獻：

[1] 張曉景.DIV+CSS網(wǎng)頁布局商業(yè)案例精粹[M].北京：電子工業(yè)出版社，2007.

[2] 陳承歡.網(wǎng)頁設(shè)計與制作實用教程[M].北京：人民郵電出版社，2011.

[3] 詹青龍，郭永燦.網(wǎng)頁設(shè)計與制作[M].北京：清華大學(xué)出版社有限公司，2010.

[4] 設(shè)計技巧：網(wǎng)頁表單設(shè)計經(jīng)驗分享[OL].http：//changcongliang.blog.163.com/blog/static/35431849201232201946978/.

[5] nemohq “關(guān)于表單設(shè)計，每個設(shè)計師都應(yīng)該知道的10件事”[OL].http：// http：//www.iteye.com/news/24822.

[6] 黃永兵譯.“讓用戶不再討厭Web表單的十九個最佳設(shè)計實踐”[OL].http：//developer.51cto.com/art/200912/174273.htm.

[7] 淺析Web表單設(shè)計 [OL].http：//www.kuqin.com/uidesign/20120212/318117.html.endprint

5）用戶是否可以同時選擇多項？

一般如果用戶可以同時選擇多項，那么推薦使用復(fù)選框。游玩過哪些項目讓用戶填寫的話，會沒有耐心認(rèn)真填寫，可以用復(fù)選框讓用戶選擇。

以這些問題解決后，可以列出一張表格，然后平衡選擇，決定哪些信息使用哪種形式表現(xiàn)。

2 表單的整體效果和局部調(diào)整

盡管對表單元素進行了篩選與確定，但是還需要針對表單整體和局部進行調(diào)整。主要有以下3方面。

1）避免太多種類的表單元素

在一個表單中，若既有輸入框又有超鏈接，還有下拉框，對于一般的用戶熟悉某種元素的操作，更樂意一直這樣操作下去。再換成另一種會讓用戶有陌生的感覺。

2）使選項精簡、易讀

單選、復(fù)選的選項，盡可能減少選項的數(shù)量，短句也可以作為選項。下拉框選項的確定原則是：用戶瀏覽選項的時候方便，不費眼神，不會點錯。

3）注意選項的順序和默認(rèn)值

對選項進行一個合理的邏輯排序，比如按聲母排序，按首字母排序、按數(shù)字大小排序，這樣當(dāng)選項多時，用戶大體知道所選內(nèi)容在什么位置，以便能快速找到。最好能根據(jù)普遍情況確定一個默認(rèn)值。

3 表單操作的易用性

1）使用tabindex屬性設(shè)置Tab鍵的順序：即設(shè)置鍵盤中的TAB鍵在各表單元素中的移動順序，即焦點的順序。 有了Tab鍵的幫助，用戶可以完全脫離鼠標(biāo)，更加快捷地填寫內(nèi)容。

2）如果一個輸入框可以滿足需求就不要用兩個，大部分用戶不熟悉盲打。很多用戶在輸入內(nèi)容時候都要看鍵盤。 當(dāng)要往表單中輸入電話號碼的時候，會要求添加區(qū)號和電話號碼。用戶看不到，或確實記不住這兒有兩個輸入框，結(jié)果第一個框輸入了完整數(shù)字，如果這個文本框限制了一定數(shù)目的字符限制，問題就更糟了。電話號碼就使用一個字段，同樣的，門牌號/街道什么的都是如此，只使用一個文本輸入框。

3）進行內(nèi)聯(lián)驗證，即在數(shù)據(jù)提交前就先行進行驗證。有些文本框輸入的內(nèi)容若有限定，（如密碼，必須包含字母和數(shù)字，字符長度不小于6），在用戶輸入后就應(yīng)及時驗證，如果沒通過驗證，要以突出的表達形式給出出錯的原因，而不是等到用戶滾動到表單的末尾，提交時才發(fā)現(xiàn)問題，讓用戶再返回前面，重新進行填寫。這樣會給用戶帶來不快的體驗。

瀏覽者在操作表單時，越方便越好。對于瀏覽者，什么樣的人群都有，有些瀏覽著可能對電腦操作不熟練，尤其是文本框中輸入內(nèi)容，首先要在文本框中單擊，才能輸入信息，而有些瀏覽者不清楚，若讓鼠標(biāo)指向文本框就可獲得焦點，可添加如下代碼：

請輸入姓名….

類似地，可以加入代碼到。

在文本輸入框中，如果加入了提示信息，瀏覽者往往需要用鼠標(biāo)選取后刪除，再輸入有用的信息。有了代碼onMouseOver=”this.focus（）” onFous=”this.select（）” 就可以不必刪除提示信息而直接在文本域中輸入有用的信息。

更方便的方式是提示信息直接被刪除，可添加如下代碼：

為了讓操作者清楚的知道自己目前操作的對象，還可以作如下設(shè)置：

1）表單輸入單元的邊框設(shè)置：更改傳統(tǒng)的表單單元邊框，會讓你的主頁增色不少。如：

其中”style=***” 為上、下、左、右和背景色設(shè)置，適用于其他單元。

2）表單輸入單元的文字設(shè)置：表單中單元的字體是可以修改的，如：

參考文獻：

[1] 張曉景.DIV+CSS網(wǎng)頁布局商業(yè)案例精粹[M].北京：電子工業(yè)出版社，2007.

[2] 陳承歡.網(wǎng)頁設(shè)計與制作實用教程[M].北京：人民郵電出版社，2011.

[3] 詹青龍，郭永燦.網(wǎng)頁設(shè)計與制作[M].北京：清華大學(xué)出版社有限公司，2010.

[4] 設(shè)計技巧：網(wǎng)頁表單設(shè)計經(jīng)驗分享[OL].http：//changcongliang.blog.163.com/blog/static/35431849201232201946978/.

[5] nemohq “關(guān)于表單設(shè)計，每個設(shè)計師都應(yīng)該知道的10件事”[OL].http：// http：//www.iteye.com/news/24822.

[6] 黃永兵譯.“讓用戶不再討厭Web表單的十九個最佳設(shè)計實踐”[OL].http：//developer.51cto.com/art/200912/174273.htm.

[7] 淺析Web表單設(shè)計 [OL].http：//www.kuqin.com/uidesign/20120212/318117.html.endprint

5）用戶是否可以同時選擇多項？

一般如果用戶可以同時選擇多項，那么推薦使用復(fù)選框。游玩過哪些項目讓用戶填寫的話，會沒有耐心認(rèn)真填寫，可以用復(fù)選框讓用戶選擇。

以這些問題解決后，可以列出一張表格，然后平衡選擇，決定哪些信息使用哪種形式表現(xiàn)。

2 表單的整體效果和局部調(diào)整

盡管對表單元素進行了篩選與確定，但是還需要針對表單整體和局部進行調(diào)整。主要有以下3方面。

1）避免太多種類的表單元素

在一個表單中，若既有輸入框又有超鏈接，還有下拉框，對于一般的用戶熟悉某種元素的操作，更樂意一直這樣操作下去。再換成另一種會讓用戶有陌生的感覺。

2）使選項精簡、易讀

單選、復(fù)選的選項，盡可能減少選項的數(shù)量，短句也可以作為選項。下拉框選項的確定原則是：用戶瀏覽選項的時候方便，不費眼神，不會點錯。

3）注意選項的順序和默認(rèn)值

對選項進行一個合理的邏輯排序，比如按聲母排序，按首字母排序、按數(shù)字大小排序，這樣當(dāng)選項多時，用戶大體知道所選內(nèi)容在什么位置，以便能快速找到。最好能根據(jù)普遍情況確定一個默認(rèn)值。

3 表單操作的易用性

1）使用tabindex屬性設(shè)置Tab鍵的順序：即設(shè)置鍵盤中的TAB鍵在各表單元素中的移動順序，即焦點的順序。 有了Tab鍵的幫助，用戶可以完全脫離鼠標(biāo)，更加快捷地填寫內(nèi)容。

2）如果一個輸入框可以滿足需求就不要用兩個，大部分用戶不熟悉盲打。很多用戶在輸入內(nèi)容時候都要看鍵盤。 當(dāng)要往表單中輸入電話號碼的時候，會要求添加區(qū)號和電話號碼。用戶看不到，或確實記不住這兒有兩個輸入框，結(jié)果第一個框輸入了完整數(shù)字，如果這個文本框限制了一定數(shù)目的字符限制，問題就更糟了。電話號碼就使用一個字段，同樣的，門牌號/街道什么的都是如此，只使用一個文本輸入框。

3）進行內(nèi)聯(lián)驗證，即在數(shù)據(jù)提交前就先行進行驗證。有些文本框輸入的內(nèi)容若有限定，（如密碼，必須包含字母和數(shù)字，字符長度不小于6），在用戶輸入后就應(yīng)及時驗證，如果沒通過驗證，要以突出的表達形式給出出錯的原因，而不是等到用戶滾動到表單的末尾，提交時才發(fā)現(xiàn)問題，讓用戶再返回前面，重新進行填寫。這樣會給用戶帶來不快的體驗。

瀏覽者在操作表單時，越方便越好。對于瀏覽者，什么樣的人群都有，有些瀏覽著可能對電腦操作不熟練，尤其是文本框中輸入內(nèi)容，首先要在文本框中單擊，才能輸入信息，而有些瀏覽者不清楚，若讓鼠標(biāo)指向文本框就可獲得焦點，可添加如下代碼：

請輸入姓名….

類似地，可以加入代碼到。

在文本輸入框中，如果加入了提示信息，瀏覽者往往需要用鼠標(biāo)選取后刪除，再輸入有用的信息。有了代碼onMouseOver=”this.focus（）” onFous=”this.select（）” 就可以不必刪除提示信息而直接在文本域中輸入有用的信息。

更方便的方式是提示信息直接被刪除，可添加如下代碼：

為了讓操作者清楚的知道自己目前操作的對象，還可以作如下設(shè)置：

1）表單輸入單元的邊框設(shè)置：更改傳統(tǒng)的表單單元邊框，會讓你的主頁增色不少。如：

其中”style=***” 為上、下、左、右和背景色設(shè)置，適用于其他單元。

2）表單輸入單元的文字設(shè)置：表單中單元的字體是可以修改的，如：

參考文獻：

[1] 張曉景.DIV+CSS網(wǎng)頁布局商業(yè)案例精粹[M].北京：電子工業(yè)出版社，2007.

[2] 陳承歡.網(wǎng)頁設(shè)計與制作實用教程[M].北京：人民郵電出版社，2011.

[3] 詹青龍，郭永燦.網(wǎng)頁設(shè)計與制作[M].北京：清華大學(xué)出版社有限公司，2010.

[4] 設(shè)計技巧：網(wǎng)頁表單設(shè)計經(jīng)驗分享[OL].http：//changcongliang.blog.163.com/blog/static/35431849201232201946978/.

[5] nemohq “關(guān)于表單設(shè)計，每個設(shè)計師都應(yīng)該知道的10件事”[OL].http：// http：//www.iteye.com/news/24822.

[6] 黃永兵譯.“讓用戶不再討厭Web表單的十九個最佳設(shè)計實踐”[OL].http：//developer.51cto.com/art/200912/174273.htm.

[7] 淺析Web表單設(shè)計 [OL].http：//www.kuqin.com/uidesign/20120212/318117.html.endprint