起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識實戰案例 | 談談產品改版之表單優化
本次產品改版涉及到了表單優化，好的表單設計可以提升用戶在錄入信息過程中的體驗。那么如何才能設計出更好更實用的表單呢？
表單結構：
表單定義
表單在產品中主要負責數據采集功能，表單是連接系統和用戶的一個重要的橋梁。
表單的構成
常見表單是由多個列表項構成的。而每一個列表項都有最基本的標題、標簽、占位符、錯誤信息提示、動作按鈕組成。
（1）標題
這個元素幫助用戶引導完成表單填寫的整個過程，尤其當你收集的數據不止有一個標題的時候，它特別有用。例如：姓名、職業、聯系方式。
（2）標簽
標簽告訴用戶在任何特定的輸入區域期望他們填寫什么內容。
（3）輸入框
用來收集用戶操作的信息，每個輸入域字段包含一類型信息。
（4）反饋信息提示
反饋信息提示給予用戶及時的錯誤反饋，提醒用戶。
（5）操作按鈕
是指填寫完表單各項內容后，所要進行的操作動作來結束當前操作流程或在流程之中或之后開啟新的功能操作。
（6）步驟條
對于內容過多的表單輸入組件，又有著明確的操作先后關系，可以選用分步驟，每屏僅展示該步驟下的表單輸入組件，同時校驗反饋也可分步進行。
體驗
1. 減少操作成本
金融產品中用戶會有需要添加銀行卡場景，銀行卡考號位數一般都在16~19位，用戶又不會去記銀行卡卡號，由于卡號過長，用戶會比較容易輸錯。通過銀行卡掃卡功能，自動添加銀行卡，減少了用戶的操作成本。
2. 減少思考成本
用戶申購中，在收銀臺頁面當用戶輸入的金額大于剩余可投金額時，投資金額自動匹配到剩余最大可投金額并toast提示用戶“已超出剩余可投金額”。
3. 減少操作誤差
實名驗證場景中用戶需要輸入身份證號碼，由于身份證號碼比較長，通過輸入框格式化在適當的位數后面加入空格，方便用戶快速校驗。
交互
1. 清晰的瀏覽線
改版前用戶其實需要瀏覽的更多的內容。標簽和需要輸入的空白字段是完全分開。當用戶的視覺在處理這些信息的時候，會自然地覺得信息量比較密集，密集的信息會使用戶感到焦慮。
改版后合理地組織標簽、操作按鈕和提示文字的排版，引導用戶的視線在同一方向流動，降低用戶的視覺負擔。
Before? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?After
改版前單頁面的內容可能非常多，需要用戶進行大量的填寫，一次性把所有需要填寫的內容展示增加用戶認知負荷，用戶會覺得他們需要在這個表單上花費大量的時間，有可能就放棄填寫了。
改版后將身份信息驗證頁面中的身份驗證和手機號驗證分開來。這可以減少用戶的認知負荷，如果屏幕上元素減少，只有唯一的選擇，用戶信息阻礙就降到最低。因此，用戶會專注于完成當前任務。
在處理錯誤的時候也就更容易，能降低用戶放棄的可能性。
Before：
After：
2. 即時校驗
改版前收銀臺場景下用戶輸入投資金額后，需要用戶自行提交才能校驗當前信息。反饋錯誤以彈窗的形式提現用戶。這樣的缺點校驗信息反饋不夠及時，提示方式也過于粗暴。
改版后當用戶輸入信息時給予實時校驗，減少了用戶的操作成本。用戶可以通過及時信息反饋去調整，讓輸入過程更佳高效。
Before? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?After
3. 提供幫助
在標簽和輸入框旁邊增加幫助文字，告訴用戶應該如何回答問題。
（1）自動即時幫助
顯示在對應輸入框附近，表示對應輸入框的提示。適用于幫助文字較少的局部說明。
（2）用戶激活的即時幫助
通常采用圖標、按鈕、圖片、文本鏈接提示人們有幫助可提供，例如問號圖標。適用于幫助文字較少的全局說明。
（3）用戶激活的區域幫助
始終顯示在某個特定區域而不是輸入框附近。適用于幫助文字非常多的全局說明。
3. 對齊方式
左對齊、右對齊、頂部對齊、行內對齊。
Matteo Penzo 于2006年發布的關于標簽放置的文章表明，如果標簽位于字段之上，表格的完成速度會更快。 如果您希望用戶盡快掃描表單，則頂部對齊的標簽是很好的。
左對齊，右對齊和頂部對齊的標簽（Image: UX Matters）
（1）左對齊標簽
采用左對齊標簽方式的表單是三者（左對齊、右對齊、頂對齊）之中所需瀏覽時間最長的。
- 優點：文字開頭按閱讀視線對齊，方便閱讀，節約垂直空間。
- 缺點：填寫速度慢，標簽長度和輸入框彈性小。
（2）右對齊標簽
當既要減少垂直空間，又要加快填寫速度的場景，使用右對齊。采用右對齊方式標簽的表單瀏覽時間，比頂部對齊標簽的表單的時間長，但比左對齊方式所需的瀏覽時間短。頁面高度有限的話有限公司推薦這種對齊方式。
- 優點：節約垂直空間。
- 缺點：降低可讀性，標簽長度和輸入框彈性小。
（3）頂級標簽
能讓用戶快速填寫表單，完成任務的場景使用頂部對齊。
- 優點：有最快的瀏覽和處理速度；標簽長度彈性大。
- 缺點：非常占垂直空間。
（4）懸浮標簽
浮動標簽節省了界面空間，使之看起來清晰簡潔，當用戶點擊輸入框并輸入內容之后，標簽位移到輸入框上方并通過色彩變化提示當前輸入狀態，這種表單交互做的更細膩，提升用戶體驗。
（5）方便用戶回顯檢查
表單填寫完成之后，用戶通常是會快速地檢查一遍其中內容的正確性，再提交的。用戶必須上下掃視輸入內容和對應標簽來匹配，確保填寫的字段是正確的。這個時候，輸入框的邊界會阻擋視線，即使借助相關元素靠近原則來設計的空間關系，在這個過程中也不會顯得那么清晰而明顯，這一切都會讓最后的檢查工作變得不那么快速。
Before? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?After
UI部分
1. 營造氛圍
在表單中植入品牌元素，如品牌顏色，會使整體界面設計風格協調，使得品牌基因深入人心。
2. 緩解頁面壓力
對于較為復雜的表單，合理有層次的組織信息，按照不同信息的類別、屬性和相關性進行區塊的劃分，利用線條、空間間隔、顏色進行視覺表現，給用戶喘息的機會。
3. 視覺層級
（1）必填項和選填項
必填項為空，則表單無法進行，因此必填項要比選填項的視覺效果強。
（2）主按鈕和次按鈕
主動作的視覺效果要比次動作的視覺效果明顯。
（3）錯誤信息和成功信息
錯誤信息的強調效果要比成功信息強，從而吸引用戶注意快速解決問題。
4. 輸入框長度
輸入框的長度可以暗示用戶正確填寫結果的長度。比如證件號的內容較多，所以輸入框要很長。驗證碼一般是四位數字，所以輸入框要短。
5. 字體
通過字號來區分層次重點，強調文字的字號要比輔助的文字要大一點，通過文字大小讓用戶分清重點。
總結
表單其實是連接系統和用戶的一個重要的橋梁。用戶在填寫表單的時候，總會因為各種原因而產生遲疑。
所以，作為我們要盡量簡化這個過程，關注每一點細微的變化，無論是標簽的顯示形式還是色彩，盡力增強它的可用性。表單體驗提升后會讓你的產品更加優秀。
本文由 @阿方 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
梁朝偉很秀