網頁設計中的常用表單設計技巧

2021-06-16 08:36:21 字數 1384 閱讀 5398

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

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

表單布局

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

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

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

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

借助視覺化元素

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

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

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

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

主次操作

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

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

通達 表單設計器 子表單 表單設計的花絮

通達 表單設計器 子表單 讓我們看一下數字領域的能力,特別是我們如何運用這些原理並將其應用於我們建立的日常ui元素,例如按鈕,表單域,圖示,隱喻和其他可視元素。負擔是物體與個人之間可能發生的行為 例如,門把手產生扭轉運動。個人是否認識到該行動的可能性無關緊要 負擔仍然存在 另一方面,感知的承受能力 ...

網頁登錄檔單的網頁設計技巧

ajax的流行給使用者體驗帶來了很大程式的提公升,而 註冊 這項做為網際網路最常用到的功能也自然而然的成為ajax最常光顧的地方,實時判斷使用者輸入的使用者名稱是否被搶註 檢測兩次輸入的密碼是否一致,檢測使用者輸入的郵箱格式是否正確,等等這些功能因為有了ajax的加入,得以讓我們徹底告別以往那個註冊...

自定義表單設計

表 單 設 計 一 設計目的 可以根據不同業務表單自定義生成表單,並能根據生成後的表單設計顯示風格。表單使用中表單資料會根據不同表單入庫到對應的資料庫,並根據設計時所定義的條件自動生成查詢或報表功能。解決這個問題後處理一般的業務程式就不用程式設計師手工製表和重寫 而是直接讓使用者圖形化設計。這將給使...