酷播亮新聞
在表單設計中，我們需要注意哪些內容呢？
表單是承載信息和展示信息的重要途徑，因此我們在設計的時候要注意很多事情。
首先我們要知道表單的組成：
- 標籤
- 幫助文字
- 輸入框
- 報錯提示。
那我我們在設計的過程中 到底要注意哪些事情呢？
1、佈局上
我們盡量採用單列進行展示，建議這樣做的原因 一是能夠方便用戶進行瀏覽和輸入，二是因為這樣佈局，能夠進行響應式的開發，減少了成本 。 但是其自身也存在著缺點，當需要輸入的條件過多時，用戶需要拖動鼠標進行查看與填寫。
2、標籤的設計
標籤的位置主要分成三種：左標籤、頂標籤、和內標籤（圖一、圖二、圖三、）。 而關於是否要有必填和選填的存在，個人認為，選填是否存在是可以被考究的。
左標籤 是目前比價主流的排布方式，主要適用於web端，建議將標籤靠左對齊，因為不僅在界面上會顯得比較爭氣劃一，在用戶對信息的提取和響應也會效率大大提高。 但是它存在著一個比較尷尬的問題，也就是空間的佔用上，用於web倒也沒有什麼問題，但是當如果用於移動端，則會出現需要左右滑動，信息填寫被覆蓋等問題。
頂部標籤 很好的解決了左標籤的尷尬處境，但是自身也存在著問題，也就是當需要填寫較多信息的時候，出現滾動的場景機率也就相對較大。 這裡要注意的是在使用頂部標籤的時候，我們要注意輸入框與輸入框之間的距離（如右圖）。
將標籤放進輸入框中 是一個很好的解決方式，但是隨之而來的還有，當我填寫信息的時候，輸入框任何指示信息也沒有，會讓用戶產生困惑的心裡，那我們要如何解決呢：如上圖， 我們可以將圖標放入輸入框中或者放在左側。
3、幫助性信息
幫助性文字的展示一般採用氣泡框進行提示（也有會先將一些提示性文字放在頁面的頂端，但是這個要取決於文案的內容多少，以及重要程度。）氣泡框提示的內容要求簡潔易懂 ，鼠標放上去則迅速展開提示內容，鼠標移開則消失，注意：展開的時候不宜擋住當前輸入區域，這麼做的原因是讓用戶知道我處於什麼地方，我在針對什麼。
4、輸入框的設計
在進行信息錄入的過程中，我們要保持輸入框的獨特性（錄入前、錄入中、錄入後）：錄入前和輸入中我們要使輸入框高亮、沉浸、懸浮、等方法，讓用戶只 專注於當前的錄入，錄入後要給出反饋，是錄入失敗還是錄入成功，當然這個要根據產品的特點，來進行控制。
5、報錯提示
如上圖，報錯提示有很多種，要根據不同場景選擇不同的報錯提示，假如只是針對單個輸入框的判斷，則僅需在當前狀態進行報錯，文字提示和輸入框顏色、樣式、變化都可以。
但是如果是重大操作結果報錯，我們還是優先選擇用模態框的方式進行報錯，這樣的好處是能更好的提醒用戶錯誤的結果，也能中斷用戶的操作，讓用戶專心思考和檢查之前的 信息。
6、自動配置。
我們在設計的過程中，要盡量減少用戶的輸入次數，有些信息，我們可以通過自動補全，或者提供默認值等方式減少用戶的輸入時間，畢竟用戶輸入信息只是一個過程。
7、尺寸和錄入量、格式
很多數據已經證明根據內容作出適當的尺寸，能夠大幅減少用戶的不確定性，以及一些特定的信息（手機、銀行卡等）採用特定的錄入格式都會讓用戶的體檢更加良好。
8、錄入信息的分組
將同類信息進行分組，這樣即使是很多的信息疊加在一起，用戶在輸入上的心理壓力也會大大減小。
9、提高反饋報錯和幫助信息的可見度
但用戶在輸入信息的過程中，當遇到磕絆或者提示時，證明用戶正處在迷茫的狀態，這時候表達要發揮它的易操作、易理解、以及可見性，來進行指導用戶走出迷茫 。
總結：好的表單設計，在使用上是高效的，友好的，體驗統一的。 因此在設計的初期，要對錄入信息進行一個充分的了解，這樣你的稿子才不會一審再審。
作者：秦東源，個人公眾號：海鮮君的設計物語
本文由 @秦東源 原創發佈於人人都是產品經理。 未經許可，禁止轉載。
題圖來自unsplash，基於CC0協議