|
于是產(chǎn)生了一種替代的方案，標(biāo)簽右對(duì)齊布局，使得標(biāo)簽和輸入框之間的聯(lián)系更緊密。然而結(jié)果是左邊參差不齊的空白和標(biāo)簽讓用戶很難快速檢索表單要填寫的內(nèi)容。在西方國(guó)家，人們習(xí)慣于從左至右的書寫，所以這種右對(duì)齊的布局就給用戶造成了閱讀障礙。
借助可視化元素
由于“標(biāo)簽左對(duì)齊布局”的優(yōu)點(diǎn)（方便檢索并且減少垂直高度），嘗試糾正它的主要缺點(diǎn)（標(biāo)簽和輸入框的分離）就很誘惑人。
一個(gè)方案 就是增加背景色和分割線，不同的背景色產(chǎn)生了一列垂直的標(biāo)簽和一列垂直的輸入框，每一組標(biāo)簽和輸入框利用清晰的水平線分開。雖然這聽上去不錯(cuò)，但是還是會(huì)存在問題。
對(duì)比之前的形態(tài)（用戶主觀的 視覺區(qū)分），這增加了15個(gè)視覺元素：中間線、一個(gè)個(gè)有背景色的單元格以及一條條的水平線。這些元素會(huì)轉(zhuǎn)移用戶的視線，讓用戶難以聚焦到一些重要的元素上，比如標(biāo)簽和輸入框。 正如 Edward Tufte 指出的：“信息本身存在差異，必然產(chǎn)生感官上的不同�！睋Q句話說，任何對(duì)布局無用的視覺元素都會(huì)不斷地?cái)_亂布局。當(dāng)你試著瀏覽左側(cè)的標(biāo)簽就可以發(fā)現(xiàn)，你的視線總是被打斷，停下來想那些水平線、單元格和背景顏色。
當(dāng)然這并不意味著放棄背景色和線條。它們對(duì)于劃分相關(guān)區(qū)域信息還是很有效的。比如一條細(xì)水平線或者一個(gè)淺淺的背景色，都可以從視覺上組合相關(guān)數(shù)據(jù)。背景色和線條對(duì)于區(qū)分表單的主要操作按鈕尤其有效。
主次操作
一個(gè)表單的主要操作（通常是“提交”或“保存”）需要一個(gè)比較強(qiáng)的視覺比重（在上面的例子里用了亮色調(diào)、粗字體、背景色等等）。這相當(dāng)于給用戶一個(gè)提示：您已/即將完成填寫表單。
當(dāng)一個(gè)表單有多個(gè)操作，比如“繼續(xù)”和“返回”，那有必要減輕次要操作的視覺重量。這可以最小化用戶潛在的操作錯(cuò)誤的風(fēng)險(xiǎn)。
雖然以上內(nèi)容可以更好的讓你設(shè)計(jì)表單，但是組合布局、可視化元素以及內(nèi)容，仍然需要經(jīng)過用戶的測(cè)試以及數(shù)據(jù)分析（完成度評(píng)估、錯(cuò)誤報(bào)告等）。
更多的細(xì)節(jié)和例子在 Web Application Form Design Expanded。
JunChen 翻譯自 LukeW's Functioning Form
出處：JunChen
責(zé)任編輯：blue
上一頁 淺議 Web 表單設(shè)計(jì) [1] 下一頁 淺議 Web 表單設(shè)計(jì) [3]
|
第 1 頁 
第 2 頁 淺議 Web 表單設(shè)計(jì) [2]
