本文由作者 晌午?于社區發布

前段時間參與設計了一個類問卷的小工具，為此就想總結下設計移動端表單的一些小想法。表單作為幫助用戶提交數據，完成前后端數據交互的組件，是產品中非常重要的一個組成部分。

常見的設計流程是：

1、根據業務場景需要選擇合適的組件

2、對組件增加高級限制和判斷邏輯

以常見的開戶進件案例來討論表單的設計流程吧。目前需要設計一個表單用于“用戶提交開戶資料”的場景。

首先，我們根據銀行和業務方的需要，確定了相關的字段，并選擇了對應的組件。

其次對于各個組件做了高級限制和表單整體的判斷邏輯，比如銀行卡允許輸入長度不超過19位；身份證號碼和姓名需要通過一致校驗等。

但是只有上面兩個設計流程是不夠的，設計出來的表單會存在很多問題。

1、頁面展示數據過多

2、操作復雜且繁瑣

3、選用的組件樣式和交互不適合移動端

4、提交的數據沒有經過統一的數據處理等

這些問題會影響用戶表單填寫的體驗和意愿，嚴重的話會影響到表單填寫流程，甚至造成用戶放棄填寫表單從而導致業務流程無法推進。

而對于收集上來的數據如果不做統一處理的話，會增加后臺用戶或者數據收集方關于“數據處理”的成本。

那么我們應該怎么設計合適的表單呢？這里我們可以結合移動端的特點去做下面幾點考慮。

1

分布式表單

iPhone目前主要的機型屏幕尺寸在4.7-5.8英寸，android的尺寸更多一些，但是總體上來說，移動端的載體手機屏幕不大，能承載的信息是非常有限的。

當表單信息過多時，如果把所有組件堆積在同一個頁面中，用戶填寫或者修改表單需要重復滑動頁面，極大的增加了用戶的心理負擔和填寫成本，很容易就產生放棄心理。這里我們就會考慮分布式表單，能很好的起到以下作用。

1.減少用戶的心理負擔

分布式表單的設計，可以減少用戶對于每個頁面剩余填寫數量的感知。

比如下圖中1個頁面，用戶需要剩余填寫10條數據；而分布式處理后，用戶的感知是第一個頁面剩余填寫8條數據，第二個頁面剩余填寫2條數據。大大降低了心理負擔，表單完成率會更高。

2.拆解了表單完成的動作

分布式表單的設計，把一整個表單分成多個步驟進行，每次填寫都意味著一次“完成”，增加用戶成就感的同時，讓用戶明確感知到已經完成多少，還剩余多少，也增加了放棄成本。

2

減少用戶操作

用戶行為都是“懶惰”的，過多的操作會給用戶造成壓力，影響用戶繼續填寫和完成表單的欲望，造成填寫流失。

我們在設計產品的時候可以考慮通過減少操作，減少輸入，合理化流程這3種方式來減少用戶操作，減少用戶的填寫成本，增加填寫完成率。

1.減少操作

減少操作，可以根據實際的場景出發，通過交互設計去減少用戶填寫表單的操作，起到降低用戶的填寫負擔和成本，提高表單填寫成功率。

比如擴大了表單的可點擊區域，方便用戶點擊可以直接喚醒鍵盤，照顧了不同點擊習慣的用戶。如果點擊區域較小會增加這部分用戶重復點擊的次數，甚至產生“是不是系統bug了”等心理從而放棄了對表單的填寫；

再比如喚起的鍵盤是根據表單定制的，點擊“單行文本項-身份證”能喚醒的鍵盤是帶“X”的數字鍵盤，就減少了“身份證尾號帶X”的用戶再填寫身份證號碼需要反復切換數字和大寫英文字母的場景。

2.減少輸入

我們希望用戶在填寫表單的時候能盡可能減少用戶的負擔心理，提高整體的表單填寫成功率。我們可以通過“減少輸入”來降低用戶對于填寫數量的感知，從而降低用戶對于填寫表單難度的心理預期。

常常采用減少“輸入項”，借助移動端載體手機的相機等硬件支持。看下我們對于開戶進件輸入銀行卡的改造：

改動1:單行文本項-開戶銀行改造成選擇項-開戶銀行，預設了可以選擇的銀行名稱。

改動2:增加“通過卡面拍照識別”功能，通過手機拍照獲取銀行卡照片后直接解析銀行卡號，銀行名稱信息。

通過這兩個改動，可以成功的降低，用戶對于填寫銀行卡需要輸入的預期，從原先需要輸入銀行卡號，銀行名稱，變成了只需要輸入銀行卡號選擇銀行名稱，甚至可以直接通過相機一步獲取需要填寫的數據。

3.合理化流程

通過合理化填寫流程，也能起到減少用戶的操作，特別是用戶不必要的重復操作。一起看下用戶進件案例中關于兩種填寫驗證碼的方式。一種是驗證碼是本表單內的一個填寫項，另一種是驗證碼是表單內信息提交后再填寫的。

我們可以一起把兩種方式的流程拆解開來：

方式1:填寫表單—>獲取驗證碼—>填寫驗證碼—>提交表單進入表單校驗流程—>通過校驗上傳數據

方式2:填寫表單—>提交表單進入表單校驗流程—>通過校驗進入填寫驗證碼流程—>獲取驗證碼—>填寫驗證碼

上面主要描述了填寫正常的流程，兩者的操作步驟是一致的，但是在異常情況下呢？

比如表單其中一個填寫項填寫錯誤，方式1不但需要重新填寫錯誤項，還需要重新獲取驗證碼，增加了用戶的操作和填寫成本；同時浪費了驗證碼次數，也增加了公司成本。而方式2，表單信息通過才能獲取驗證碼的流程設計可以避免這種情況的方式，節省了用戶和我們的成本，更有利于增加用戶的填寫完成度。

3

提供明確的反饋

用戶的認知是有高低差異的，不同用戶對于表單的填寫容易度也是不同的。我們通過明確的反饋，幫助大部分用戶能正確填寫表單，順利完成對表單的填寫。

同時增加了整體表單填寫的成功率和回收率。明確的反饋包括引導用戶正確填寫的反饋和用戶誤操作后的錯誤提醒。

1.正確引導

通過正確的引導，要讓用戶明確知道，哪個需要填寫，需要填寫什么內容，怎么填寫。通過正確引導，讓用戶明確了填寫的方向，提高了填寫的成功率。

比如用戶進件這個頁面中，有引導和無引導下用戶填寫的成功率是完全不同的。

無引導下，用戶不知道該填寫什么，也不知道如何填寫；有引導，通過暗提示，引導用戶每個表單需要具體填寫的內容；通過必填，非必填的區分，引導用戶哪些是必須要填寫的，哪些是選填的（一般情況下在標記選填和必填時，可以考慮對更少的那一類做標記，這里就是標記了“選填”的，這也是一種減少操作的方式，減少了用戶視覺上的操作）

2.錯誤提示

用戶不但需要正面的引導，同時對于用戶錯誤的行為，也要給用戶明確的反饋，告訴用戶哪里錯了，錯誤的地方是什么。通過錯誤提示，幫助用戶能正確填寫表單，從而完成表單填寫

比如下圖中：

錯誤提示1，只告訴了用戶錯誤了，但并沒有明確告知用戶具體的錯誤；

錯誤提示2就給出了明確的反饋，用戶對于修改有明確的方向，對手機號碼進行修改后，就能完成整個表單的填寫。

4

組件設計符合移動端

表單組件在移動端和PC端是有差異的，同樣一個組件在移動端上使用時，我們的設計應該更符合移動端。

首先，考慮到移動端的界面遠小于PC，沒有辦法和PC一樣做到把所有的元素都展示出來，所以組件的設計也應該盡可能地簡單，從而突出重點。比如單選項為是否的情況下，在移動端就可以設計成開關樣式，簡化了布局突出了重點。

其次，移動端和PC端的使用者都是人，但是一個通過手指觸發交互，另一個通過鼠標觸發。人的手指雖然比鼠標更加靈活，但是在精準度方面沒有鼠標更好，組件的設計就應該擴大可操作區域，降低手指的誤操作。比如在移動端上的下拉選擇項中，選項面板會設計成從頁面底部彈出，更方便用戶選擇。

我們把組件設計的更符合移動端的一些特點，也是為了能簡化用戶的操作，讓用戶能更容易完成表單的填寫。

5

統一的數據格式處理

上文的3點都是針對移動端用戶的，這一點是針對后臺或者數據收集方用戶的。因為用戶填寫的數據存在五花八門的可能性，收集的數據如果不做統一處理的話，可讀性很低，增加了后臺或者數據收集方用戶的使用成本。

這要求我們在移動端提交數據的時候，對數據進行抽象處理，根據業務場景按約定的數據格式統一處理。比如案例中的“家庭地址”選項，該組件有“省市區?-選擇項”和“詳細地址?-多行文本輸入項”，已經對于數據格式做了一步約束，省市區的填寫是規范的。

但是收集上來的數據還是會存在問題，盡管我們對省市區的填寫做了約束處理，但是仍有可能發生用戶重復填寫省市區、街道信息遺漏等情況。

用戶1填寫：浙江省杭州市濱江區 XX街道XX社區XX幢201

用戶2填寫：浙江省杭州市蕭山區蕭山區XX路XX社區XX幢801

用戶3填寫：浙江省杭州市江干區 XX社區XX幢401

所以我們有必要采取統一的規則對收集上來的數據進行處理。

1、省市區去重

2、如果用戶沒有填寫街道信息，根據詳細地址補全街道信息

統一處理后，展示給后臺或者數據收集方用戶的數據格式如下：XX省XX市XX區XX街道+詳細地址。減少了數據清洗的成本，方便了后續業務的繼續展開。

6

總結

在移動端中，表單組件是被經常使用到的組件，但是我們卻很容易忽略它。

不合理的表單組件設計會影響用戶填寫的意愿和完成度，從而造成了業務流程的滯后甚至停頓，收集上來的數據可讀性也會較差，加重了數據收集方處理數據的難度或者打回數據讓用戶重新填寫，增加了兩端用戶的使用成本。

而通過合理的表單組件，不僅僅能提升用戶的使用體驗，而且能增加用戶填寫表單的成功率，降低成本，對于產品具有積極的意義。

------正文分割線------

點個“在看”吧

總結

以上是生活随笔為你收集整理的移动端怎么设计适合的表单？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。