合理選擇輸入框的類型可以引導(dǎo)用戶正確填寫表單。比如時(shí)間選擇器限定了該輸入框的輸入內(nèi)容為時(shí)間類型。

（2）默認(rèn)內(nèi)容

默認(rèn)內(nèi)容可以提示用戶需要輸入的內(nèi)容，避免用戶誤操作。也可以預(yù)填充輸入框內(nèi)容，減少用戶操作，但是預(yù)填充內(nèi)容必須是用戶需要的，不然會(huì)達(dá)到適得其反的效果。

3. 幫助信息

為用戶填寫答案提供有用的線索。

（1）不熟悉要求填入的數(shù)據(jù)。比如什么是PAC代碼？

（2）質(zhì)疑為何要填入特定數(shù)據(jù)。比如為什么要填寫郵箱？

（3）關(guān)心數(shù)據(jù)安全或者隱私。比如填寫信用卡賬號(hào)。

（4）系統(tǒng)推薦數(shù)據(jù)填寫方式。比如用逗號(hào)分開標(biāo)簽。

4. 反饋信息

（1）成功信息

用戶填寫成功，需要有清晰的成功反饋，給予用戶鼓勵(lì)。

（2）錯(cuò)誤信息

明確每個(gè)輸入框產(chǎn)生錯(cuò)誤的原因，并給出清晰的解決方法。

（3）警告信息

格式正確，但是有外部條件限制，比如用戶名已被占用。

（4）提示信息

給予用戶正確填寫表單的線索，減少操作誤差。

5. 操作按鈕

（1）主動(dòng)作和次動(dòng)作

主動(dòng)作表示用戶填寫表單的主要操作方式。比如保存、提交。主動(dòng)作也可以包含兩個(gè)意思，比如同意并提交。次動(dòng)作表示用戶填寫表單的次要操作方式，大多數(shù)是用來撤銷內(nèi)容。比如取消、重置。

（2）按鈕反饋

用戶提交數(shù)據(jù)到服務(wù)器進(jìn)行交互需要一定的時(shí)間。為了避免重復(fù)提交，可以將按鈕置灰讓用戶無法點(diǎn)擊，并且加入進(jìn)度條或加載樣式表示提交正在進(jìn)行中。

6. 步驟條

步驟條可以讓流程的所有步驟清晰可見。這里有四個(gè)原因可以解釋多步形式的有效性：

（1）表單各模塊性質(zhì)不同，比如注冊(cè)微店設(shè)置賬號(hào)信息和設(shè)置店鋪信息是明顯不同的模塊。

（2）表單是基于不同時(shí)間點(diǎn)。比如淘寶買家退款的流程進(jìn)度條，分為退款申請(qǐng)，退款處理和退貨給賣家，十分清晰地告知用戶退款的每個(gè)進(jìn)程變化，給予用戶安全感。

（3）通過在一個(gè)多步驟表單的最后一步請(qǐng)求敏感信息（電子郵件、電話），用戶更有可能填寫這些字段——否則它們會(huì)丟失填寫前一步所取得的進(jìn)展（這是一種被證實(shí)的認(rèn)知偏差，被稱為“沉沒成本謬論”）。

（4）通過查看進(jìn)度條，用戶更有動(dòng)力完成表單。這又是基于許多被證明的認(rèn)知偏差，如被賦予的進(jìn)步效應(yīng)。

交互

1. 邏輯排序

有邏輯性地組織標(biāo)簽，使表單像對(duì)話一般自然流暢。比如通常情況下會(huì)要求提供用戶名才設(shè)置密碼，先設(shè)置密碼再要求填寫用戶名真的不要太奇怪！還要考慮使用頻率，按使用頻率由高到低排列。

2. 清晰的瀏覽線

合理地組織標(biāo)簽、操作按鈕和提示文字的排版，引導(dǎo)用戶的視線在同一方向流動(dòng)，降低用戶的視覺負(fù)擔(dān)。

3. 即時(shí)校驗(yàn)

（1）確認(rèn)

適用于錯(cuò)誤率高、或者有特定格式要求的問題。比如確認(rèn)用戶名是否被占用。

（2）建議

適用于有大量可選擇有效答案的情況。比如建議密碼的格式，從而保證賬號(hào)安全性。

（3）限制

適用于有填寫限制的情況。比如輸入框有字?jǐn)?shù)限制時(shí)，顯示限制上限和當(dāng)前的輸入字?jǐn)?shù)，讓用戶把握輸入字?jǐn)?shù)。

4. 提供幫助

在標(biāo)簽和輸入框旁邊增加幫助文字，告訴用戶應(yīng)該如何回答問題。

（1）自動(dòng)即時(shí)幫助

顯示在對(duì)應(yīng)輸入框附近，表示對(duì)應(yīng)輸入框的提示。適用于幫助文字較少的局部說明。

（2）用戶激活的即時(shí)幫助

通常采用圖標(biāo)、按鈕、圖片、文本鏈接提示人們有幫助可提供，例如問號(hào)圖標(biāo)。適用于幫助文字較少的全局說明。

（3）用戶激活的區(qū)域幫助

始終顯示在某個(gè)特定區(qū)域而不是輸入框附近。適用于幫助文字非常多的全局說明。

5. 對(duì)齊方式

（1）標(biāo)簽

根據(jù)馬泰奧·彭佐的2006年的標(biāo)簽對(duì)齊眼動(dòng)實(shí)驗(yàn)結(jié)果表明。標(biāo)簽的對(duì)齊方式在理論效率上比較：頂對(duì)齊>右對(duì)齊>左對(duì)齊。

① 頂部對(duì)齊。適用于水平空間有限的情況。

• 優(yōu)點(diǎn)：和輸入框聯(lián)系非常緊密，從上至下的視覺路徑清晰流暢，填寫效率很高。
• 缺點(diǎn)：大量占用垂直空間，不適用于輸入框較多的表單。

② 右對(duì)齊。適用于垂直空間有限的情況并且需要用戶快速填寫的情況。

• 優(yōu)點(diǎn)：和輸入框聯(lián)系較為緊密，并且減少占用垂直空間。
• 缺點(diǎn)：標(biāo)簽可讀性不強(qiáng)，降低快速瀏覽完表單的效率。

③ 左對(duì)齊。適用于垂直空間有限并且需要用戶謹(jǐn)慎填寫的情況。

• 優(yōu)點(diǎn)：標(biāo)簽可讀性強(qiáng)，并且減少占用垂直空間。
• 缺點(diǎn)：和輸入框聯(lián)系不緊密，增加用戶填寫表單的時(shí)間。

④ 輸入框內(nèi)對(duì)齊。適用于水平和垂直空間有限的情況。

• 優(yōu)點(diǎn)：與輸入框聯(lián)系緊密，并且減少占用水平和垂直空間。
• 缺點(diǎn)：標(biāo)簽隨輸入內(nèi)容而消失，復(fù)核表單信息較困難。

⑤ 懸浮標(biāo)簽。結(jié)合了頂部對(duì)齊和輸入框內(nèi)對(duì)齊的情況。

• 優(yōu)點(diǎn)：和輸入框聯(lián)系最緊密，填寫效率最高，并且減少占用水平和垂直空間。
• 缺點(diǎn)：稍微占用了垂直空間，標(biāo)簽字號(hào)太小容易造成可讀性問題，不過缺點(diǎn)不是很明顯。

（2）操作按鈕

為了評(píng)估哪一種主動(dòng)作和次動(dòng)作的效果最好，Luck(Web表單設(shè)計(jì)作者)和倫敦的可用性測(cè)試公司Etre使用眼動(dòng)跟蹤和可用性指標(biāo)對(duì)此進(jìn)行了測(cè)試。

方案A、B和C完成任務(wù)更快、更有效。只有E方案表現(xiàn)很差，錯(cuò)誤點(diǎn)擊了取消按鈕。使用F方案時(shí)，人們的眼球定位時(shí)間最長(zhǎng)。
根據(jù)收集的數(shù)據(jù)，所有方案中最有效的設(shè)計(jì)都有共同特征：提交和關(guān)閉按鈕左對(duì)齊排列，與上方輸入框和標(biāo)簽對(duì)齊。

UI

1. 營(yíng)造氛圍

（1）品牌基因

在表單也植入品牌的元素，比如顏色，會(huì)使整體界面設(shè)計(jì)風(fēng)格協(xié)調(diào)，使得品牌基因深入人心。

（2）場(chǎng)景氛圍

將線下的表單搬到線上，可以結(jié)合線下場(chǎng)景讓用戶身臨其境，比如預(yù)定民宿。

2. 緩解頁(yè)面壓力

（1）靜態(tài)：利用線條、空間間隔、顏色。

對(duì)于較為復(fù)雜的表單，需要對(duì)信息進(jìn)行整理歸納，否則雜糅的表單會(huì)讓用戶失去填寫的耐心。合理有層次的組織信息，按照不同信息的類別、屬性和相關(guān)性進(jìn)行區(qū)塊的劃分，利用線條、空間間隔、顏色進(jìn)行視覺表現(xiàn)，給用戶喘息的機(jī)會(huì)。

（2）動(dòng)態(tài)：漸進(jìn)呈現(xiàn)

用戶只有完成當(dāng)前操作，頁(yè)面才漸進(jìn)展現(xiàn)下一步操作，讓內(nèi)容的增加順其自然。比如Gogobot在邀請(qǐng)用戶進(jìn)行評(píng)價(jià)時(shí)，巧妙地運(yùn)用高斯模糊后續(xù)內(nèi)容來緩解用戶的壓力。

3. 視覺層級(jí)

（1）必填項(xiàng)和選填項(xiàng)

必填項(xiàng)為空，則表單無法進(jìn)行，因此必填項(xiàng)要比選填項(xiàng)的視覺效果強(qiáng)。

（2）主按鈕和次按鈕

主動(dòng)作的視覺效果要比次動(dòng)作的視覺效果明顯。

（3）錯(cuò)誤信息和成功信息

錯(cuò)誤信息的強(qiáng)調(diào)效果要比成功信息強(qiáng)，從而吸引用戶注意快速解決問題。

4. 輸入框長(zhǎng)度

輸入框的長(zhǎng)度可以暗示用戶正確填寫結(jié)果的長(zhǎng)度。比如證件號(hào)的內(nèi)容較多，所以輸入框要很長(zhǎng)。驗(yàn)證碼一般是四位數(shù)字，所以輸入框要短。

5. 字體

通過字號(hào)來區(qū)分層次重點(diǎn)，強(qiáng)調(diào)文字的字號(hào)要比輔助的文字要大一點(diǎn)。通過文字大小讓用戶分清重點(diǎn)。

總結(jié)

表單其實(shí)是連接系統(tǒng)和用戶的一個(gè)重要的橋梁。通過上述的整理，如何讓用戶在填寫表單時(shí)像對(duì)話般流暢自然，相信大家也有一些概念了。

1. 溝通前：選取問題要精

想想你跟朋友聊天，你在一旁講得天花亂墜，但跟主題毫無相關(guān)，那是果斷要被嫌棄的。表單也是如此，你需要考慮“保留、刪減、延遲、解釋”。

2. 溝通中：溝通效率要高

盡量避免用戶填寫后才告知錯(cuò)誤，我們應(yīng)該采取合理的方式規(guī)避根源。比如約朋友來家里吃飯，可以提前詢問你的朋友忌口的食物，不然就白費(fèi)心血了。表單也是如此，你需要適時(shí)提供幫助信息正確引導(dǎo)用戶。

3.溝通后：信息反饋要全

別人在講話時(shí)，偶爾的點(diǎn)頭或者提問可以讓講話的人得到反饋，他會(huì)覺得自己是“聯(lián)網(wǎng)”了，而不是在玩“單機(jī)游戲”。表單也是如此，及時(shí)的反饋能讓用戶感覺到自己正在和系統(tǒng)交互中，而不是進(jìn)入了死胡同。

參考資料：

1. 《表單設(shè)計(jì)及Axure原型》作者：曉夢(mèng)蟬君
2. 《如何打造一個(gè)高可用性網(wǎng)頁(yè)表單設(shè)計(jì)？》
3. 《表單設(shè)計(jì)的思考》
4. 《表單設(shè)計(jì)-學(xué)習(xí)筆記》作者：丹頂鶴的日記本
5. 《與用戶體驗(yàn)死磕到底：不簡(jiǎn)單的表單設(shè)計(jì)》

其實(shí)我覺得還是刷《Web表單設(shè)計(jì)》比較系統(tǒng)，逃(￣▽￣)~*

PS：本文用到的繪圖工具是Balsamiq Mockups，炒雞稀飯這種風(fēng)格，詳情介紹請(qǐng)戳鏈接PM工具盤點(diǎn)：那些鮮為人知卻好用到哭的效率神器

作者：安琪Angela，公眾號(hào)：idatadesign?；ヂ?lián)網(wǎng)數(shù)據(jù)行業(yè)UX&PM，參與過數(shù)據(jù)中心，商業(yè)智能和數(shù)據(jù)分析平臺(tái)等產(chǎn)品設(shè)計(jì)。關(guān)注大數(shù)據(jù)、人工智能和互聯(lián)網(wǎng)金融。歡迎大家一起交流~

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

（題圖由作者提供）