編輯導語：在這個互聯(lián)網時代，表單是每個APP中必不可少的一部分，有時我們也經常會接觸一些不得不填的表單，整體設計比較簡單，視覺比較好，但是還有一些真的就是慘不忍睹，體驗感極差。那怎樣更好地打造用戶體驗的表單呢，本文就來為大家聊一聊。

在大家的記憶中，填過既復雜又不易操作的表單是什么樣的？是結構多變、耗時耗力，還是內容巨多、填錯一項就要全部重來？很多時候，當我們遇到體驗超級不好的表單設計、但又不得不用它完成任務時，那就只能機械化的對著這些字段進行不情愿的填寫。

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

表單作為信息收集的重要環(huán)節(jié)，對于用戶和產品來說至關重要，其看似簡單、實則很容易忽略用戶體驗，作為設計師，需要根據觸發(fā)條件、使用場景將文本信息、輸入框、按鈕等元素進行靈活的調整，以確保用戶順暢的完成表單任務，因此，設計出一個可用性非常好的表單是提升用戶完成效率的關鍵。

本篇文章將針對表單最常見的設計準則及用戶體驗做出總結，希望能夠拋磚引玉，對表單設計有一個更全面的認識。

一、認識UI中的表單

1. 什么是表單

表單主要用來收集或呈現(xiàn)數(shù)據、信息或特定字段，其本身不具備屬性，只是一個數(shù)據采集工具，需要靈活的運用到不同的場景模塊中才能發(fā)揮其真正作用，例如常見的登錄注冊、調查問卷、個人信息頁面等。如何確定當前頁面是不是表單頁，主要看該頁面是否發(fā)生數(shù)據采集而觸發(fā)用戶輸入、選擇、編輯等操作，從而對部分內容進行控制。

2. 表單的構成（視覺角度）

除去系統(tǒng)隱藏的交互及程序規(guī)則，常用且可見的表單元素有標簽、輸入區(qū)、占位符、圖標、按鈕這幾部分。

• 標簽：明確該項應輸入/選擇什么內容，部分表單沒有標簽，例如登錄頁，直接以圖標、占位符提示錄入的內容；
• 輸入區(qū)：與用戶發(fā)生交互的區(qū)域，通常用輸入框、分隔線、選項框、開關…等常見元素提示；
• 占位符：用于描述表單內容的詳細說明、錄入規(guī)則、注意事項等，光標插入或有內容錄入時占位符消失；
• 圖標：帶有圖標的表單頁面，通常存在較復雜的次級任務，伴隨下拉框、彈窗或頁面跳轉來完成前置條件；
• 按鈕：表單中的任務按鈕（非保存/提交）與單選作用相同，用于選項條件較少的表單內容。

3. 表單的各種狀態(tài)

表單基本上需經過三個階段，即交互前、交互中、交互后的三個狀態(tài)。

• 交互前：在用戶未發(fā)生任何操作時，表單為默認的初始化狀態(tài)；
• 交互中：光標插入即成為聚焦狀態(tài)，占位符消失，隨著內容的輸入，輸入框后面顯示一鍵清除圖標；
• 交互后：輸入完成光標離開，前端如驗證內容有誤會立即反饋，無誤則回到正常輸入后的狀。

二、表單元素拆解及設計細節(jié)

1. 結構/框架

首先，在視覺上，移動端表單不管所輸入字段有多么的少也不要在同一行添置多個表單，最好的版式就是單列展示，便于用戶瀏覽和理解，盡量避免多列展示，除非存在關聯(lián)性極強的前置條件，如：輸入手機號碼之前要先選擇國際電話區(qū)號，可將區(qū)號和手機號碼歸納為同一表單項。

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

最后，當同一個頁面的表單內容過多時，需要根據類型、相似性或前后關系進行分組，保持頁面的節(jié)奏感，讓用戶在最短的時間內對整個頁面內容有個大致的了解，從而能更輕松的完成表單。另外，將選填的內容盡量靠后，若其重要性較低，還不如直接去掉，如無必要、勿增實體。

2. 標簽

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

3. 占位符

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

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

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

4. 輸入

光標插入即開始，能讓用戶選擇的就不要讓其碼字輸入，例如：輸入手機號碼，可提供通訊錄入口讓用戶自行選擇。盡量減少需輸入的內容，通過已知信息預判內容并幫助用戶自動錄入，如：手機號碼前要先輸入國際區(qū)號，若產品主要服務于國內用戶，系統(tǒng)自動錄入“ 86”，可節(jié)省大部分用戶的操作成本，降低表單的完成難度。

表單內存在內容后，需在后面提供一鍵清除圖標“?”，因為系統(tǒng)提供的刪除功能只能單個文本清除。

需對輸入的內容設計規(guī)范格式，例如地址“廣東省 深圳市 龍華區(qū)”、手機號碼“138 888 88888”，將同一組較長的數(shù)字間隔區(qū)分，更便于瀏覽記憶。

5. 鍵盤

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

某些驗證或密碼操作只需輸入純數(shù)字，這時調出內置的純數(shù)字鍵盤可減少無關元素（字母/符號）的干擾；出于安全考慮，涉及財產相關的密碼則需要打亂鍵盤數(shù)字/字母順序，雖然會增加用戶的理解成本，但與財產的安全性相比，顯然在可接受范圍之內。

6. 選項

輸入的表單內容由系統(tǒng)設定并超過一條時，即會以選項的方式供用戶選擇，選項需根據數(shù)量的多少及單項的長短、設定不同的展示方式，如按鈕、彈窗、頁面跳轉等。

• 按鈕：當選項不超過6條且單條選項在4個字左右的，可設計成按鈕樣式供用戶選擇；
• 彈窗：選項較多時，使用操作欄彈窗展示；
• 跳轉頁面：若選項太多且不可控，使用跳轉頁面的方式則體驗更佳。

7. 提示

提示是用戶在操作前對內容輸入可能存在的疑惑或誤區(qū)，占位符不足以說清楚時，可在標簽后面增加一個圖標，用戶點擊后通過彈窗或新的頁面查看詳細的解釋說明。

8. 數(shù)據驗證

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

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

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

1. 暫存方式

暫存是指用戶未將輸入的內容送出（提交給系統(tǒng)）而需要離開當前頁面，系統(tǒng)為避免用戶再次輸入已填寫過的內容所提供的預防措施，能防止用戶因重復輸入而產生放棄的想法。我們需要根據用戶的實際使用場景來確定是否需要加入暫時存儲功能，以及不同的存儲方式。

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

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

在特定表單頁面增加暫時存儲功能，可一定程度的提升使用體驗，基于場景的不同，我們就手動存儲、自動存儲、詢問后存儲三種方式進行解析，以確保合理的使用暫存方式。

1）手動存儲

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

2）自動存儲

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

3）離開時詢問

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

2. 送出方式

在表單頁面，可能會設置各種不同的操作按鈕，例如上一步、下一步、存草稿箱、提交等。除非特定情況，一般不會提供上一步操作，即便提供也會弱化，因為上一步意味著用戶有跳出的可能，且左上角的返回就可以替代上一步操作滿足用戶的基本需求。草稿箱屬暫存功能，在前面有講到過。

這里講到的送出是指通過下一步、保存、提交或確認等行為召喚按鈕來將表單內容提交至系統(tǒng)，且根據不同內容的重要性給按鈕賦予不同的位置，所起到的作用也有所不同，最常見的有固定頁面右上角、固定設備底部和表單底部三種方式。

1）固定頁面右上角

這是一種常見的文字按鈕形式，多用于表單內容較少的頁面。表單復雜重要況且需要認證填寫時，也可能為了不影響用戶的注意力，也可能放在右上角以弱化送出按鈕的視覺吸引力。

2）固定設備底部

方便用戶隨時點擊，常用于內容重要性不是很高的表單頁面，通常選填項多余必填項。這種設計方式有著較強的視覺吸引力，能降低用戶的跳出率，促使其快速將表單內容送出。

3）表單底部

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

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

四、提升表單完成率的小技巧

1. 識別比輸入更快

技術的發(fā)展就是靠人們不斷利用、不斷優(yōu)化才得到了更快速的進步，要善用技術的力量，但凡能給用戶提供方便的，就絕不讓用戶頻繁的操作，把所謂的麻煩留給技術，得到的回報并不僅僅是用戶這一次的完成任務，可能是良性循環(huán)。

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

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

我相信沒有誰在無聊的時候會喜歡填寫一些信息提交給他人（除非讓TA領錢），用戶是為了完成某項任務才被迫去完成表單的，所以在這個過程中多少會顯得枯燥。適當給表單加入微交互，可以讓整個交互過程更有趣，還能起到引導用戶的作用。例如：用戶初次進入部分應用設置個人偏好時，系統(tǒng)會以單個問題的方式讓用戶回答，再加上絲滑的跳轉交互動效，給人一種很順暢的感覺；B站用戶登錄輸入密碼時，頂部的卡通人物會用雙手捂住眼睛，給予用戶安全的心理暗示。

3. 提前告知必備材料，讓用戶有心理準備

完成表單的主觀意愿在于用戶時，基本是對于結果有一定的心理預期，那么應該在用戶正式填寫表單之前告知必備的材料。假如完成一個表單同時需要身份證、畢業(yè)證、銀行卡等，如果用戶頻繁被中斷去尋找這些資料，就會逐漸失去耐心，導致中途放棄。提前告知用戶可讓其有一定的心理準備，從而接受程度會較高。

4. 提前告知獎勵，讓用戶有所期待

完成表單的主觀意愿在于產品時（與上面相反），為了更好的掌控主動權，部分可能的潛在風險、或必備材料沒必要讓用戶過于理解，否則用戶還沒開始就已經放棄了。

例如：獲取線上理財產品額度時，沒有誰會事先告訴你，一定要用身份證實名認證，即便這是必須的，產品也會先讓用戶提供一些重要性不是那么高的證明材料，然后再循序漸進的引導至重要證件的信息錄入，當用戶即將要完成表單時，對于后續(xù)的必備要求接受度就會逐漸增高，畢竟沒有誰喜歡在最后一步放棄。再比如申請信用卡，沒有哪個銀行會用非常突出的提示你需要查你的征信，即便有弱化的提示也多半會被忽略。

雖然不能過于明確用戶的付出，但可在用戶開始填寫表單之前告知可能獲得特權、獎勵等，讓用戶有所期待?；谌诵在吚?、人心向利的弱點，產品可以通過福利、獎品的發(fā)放進行利益引用，吸引用戶來完成以產品為主導的表單需求。

（PS：別杠，如果用戶來反駁我接受；如果你是設計師，利用產品現(xiàn)有的利益做誘餌屢試不爽。這就是為什么推薦辦理信用卡會帶上幾個拉桿箱、問卷調查會附上周邊禮品的原因，不管成功與否）

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

1. 減少不必要的表單項目

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

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

2. 將相關聯(lián)的表單項組合起來

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

3. 隱藏不相關的信息

如果用戶打開表單時的第一感覺就是內容太多，就可能心生退意，應該隱藏不相關的信息、刪減無用的字段（信息確實過多就分組、分頁，后面會講）。合理控制表達的復雜性可減少用戶的心理負擔，必要的信息在用戶需要時出現(xiàn)，有效降低用戶在完成其他表單項時的干擾。

4. 合理的利用分頁、分組

當我們隱藏、刪減了很多內容后，表單依舊龐大，切記不要把所有內容一次性全都展示給于用戶，過長的表單需要花費較多的時間才能完成，可能導致用戶不知所措、產生煩躁情緒從而放棄填寫，這時就需要將所有的表單項進行分組，有必要時還需分頁展示。

將超長表單任務根據特定的邏輯、屬性分割多個小任務，分頁展示且同時顯示操作進度，會讓用戶覺得更容易填寫、操作流程更連貫順暢，對整個表單形成清晰的預期，這樣有利于用戶專注于當前選項。

細心的設計師會發(fā)現(xiàn)，目前有部分應用將登錄頁的手機號/驗證碼輸入進行了分頁，主要原因是點擊獲取驗證碼之后需要等待接收短信，而等待的空檔期會讓用戶產生效率緩慢的感覺，分頁后在跳轉頁面時能掩蓋小部分的等待時間，從某種意義上來講，分頁操作的流暢度會“高于”多信息同頁面等待完成（此論點各執(zhí)一詞、未被證實）。

將超長表單內容分組、分頁固然能提升體驗，但不能過于細化、刻意增加操作步驟，否則可能會惹惱用戶，遺留下來的將是一個全新的問題。

5. 標簽與輸入框視覺的視覺關聯(lián)

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

按照原理，同一組表單元素應該靠的更近，以體現(xiàn)內容的關聯(lián)性，確保界面層級清晰，用戶不會產生疑惑。

6. 字數(shù)限制需實時提示

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

7. 內容長度與輸入區(qū)高度相適應

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

表單輸入區(qū)的寬度雖然是固定的，但可以通過自適應調整高度來確保信息內容的完整性，保持良好的使用體驗。

六、總結

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

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

#專欄作家#

大漠飛鷹；公眾號：能量眼球，人人都是產品經理專欄作家。致力于產品需求的驅動、產品體驗的挖掘，利用設計的手段為受眾用戶帶來更好的體驗，即好看、好用。

本文原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載

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