表單作為幫助用戶提交數據，完成前後端數據交互的組件，是産品中非常重要的一個組成部分。本文作者結合實際案例，分享了設計移動端表單的幾點思考，希望對你有用。

前段時間參與設計了一個類問卷的小工具，想總結下設計移動端表單的一些小想法。

常見的表單設計流程是：

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街道 詳細地址。減少了數據清洗的成本，方便了後續業務的繼續展開

總結

在移動端中，表單組件是被經常使用到的組件，但是我們卻很容易忽略它。不合理的表單組件設計會影響用戶填寫的意願和完成度，從而造成了業務流程的滞後甚至停頓，收集上來的數據可讀性也會較差，加重了數據收集方處理數據的難度或者打回數據讓用戶重新填寫，增加了兩端用戶的使用成本。而通過合理的表單組件，不僅僅能提升用戶的使用體驗，而且能增加用戶填寫表單的成功率，降低成本，對于産品具有積極的意義。

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

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

,

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

查看全部