|
瀏覽網(wǎng)站時(shí)肯定遇到過這樣的 Web 表單：一個(gè)包含 100 多個(gè)國(guó)家的下拉框（select）；一個(gè)有 31 個(gè)選項(xiàng)的日期下拉框；等等，經(jīng)常使人飽受挫折。Web 表單除去文本信息（比如 label 和其他提示等）和提交按鈕，還包括五種元素：下拉框（select）、單選按鈕（radio）、復(fù)選框（checkbox）、輸入框（input）和超鏈接。
下面以旅館訂房為例，來描述表單設(shè)計(jì)過程中合理選擇表單元素的過程。
例子
在本文的例子當(dāng)中，想從用戶那里得到以下數(shù)據(jù)：
- 姓名
- 人數(shù)
- 旅館名
- 房間類型（單人、雙人）
- 信用卡類型
第一步：確定頁(yè)面的主要目的
首先想想為什么要讓用戶去選擇（使用 select）？是頁(yè)面導(dǎo)航？還是收集信息？
作為導(dǎo)航的下拉框
使用下拉框來做導(dǎo)航、頁(yè)面間的跳轉(zhuǎn)可以節(jié)省很大一部分頁(yè)面空間。并且在不改變視覺大小的情況下，增加信息量（選項(xiàng)的數(shù)量）。但是下拉框仍然是有不少局限的：
- 下拉框隱藏了選項(xiàng)；除非是高級(jí)用戶或者在非用不可的情況下，他才會(huì)展開下拉框閱讀，然后作決定；
- 超鏈接只需要點(diǎn)一下，而下拉框需要更多的操作；
- 良好設(shè)計(jì)過的超鏈接列表，比下拉框更容易閱讀；
- 如果選項(xiàng)的數(shù)量巨大，用戶必須拉動(dòng)滾動(dòng)條；
收集信息的下拉框
大部分情況下表單是被用來收集信息的。比如你向用戶問一個(gè)問題，并且這個(gè)問題具有有限的答案（比如信用卡類型）。如何設(shè)計(jì)才能良好的呈現(xiàn)這些答案？并且減少用戶的犯錯(cuò)幾率？
第二步：解答 6 個(gè)問題
在選擇用輸入框還是下拉框之前，先解答以下 6 個(gè)問題：
1. 輸入答案是否比選擇答案更加自然？
個(gè)人信息，比如姓名、地址、生日等我們熟知的信息，使用輸入的方式收集比使用選擇的方式收集更加自然并且簡(jiǎn)單。對(duì)于姓名來說，也無(wú)法選擇。本例中，姓名和人數(shù)就推薦使用輸入框。
2. 答案是否容易輸錯(cuò)？
容易輸錯(cuò)的信息，就不能使用輸入框來收集。比如本例中的旅館名、房間類型，取而代之的可以使用超鏈接、單選按鈕、復(fù)選框。
3. 用戶是否需要瀏覽完所有的選項(xiàng)，才能理解問題？
比如本例中，“房間類型”這個(gè)問題，如果不先瀏覽所有選項(xiàng)，很難做出判斷。在這種情況下，推薦根據(jù)情況使用單選按鈕或復(fù)選框。
4. 有多少個(gè)選項(xiàng)？
滾動(dòng)條是老大難問題了。如果下拉框的選項(xiàng)很多，很有可能導(dǎo)致頁(yè)面需要滾動(dòng)、下拉框選擇也需要滾動(dòng)。一般來說 4 個(gè)選項(xiàng)及 4 個(gè)以內(nèi)選項(xiàng)的問題，使用單選按鈕或復(fù)選框會(huì)比用下拉框好的多。
5. 用戶是否可以同時(shí)選擇多項(xiàng)？
一般如果用戶可以同時(shí)選擇多項(xiàng)，那么推薦使用復(fù)選框。為了避免用戶不了解復(fù)選框或者不想另外說明，那么有時(shí)可以在單選按鈕的基礎(chǔ)上，增加一個(gè)“任意（any）”的選項(xiàng)。比如本例中的“房間類型”。
6. 各個(gè)選項(xiàng)是否看上去有區(qū)別？
比如“信用卡類型”，“Visa”、“MasterCard”等容易區(qū)分。但是對(duì)于“人數(shù)”來說，假設(shè) 01-10，總共兩個(gè)字符長(zhǎng)，使用下拉框不利于瀏覽（Scan）。而連鎖旅館通常有相似的名字，那么相似的部分可以使用縮寫，并且用地名來區(qū)分。也可以使用超鏈接形式來避免此問題。
以上六個(gè)問題解決后，可以列出 一張表格（Link to flickr），然后平衡選擇，決定哪些信息使用哪種形式表現(xiàn)。
第三步：表單的整體效果和局部調(diào)整
盡管按照上面 6 個(gè)方面進(jìn)行了篩選，但是還需要針對(duì)表單整體和局部進(jìn)行調(diào)整。主要是以下三方面：
避免太多種類的表單元素
根據(jù)第二步，我們得到了“最佳”的選擇，如下：
- 姓名：輸入框
- 人數(shù)：輸入框
- 旅館名：超鏈接
- 房間類型（單人、雙人）：帶有“任意”選項(xiàng)的單選按鈕
- 信用卡類型：下拉框
發(fā)現(xiàn)問題了？形式太多了，又是輸入框又是超鏈接的。這時(shí)候可以回過頭再看看有沒有合理的替代方案。
使選項(xiàng)精簡(jiǎn)、易讀
對(duì)于下拉框的原則就是使用戶瀏覽選項(xiàng)的時(shí)候更加方便，不會(huì)費(fèi)眼神，不會(huì)點(diǎn)錯(cuò)。對(duì)于單選、復(fù)選的選項(xiàng)，減少選項(xiàng)的數(shù)量，同時(shí)也可以使用短句來作為選項(xiàng)。
注意選項(xiàng)的順序和默認(rèn)值
給選項(xiàng)賦予一個(gè)合理的邏輯順序，比如按首字母排列、按聲母序。然后根據(jù)普遍情況確定默認(rèn)值。
第四步：考慮易用性（Accessibility）
可以參考Web內(nèi)容可訪問性指南 1.0
Web 表單可供選擇的元素有限，但是要做好也不容易。
本節(jié)參考：
Should I use a drop-down? Four steps for choosing form elements on the Web
翻譯整理。
本文鏈接：http://m.95time.cn/design/doc/2007/4471.asp 
出處：JunChen
責(zé)任編輯：blue
上一頁(yè) 淺議 Web 表單設(shè)計(jì) [3] 下一頁(yè)
|
第 1 頁(yè) 
第 4 頁(yè) 淺議 Web 表單設(shè)計(jì) [4]
