在表單設計中，我們需要注意哪些內容呢

在表單設計中，我們需要注意哪些內容呢?

表單是承載資訊和展示資訊的重要途徑，因此我們在設計的時候要注意很多事情。

首先我們要知道表單的組成：

標籤幫助文字

輸入框報錯提示。

那我我們在設計的過程中到底要注意哪些事情呢?

1、布局上

我們盡量採用單列進行展示，建議這樣做的原因一是能夠方便使用者進行瀏覽和輸入，二是因為這樣布局，能夠進行響應式的開發，減少了成本。但是其自身也存在著缺點，當需要輸入的條件過多時，使用者需要拖動滑鼠進行檢視與填寫。

2、標籤的設計

標籤的位置主要分成三種：左標籤、頂標籤、和內標籤(圖

一、圖二、圖三、)。而關於是否要有必填和選填的存在，個人認為，選填是否存在是可以被考究的。

左標籤是目前比價主流的排布方式，主要適用於web端，建議將標籤靠左對齊，因為不僅在介面上會顯得比較爭氣劃一，在使用者對資訊的提取和響應也會效率大大提高。但是它存在著乙個比較尷尬的問題，也就是空間的占用上，用於web倒也沒有什麼問題，但是當如果用於移動端，則會出現需要左右滑動，資訊填寫被覆蓋等問題。

頂部標籤很好的解決了左標籤的尷尬處境，但是自身也存在著問題，也就是當需要填寫較多資訊的時候，出現滾動的場景機率也就相對較大。這裡要注意的是在使用頂部標籤的時候，我們要注意輸入框與輸入框之間的距離(如右圖)。

將標籤放進輸入框中是乙個很好的解決方式，但是隨之而來的還有，當我填寫資訊的時候，輸入框任何指示資訊也沒有，會讓使用者產生困惑的心裡，那我們要如何解決呢：如上圖，我們可以將圖示放入輸入框中或者放在左側。

3、幫助性資訊

幫助性文字的展示一般採用氣泡框進行提示(也有會先將一些提示性文字放在頁面的頂端，但是這個要取決於文案的內容多少，以及重要程度。)氣泡框提示的內容要求簡潔易懂，滑鼠放上去則迅速展開提示內容，滑鼠移開則消失，注意：展開的時候不宜擋住當前輸入區域，這麼做的原因是讓使用者知道我處於什麼地方，我在針對什麼。

4、輸入框的設計

在進行資訊錄入的過程中，我們要保持輸入框的獨特性(錄入前、錄入中、錄入後)：錄入前和輸入中我們要使輸入框高亮、沉浸、懸浮、等方法讓使用者只專注於當前的錄入，錄入後要給出反饋，是錄入失敗還是錄入成功，當然這個要根據產品的特點，來進行控制。

5、報錯提示

如上，報錯提示有很多種，要根據不同場景選擇不同的報錯提示，假如只是針對單個輸入框的判斷，則僅需在當前狀態進行報錯，文字提示和輸入框顏色、樣式、變化都可以。

但是如果是重大操作結果報錯，我們還是優先選擇用模態框的方式進行報錯，這樣的好處是能更好的提醒使用者錯誤的結果，也能中斷使用者的操作，讓使用者專心思考和檢查之前的資訊。

6、自動配置。

我們在設計的過程中，要儘量減少使用者的輸入次數，有些資訊，我們可以通過自動補全，或者提供預設值等方式減少使用者的輸入時間，畢竟使用者輸入資訊只是乙個過程。

7、尺寸和錄入量、格式

很多資料已經證明根據內容作出適當的尺寸，能夠大幅減少使用者的不確定性，以及一些特定的資訊(手機、銀行卡等)採用特定的錄入格式都會讓使用者的體檢更加良好。

8、錄入資訊的分組

將同類資訊進行分組，這樣即使是很多的資訊疊加在一起，使用者在輸入上的心理壓力也會大大減小。

9、提高反饋報錯和幫助資訊的可見度

但使用者在輸入資訊的過程中，當遇到磕絆或者提示時，證明使用者正處在迷茫的狀態，這時候表達要發揮它的易操作、易理解、以及可見性，來進行指導使用者走出迷茫。

總結：好的表單設計，在使用上是高效的，友好的，體驗統一的。因此在設計的初期，要對錄入資訊進行乙個充分的了解，這樣你的稿子才不會一審再審。