表單設(shè)計(jì)的首要目標(biāo)：讓人們迅速并且輕松地完成填寫。

一、內(nèi)容的組織

為了保證對(duì)話流程，可以將問題分成有意義的組。根據(jù)問題數(shù)量和情境，可以將這些組分到多個(gè)網(wǎng)頁(yè)或者單個(gè)網(wǎng)頁(yè)的不同部分。

例如 yahoo!注冊(cè)表單將個(gè)人信息、正在創(chuàng)建的賬號(hào)、訪問賬號(hào)的方式和若干信任及安全條目問題分成四個(gè)不同部分。這些部分用標(biāo)題區(qū)別于網(wǎng)頁(yè)中的其余元素。紫色粗體標(biāo)題比其他的表單標(biāo)簽承載了更多視覺分量，你能瀏覽掃描表單，明白需要提供哪些信息

圖1.1? yahoo! 注冊(cè)表單采用對(duì)話語氣來吸引新成員

二、歸納區(qū)別

內(nèi)容組之間的差異不需要大量視覺差異。事實(shí)上，內(nèi)容組之間對(duì)比太多往往會(huì)造成過多視覺污染，會(huì)阻礙人們?yōu)g覽表單。以圖1.1為例，每個(gè)內(nèi)容組都從視覺上區(qū)別于表單其余部分（紫色粗體）。

請(qǐng)考慮下圖1.2和圖1.3表單之間的區(qū)別。一個(gè)表單是黃色邊界，黃色背景色，紅色欄目標(biāo)題，表格框合并歸納相關(guān)內(nèi)容。而另一個(gè)表單只用一種弱背景色變化來區(qū)分表單中有意義的部分。使用最少的視覺信息有助于保持焦點(diǎn)在表單內(nèi)容而不是表現(xiàn)形式。

圖1.2? 表單中多個(gè)不同視覺元素阻礙人們看見表單所提問題

圖1.3? 背景柔和變化或者細(xì)線條常常足以有效組織表單中的相關(guān)內(nèi)容

但即使內(nèi)容組之間的細(xì)微區(qū)別也會(huì)被濫用。有些設(shè)計(jì)師考慮到他們所認(rèn)為的標(biāo)簽左對(duì)齊的缺點(diǎn)，會(huì)選擇使用交替背景顏色來組織左對(duì)齊標(biāo)簽與右對(duì)齊輸入框，如圖1.4。但標(biāo)簽定位眼動(dòng)跟蹤研究表明，在標(biāo)簽左對(duì)齊布局中，人們一般能順利將輸入框和標(biāo)簽聯(lián)系在一起，只是花費(fèi)時(shí)間會(huì)更長(zhǎng)。因此，這種做法并沒有真正解決問題，事實(shí)上還會(huì)引發(fā)另一個(gè)問題。

圖1.4? 采用交替背景色來組織左對(duì)齊標(biāo)簽和相應(yīng)輸入框，這種做法具有誘惑力，但這些視覺元素給表單帶來大量視覺噪音

兩種不同背景顏色用來區(qū)分標(biāo)簽和輸入框，水平線用來分隔每一對(duì)標(biāo)簽和輸入框。這種做法增加了15種額外的頁(yè)面布局元素：中心線、背景區(qū)和水平線。這些元素分散了注意力，焦點(diǎn)更難集中到布局的最重要元素：標(biāo)簽和輸入框。信息由產(chǎn)生作用的差異構(gòu)成，任何無助于布局的視覺元素都會(huì)損害布局。掃描左欄標(biāo)簽時(shí)說明了這一點(diǎn)。眼睛需要一再停頓，因?yàn)橐紤]水平線和背景顏色組合構(gòu)成的每對(duì)水平線和文本框。

圖1.5? 過多視覺元素分散了對(duì)表單主要內(nèi)容的注意力，還會(huì)中斷表單掃描線

當(dāng)然，這并不是說表單布局絕對(duì)不能使用背景色和線條?？紤]區(qū)分內(nèi)容組時(shí)，應(yīng)當(dāng)考慮采用最少的視覺信息圖1.6。? 過多的視覺信息可能會(huì)導(dǎo)致注意力分散，弄巧成拙。

圖1.6? eBay express付款表單采用細(xì)線條分隔有意義的內(nèi)容組。只需要通過最少的視覺元素來形成清晰的區(qū)別