淺議Web網頁Form表單設計技巧

來源:互聯網
上載者:User
web|技巧|設計|網頁

“輸入框( Input )應當符合邏輯地劃分為小組,這樣大腦就可以很好的處理大堆地區間的關係。”– 《HTML權威指南》

Web 應用程式總是利用表單來處理資料錄入和配置,但並不是所有的表單都保持一致。輸入地區的對齊,各自的標籤(label),操作方式,以及周圍的視覺元素都會或多或少影響使用者的行為。

表單布局

考慮到使用者完成表單填寫的時間應當儘可能的短,並且收集的資料都是使用者所熟悉的(比如姓名、地址、付費資訊等),垂直對齊的標籤和輸入框可以說是最佳的。每對標籤和輸入框垂直對齊給人一種兩者接近的感覺,並且一致的靠左對齊減少了眼睛移動和處理時間。使用者只需要往一個方向移動:下。

在這種布局中,推薦使用加粗的標籤,這可以增加它們視覺比重,提高其顯著性。如果不加粗的話,從使用者的角度講,標籤和輸入框的文字幾乎就一樣了。

如果一個表單上的資料並不為人熟悉或者在邏輯上分組有困難(比如一個地址的多個組成部分),靠左對齊的標籤可以很容易的通覽表單的資訊。使用者只需要上下看看左側一欄標籤就可以了,而不會被輸入框打斷思路。但這樣一來,標籤與其對應的輸入框之間的距離通常會被更長的標籤拉長,可能會影響填寫表單的時間。使用者必須左右來回的跳轉目光來找到兩個對應的標籤和輸入框。

於是產生了一種替代的方案,標籤靠右對齊布局,使得標籤和輸入框之間的聯絡更緊密。然而結果是左邊參差不齊的空白和標籤讓使用者很難快速檢索表單要填寫的內容。在西方國家,人們習慣於從左至右的書寫,所以這種靠右對齊的布局就給使用者造成了閱讀障礙。

藉助可視化元素

由於“標籤靠左對齊布局”的優點(方便檢索並且減少垂直高度),嘗試糾正它的主要缺點(標籤和輸入框的分離)就很誘惑人。

一個方案就是增加背景色和分割線,不同的背景色產生了一列垂直的標籤和一列垂直的輸入框,每一組標籤和輸入框利用清晰的水平線分開。雖然這聽上去不錯,但是還是會存在問題。

對比之前的形態(使用者主觀的視覺區分),這增加了15個視覺元素:中間線、一個個有背景色的儲存格以及一條條的水平線。這些元素會轉移使用者的視線,讓使用者難以聚焦到一些重要的元素上,比如標籤和輸入框。 正如 Edward Tufte 指出的:“資訊本身存在差異,必然產生感官上的不同。”換句話說,任何對布局無用的視覺元素都會不斷地擾亂布局。當你試著瀏覽左側的標籤就可以發現,你的視線總是被打斷,停下來想那些水平線、儲存格和背景顏色。

當然這並不意味著放棄背景色和線條。它們對於劃分相關地區資訊還是很有效。比如一條細水平線或者一個淺淺的背景色,都可以從視覺上組合相關資料。背景色和線條對於區分表單的主要操作按鈕尤其有效。

主次操作

一個表單的主要操作(通常是“提交”或“儲存”)需要一個比較強的視覺比重(在上面的例子裡用了亮色調、粗字型、背景色等等)。這相當於給使用者一個提示:您已/即將完成填寫表單。

當一個表單有多個操作,比如“繼續”和“返回”,那有必要減輕次要操作的視覺重量。這可以最小化使用者潛在的操作錯誤的風險。

雖然以上內容可以更好的讓你設計表單,但是組合布局、可視化元素以及內容,仍然需要經過使用者的測試以及資料分析(完成度評估、錯誤報表等)。



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。