2022-4-2 周周
表單是UI設計中很常見的元素，不管是PC端還是移動端，表單幾乎是無法規避的UI控件，用戶可以通過表單完成線上購物、信息交換、文章訂閱等任務，使用范疇極為廣泛且牽扯到方方面面。
表單設計看似很簡單、實則很容易忽略用戶體驗，作為設計師，需要根據觸發條件、使用場景將各元素進行靈活的調整，才能確保用戶順暢的完成表單任務，因此，設計出一個可用性非常好的表單非常有必要。本文將針對表單的設計準則及用戶體驗進行了總結，希望能夠幫到大家。
一、認識表單
二、表單結構及元素設計細節
三、暫存及送出規則
四、如何提升表單完成率
五、常見誤區及避坑指南
六、總結
表單主要用來收集或呈現數據或特定字段等信息，屬于信息采集工具，可運用到不同的場景模塊中，例如常見的登錄注冊、調查問卷、個人信息頁面。如何確定當前頁面是不是表單頁，主要看該頁面是否發生信息采集而觸發用戶進行輸入、選擇、編輯等操作。
完成表單內容需經過三個階段，即交互前、交互中、交互后的三種狀態。
◇ 交互前：未發生任何操作，默認為初始化狀態；
◇ 交互中：光標插入即成為聚焦狀態，占位符消失，隨著內容的輸入，輸入框后面顯示一鍵清除圖標；
◇ 交互后：輸入完成光標離開，前端如驗證內容有誤會立即反饋，無誤則回到正常輸入后的狀態。
首先，在視覺上，移動端表單不管所輸入字段有多么少也不要在同一行添置多個表單，使用單列方式呈現，便于用戶瀏覽和理解。如果存在關聯性極強的前置條件可設計多列，如：輸入手機號碼之前要先選擇國際電話區號，可將這兩個字段納入同一個（雙列）表單項。
其次，表單內容需先易后難，避免用戶從一開始就產生逃避的想法，需根據內容的關聯性循序漸進的引導用戶完成。例如：添加地址，常見順序是姓名、電話、地區、詳細地址，如果一開始就讓用戶填寫詳細地址的話就不合理了（并不是不行），這等于在顛覆用戶的認知，就算完成了表單內容多少也會有些“上頭”。
最后，當同一頁面表單項過多時，需要根據類型、相似性或前后關系進行分組，以保持頁面的節奏感，讓用戶在最短的時間內對整個頁面內容有個大致的了解，從而能更輕松的完成表單。另外，將選填的內容盡量靠后，如果重要性較低，就直接去。
標簽的作用是告知用戶當前表單要輸入什么內容，清晰簡潔的表單能讓用戶更快速的理解。標簽的長短決定著其對齊方式，通常標簽字數在可控的情況下可使用左對齊；文本字數不可控但不是很多時可使用右對齊；字數不可控且標簽長短不一、相差巨大就使用頂對齊（例如英文，大多數不可控，參差不齊）。
占位符主要對標簽進行描述或補充內容格式，它并非內容，而是在用戶輸入內容之前幫助其解決常見問題及誤區，用以提升表單的完成效率。
部分設計師喜歡將占位符和標簽保持一致，實無必要，如果只是單純的為了視覺上統一，使用通用提示「請輸入/請選擇」也很不錯，或者在后面加上推薦性措辭，否則就直接留空。當光標插入時，盡量保留占位符，輸入內容后再消失，方便用戶在輸入內容之前依然可通過占位符得到幫助。
在這里需要說明一個誤區，避免直接將占位符作為標簽使用，如果只是針對登錄頁面，用戶還可以理解，因為其內容比較大眾化，賬號+密碼、額外再加個驗證碼，很容易理解。但其他類型的表單頁面就容易讓用戶產生疑惑，輸入內容時隨著占位符的消失，容易忘記表單的內容屬性，增加了用戶的理解成本和使用難度。
能讓用戶選擇的就不要讓其碼字輸入，例如：輸入手機號碼，可讓用戶跳轉到通訊錄自行選擇。盡量減少需輸入的內容，通過已知信息預判并幫助用戶自動錄入，如：手機號碼前要先輸入國際區號，若產品主要服務于國內用戶，系統自動錄入“+86”，可節省用戶的操作成本，降低表單的完成難度。
在表單輸入后，需在后面提供一鍵清除圖標“?”，因為系統提供的刪除功能只能單個文本清除。
需對輸入的內容設計規范格式，將同一組較長的內容加空格分段，便于瀏覽記憶。例如地址“廣東省 深圳市 龍華區”、手機號碼“138 888 88888”等。
鍵盤是內容輸入的必備組件，很多時候，產品會允許用戶在系統輸入法與第三方輸入法之間自由切換，基于常規操作似乎沒有什么問題，但站在用戶體驗角度，需要根據不同使用場景考慮是否需要開發內置鍵盤。
如驗證碼、部分密碼只需輸入純數字即可，這時調出內置的純數字鍵盤可減少無關元素（字母/符號）的干擾；出于安全考慮，涉及財產相關的密碼則需要打亂鍵盤的字母、數字順序，雖然會增加用戶的理解成本，但與財產的安全性相比，顯然在可接受范圍之內。
當表單項存在多個選項時，需根據選項的數量、長短設定不同的展示方式，如單/復選按鈕、彈窗、頁面跳轉等。
1）按鈕：當選項不超過6條且單條選項在4個字左右的，可設計成按鈕樣式供用戶選擇；
2）彈窗：選項較多時，使用操作欄彈窗展示；
3）跳轉頁面：若選項太多且不可控，使用跳轉頁面的方式則體驗更佳。
提示是用戶在操作前對完成表單項可能存在疑惑，當占位符不足以說清楚時，會在標簽后面增加一個提示圖標，用戶點擊后通過彈窗或新的頁面來查看詳細的解釋說明。
分為前端驗證和后端驗證，前端驗證無需服務器傳輸數據，程序已寫好的驗證規則，光標離開即可驗證（就像玩單機游戲），例如內容格式、長短、文本類型驗證等；后端驗證需要將表單內容傳入后臺數據庫進行匹配，與數據不匹配將驗證不通過，例如賬號不存在、密碼錯誤等。
驗證反饋需遵循就近原則，將錯誤提示顯示在對應的表單項附近，便于用戶及時修改。另外，不要將錯誤信息直接清除，可將對應信息或輸入框用顏色區分（標紅），讓用戶在原有基礎上進行修改則效率更高，試想一下，你一口氣輸了30個數字，因為錯了一個就得重復前面的操作次數是什么感受，請記住，把決定權永遠留給用戶。
暫存是指已完成的表單內容還未提交至系統而需要離開當前頁面，系統為避免用戶重復完成表單內容而提供的預防措施。我們需要根據用戶的實際使用場景來確定是否需要加入暫時存儲功能，以給予不同的存儲方式。
筆者曾經碰到過這樣一個問題，在微信某公眾號中將一個超長表單完成一大半時，然后需切換到微信拿取幾個信息，必須要回到對話列表（當時沒有浮窗功能），無奈只能返回查看、并祈禱已輸入的內容能夠保留，結果...不出意外的給清空了。換個姿勢再來，于是下載了對應的某APP去完成剛才已重復過的操作，當在微信中拿取信息后再回到某APP時，發現已被結束進程，×&%￥#@……，卸載，拜拜。
這些問題出現的原因有很多，可能是設備問題、也可能是自己的不良習慣，但作為設計師，雖然無法避免問題的出現，但需要給用戶提供解決問題的措施。可能有人會說，這些小問題不在設計范疇，是程序控制的，用戶習慣五花八門，即便提供預防措施也不一定能增加用戶的忠誠度，筆者想說明的是“解決問題不一定能留住用戶，但不解決問題一定留不住用戶”。
在部分較長的表單頁面增加暫存功能，可一定程度的提升使用體驗，基于場景的不同，我們對手動存儲、自動存儲、詢問后存儲三種方式進行解析，以確保選擇合理的暫存方式。
1）手動存儲
手動存儲并非信息提交，指的是用戶在完成表單中途有退出需求時所提供的暫存方案，其最常見的是頁面右上角或末尾提供的“草稿箱”功能，存儲后，下次可從草稿箱進入接著編輯。多用于B端或工具型應用，例如：我們需要發布投票、調查問卷、活動等，可事先設定好條件規則暫時保存至草稿箱，待需要時從草稿箱編輯或發布。
2）自動存儲
對于填寫內容超多的表單頁面，數據自動存儲非常有必要，當遭遇系統崩潰、網絡故障、應用閃退等突發事件時，連手動存儲的機會都沒有，或許花費了很長時間才完成的內容又得重復一遍，真的很讓人崩潰。如線上申請信用卡、貸款等復雜表單要求填寫各種信息，可能需要來回獲取且分多次完成，這時加入自動存儲功能，體驗一定會更好（筆者每次編寫文章就是直接打開站酷草稿箱編輯，非常方便）。
3）離開時詢問
用戶未將內容送出時返回/離開，會觸發系統彈窗提示“是否保留內容？”，相當于手動存儲的強提醒。我們在微信朋友圈編輯好內容、未發布離開時就有此提示。
在表單頁面，會存在多種不同的操作按鈕，如上一步、下一步、存草稿箱、提交等。這里講到的送出是指通過下一步、保存、提交或確認等行為召喚按鈕將表單內容提交至系統，并根據表單頁內容的重要性、將按鈕放在不同的操作位置，最常見的有固定頁面右上角、固定設備底部和表單底部三種方式。
1）固定頁面右上角
這是一種常見的提交形式，多用于內容較少的頁面。當表單較為復雜、且需要認真填寫時，為了不影響用戶的注意力，也可能將送出按鈕放在右上角以弱化視覺吸引力。
2）固定設備底部
方便用戶隨時點擊，常用于內容重要性不是很高的表單頁面，可能選填項多于必填項。這種設計方式有著較強的視覺吸引力，能降低用戶的跳出率，促使其快速將表單內容送出。
3）表單底部
表單內容較長且重要性較高，需要完成絕大部分的必填項，下拉到最后一個表單項時才能看到送出按鈕，能起到一定的引導作用。對于內容較少的表單，按鈕最靠近內容，用戶無需太大的視覺跳躍就能連貫地操作。
行為召喚按鈕的文案必須清晰簡潔，能讓用戶快速明確按鈕的功能和意圖，不要讓用戶思考。
能用技術解決的問題就絕不留給用戶，很多時候，用識別代替輸入，能提升用戶完成表單的效率及使用體驗。例如身份證掃描自動識別錄入個人信息、銀行卡拍照識別卡號、系統自動定位等，都能幫用戶省去很多不必要的操作。
善用技術的力量，把所謂的麻煩留給技術，得到的回報并不僅僅是用戶這一次的完成任務，可能是良性循環。
我相信，沒有誰會在無聊的時候喜歡填寫一些信息提交給產品（除非讓TA領錢），用戶是為了完成某項任務才被迫去完成表單的，所以在這個過程中適當給表單加入微交互，可以讓交互過程變的更有趣，還能起到引導用戶的作用。
例如：B站用戶登錄輸入密碼時，頂部的卡通人物會用雙手捂住眼睛，給予用戶安全的心理暗示。
完成表單的主觀意愿在于用戶時，一般對操作結果會有一定的心理預期，那么應該在用戶正式填寫表單之前告知必備的材料。假如完成一個表單同時需要身份證、畢業證、銀行卡等資料，用戶總是被頻繁中斷、要去尋找這些資料，就會逐漸失去耐心，導致中途放棄的可能。提前告知用戶可讓其有一定的心理準備，從而接受程度會更高。
完成表單的主觀意愿在于產品時（與上面相反），為了更好的掌控主動權，部分潛在的風險、必備材料讓用戶過早知道，可能還沒開始就已經放棄了。
例如：獲取線上理財產品額度時，沒有誰會事先告訴你，一定要用身份證實名認證，即便這是必須的，產品也會先讓用戶提供一些重要性不是那么高的證明材料，然后再循序漸進的引導至重要證件的信息輸入，當表單內容即將完成時，對后續的必備材料的接受度就會逐漸增高，畢竟誰都不喜歡在最后一步放棄。
雖然不能過于明確用戶的付出，但可在用戶開始填寫表單之前告知可能獲得特權、獎勵等，讓用戶有所期待。基于人性趨利、人心向利的弱點，產品可以通過福利、獎品的發放進行利益引用，吸引用戶來完成以產品為主導的表單需求。
（PS：這就是為什么推薦辦理信用卡會帶上幾個拉桿箱、問卷調查會附帶周邊禮品贈送的原因）
PM總是認為，每一個表單項都是必不可少的，殊不知每多一個選項，就會增加用戶的時間成本和操作難度，可能導致用戶流失。經過分析后發現并不是所有的表單項都必不可少，雖然有時出于特殊情況，但需要盡量去做到減少表單項。
下圖所示，身份證為必填項，出生日期完全可以使用技術從身份證號中提取；手機號、郵箱、微信、QQ讓用戶填寫不是目的，獲取聯系方式才是主要的，手機號碼（必備）、微信（主流）完全能滿足對用戶聯系方式的信息搜集，沒必要設計一個既復雜又長的表單讓用戶全部完成。
將關聯性較強的信息組合起來形成一個表單項，不僅讓用戶輸入的連貫性更強、有效節約界面空間資源的占用，還能讓表單更有組織性、減少用戶的認知負荷。例如時間/日期、區號/電話號碼、省/市/區...等
如果用戶打開表單時的第一感覺就是內容太多，會心生退意，隱藏不相關的信息、刪減無用的字段，通過合理控制表單的復雜性能減少用戶的心理負擔，必要的信息在用戶需要時出現，有效降低用戶完成時的無關干擾。
如果隱藏、刪減了很多內容后，表單依舊龐大，切記不要把所有表單項一次性全展示給用戶，過長的表單感覺要花費很多時間才能完成，會導致用戶不知所措、產生煩躁情緒而放棄填寫。這時就需要將所有的表單項進行分組，有必要的話就分頁展示。
將超長表單分割多個小任務，分頁呈現并顯示操作進度，會讓用戶對整個表單形成清晰的預期。細心的設計師會發現，很多應用將登錄頁的手機號/驗證碼輸入進行了分頁，主要原因是點擊獲取驗證碼之后需等待接收短信，而等待的空檔期會讓用戶產生效率緩慢的感覺，分頁后在跳轉頁面時能掩蓋小部分的等待時間，從某種意義上來講，分頁操作的流暢度會“高于”多信息同頁面等待完成。
將超長表單分組、分頁雖能提升體驗，但不能過于細化、刻意增加操作步驟，否則可能惹惱用戶，遺留下來的將是一個全新的問題。
接近性原則告訴我們，元素之間的相對距離會影響用戶感知他們之間的關系，相互靠近的物體被認為比相互距離較遠的物體更有關聯性。
同一組表單元素應該靠的更近，以體現內容的關聯性，確保界面層級清晰，用戶不會產生疑惑。
單個表單項輸入內容較多，需要實時提醒剩余可輸入字數，避免用戶一股腦的輸入完成后才發現內容量已翻倍，就得重新組織語言重復輸入，很不友好。這種情況常出現在備注、介紹等較長表單項。另外，在自定義注冊賬號、設置密碼的較短表單項中也會碰到。
重要的表單內容，不管內容多長都應該完整顯示，例如個人簡介、詳細地址等表單項，如果僅僅因為內容過長就將后面的部分隱藏，可以說是非常不友好，用戶甚至無法對已輸入的信息進行完整的預覽，不能確認信息的對錯。請記住，如果從一開始就不想讓用戶輸入太多信息，那就從程序上控制并給予對應的提示。
表單輸入區的寬度雖然是固定的，但可以通過自適應調整高度來確保信息內容的完整性，保持良好的使用體驗。
以上是筆者對表單設計的一點經驗和總結，希望對大家有幫助。在設計表單時，需要用結構化的思維去思考分析，視覺只是整個體驗的一小部分，如果只關注表面，也很容易將優秀的表單樣式復制出來，但卻無法理解背后的設計價值，畢竟設計都是先想好為什么，然后才開始做。
很多時候，可能有人會認為一些很小的表單細節顯得微不足道，就算能起到作用也只是對1％、1‰甚至1?的用戶，杯水車薪。但是有沒有想過，一個應用中可優化的點可能會有100個、1000個...。雖然有時候做的不是很好，但只要能比上一次好，那就毫不猶豫的換掉它。
文章來源：站酷 作者：大漠飛鷹CYSJ
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務