表單設(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)致注意力分散凳兵,弄巧成拙。