如果你正從你的用戶那里收集信息, 沒(méi)有比網(wǎng)頁(yè)表單更簡(jiǎn)單和直接的辦法了。
一份有良好設(shè)計(jì)的表單可以提供有價(jià)值的信息, 相反, 他們有可能把用戶嚇跑。
明確了這一點(diǎn)之后, 每個(gè)設(shè)計(jì)師就應(yīng)該知道一些設(shè)計(jì)網(wǎng)頁(yè)表單的規(guī)則。
文章中所有的實(shí)例都是用CoffeeCup Web Form Builder生成的.
1. 保守性的搭建, 并帶有目的性的設(shè)計(jì)表單
我們要面對(duì)的現(xiàn)實(shí)是沒(méi)有人喜歡花大把的時(shí)間填寫表單. 保持表單的短小精悍
并且剔除絕對(duì)不必要的或者不會(huì)提供實(shí)際收效的表單元素. 保證表單的每個(gè)部
分都對(duì)整體起到了推動(dòng)作用, 這樣用戶會(huì)感謝你。
你的表單結(jié)構(gòu)應(yīng)該和表單內(nèi)的元素一樣具有功能性. 當(dāng)設(shè)計(jì)表單樣式的時(shí)候,
要記得, 至少在西方國(guó)家, 人們的閱讀習(xí)慣是從上到下, 從左到右. 他們也經(jīng)常
用Tab鍵在表單各個(gè)元素之間移動(dòng). 你的設(shè)計(jì)應(yīng)該通過(guò)元素?cái)[放的合理性和標(biāo)
簽的語(yǔ)義性來(lái)實(shí)現(xiàn). 當(dāng)然, 永遠(yuǎn)不要讓你的表單看起來(lái)分散或雜亂無(wú)章——保證
所有的元素都均勻的分隔開(kāi), 并且排列整齊。
下面是一些標(biāo)準(zhǔn)表單, 你可以用來(lái)作為出發(fā)點(diǎn), 設(shè)計(jì)出更加有創(chuàng)造性的表單:
標(biāo)簽左對(duì)齊, 輸入字段垂直羅列：
這個(gè)表單的特點(diǎn)是標(biāo)簽左對(duì)齊, 輸入框整齊有序的從上到下排列. 我們的眼
睛能夠很容易的捕捉表單元素, 特別是當(dāng)你問(wèn)到一些用戶不太熟悉的問(wèn)題時(shí)。
因?yàn)樗麄兛梢院茼樌膹纳系较麻喿x問(wèn)題列表而不被輸入框打斷, 他們會(huì)更
專注于你所問(wèn)的問(wèn)題. 但是這個(gè)樣式會(huì)延長(zhǎng)填完表單的時(shí)間, 因?yàn)橐暰€在標(biāo)
簽和輸入框之間移動(dòng)會(huì)占據(jù)大量的時(shí)間。
標(biāo)簽右對(duì)齊, 輸入字段垂直堆疊：
右對(duì)齊的標(biāo)簽?zāi)軌蚋菀讌^(qū)分和閱讀, 并且剔除掉了標(biāo)簽和輸入框之間那些
不合適的空間. 但是, 卻使閱讀更加困難. 它不那么吸引人, 而且看起來(lái)不整齊。
標(biāo)簽頂端對(duì)齊：
頂端對(duì)齊的標(biāo)簽可以使填寫表單更加迅速和容易, 因?yàn)檠劬Σ恍枰跇?biāo)簽和
輸入框之間來(lái)回移動(dòng). 這種樣式也讓你把相關(guān)的字段放在一起, 節(jié)省了空間。
2. 讓你的表單適應(yīng)它的風(fēng)格
每個(gè)表單都應(yīng)該符合它要表達(dá)的形勢(shì)或情況. 當(dāng)你在計(jì)劃著設(shè)計(jì)表單的時(shí)候,
問(wèn)問(wèn)自己下面的這些問(wèn)題: 你打算問(wèn)什么問(wèn)題? 為什么問(wèn)? 你的網(wǎng)頁(yè)設(shè)計(jì)在
有表單和沒(méi)有表單的情況下分別是什么樣子? 表單中有沒(méi)有用戶要填的信息,
或者有沒(méi)有他們想要填的信息? 你的回答會(huì)對(duì)你的表單樣式和內(nèi)容的設(shè)計(jì)有
所幫助。
3. 用你所需
當(dāng)你猶豫不決是否在表單中添加元素的時(shí)候, 問(wèn)問(wèn)自己是不是可以不需要這
個(gè)元素. 如果回答"是", 就不要使用。
重置按鈕通常是不必要的表單元素. 這個(gè)本應(yīng)消失的歷史殘留品卻依然出現(xiàn)
在表單中, 甚至是將來(lái)的表單設(shè)計(jì). 想想看, 當(dāng)你想要修改表單信息的時(shí)候,
輸入框里面有什么內(nèi)容其實(shí)并不重要, 那么有什么必要清除所有的信息呢?
重置按鈕唯一好處是當(dāng)你不小心清除了剛剛填好的信息, 很惱火的時(shí)候,
你不需要重新填寫。
4. 在必要的時(shí)候才使用簡(jiǎn)潔的描述
你也許要解釋一下在表單中收集相關(guān)信息的原因, 特別是用戶不愿分享的信息，
比如電話號(hào)碼或者電子郵件. 這樣做不僅消除了用戶的疑慮, 也保證了數(shù)據(jù)的正
確性。
任何描述和評(píng)論都要簡(jiǎn)明扼要. 你也許還要用不同的顏色, 字體大小, 或樣式來(lái)
區(qū)分他們. 過(guò)猶不及, 畢竟你不希望這些描述索然無(wú)味或者明顯超過(guò)表單的其他
部分. 這是一個(gè)提供印刷服務(wù)的表單, 很有效的利用了描述來(lái)說(shuō)明表單的作用。
看下圖：
5. 主動(dòng)溝通
保證你的表單中使用以用戶為中心的友好語(yǔ)言. 這里有個(gè)小竅門可以寫出平常
談話般的文字: 避免和你的用戶真正交談。
如果你想知道別人的名字, 你不會(huì)盯著他們的眼睛用呆板的措辭問(wèn), "全名". 那
實(shí)在是太恐怖了. 如果你要得到積極的回應(yīng), 你會(huì)笑著說(shuō), "你好, 你叫什么名字?"
記住試著用更加人性化的措辭來(lái)代替"全名"這個(gè)標(biāo)簽, 比如, "你的名字"。
6. 把表單分成劃分成許多小的部分
在小范圍內(nèi)交換想法和意見(jiàn)是溝通的一種方式. 大家互相介紹自己. 你描述自
己的職業(yè), 其他人發(fā)表評(píng)論或者提問(wèn)題. 你重復(fù)說(shuō)過(guò)的內(nèi)容, 或者回答他人的
問(wèn)題會(huì)收到更多的回應(yīng). 一次有意義的充實(shí)的交談, 信息是源源不斷的, 一來(lái)
一回的。
網(wǎng)頁(yè)表單作為另外一種溝通的方式, 也是同樣的道理. 你也許要問(wèn)許多問(wèn)題, 但
是那并不意味著你要把他們一股腦的給讀者. 試著用水平線, 色塊, 有意義的圖
片, 或者用標(biāo)題字把信息分割成為容易閱讀的小集合. 如果, 以上的辦法都行不通,
就把你的表單分成許多頁(yè), 在頂部加上進(jìn)度條, 如此一來(lái), 用戶就能夠知道他們還
差多少?zèng)]有完成。如下圖：
7. 使用有意義的, 關(guān)聯(lián)上下文的錯(cuò)誤信息
你的出錯(cuò)信息應(yīng)該可以清楚的表明哪里出錯(cuò), 并使出錯(cuò)的部分突出出來(lái).
畢竟, 沒(méi)有人喜歡在表單里面搜索被遺漏的字段。
8. 當(dāng)用戶點(diǎn)擊提交按鈕時(shí), 他們會(huì)自以為已經(jīng)完成了, 打算離開(kāi). 基本上他們會(huì)說(shuō), "這是你要的信息, 再見(jiàn)."
如果是一次真正的交談, 你會(huì)和他們握手, 然后說(shuō), "再見(jiàn)", 再離開(kāi), 或者通
過(guò)其他方式告訴他們談話結(jié)束了. 你的表單也會(huì)做同樣的事情. 它有沒(méi)有引導(dǎo)
用戶到達(dá)某個(gè)頁(yè)面, 告訴他們, "感謝你的提交! 我們不久之后會(huì)聯(lián)系你.",
或諸如此類的提示. 而且此時(shí)的網(wǎng)頁(yè)上應(yīng)該有返回主頁(yè)的鏈接。
就這些了! 在設(shè)計(jì)網(wǎng)頁(yè)表單的時(shí)候要記得這些規(guī)則, 你一定會(huì)驚訝于表單的質(zhì)量
的大幅提升以及收獲的大量反饋。
原文鏈接: http://www.wpdfd.com/issues/87/eight-rules-for-effective-web-forms/
