表單結(jié)構(gòu) 

雖然表單類型多樣，有不同目的的、收集不同內(nèi)容的、不同尺寸的，但是卻有一些共同的基本的元素可以幫你的用戶快速且順利地填寫它。

【亞馬遜創(chuàng)建賬戶的表單】

• 1. 類別或者條目（Category or Section）：它可以幫助用戶快速理解表單的作用，同時，當(dāng)你要收集的數(shù)據(jù)多于一個類別時，比如：個人信息、職業(yè)信息、財務(wù)信息等……對數(shù)據(jù)歸類整理具有很大的幫助作用。
• 2. 標(biāo)簽（Label）：它的作用主要是告訴用戶，在這一欄需要填寫什么。
• 3. 占位符（Placeholder）：對于標(biāo)簽下需要填寫內(nèi)容的額外注釋。
• 4. 出錯信息（Error Message）：當(dāng)用戶填寫的信息無法被錄入時給予反饋。
• 5. 提交操作的主按鈕（Primary CTA button）：放置于表單底部，用戶用來提交填寫好的表單的按鈕。

表單狀態(tài) 

基本上來講，

你的表單在用戶使用過程中存在三種狀態(tài)：

• 1. 默認(rèn)狀態(tài)：就是用戶在填寫前表單的狀態(tài)。
• 2. 焦點(diǎn)狀態(tài)：在用戶正在填寫的欄目上做著重提醒，這樣可以幫助用戶聚焦正在填寫的欄目，哪怕他的注意力離開了屏幕一會兒，回來后也能馬上找到剛剛正在填寫的欄目。
• 3. 反饋狀態(tài)：這種狀態(tài)一般是給用戶一些反饋信息（大多數(shù)是出錯信息）。一般情況下，這種狀態(tài)會出現(xiàn)在用戶移至下一個填寫區(qū)域的時候。另外，當(dāng)用戶提交表單時，如果系統(tǒng)無法馬上驗(yàn)證信息，也會出現(xiàn)這種狀態(tài)。

【表單的默認(rèn)狀態(tài)，焦點(diǎn)狀態(tài)，反饋狀態(tài)】

 好的案例 

1.表單要盡量簡單

盡量讓你的表單短且簡單。收集必要的數(shù)據(jù)，避免重復(fù)的輸入。比如，把“再次輸入你的密碼”這一欄去掉，而是在“輸入密碼”區(qū)域增加一個“密碼可視”的按鈕，讓用戶可以選擇看到自己輸入的密碼內(nèi)容。

【Jumia和亞馬遜不同的用戶密碼驗(yàn)證方式】

2.使用框內(nèi)提醒

向用戶反饋“輸入錯誤”提示時，最好把錯誤提醒放在對應(yīng)的輸入框內(nèi)。

【Facebook和亞馬遜不同的“錯誤提醒”方式】

3.將相關(guān)信息分組

這一點(diǎn)很重要，把相關(guān)的信息分組，并將這些組按序列排列。這樣可以幫助用戶減少認(rèn)知負(fù)荷，并能更加專注地填寫當(dāng)下的信息。

【hotels.ng結(jié)賬頁面截圖，一個很好的將信息分組的例子】

4.正確使用標(biāo)簽，并將其左對齊

標(biāo)簽要放在填寫框的上方，最好不要把標(biāo)簽替換掉。如果沒有標(biāo)簽，用戶在提交表單之前很會反復(fù)確認(rèn)他們填寫的內(nèi)容是否正確，這個過程會非常艱難，最直接的結(jié)果是就用戶需要思考很多，導(dǎo)致提交率下降。而使用標(biāo)簽時，我們習(xí)慣于將標(biāo)簽放在填寫欄的左上方，具體原因可以參看下面這篇論文，里面綜合講述了為什么這種方式對用戶提交信息轉(zhuǎn)化更有效。《Label Placement in Forms》

5.輸入框的大小要與輸入內(nèi)容的長度和尺寸相匹配

簡單來講，要確保輸入框的區(qū)域能夠完美匹配輸入內(nèi)容的長度，比方說輸入地址的區(qū)域長于輸入郵政編碼的長度。

【Flutterwave 登錄表單的填寫區(qū)域長度剛剛好】

【Payporte的登錄表單填寫區(qū)域長度就不太合適了】

6.CTA（提交操作） 按鈕

所有的表單在最后都應(yīng)該有一個“提交表單“的按鈕，或者一個“下一步”按鈕。如果一個頁面里不止一個按鈕，那么需要把重點(diǎn)放在主要的提交按鈕上，另一個按鈕需要稍微削弱一些存在感。

【亞馬遜將主要提交按鈕突出得很好】

如果使用彈窗狀態(tài)來收集數(shù)據(jù)，那么次重點(diǎn)按鈕通常是關(guān)閉彈窗的按鈕。我們一般會在彈窗右上角使用“X”按鈕來關(guān)閉彈窗，而不是專門設(shè)計一個“關(guān)閉表單”的按鈕。

【Medium的登錄頁面使用“X”而不是使用一個“關(guān)閉按鈕” 來關(guān)閉窗口】

7.搜索區(qū)域

不要隱藏你的搜索框，尤其當(dāng)你的網(wǎng)頁的內(nèi)容非常多的時候，搜索會是用戶的有限選擇操作。

【亞馬遜的搜索框十分明顯】

另外，當(dāng)一個用戶提交一個搜索任務(wù)后，不要清除搜索框的內(nèi)容，這樣方便用戶能很快且清晰地看到自己最初的搜索詞是什么。

【Medium在搜索結(jié)果出來后不會清除搜索框里的內(nèi)容】

8.清晰

將信息清晰地傳達(dá)給用戶，盡可能清晰地告訴用戶什么內(nèi)容是被需要的，不要給出讓用戶誤解的信息。沒人喜歡填寫表單，所以避免讓用戶填寫第二次。

【Cowrywise的標(biāo)簽短小精煉、信息清晰，甚至按鈕上的文本表達(dá)也很到位】

小小聲明一下：

以上的所有案例在這里沒有任何褒義和貶低的含義，僅僅是為了舉例教學(xué)。希望此篇文章能給你帶來幫助，謝謝觀看。

原文鏈接：《Creating User-friendly forms》

譯文地址：藍(lán)湖產(chǎn)品設(shè)計協(xié)作 (公眾號)

原文作者：Momoh Silm

譯者：藍(lán)湖產(chǎn)品設(shè)計協(xié)作