表單設(shè)計(jì)的首要目標(biāo):讓人們迅速并且輕松地完成填寫(xiě)。
一、內(nèi)容的組織
為了保證對(duì)話(huà)流程,可以將問(wèn)題分成有意義的組。根據(jù)問(wèn)題數(shù)量和情境,可以將這些組分到多個(gè)網(wǎng)頁(yè)或者單個(gè)網(wǎng)頁(yè)的不同部分。
例如 yahoo!注冊(cè)表單將個(gè)人信息、正在創(chuàng)建的賬號(hào)、訪(fǎng)問(wèn)賬號(hào)的方式和若干信任及安全條目問(wèn)題分成四個(gè)不同部分。這些部分用標(biāo)題區(qū)別于網(wǎng)頁(yè)中的其余元素。紫色粗體標(biāo)題比其他的表單標(biāo)簽承載了更多視覺(jué)分量,你能瀏覽掃描表單,明白需要提供哪些信息
二、歸納區(qū)別
內(nèi)容組之間的差異不需要大量視覺(jué)差異。事實(shí)上,內(nèi)容組之間對(duì)比太多往往會(huì)造成過(guò)多視覺(jué)污染,會(huì)阻礙人們?yōu)g覽表單。以圖1.1為例,每個(gè)內(nèi)容組都從視覺(jué)上區(qū)別于表單其余部分(紫色粗體)。
請(qǐng)考慮下圖1.2和圖1.3表單之間的區(qū)別。一個(gè)表單是黃色邊界,黃色背景色,紅色欄目標(biāo)題,表格框合并歸納相關(guān)內(nèi)容。而另一個(gè)表單只用一種弱背景色變化來(lái)區(qū)分表單中有意義的部分。使用最少的視覺(jué)信息有助于保持焦點(diǎn)在表單內(nèi)容而不是表現(xiàn)形式。
但即使內(nèi)容組之間的細(xì)微區(qū)別也會(huì)被濫用。有些設(shè)計(jì)師考慮到他們所認(rèn)為的標(biāo)簽左對(duì)齊的缺點(diǎn),會(huì)選擇使用交替背景顏色來(lái)組織左對(duì)齊標(biāo)簽與右對(duì)齊輸入框,如圖1.4。但標(biāo)簽定位眼動(dòng)跟蹤研究表明,在標(biāo)簽左對(duì)齊布局中,人們一般能順利將輸入框和標(biāo)簽聯(lián)系在一起,只是花費(fèi)時(shí)間會(huì)更長(zhǎng)。因此,這種做法并沒(méi)有真正解決問(wèn)題,事實(shí)上還會(huì)引發(fā)另一個(gè)問(wèn)題。
兩種不同背景顏色用來(lái)區(qū)分標(biāo)簽和輸入框,水平線(xiàn)用來(lái)分隔每一對(duì)標(biāo)簽和輸入框。這種做法增加了15種額外的頁(yè)面布局元素:中心線(xiàn)、背景區(qū)和水平線(xiàn)。這些元素分散了注意力,焦點(diǎn)更難集中到布局的最重要元素:標(biāo)簽和輸入框。信息由產(chǎn)生作用的差異構(gòu)成,任何無(wú)助于布局的視覺(jué)元素都會(huì)損害布局。掃描左欄標(biāo)簽時(shí)說(shuō)明了這一點(diǎn)。眼睛需要一再停頓,因?yàn)橐紤]水平線(xiàn)和背景顏色組合構(gòu)成的每對(duì)水平線(xiàn)和文本框。
當(dāng)然,這并不是說(shuō)表單布局絕對(duì)不能使用背景色和線(xiàn)條。考慮區(qū)分內(nèi)容組時(shí),應(yīng)當(dāng)考慮采用最少的視覺(jué)信息圖1.6。? 過(guò)多的視覺(jué)信息可能會(huì)導(dǎo)致注意力分散,弄巧成拙。