編輯導語：在To B和To C的移動端設計中，表單填寫是十分常見的工作之一，本篇文章作者結合自身工作經驗分享了幾種移動端表單設計的實用原則，可以有效解決表單填寫過程中出現的問題，一起來學習一下吧，希望對你有幫助。

不論是To B 還是To C 的移動端設計中，都會遇到一些表單填寫和上傳證件信息的情況。面對移動端要手動填寫的表單，用戶通常期待有高效的解決辦法可以立即完成填寫任務。

本文為你總結出了幾種移動端表單設計的實用原則，可以有效解決表單不夠友好、用戶填寫錯誤、費時費力的問題，希望對你有幫助。

一、信息内容層級化

1. 表單結構分層

從表單結構層面來看，内容過長的表單，信息可以分步驟、分頁面處理。

【使用條件】

• 表單内容過長，用戶填寫有壓力；
• 操作步驟較多，需要給用戶明确的步驟提示；
• 中途需要多次跳轉，接入第三方服務的表單。

【案例分析】

做企業認證時，由于需要填寫的項目較多，步驟繁雜，因此很多産品會采用分步驟的形式，提示用戶當前進度。

2. 頁面内容分層

每個頁面的信息内容呈現，有層級，有重點。

【使用條件】

• 表單填寫内容較多；
• 頁面内文字内容較多；
• 産品對于用戶填寫的内容有傾向（如對平台來說更有意義、更希望用戶填寫的信息）。

【案例分析】

大衆點評在設置用戶信息時，雖然要填寫的内容都是“設置”，但是重點需要設置的信息使用了鍊接顔色處理，做了強調。

二、減少用戶輸入

1. 以選擇代替輸入

如果用戶可以做選項時，就不要使用輸入，可以充分利用移動設備的性能，比如 GPRS 定位、通訊錄等，合理調用第三方或系統信息。

【使用條件】

• 填寫的内容邊界較為模糊，詞語不确定性較高；
• 選項數量控制在 3-5 個之間；
• 可以調用第三方或系統信息。

【案例分析】

案例一：知乎 App 博主認證 和 愛康國賓 App 個人信息都使用了部分選項替代填寫：

案例二：淘寶 App 可以調動系統定位，并提供幾個最有可能的選項，讓用戶選擇最佳定位。

2. 提供默認選項，替用戶做選擇

選取最大概率事件作為默認選項，減少用戶的手動調整

【使用條件】

• 系統能夠确定出符合用戶的較大概率選項；
• 選項數量控制在 3-5 個之間。

【案例分析】

螞蟻鍊實人認證在上傳證件時會根據用戶所在國家和地區，幫助用戶默認選擇概率最大的選項，不需要用戶自己操作。

三、定義鍵盤類型

根據表單輸入内容的不同，調用出系統不同的鍵盤類型。

【使用條件】

填寫的内容有明确的輸入語言要求。

【案例分析】

航旅縱橫在航班查詢的時候，由于航班号都是大寫字母和數字的組合，所以鍵盤會默認調用出隻有數字和字母的輸入法，同時默認開啟大寫形式。螞蟻鍊實人認證在用戶手動填寫身份證時也同理。

四、避免重要信息被遮擋

需要避免輸入項被鍵盤遮擋，也要避免将重要的輸入提示作為占位符，不要在用戶填寫時被輸入的内容遮擋。

【使用條件】

• 表單的填寫位置剛好會被彈出的鍵盤擋住；
• 輸入提示很重要，需要用戶在輸入時随時注意；
• 輸入提示很長，用戶短時間内記不住。

【案例分析】

大衆點評在寫評論時，一些可以激勵用戶寫點評的提示性文字，會在用戶輸入時始終存在。

五、實時校驗

當輸入需要被判斷和檢驗的信息時，系統最好可以針對信息做實時校驗，避免用戶一直到最後提交表單時才發現填寫問題。

【使用條件】

• 輸入的信息需要判斷，并會影響最終的表單填寫通過率；
• 輸入内容的質量需要用戶知曉，如密碼的強度。

【案例分析】

證件号碼輸入錯誤時會給予相應的提示。

作者：元堯；長弓小子。

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

題圖來自 Unsplash，基于CC0協議。

,

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

查看全部