表單主要負責數據的采集，是產品從用戶側獲取信息的常用途徑，表單可承載的內容有很多，如輸入框、復選框、下拉選擇、開關等控件。表單常見于PC端，隨著互聯網的發展，在移動端的使用也越來越多，那么在設計移動端的表單時應當遵循什么樣的原則或者說注意什么呢？下面將結合在工作中的實際的案例從9個方面講述移動端表單的設計思路。

1. 選擇合理的表單結構

合理的表單結構能夠提高用戶閱讀表單的效率，降低填寫表單時的出錯率。在移動端常見的布局結構有左右布局和上下布局兩種，由于移動端橫向空間有限，在選用時優先推薦使用上下布局，即標簽和輸入內容各占一行，這樣用戶的閱讀效率也較高。當表單內容很多且每項內容比較簡單時，可以考慮使用左右布局，更好的節省頁面的縱向空間，避免用戶頻繁上下滑動屏幕，也能減少用戶填寫長表單的焦慮。

2. 將內容分頁展示

移動端設備屏幕小，單屏內承載的內容極其有限，通常情況下PC端一份正常的表單如果轉到移動端可能需要滾動好幾屏才能填寫完，如果不分頁展示，會降低頁面的完成率。表單設計領域的專家 Adam Silver 發現：將較長表單拆解為若干部分，用若干頁面展示，能提升用戶滿意度以及支付轉化率。

將長表單進行分步處理，還可以：

• 減小用戶的認知負荷和心理壓力，讓用戶更專注的完成任務；
• 降低用戶的出錯率，減少挫敗感；
• 保持所有步驟和用戶當前位置隨時可見，給用戶合理的心理預期。

3. 文字信息簡潔且夠用

保持頁面中的提示信息簡潔，避免使用冗長且無意義的描述給用戶造成沉重感，浪費用戶的時間和經歷去獲取無用的信息。當然也不能過分的追求簡單，將主要的信息忽略，對于用戶來說夠用就好，即能夠理解所表達的意思不造成困惑就好。

4. 減少用戶輸入

相比PC端，移動端的輸入更為不便，其效率和精準度遠不如PC端的鼠標鍵盤，因此移動端要盡可能的減少用戶的手動輸入。

（1）以選擇代替輸入

能選擇盡量不要讓用戶輸入，哪怕使用選擇的方式會導致用戶的操作路徑變長，只要在合理且可控的范圍內，優先推薦使用選擇的方式。

（2）充分利用移動設備的性能

雖然移動端手動輸入信息的效率相比PC端較低，但其獲取信息的方式卻比PC端更加多樣化。如移動端能夠更為準確地獲取用戶的地理位置，為表單中地址的填寫提供了便捷。

除了利用GPRS之外，移動端的拍照功能也提供了更為便捷的輸入方式，隨著OCR技術的成熟，通過拍照識別文字來代替用戶輸入的方式也越來越多見，最常見的就是金融服務應用中的拍照識別銀行卡號的功能，大大降低的用戶的輸入成本和出錯率。

（3）提供默認選項

提供默認選項是指在表單填寫過程中對于一些較為特殊的輸入項提供通用選項，減少用戶填寫表單的負擔，如證件類型、手機區號和國籍等。

（4）減少輸入的二次確認

輸入的二次確認常見于PC端在設定或重置密碼時的場景中，一來可以防止用戶出錯，二來可以加深用戶的印象，避免遺忘。若照搬至移動端會大大增加用戶的輸入負擔，此時我們可以考慮使用“明文顯示”或“輸入2s后密碼由明文轉為密文”的方式，來提升用戶的輸入體驗。

（5）合理調用第三方或系統信息

可以通過直接調用第三方應用軟件或系統的信息來代替用戶輸入。如輸入電話號碼時為用戶提供喚起系統通訊錄的操作，使用第三方應用授權登錄時可獲取用戶的性別、年齡、收貨地址等信息。

5. 定義鍵盤類型

根據表單輸入內容的不同，定義不同的鍵盤類型，在用戶輸入時直接喚起對應的鍵盤，避免讓用戶進行鍵盤選擇和切換，同時也能夠讓用戶對可輸入文本的類型有所預期。如中文輸入時喚起中文鍵盤、英文輸入時喚起鎖定大寫的英文鍵盤，手機號、身份證號等輸入時喚起數字鍵盤。

除此之外，還要合理的定義鍵盤右下角的功能鍵，幫助用戶實現換行/完成/搜索等操作，避免讓用戶手動收起鍵盤后再進行相關的操作。

6. 避免輸入項被遮擋

對于長表單，在激活輸入項后，若輸入項被喚起的鍵盤遮擋，會影響用戶的輸入和使用。因此在用戶激活表單中某一項內容時，底層界面位置應該自動往上移動，確保表單在填寫時不被鍵盤遮擋，方便用戶的輸入。

當點擊“經營范圍”的輸入框時，喚起手機中英文鍵盤，此時“經營范圍”的輸入框被鍵盤擋住，此時頁面應自動向上滾動，保證用戶能看到已輸入內容，便于即時校驗和修改

7. 實時校驗并保存信息

填寫長表單本來就是一件很痛苦的事情，若用戶在點擊提交時，頁面中出現了許多紅框提示用戶輸入錯誤，此時用戶的心情可想而知。因此，在用戶輸入時應盡可能的做到實時校驗，如中英文數字校驗、輸入字符數的校驗都可以實時校驗，用戶輸入出錯時及時提示用戶，減少的反復操作。

此外，移動端由于自身的特性導致了用戶發生誤操作的可能性更大，且移動端更容易受到網絡波動的影響，因此要盡可能地幫助用戶保存已填寫過的信息，避免用戶在信息丟失時重新輸入。

8. 提供預覽功能

對于已分頁展示的長表單，在用戶填寫完信息想要檢查之前填寫的內容時，就要一步步返回之前的頁面進行查看，還要擔心返回之前的頁面時當前已填寫的信息會不會丟失。因此在用戶輸入完成后提供一個預覽頁面讓用戶對已填寫的信息進行確認和檢查，能夠降低用戶的操作成本和出錯率。

9. 正確選擇下一步/提交的位置

對于分頁長表單來說，每頁中都需要放置“下一步”或“提交”的操作來幫助用戶完成任務。常見的操作位置有三種：位于表單右上角、跟隨表單和懸浮置底，在選用時要根據實際情況選擇正確的位置。

表單右上角：適用于內容復雜且極其重要的表單，在用戶完成表單后視線會從下往上移動，有助于用戶再次檢查已填寫的內容。

跟隨表單：適用于所有內容都必須填寫完成后才能進行提交的表單。

懸浮置底：適用于不需要全部填寫的表單，能夠讓用戶快速完成提交或進行下一步。

結語

以上是在設計移動長表單時遇到的一些問題以及設計思路，歡迎大家留言交流。

#專欄作家#

墨白，公眾號：UED_family，人人都是產品經理專欄作家?；ヂ摼W體驗設計師，不定期更新設計相關內容，包括交互設計、體驗設計、UI設計等。

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

題圖來自Unsplash，基于CC0協議