在表單設(shè)計中，我們需要注意哪些內(nèi)容呢？

表單是承載信息和展示信息的重要途徑，因此我們在設(shè)計的時候要注意很多事情。

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

• 標(biāo)簽
• 幫助文字
• 輸入框
• 報錯提示。
  

那我我們在設(shè)計的過程中 到底要注意哪些事情呢？

1、布局上

我們盡量采用單列進(jìn)行展示，建議這樣做的原因一是能夠方便用戶進(jìn)行瀏覽和輸入，二是因為這樣布局，能夠進(jìn)行響應(yīng)式的開發(fā)，減少了成本。但是其自身也存在著缺點(diǎn)，當(dāng)需要輸入的條件過多時，用戶需要拖動鼠標(biāo)進(jìn)行查看與填寫。

2、標(biāo)簽的設(shè)計

標(biāo)簽的位置主要分成三種：左標(biāo)簽、頂標(biāo)簽、和內(nèi)標(biāo)簽（圖一、圖二、圖三、）。而關(guān)于是否要有必填和選填的存在，個人認(rèn)為，選填是否存在是可以被考究的。

左標(biāo)簽是目前比價主流的排布方式，主要適用于web端，建議將標(biāo)簽靠左對齊，因為不僅在界面上會顯得比較爭氣劃一，在用戶對信息的提取和響應(yīng)也會效率大大提高。但是它存在著一個比較尷尬的問題，也就是空間的占用上，用于web倒也沒有什么問題，但是當(dāng)如果用于移動端，則會出現(xiàn)需要左右滑動，信息填寫被覆蓋等問題。

頂部標(biāo)簽很好的解決了左標(biāo)簽的尷尬處境，但是自身也存在著問題，也就是當(dāng)需要填寫較多信息的時候，出現(xiàn)滾動的場景幾率也就相對較大。這里要注意的是在使用頂部標(biāo)簽的時候，我們要注意輸入框與輸入框之間的距離（如右圖）。

將標(biāo)簽放進(jìn)輸入框中是一個很好的解決方式，但是隨之而來的還有，當(dāng)我填寫信息的時候，輸入框任何指示信息也沒有，會讓用戶產(chǎn)生困惑的心里，那我們要如何解決呢：如上圖，我們可以將圖標(biāo)放入輸入框中或者放在左側(cè)。

3、幫助性信息

幫助性文字的展示一般采用氣泡框進(jìn)行提示（也有會先將一些提示性文字放在頁面的頂端，但是這個要取決于文案的內(nèi)容多少，以及重要程度。）氣泡框提示的內(nèi)容要求簡潔易懂，鼠標(biāo)放上去則迅速展開提示內(nèi)容，鼠標(biāo)移開則消失，注意：展開的時候不宜擋住當(dāng)前輸入?yún)^(qū)域，這么做的原因是讓用戶知道我處于什么地方，我在針對什么。

4、輸入框的設(shè)計

在進(jìn)行信息錄入的過程中，我們要保持輸入框的獨(dú)特性（錄入前、錄入中、錄入后）：錄入前和輸入中 我們要使輸入框高亮、沉浸、懸浮、等方法，讓用戶只專注于當(dāng)前的錄入，錄入后要給出反饋，是錄入失敗還是錄入成功，當(dāng)然這個要根據(jù)產(chǎn)品的特點(diǎn)，來進(jìn)行控制。

5、報錯提示

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

但是如果是重大操作結(jié)果報錯，我們還是優(yōu)先選擇用模態(tài)框的方式進(jìn)行報錯，這樣的好處是能更好的提醒用戶錯誤的結(jié)果，也能中斷用戶的操作，讓用戶專心思考和檢查之前的信息。

6、自動配置。

我們在設(shè)計的過程中，要盡量減少用戶的輸入次數(shù)，有些信息，我們可以通過自動補(bǔ)全，或者提供默認(rèn)值等方式減少用戶的輸入時間，畢竟用戶輸入信息只是一個過程。

7、尺寸和錄入量、格式

很多數(shù)據(jù)已經(jīng)證明根據(jù)內(nèi)容作出適當(dāng)?shù)某叽?，能夠大幅減少用戶的不確定性，以及一些特定的信息（手機(jī)、銀行卡等）采用特定的錄入格式都會讓用戶的體檢更加良好。

8、錄入信息的分組

將同類信息進(jìn)行分組，這樣即使是很多的信息疊加在一起，用戶在輸入上的心理壓力也會大大減小。

9、提高反饋報錯和幫助信息的可見度

但用戶在輸入信息的過程中，當(dāng)遇到磕絆或者提示時，證明用戶正處在迷茫的狀態(tài)，這時候表達(dá)要發(fā)揮它的易操作、易理解、以及可見性，來進(jìn)行指導(dǎo)用戶走出迷茫。

總結(jié)：好的表單設(shè)計，在使用上是高效的，友好的，體驗統(tǒng)一的。因此在設(shè)計的初期，要對錄入信息進(jìn)行一個充分的了解，這樣你的稿子才不會一審再審。

作者：秦東源，個人公眾號：海鮮君的設(shè)計物語

本文由 @秦東源 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自unsplash，基于CC0協(xié)議