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

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

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

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

• 標簽垂直頂對齊
• 標簽水平右對齊

• 標簽水平左對齊
• 標簽在輸入?yún)^(qū)內(nèi)部

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

標簽垂直頂對齊

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

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

標簽水平右對齊

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

眼動軌跡表明，用戶花了更多時間在看問題，輸入框?qū)λ麄儊碚f很簡單。

標簽水平左對齊

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

眼動軌跡表明，用戶花在定位輸入?yún)^(qū)上的時間比看清標簽更長，從而影響了整個表單的完成時間。

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

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

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

設(shè)計要有一條主線，貫穿于整個產(chǎn)品，別讓人用著感覺像是幾個設(shè)計師干的事。認真思考一遍，就會有新一層的理解，這對我的工作有極大的幫助。

原文：http://blog.b3inside.com/userexperience/label-and-input-in-form-design/