“輸入框( Input )應(yīng)當(dāng)符合邏輯地劃分為小組,這樣大腦就可以很好的處理大堆區(qū)域間的關(guān)系?!报C 《HTML權(quán)威指南》
Web 應(yīng)用程序總是利用表單來處理數(shù)據(jù)錄入和配置,但并不是所有的表單都保持一致。輸入?yún)^(qū)域的對(duì)齊方式,各自的標(biāo)簽(label),操作方式,以及周圍的視覺元素都會(huì)或多或少影響用戶的行為。
表單布局
考慮到用戶完成表單填寫的時(shí)間應(yīng)當(dāng)盡可能的短,并且收集的數(shù)據(jù)都是用戶所熟悉的(比如姓名、地址、付費(fèi)信息等),垂直對(duì)齊的標(biāo)簽和輸入框可以說是最佳的。每對(duì)標(biāo)簽和輸入框垂直對(duì)齊給人一種兩者接近的感覺,并且一致的左對(duì)齊減少了眼睛移動(dòng)和處理時(shí)間。用戶只需要往一個(gè)方向移動(dòng):下。
在這種布局中,推薦使用加粗的標(biāo)簽,這可以增加它們視覺比重,提高其顯著性。如果不加粗的話,從用戶的角度講,標(biāo)簽和輸入框的文字幾乎就一樣了。
如果一個(gè)表單上的數(shù)據(jù)并不為人熟悉或者在邏輯上分組有困難(比如一個(gè)地址的多個(gè)組成部分),左對(duì)齊的標(biāo)簽可以很容易的通覽表單的信息。用戶只需要上下看看左側(cè)一欄標(biāo)簽就可以了,而不會(huì)被輸入框打斷思路。但這樣一來,標(biāo)簽與其對(duì)應(yīng)的輸入框之間的距離通常會(huì)被更長(zhǎng)的標(biāo)簽拉長(zhǎng),可能會(huì)影響填寫表單的時(shí)間。用戶必須左右來回的跳轉(zhuǎn)目光來找到兩個(gè)對(duì)應(yīng)的標(biāo)簽和輸入框。
于是產(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)生感官上的不同。”換句話說,任何對(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)告等)。
本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!
網(wǎng)站題目:淺議網(wǎng)頁制作中的表單設(shè)計(jì)
當(dāng)前地址:http://m.rwnh.cn/news14/316514.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、移動(dòng)網(wǎng)站建設(shè)、軟件開發(fā)、品牌網(wǎng)站制作、商城網(wǎng)站、關(guān)鍵詞優(yōu)化
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)