不論是 toB 還是 toC 的移動端設(shè)計中，都會遇到一些表單填寫和上傳證件信息的情況。面對移動端要手動填寫的表單，用戶通常期待有高效的解決辦法可以立即完成填寫任務(wù)。本文為你總結(jié)出了幾種移動端表單設(shè)計的實用原則，可以有效解決表單不夠友好、用戶填寫錯誤、費時費力的問題，希望對你有幫助。

一. 信息內(nèi)容層級化——信息分層次、分步驟、分頁面呈現(xiàn)

1 . 表單結(jié)構(gòu)分層

從表單結(jié)構(gòu)層面來看，內(nèi)容過長的表單，信息可以分步驟、分頁面處理。

使用條件

• 表單內(nèi)容過長，用戶填寫有壓力
• 操作步驟較多，需要給用戶明確的步驟提示
• 中途需要多次跳轉(zhuǎn)，接入第三方服務(wù)的表單

案例分析

做企業(yè)認(rèn)證時，由于需要填寫的項目較多，步驟繁雜，因此很多產(chǎn)品會采用分步驟的形式，提示用戶當(dāng)前進(jìn)度。

2 . 頁面內(nèi)容分層

每個頁面的信息內(nèi)容呈現(xiàn)，有層級，有重點

使用條件

• 表單填寫內(nèi)容較多
• 頁面內(nèi)文字內(nèi)容較多
• 產(chǎn)品對于用戶填寫的內(nèi)容有傾向（如對平臺來說更有意義、更希望用戶填寫的信息）

案例分析

大眾點評在設(shè)置用戶信息時，雖然要填寫的內(nèi)容都是“設(shè)置”，但是重點需要設(shè)置的信息使用了鏈接顏色處理，做了強調(diào)。

二. 減少用戶輸入——用其他方式代替用戶手動輸入

1 . 以選擇代替輸入

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

使用條件

• 填寫的內(nèi)容邊界較為模糊，詞語不確定性較高
• 選項數(shù)量控制在 3-5 個之間
• 可以調(diào)用第三方或系統(tǒng)信息

案例分析  

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

• 案例二：淘寶 App 可以調(diào)動系統(tǒng)定位，并提供幾個最有可能的選項，讓用戶選擇最佳定位。

2 . 提供默認(rèn)選項，替用戶做選擇

選取最大概率事件作為默認(rèn)選項，減少用戶的手動調(diào)整

使用條件

• 系統(tǒng)能夠確定出符合用戶的較大概率選項
• 選項數(shù)量控制在 3-5 個之間

案例分析  

螞蟻鏈實人認(rèn)證在上傳證件時會根據(jù)用戶所在國家和地區(qū)，幫助用戶默認(rèn)選擇概率最大的選項，不需要用戶自己操作。

三. 定義鍵盤類型

根據(jù)調(diào)用內(nèi)容調(diào)動不同的鍵盤類型

根據(jù)表單輸入內(nèi)容的不同，調(diào)用出系統(tǒng)不同的鍵盤類型。

使用條件

• 填寫的內(nèi)容有明確的輸入語言要求

案例分析  

航旅縱橫在航班查詢的時候，由于航班號都是大寫字母和數(shù)字的組合，所以鍵盤會默認(rèn)調(diào)用出只有數(shù)字和字母的輸入法，同時默認(rèn)開啟大寫形式。螞蟻鏈實人認(rèn)證在用戶手動填寫身份證時也同理。

四. 避免重要信息被遮擋

重要的信息要始終可以被看到

需要避免輸入項被鍵盤遮擋，也要避免將重要的輸入提示作為占位符，不要在用戶填寫時被輸入的內(nèi)容遮擋。

使用條件

• 表單的填寫位置剛好會被彈出的鍵盤擋住
• 輸入提示很重要，需要用戶在輸入時隨時注意
• 輸入提示很長，用戶短時間內(nèi)記不住

案例分析  

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

五. 實時校驗

重要的信息要始終可以被看到

當(dāng)輸入需要被判斷和檢驗的信息時，系統(tǒng)最好可以針對信息做實時校驗，避免用戶一直到最后提交表單時才發(fā)現(xiàn)填寫問題。

使用條件

• 輸入的信息需要判斷，并會影響最終的表單填寫通過率
• 輸入內(nèi)容的質(zhì)量需要用戶知曉，如密碼的強度

案例分析  

證件號碼輸入錯誤時會給予相應(yīng)的提示。

原文鏈接：長弓小子（公眾號）

作者：元堯

 轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》干貨｜移動端·表單設(shè)計有方法！

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.alimai.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)