建站常識(shí)

設(shè)計(jì)表單的標(biāo)簽和輸入?yún)^(qū)

2009-04-27 14:49:00

重讀LukeW的《Web Form Design:Filling in the Blanks》感觸很深，除佩服LukeW的鉆研精神外，更多的是學(xué)習(xí)他對(duì)設(shè)計(jì)細(xì)節(jié)的執(zhí)著和理解。我把對(duì)本書(shū)的理解，與工作生活中遇到的實(shí)際問(wèn)題結(jié)合起來(lái)，作為今后設(shè)計(jì)工作的指導(dǎo)和規(guī)范。

有一些元素，看著很簡(jiǎn)單，設(shè)計(jì)起來(lái)卻很頭疼。往往這樣的元素都具有一個(gè)共同的特點(diǎn)——變化多，表單的設(shè)計(jì)就是如此。你說(shuō)見(jiàn)過(guò)20、30種以上不同的表單，我并不驚訝，產(chǎn)品需求、風(fēng)格不同，必然五花八門(mén)。當(dāng)然，換了設(shè)計(jì)師，表單的樣式也可能會(huì)不同。然而，不能讓這種情況繼續(xù)下去，表單不是藝術(shù)展。不要讓你的才華阻礙了別人的前進(jìn)。

表單就是一扇門(mén)

古有大禹，三過(guò)家門(mén)而不入；今有用戶，看到表單犯糊涂。難道大禹遇到的是這樣的門(mén)？

表單，尤其是注冊(cè)表單，就像一扇門(mén)，穿過(guò)他才能看到完整的產(chǎn)品。所以千萬(wàn)別做這種門(mén)，自己費(fèi)事不說(shuō)，用戶也不會(huì)買(mǎi)賬。這個(gè)設(shè)計(jì)最糟糕之處，就在于它有悖常理。好的設(shè)計(jì)應(yīng)當(dāng)遵循于其自然規(guī)律，這樣一來(lái)符合人們預(yù)期，使用起來(lái)也就順暢。

表單中標(biāo)簽與輸入?yún)^(qū)的4種對(duì)齊方式

標(biāo)簽垂直頂對(duì)齊
標(biāo)簽水平右對(duì)齊
標(biāo)簽水平左對(duì)齊
標(biāo)簽在輸入?yún)^(qū)內(nèi)部

《Web Form Design》一書(shū)中對(duì)標(biāo)簽和輸入?yún)^(qū)組合進(jìn)行了一些研究，我整理了一份數(shù)據(jù)比較的表格：

標(biāo)簽垂直頂對(duì)齊

標(biāo)簽和輸入?yún)^(qū)垂直依次排列，從而降低了對(duì)頁(yè)面寬度的要求。如果你的頁(yè)面沒(méi)有富裕的空間用于標(biāo)簽和輸入?yún)^(qū)的橫向排列，這種組合是個(gè)不錯(cuò)的選擇。

眼動(dòng)軌跡表明，用戶自上而下的掃描表單，焦點(diǎn)多集中在左側(cè)一列，且跳動(dòng)較小。

#p#

標(biāo)簽水平右對(duì)齊

標(biāo)簽右對(duì)齊和輸入?yún)^(qū)水平排列，從而降低了對(duì)頁(yè)面高度的要求。但與標(biāo)簽垂直頂對(duì)齊相比，由于標(biāo)簽文字左側(cè)參差不齊，對(duì)問(wèn)題的認(rèn)知和掃描時(shí)間變的更長(zhǎng)。

眼動(dòng)軌跡表明，用戶花了更多時(shí)間在看問(wèn)題，輸入框?qū)λ麄儊?lái)說(shuō)很簡(jiǎn)單。

標(biāo)簽水平左對(duì)齊

標(biāo)簽左對(duì)齊和輸入?yún)^(qū)水平排列，同樣降低了對(duì)頁(yè)面高度的要求。標(biāo)簽左對(duì)齊有利于用戶對(duì)問(wèn)題標(biāo)簽的掃描，但不利于填寫(xiě)答案，因?yàn)闃?biāo)簽距離輸入?yún)^(qū)較遠(yuǎn)，要重新定位到右側(cè)輸入框，確實(shí)要消耗一點(diǎn)時(shí)間。

眼動(dòng)軌跡表明，用戶花在定位輸入?yún)^(qū)上的時(shí)間比看清標(biāo)簽更長(zhǎng)，從而影響了整個(gè)表單的完成時(shí)間。

標(biāo)簽在輸入?yún)^(qū)內(nèi)部

這種方式雖然具備垂直組合的優(yōu)點(diǎn)，但仍應(yīng)謹(jǐn)慎使用。當(dāng)焦點(diǎn)移入輸入?yún)^(qū)后，標(biāo)簽消失，看不到問(wèn)題，可能會(huì)忘記要回答什么，很郁悶，不得不清掉輸入好的字，把“問(wèn)題”還原出來(lái)。這種組合比較適合只有一兩個(gè)輸入框的簡(jiǎn)短表單，而且人們對(duì)他很熟悉，不用費(fèi)力去記住標(biāo)簽提出的問(wèn)題，比如：搜索框。

當(dāng)你真的選擇用這種表單的時(shí)候，注意，讓標(biāo)簽和真實(shí)內(nèi)容區(qū)分開(kāi)來(lái)，一些約定俗成的做法是減淡標(biāo)簽字色，在后面打上“…”；下拉菜單則在默認(rèn)選項(xiàng)兩側(cè)打上“-”，以示區(qū)別：