前言

表單是UI設(shè)計(jì)中很常見的元素，不管是PC端還是移動(dòng)端，表單幾乎是無法規(guī)避的UI控件，用戶可以通過表單完成線上購物、信息交換、文章訂閱等任務(wù)，使用范疇極為廣泛且牽扯到方方面面。

表單設(shè)計(jì)看似很簡單、實(shí)則很容易忽略用戶體驗(yàn)，作為設(shè)計(jì)師，需要根據(jù)觸發(fā)條件、使用場景將各元素進(jìn)行靈活的調(diào)整，才能確保用戶順暢的完成表單任務(wù)，因此，設(shè)計(jì)出一個(gè)可用性非常好的表單非常有必要。本文將針對表單的設(shè)計(jì)準(zhǔn)則及用戶體驗(yàn)進(jìn)行了總結(jié)，希望能夠幫到大家。

本期大綱

一、認(rèn)識表單

二、表單結(jié)構(gòu)及元素設(shè)計(jì)細(xì)節(jié)

三、暫存及送出規(guī)則

四、如何提升表單完成率

五、常見誤區(qū)及避坑指南

六、總結(jié)

一、認(rèn)識表單

1 什么是表單？

表單主要用來收集或呈現(xiàn)數(shù)據(jù)或特定字段等信息，屬于信息采集工具，可運(yùn)用到不同的場景模塊中，例如常見的登錄注冊、調(diào)查問卷、個(gè)人信息頁面。如何確定當(dāng)前頁面是不是表單頁，主要看該頁面是否發(fā)生信息采集而觸發(fā)用戶進(jìn)行輸入、選擇、編輯等操作。

2 表單的交互狀態(tài)

完成表單內(nèi)容需經(jīng)過三個(gè)階段，即交互前、交互中、交互后的三種狀態(tài)。

◇ 交互前：未發(fā)生任何操作，默認(rèn)為初始化狀態(tài)；

◇ 交互中：光標(biāo)插入即成為聚焦?fàn)顟B(tài)，占位符消失，隨著內(nèi)容的輸入，輸入框后面顯示一鍵清除圖標(biāo)；

◇ 交互后：輸入完成光標(biāo)離開，前端如驗(yàn)證內(nèi)容有誤會(huì)立即反饋，無誤則回到正常輸入后的狀態(tài)。

二、表單結(jié)構(gòu)及元素設(shè)計(jì)細(xì)節(jié)

1 結(jié)構(gòu)/框架

首先，在視覺上，移動(dòng)端表單不管所輸入字段有多么少也不要在同一行添置多個(gè)表單，使用單列方式呈現(xiàn)，便于用戶瀏覽和理解。如果存在關(guān)聯(lián)性極強(qiáng)的前置條件可設(shè)計(jì)多列，如：輸入手機(jī)號碼之前要先選擇國際電話區(qū)號，可將這兩個(gè)字段納入同一個(gè)（雙列）表單項(xiàng)。

其次，表單內(nèi)容需先易后難，避免用戶從一開始就產(chǎn)生逃避的想法，需根據(jù)內(nèi)容的關(guān)聯(lián)性循序漸進(jìn)的引導(dǎo)用戶完成。例如：添加地址，常見順序是姓名、電話、地區(qū)、詳細(xì)地址，如果一開始就讓用戶填寫詳細(xì)地址的話就不合理了（并不是不行），這等于在顛覆用戶的認(rèn)知，就算完成了表單內(nèi)容多少也會(huì)有些“上頭”。

最后，當(dāng)同一頁面表單項(xiàng)過多時(shí)，需要根據(jù)類型、相似性或前后關(guān)系進(jìn)行分組，以保持頁面的節(jié)奏感，讓用戶在最短的時(shí)間內(nèi)對整個(gè)頁面內(nèi)容有個(gè)大致的了解，從而能更輕松的完成表單。另外，將選填的內(nèi)容盡量靠后，如果重要性較低，就直接去。

2 標(biāo)簽

標(biāo)簽的作用是告知用戶當(dāng)前表單要輸入什么內(nèi)容，清晰簡潔的表單能讓用戶更快速的理解。標(biāo)簽的長短決定著其對齊方式，通常標(biāo)簽字?jǐn)?shù)在可控的情況下可使用左對齊；文本字?jǐn)?shù)不可控但不是很多時(shí)可使用右對齊；字?jǐn)?shù)不可控且標(biāo)簽長短不一、相差巨大就使用頂對齊（例如英文，大多數(shù)不可控，參差不齊）。

3 占位符

占位符主要對標(biāo)簽進(jìn)行描述或補(bǔ)充內(nèi)容格式，它并非內(nèi)容，而是在用戶輸入內(nèi)容之前幫助其解決常見問題及誤區(qū)，用以提升表單的完成效率。

部分設(shè)計(jì)師喜歡將占位符和標(biāo)簽保持一致，實(shí)無必要，如果只是單純的為了視覺上統(tǒng)一，使用通用提示「請輸入/請選擇」也很不錯(cuò)，或者在后面加上推薦性措辭，否則就直接留空。當(dāng)光標(biāo)插入時(shí)，盡量保留占位符，輸入內(nèi)容后再消失，方便用戶在輸入內(nèi)容之前依然可通過占位符得到幫助。

在這里需要說明一個(gè)誤區(qū)，避免直接將占位符作為標(biāo)簽使用，如果只是針對登錄頁面，用戶還可以理解，因?yàn)槠鋬?nèi)容比較大眾化，賬號+密碼、額外再加個(gè)驗(yàn)證碼，很容易理解。但其他類型的表單頁面就容易讓用戶產(chǎn)生疑惑，輸入內(nèi)容時(shí)隨著占位符的消失，容易忘記表單的內(nèi)容屬性，增加了用戶的理解成本和使用難度。

4 輸入

能讓用戶選擇的就不要讓其碼字輸入，例如：輸入手機(jī)號碼，可讓用戶跳轉(zhuǎn)到通訊錄自行選擇。盡量減少需輸入的內(nèi)容，通過已知信息預(yù)判并幫助用戶自動(dòng)錄入，如：手機(jī)號碼前要先輸入國際區(qū)號，若產(chǎn)品主要服務(wù)于國內(nèi)用戶，系統(tǒng)自動(dòng)錄入“+86”，可節(jié)省用戶的操作成本，降低表單的完成難度。

在表單輸入后，需在后面提供一鍵清除圖標(biāo)“?”，因?yàn)橄到y(tǒng)提供的刪除功能只能單個(gè)文本清除。

需對輸入的內(nèi)容設(shè)計(jì)規(guī)范格式，將同一組較長的內(nèi)容加空格分段，便于瀏覽記憶。例如地址“廣東省 深圳市 龍華區(qū)”、手機(jī)號碼“138 888 88888”等。

5 鍵盤

鍵盤是內(nèi)容輸入的必備組件，很多時(shí)候，產(chǎn)品會(huì)允許用戶在系統(tǒng)輸入法與第三方輸入法之間自由切換，基于常規(guī)操作似乎沒有什么問題，但站在用戶體驗(yàn)角度，需要根據(jù)不同使用場景考慮是否需要開發(fā)內(nèi)置鍵盤。

如驗(yàn)證碼、部分密碼只需輸入純數(shù)字即可，這時(shí)調(diào)出內(nèi)置的純數(shù)字鍵盤可減少無關(guān)元素（字母/符號）的干擾；出于安全考慮，涉及財(cái)產(chǎn)相關(guān)的密碼則需要打亂鍵盤的字母、數(shù)字順序，雖然會(huì)增加用戶的理解成本，但與財(cái)產(chǎn)的安全性相比，顯然在可接受范圍之內(nèi)。

6 選項(xiàng)

當(dāng)表單項(xiàng)存在多個(gè)選項(xiàng)時(shí)，需根據(jù)選項(xiàng)的數(shù)量、長短設(shè)定不同的展示方式，如單/復(fù)選按鈕、彈窗、頁面跳轉(zhuǎn)等。

1）按鈕：當(dāng)選項(xiàng)不超過6條且單條選項(xiàng)在4個(gè)字左右的，可設(shè)計(jì)成按鈕樣式供用戶選擇；

2）彈窗：選項(xiàng)較多時(shí)，使用操作欄彈窗展示；

3）跳轉(zhuǎn)頁面：若選項(xiàng)太多且不可控，使用跳轉(zhuǎn)頁面的方式則體驗(yàn)更佳。

7.提示

提示是用戶在操作前對完成表單項(xiàng)可能存在疑惑，當(dāng)占位符不足以說清楚時(shí)，會(huì)在標(biāo)簽后面增加一個(gè)提示圖標(biāo)，用戶點(diǎn)擊后通過彈窗或新的頁面來查看詳細(xì)的解釋說明。

8 數(shù)據(jù)驗(yàn)證

分為前端驗(yàn)證和后端驗(yàn)證，前端驗(yàn)證無需服務(wù)器傳輸數(shù)據(jù)，程序已寫好的驗(yàn)證規(guī)則，光標(biāo)離開即可驗(yàn)證（就像玩單機(jī)游戲），例如內(nèi)容格式、長短、文本類型驗(yàn)證等；后端驗(yàn)證需要將表單內(nèi)容傳入后臺數(shù)據(jù)庫進(jìn)行匹配，與數(shù)據(jù)不匹配將驗(yàn)證不通過，例如賬號不存在、密碼錯(cuò)誤等。

驗(yàn)證反饋需遵循就近原則，將錯(cuò)誤提示顯示在對應(yīng)的表單項(xiàng)附近，便于用戶及時(shí)修改。另外，不要將錯(cuò)誤信息直接清除，可將對應(yīng)信息或輸入框用顏色區(qū)分（標(biāo)紅），讓用戶在原有基礎(chǔ)上進(jìn)行修改則效率更高，試想一下，你一口氣輸了30個(gè)數(shù)字，因?yàn)殄e(cuò)了一個(gè)就得重復(fù)前面的操作次數(shù)是什么感受，請記住，把決定權(quán)永遠(yuǎn)留給用戶。

三、暫存及送出規(guī)則

1 暫存方式

暫存是指已完成的表單內(nèi)容還未提交至系統(tǒng)而需要離開當(dāng)前頁面，系統(tǒng)為避免用戶重復(fù)完成表單內(nèi)容而提供的預(yù)防措施。我們需要根據(jù)用戶的實(shí)際使用場景來確定是否需要加入暫時(shí)存儲(chǔ)功能，以給予不同的存儲(chǔ)方式。 

筆者曾經(jīng)碰到過這樣一個(gè)問題，在微信某公眾號中將一個(gè)超長表單完成一大半時(shí)，然后需切換到微信拿取幾個(gè)信息，必須要回到對話列表（當(dāng)時(shí)沒有浮窗功能），無奈只能返回查看、并祈禱已輸入的內(nèi)容能夠保留，結(jié)果...不出意外的給清空了。換個(gè)姿勢再來，于是下載了對應(yīng)的某APP去完成剛才已重復(fù)過的操作，當(dāng)在微信中拿取信息后再回到某APP時(shí)，發(fā)現(xiàn)已被結(jié)束進(jìn)程，×&%￥#@……，卸載，拜拜。

這些問題出現(xiàn)的原因有很多，可能是設(shè)備問題、也可能是自己的不良習(xí)慣，但作為設(shè)計(jì)師，雖然無法避免問題的出現(xiàn)，但需要給用戶提供解決問題的措施?？赡苡腥藭?huì)說，這些小問題不在設(shè)計(jì)范疇，是程序控制的，用戶習(xí)慣五花八門，即便提供預(yù)防措施也不一定能增加用戶的忠誠度，筆者想說明的是“解決問題不一定能留住用戶，但不解決問題一定留不住用戶”。

在部分較長的表單頁面增加暫存功能，可一定程度的提升使用體驗(yàn)，基于場景的不同，我們對手動(dòng)存儲(chǔ)、自動(dòng)存儲(chǔ)、詢問后存儲(chǔ)三種方式進(jìn)行解析，以確保選擇合理的暫存方式。

1）手動(dòng)存儲(chǔ)

手動(dòng)存儲(chǔ)并非信息提交，指的是用戶在完成表單中途有退出需求時(shí)所提供的暫存方案，其最常見的是頁面右上角或末尾提供的“草稿箱”功能，存儲(chǔ)后，下次可從草稿箱進(jìn)入接著編輯。多用于B端或工具型應(yīng)用，例如：我們需要發(fā)布投票、調(diào)查問卷、活動(dòng)等，可事先設(shè)定好條件規(guī)則暫時(shí)保存至草稿箱，待需要時(shí)從草稿箱編輯或發(fā)布。

2）自動(dòng)存儲(chǔ)

對于填寫內(nèi)容超多的表單頁面，數(shù)據(jù)自動(dòng)存儲(chǔ)非常有必要，當(dāng)遭遇系統(tǒng)崩潰、網(wǎng)絡(luò)故障、應(yīng)用閃退等突發(fā)事件時(shí)，連手動(dòng)存儲(chǔ)的機(jī)會(huì)都沒有，或許花費(fèi)了很長時(shí)間才完成的內(nèi)容又得重復(fù)一遍，真的很讓人崩潰。如線上申請信用卡、貸款等復(fù)雜表單要求填寫各種信息，可能需要來回獲取且分多次完成，這時(shí)加入自動(dòng)存儲(chǔ)功能，體驗(yàn)一定會(huì)更好（筆者每次編寫文章就是直接打開站酷草稿箱編輯，非常方便）。

3）離開時(shí)詢問

用戶未將內(nèi)容送出時(shí)返回/離開，會(huì)觸發(fā)系統(tǒng)彈窗提示“是否保留內(nèi)容？”，相當(dāng)于手動(dòng)存儲(chǔ)的強(qiáng)提醒。我們在微信朋友圈編輯好內(nèi)容、未發(fā)布離開時(shí)就有此提示。

2 送出方式

在表單頁面，會(huì)存在多種不同的操作按鈕，如上一步、下一步、存草稿箱、提交等。這里講到的送出是指通過下一步、保存、提交或確認(rèn)等行為召喚按鈕將表單內(nèi)容提交至系統(tǒng)，并根據(jù)表單頁內(nèi)容的重要性、將按鈕放在不同的操作位置，最常見的有固定頁面右上角、固定設(shè)備底部和表單底部三種方式。

1）固定頁面右上角

這是一種常見的提交形式，多用于內(nèi)容較少的頁面。當(dāng)表單較為復(fù)雜、且需要認(rèn)真填寫時(shí)，為了不影響用戶的注意力，也可能將送出按鈕放在右上角以弱化視覺吸引力。

2）固定設(shè)備底部

方便用戶隨時(shí)點(diǎn)擊，常用于內(nèi)容重要性不是很高的表單頁面，可能選填項(xiàng)多于必填項(xiàng)。這種設(shè)計(jì)方式有著較強(qiáng)的視覺吸引力，能降低用戶的跳出率，促使其快速將表單內(nèi)容送出。

3）表單底部

表單內(nèi)容較長且重要性較高，需要完成絕大部分的必填項(xiàng)，下拉到最后一個(gè)表單項(xiàng)時(shí)才能看到送出按鈕，能起到一定的引導(dǎo)作用。對于內(nèi)容較少的表單，按鈕最靠近內(nèi)容，用戶無需太大的視覺跳躍就能連貫地操作。

行為召喚按鈕的文案必須清晰簡潔，能讓用戶快速明確按鈕的功能和意圖，不要讓用戶思考。

四、如何提升表單完成率

1 用識別代替輸入

能用技術(shù)解決的問題就絕不留給用戶，很多時(shí)候，用識別代替輸入，能提升用戶完成表單的效率及使用體驗(yàn)。例如身份證掃描自動(dòng)識別錄入個(gè)人信息、銀行卡拍照識別卡號、系統(tǒng)自動(dòng)定位等，都能幫用戶省去很多不必要的操作。

善用技術(shù)的力量，把所謂的麻煩留給技術(shù)，得到的回報(bào)并不僅僅是用戶這一次的完成任務(wù)，可能是良性循環(huán)。

2 微交互讓操作過程更有趣

我相信，沒有誰會(huì)在無聊的時(shí)候喜歡填寫一些信息提交給產(chǎn)品（除非讓TA領(lǐng)錢），用戶是為了完成某項(xiàng)任務(wù)才被迫去完成表單的，所以在這個(gè)過程中適當(dāng)給表單加入微交互，可以讓交互過程變的更有趣，還能起到引導(dǎo)用戶的作用。

例如：B站用戶登錄輸入密碼時(shí)，頂部的卡通人物會(huì)用雙手捂住眼睛，給予用戶安全的心理暗示。

3 提前告知必備材料，讓用戶有心理準(zhǔn)備

完成表單的主觀意愿在于用戶時(shí)，一般對操作結(jié)果會(huì)有一定的心理預(yù)期，那么應(yīng)該在用戶正式填寫表單之前告知必備的材料。假如完成一個(gè)表單同時(shí)需要身份證、畢業(yè)證、銀行卡等資料，用戶總是被頻繁中斷、要去尋找這些資料，就會(huì)逐漸失去耐心，導(dǎo)致中途放棄的可能。提前告知用戶可讓其有一定的心理準(zhǔn)備，從而接受程度會(huì)更高。

4 提前告知獎(jiǎng)勵(lì)，讓用戶有所期待

完成表單的主觀意愿在于產(chǎn)品時(shí)（與上面相反），為了更好的掌控主動(dòng)權(quán)，部分潛在的風(fēng)險(xiǎn)、必備材料讓用戶過早知道，可能還沒開始就已經(jīng)放棄了。

例如：獲取線上理財(cái)產(chǎn)品額度時(shí)，沒有誰會(huì)事先告訴你，一定要用身份證實(shí)名認(rèn)證，即便這是必須的，產(chǎn)品也會(huì)先讓用戶提供一些重要性不是那么高的證明材料，然后再循序漸進(jìn)的引導(dǎo)至重要證件的信息輸入，當(dāng)表單內(nèi)容即將完成時(shí)，對后續(xù)的必備材料的接受度就會(huì)逐漸增高，畢竟誰都不喜歡在最后一步放棄。

雖然不能過于明確用戶的付出，但可在用戶開始填寫表單之前告知可能獲得特權(quán)、獎(jiǎng)勵(lì)等，讓用戶有所期待?；谌诵在吚⑷诵南蚶娜觞c(diǎn)，產(chǎn)品可以通過福利、獎(jiǎng)品的發(fā)放進(jìn)行利益引用，吸引用戶來完成以產(chǎn)品為主導(dǎo)的表單需求。

（PS：這就是為什么推薦辦理信用卡會(huì)帶上幾個(gè)拉桿箱、問卷調(diào)查會(huì)附帶周邊禮品贈(zèng)送的原因）

五、常見誤區(qū)及避坑指南

1 減少不必要的表單項(xiàng)目

PM總是認(rèn)為，每一個(gè)表單項(xiàng)都是必不可少的，殊不知每多一個(gè)選項(xiàng)，就會(huì)增加用戶的時(shí)間成本和操作難度，可能導(dǎo)致用戶流失。經(jīng)過分析后發(fā)現(xiàn)并不是所有的表單項(xiàng)都必不可少，雖然有時(shí)出于特殊情況，但需要盡量去做到減少表單項(xiàng)。

下圖所示，身份證為必填項(xiàng)，出生日期完全可以使用技術(shù)從身份證號中提?。皇謾C(jī)號、郵箱、微信、QQ讓用戶填寫不是目的，獲取聯(lián)系方式才是主要的，手機(jī)號碼（必備）、微信（主流）完全能滿足對用戶聯(lián)系方式的信息搜集，沒必要設(shè)計(jì)一個(gè)既復(fù)雜又長的表單讓用戶全部完成。

2 將相互關(guān)聯(lián)的表單項(xiàng)組合起來

將關(guān)聯(lián)性較強(qiáng)的信息組合起來形成一個(gè)表單項(xiàng)，不僅讓用戶輸入的連貫性更強(qiáng)、有效節(jié)約界面空間資源的占用，還能讓表單更有組織性、減少用戶的認(rèn)知負(fù)荷。例如時(shí)間/日期、區(qū)號/電話號碼、省/市/區(qū)...等

3 隱藏不相關(guān)的信息

如果用戶打開表單時(shí)的第一感覺就是內(nèi)容太多，會(huì)心生退意，隱藏不相關(guān)的信息、刪減無用的字段，通過合理控制表單的復(fù)雜性能減少用戶的心理負(fù)擔(dān)，必要的信息在用戶需要時(shí)出現(xiàn)，有效降低用戶完成時(shí)的無關(guān)干擾。

4 合理的利用分頁、分組

如果隱藏、刪減了很多內(nèi)容后，表單依舊龐大，切記不要把所有表單項(xiàng)一次性全展示給用戶，過長的表單感覺要花費(fèi)很多時(shí)間才能完成，會(huì)導(dǎo)致用戶不知所措、產(chǎn)生煩躁情緒而放棄填寫。這時(shí)就需要將所有的表單項(xiàng)進(jìn)行分組，有必要的話就分頁展示。

將超長表單分割多個(gè)小任務(wù)，分頁呈現(xiàn)并顯示操作進(jìn)度，會(huì)讓用戶對整個(gè)表單形成清晰的預(yù)期。細(xì)心的設(shè)計(jì)師會(huì)發(fā)現(xiàn)，很多應(yīng)用將登錄頁的手機(jī)號/驗(yàn)證碼輸入進(jìn)行了分頁，主要原因是點(diǎn)擊獲取驗(yàn)證碼之后需等待接收短信，而等待的空檔期會(huì)讓用戶產(chǎn)生效率緩慢的感覺，分頁后在跳轉(zhuǎn)頁面時(shí)能掩蓋小部分的等待時(shí)間，從某種意義上來講，分頁操作的流暢度會(huì)“高于”多信息同頁面等待完成。

將超長表單分組、分頁雖能提升體驗(yàn)，但不能過于細(xì)化、刻意增加操作步驟，否則可能惹惱用戶，遺留下來的將是一個(gè)全新的問題。

5 標(biāo)簽與輸入框視覺關(guān)聯(lián)

接近性原則告訴我們，元素之間的相對距離會(huì)影響用戶感知他們之間的關(guān)系，相互靠近的物體被認(rèn)為比相互距離較遠(yuǎn)的物體更有關(guān)聯(lián)性。

同一組表單元素應(yīng)該靠的更近，以體現(xiàn)內(nèi)容的關(guān)聯(lián)性，確保界面層級清晰，用戶不會(huì)產(chǎn)生疑惑。

6 字?jǐn)?shù)限制需實(shí)時(shí)提示

單個(gè)表單項(xiàng)輸入內(nèi)容較多，需要實(shí)時(shí)提醒剩余可輸入字?jǐn)?shù)，避免用戶一股腦的輸入完成后才發(fā)現(xiàn)內(nèi)容量已翻倍，就得重新組織語言重復(fù)輸入，很不友好。這種情況常出現(xiàn)在備注、介紹等較長表單項(xiàng)。另外，在自定義注冊賬號、設(shè)置密碼的較短表單項(xiàng)中也會(huì)碰到。

7 內(nèi)容長度與輸入?yún)^(qū)高度相適應(yīng)

重要的表單內(nèi)容，不管內(nèi)容多長都應(yīng)該完整顯示，例如個(gè)人簡介、詳細(xì)地址等表單項(xiàng)，如果僅僅因?yàn)閮?nèi)容過長就將后面的部分隱藏，可以說是非常不友好，用戶甚至無法對已輸入的信息進(jìn)行完整的預(yù)覽，不能確認(rèn)信息的對錯(cuò)。請記住，如果從一開始就不想讓用戶輸入太多信息，那就從程序上控制并給予對應(yīng)的提示。

表單輸入?yún)^(qū)的寬度雖然是固定的，但可以通過自適應(yīng)調(diào)整高度來確保信息內(nèi)容的完整性，保持良好的使用體驗(yàn)。

六、總結(jié)

以上是筆者對表單設(shè)計(jì)的一點(diǎn)經(jīng)驗(yàn)和總結(jié)，希望對大家有幫助。在設(shè)計(jì)表單時(shí)，需要用結(jié)構(gòu)化的思維去思考分析，視覺只是整個(gè)體驗(yàn)的一小部分，如果只關(guān)注表面，也很容易將優(yōu)秀的表單樣式復(fù)制出來，但卻無法理解背后的設(shè)計(jì)價(jià)值，畢竟設(shè)計(jì)都是先想好為什么，然后才開始做。

很多時(shí)候，可能有人會(huì)認(rèn)為一些很小的表單細(xì)節(jié)顯得微不足道，就算能起到作用也只是對1％、1‰甚至1?的用戶，杯水車薪。但是有沒有想過，一個(gè)應(yīng)用中可優(yōu)化的點(diǎn)可能會(huì)有100個(gè)、1000個(gè)...。雖然有時(shí)候做的不是很好，但只要能比上一次好，那就毫不猶豫的換掉它。