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

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

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

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

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

一、認識UI中的表單

1. 什麼是表單

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

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

除去系統隐藏的交互及程序規則，常用且可見的表單元素有标簽、輸入區、占位符、圖标、按鈕這幾部分。

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

3. 表單的各種狀态

表單基本上需經過三個階段，即交互前、交互中、交互後的三個狀态。

• 交互前：在用戶未發生任何操作時，表單為默認的初始化狀态；
• 交互中：光标插入即成為聚焦狀态，占位符消失，随着内容的輸入，輸入框後面顯示一鍵清除圖标；
• 交互後：輸入完成光标離開，前端如驗證内容有誤會立即反饋，無誤則回到正常輸入後的狀。

二、表單元素拆解及設計細節

1. 結構/框架

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

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

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

2. 标簽

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

3. 占位符

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

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

在這裡需要說明一個誤區，避免直接将占位符作為标簽使用，如果隻是針對登錄頁面，用戶還可以理解，因為其内容比較大衆化，賬号 密碼、額外再加個驗證碼，很容易理解。但其他類型的表單頁面就容易讓用戶産生疑惑，輸入内容時随着占位符的消失，容易忘記表單的内容屬性，增加了用戶的理解成本和使用難度。

4. 輸入

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

表單内存在内容後，需在後面提供一鍵清除圖标“ⓧ”，因為系統提供的删除功能隻能單個文本清除。

需對輸入的内容設計規範格式，例如地址“廣東省 深圳市 龍華區”、手機号碼“138 888 88888”，将同一組較長的數字間隔區分，更便于浏覽記憶。

5. 鍵盤

鍵盤是内容輸入的必備組件，很多時候，産品會允許用戶在系統輸入法與第三方輸入法之間自由切換，基于常規操作似乎沒有什麼問題，但站在用戶體驗角度，根據不同使用場景确有開發内置鍵盤的必要。

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

6. 選項

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

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

7. 提示

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

8. 數據驗證

分為前端驗證和後端驗證，前端驗證無需服務器傳輸數據，程序已寫好的驗證規則，光标離開即可驗證（就像玩單機遊戲），例如内容格式、長短、文本類型驗證等；後端驗證需要将表單内容傳入後台數據庫進行匹配，與數據不匹配将驗證不通過，例如賬号不存在、密碼錯誤等。

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

三、暫存及送出規則

1. 暫存方式

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

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

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

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

1）手動存儲

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

2）自動存儲

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

3）離開時詢問

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

2. 送出方式

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

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

1）固定頁面右上角

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

2）固定設備底部

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

3）表單底部

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

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

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

1. 識别比輸入更快

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

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

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

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

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

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

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

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

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

雖然不能過于明确用戶的付出，但可在用戶開始填寫表單之前告知可能獲得特權、獎勵等，讓用戶有所期待。基于人性趨利、人心向利的弱點，産品可以通過福利、獎品的發放進行利益引用，吸引用戶來完成以産品為主導的表單需求。

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

五、常見誤區及避坑指南

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

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

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

2. 将相關聯的表單項組合起來

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

3. 隐藏不相關的信息

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

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

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

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

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

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

5. 标簽與輸入框視覺的視覺關聯

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

按照原理，同一組表單元素應該靠的更近，以體現内容的關聯性，确保界面層級清晰，用戶不會産生疑惑。

6. 字數限制需實時提示

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

7. 内容長度與輸入區高度相适應

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

表單輸入區的寬度雖然是固定的，但可以通過自适應調整高度來确保信息内容的完整性，保持良好的使用體驗。

六、總結

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

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

#專欄作家#

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

本文原創發布于人人都是産品經理，未經許可，禁止轉載

題圖來自Unsplash，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部