表單作為幫助用戶提交數(shù)據(jù)，完成前后端數(shù)據(jù)交互的組件，是產(chǎn)品中非常重要的一個(gè)組成部分。本文作者結(jié)合實(shí)際案例，分享了設(shè)計(jì)移動(dòng)端表單的幾點(diǎn)思考，希望對(duì)你有用。

前段時(shí)間參與設(shè)計(jì)了一個(gè)類問(wèn)卷的小工具，想總結(jié)下設(shè)計(jì)移動(dòng)端表單的一些小想法。

常見(jiàn)的表單設(shè)計(jì)流程是：

1. 根據(jù)業(yè)務(wù)場(chǎng)景需要選擇合適的組件
2. 對(duì)組件增加高級(jí)限制和判斷邏輯

那就以常見(jiàn)的開(kāi)戶進(jìn)件作為案例來(lái)討論表單的設(shè)計(jì)流程吧。目前我們需要設(shè)計(jì)一個(gè)表單用于“用戶提交開(kāi)戶資料”的場(chǎng)景。首先我們根據(jù)銀行和相關(guān)業(yè)務(wù)方的需要，確定了需要的字段，并選擇對(duì)應(yīng)的組件；其次對(duì)于各個(gè)組件做了高級(jí)限制和表單整體的判斷邏輯，比如銀行卡允許輸入長(zhǎng)度不超過(guò)19位；身份證號(hào)碼和姓名需要通過(guò)一致校驗(yàn)等。

僅有上面兩個(gè)設(shè)計(jì)流程是不夠的，設(shè)計(jì)出來(lái)的表單會(huì)存在很多問(wèn)題？

1. 頁(yè)面展示數(shù)據(jù)過(guò)多
2. 操作復(fù)雜且繁瑣
3. 選用的組件樣式和交互不適合移動(dòng)端
4. 提交的數(shù)據(jù)沒(méi)有經(jīng)過(guò)統(tǒng)一的數(shù)據(jù)處理等

這些問(wèn)題會(huì)影響用戶表單填寫的體驗(yàn)和意愿，嚴(yán)重的話會(huì)影響到表單填寫流程，甚至造成用戶放棄填寫表單從而導(dǎo)致業(yè)務(wù)流程無(wú)法推進(jìn)。而對(duì)于收集上來(lái)的數(shù)據(jù)如果不做統(tǒng)一處理的話，會(huì)增加后臺(tái)用戶或者數(shù)據(jù)收集方關(guān)于“數(shù)據(jù)處理”的成本

怎么合理設(shè)計(jì)呢？

那么我們應(yīng)該怎么設(shè)計(jì)合適的表單呢，這里我們可以結(jié)合移動(dòng)端的特點(diǎn)去做下面幾點(diǎn)考慮。

1. 分布式表單

iPhone目前主要的機(jī)型屏幕尺寸在4.7-5.8英寸，android的尺寸更多一些，但是總體上來(lái)說(shuō)，移動(dòng)端的載體手機(jī)屏幕不大，能承載的信息是非常有限的。當(dāng)表單信息過(guò)多時(shí)，如果把所有組件堆積在同一個(gè)頁(yè)面中，用戶填寫或者修改變單需要重復(fù)滑動(dòng)頁(yè)面，極大的增加了用戶的心里負(fù)擔(dān)和填寫成本，很容易就產(chǎn)生放棄心理。這里我們就會(huì)考慮分布式表單，能很好的起到以下作用

（1）減少用戶的心理負(fù)擔(dān)

分布式表單的設(shè)計(jì)，可以減少用戶對(duì)于每個(gè)頁(yè)面剩余填寫數(shù)量的感知，比如下圖中1個(gè)頁(yè)面，用戶需要剩余填寫10條數(shù)據(jù)；而分布式處理后，用戶的感知是第一個(gè)頁(yè)面剩余填寫8條數(shù)據(jù)，第二個(gè)頁(yè)面剩余填寫2條數(shù)據(jù)。大大降低了心理負(fù)擔(dān)，表單完成率會(huì)更高

（2）拆解了表單完成的動(dòng)作

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

2. 減少用戶操作

用戶行為都是“懶惰”的，過(guò)多的操作會(huì)給用戶造成壓力，影響用戶繼續(xù)填寫和完成表單的欲望，造成填寫流失。我們?cè)谠O(shè)計(jì)產(chǎn)品的時(shí)候可以考慮通過(guò)減少操作，減少輸入，合理化流程這3種方式來(lái)減少用戶操作，減少用戶的填寫成本，增加填寫完成率

（1）減少操作

減少操作，可以根據(jù)實(shí)際的場(chǎng)景出發(fā)，通過(guò)交互設(shè)計(jì)去減少用戶填寫表單的操作，起到降低用戶的填寫負(fù)擔(dān)和成本，提高表單填寫成功率。比如擴(kuò)大了表單的可點(diǎn)擊區(qū)域，方便用戶點(diǎn)擊可以直接喚醒鍵盤，照顧了不同點(diǎn)擊習(xí)慣的用戶。如果點(diǎn)擊區(qū)域較小會(huì)增加部分用戶重復(fù)點(diǎn)擊的次數(shù)，甚至產(chǎn)生“是不是系統(tǒng)bug了”等心理從而放棄了對(duì)表單的填寫；再比如喚起的鍵盤是根據(jù)表單定制的，點(diǎn)擊“單行文本項(xiàng)-身份證”能喚醒的鍵盤是帶“X”的數(shù)字鍵盤，就減少了“身份證尾號(hào)帶X”的用戶再填寫身份證號(hào)碼需要反復(fù)切換數(shù)字和大寫英文字母的場(chǎng)景

（2）減少輸入

我們希望用戶在填寫表單的時(shí)候能盡可能減少用戶的負(fù)擔(dān)心理，提高整體的表單填寫成功率。我們可以通過(guò)“減少輸入”來(lái)降低用戶對(duì)于填寫數(shù)量的感知，從而降低用戶對(duì)于填寫表單難度的心理預(yù)期。常常采用減少“輸入項(xiàng)”，借助移動(dòng)端載體手機(jī)的相機(jī)等硬件支持?？聪挛覀儗?duì)于開(kāi)戶進(jìn)件輸入銀行卡的改造：

• 改動(dòng)1：“單行文本項(xiàng)-開(kāi)戶銀行”改造成“選擇項(xiàng)-開(kāi)戶銀行”，預(yù)設(shè)了可以選擇的銀行名稱
• 改動(dòng)2：增加“通過(guò)卡面拍照識(shí)別”功能，通過(guò)手機(jī)拍照獲取銀行卡照片后直接解析銀行卡號(hào)，銀行名稱信息

通過(guò)這兩個(gè)改動(dòng)，可以成功的降低，用戶對(duì)于填寫銀行卡需要輸入的預(yù)期，從原先需要輸入銀行卡號(hào)，銀行名稱。變成了只需要輸入銀行卡號(hào)選擇銀行名稱，甚至可以直接通過(guò)相機(jī)一步獲取需要填寫的數(shù)據(jù)。

（3）合理化流程

通過(guò)合理化填寫流程，也能起到減少用戶的操作，特別是用戶不必要的重復(fù)操作。一起看下用戶進(jìn)件案例中關(guān)于兩種填寫驗(yàn)證碼的方式。一種是驗(yàn)證碼是本表單內(nèi)的一個(gè)填寫項(xiàng)，另一種是驗(yàn)證碼是表單內(nèi)信息提交后再填寫的。我們可以一起把兩種方式的流程拆解開(kāi)來(lái)：

• 方式1: 填寫表單 -> 獲取驗(yàn)證碼?-> 填寫驗(yàn)證碼 -> 提交表單進(jìn)入表單校驗(yàn)流程 ->?通過(guò)校驗(yàn)上傳數(shù)據(jù)
• 方式2: 填寫表單 -> 提交表單進(jìn)入表單校驗(yàn)流程 -> 通過(guò)校驗(yàn)進(jìn)入填寫驗(yàn)證碼流程 -> 獲取驗(yàn)證碼-> 填寫驗(yàn)證碼

上面主要描述了填寫正常的流程，兩者的操作步驟是一致的，但是在異常情況下呢？比如表單其中一個(gè)填寫項(xiàng)填寫錯(cuò)誤，方式1不但需要重新填寫錯(cuò)誤項(xiàng)，還需要重新獲取驗(yàn)證碼，增加了用戶的操作和填寫成本；同時(shí)浪費(fèi)了驗(yàn)證碼次數(shù)，也增加了公司成本。而方式2，表單信息通過(guò)才能獲取驗(yàn)證碼的流程設(shè)計(jì)可以避免這種情況的方式，節(jié)省了用戶和我們的成本，更有利于增加用戶的填寫完成度。

3. 提供明確的反饋

用戶的認(rèn)知是有高低差異的，不同用戶對(duì)于表單的填寫容易度也是不同的。我們通過(guò)明確的反饋，幫助大部分用戶能正確填寫表單，順利完成對(duì)表單的填寫。同時(shí)增加了整體表單填寫的成功率和回收率。明確的反饋包括引導(dǎo)用戶正確填寫的反饋和用戶誤操作后的錯(cuò)誤提醒

（1）正確引導(dǎo)

通過(guò)正確的引導(dǎo)，要讓用戶明確知道，哪個(gè)需要填寫，需要填寫什么內(nèi)容，怎么填寫。通過(guò)正確引導(dǎo)，讓用戶明確了填寫的方向，提高了填寫的成功率。比如用戶進(jìn)件這個(gè)頁(yè)面中，有引導(dǎo)和無(wú)引導(dǎo)下用戶填寫的成功率是完全不同的。 無(wú)引導(dǎo)下，用戶不知道該填寫什么，也不知道如何填寫；有引導(dǎo)，通過(guò)暗提示，引導(dǎo)用戶每個(gè)表單需要具體填寫的內(nèi)容；通過(guò)必填，非必填的區(qū)分，引導(dǎo)用戶哪些是必須要填寫的，哪些是選填的（一般情況下在標(biāo)記選填和必填時(shí)，可以考慮對(duì)更少的那一類做標(biāo)記，這里就是標(biāo)記了“選填”的，這也是一種減少操作的方式，減少了用戶視覺(jué)上的操作）

（2）錯(cuò)誤提示

用戶不但需要正面的引導(dǎo)，同時(shí)對(duì)于用戶錯(cuò)誤的行為，也要給用戶明確的反饋，告訴用戶哪里錯(cuò)了，錯(cuò)誤的地方是什么。通過(guò)錯(cuò)誤提示，幫助用戶能正確填寫變單，從而完成表單填寫。比如下圖中，錯(cuò)誤提示1，只告訴了用戶錯(cuò)誤了，但并沒(méi)有明確告知用戶具體的錯(cuò)誤；錯(cuò)誤提示2就給出了明確的反饋，用戶對(duì)于修改有明確的方向，對(duì)手機(jī)號(hào)碼進(jìn)行修改后，就能完成整個(gè)表單的填寫

4. 組件設(shè)計(jì)符合移動(dòng)端

表單組件在移動(dòng)端和PC端是有差異的，同樣一個(gè)組件在移動(dòng)端上使用時(shí)，我們的設(shè)計(jì)應(yīng)該更符合移動(dòng)端。首先，考慮到移動(dòng)端的界面遠(yuǎn)小于PC，沒(méi)有辦法和PC一樣做到把所有的元素都展示出來(lái)，所以組件的設(shè)計(jì)也應(yīng)該遵循盡可能地簡(jiǎn)單，從而突出重點(diǎn)。比如單選項(xiàng)為是否的情況下，在移動(dòng)端就可以設(shè)計(jì)成開(kāi)關(guān)樣式，簡(jiǎn)化了布局突出了重點(diǎn)

其次，移動(dòng)端和PC端的使用者都是人，但是一個(gè)通過(guò)手指觸發(fā)交互，另一個(gè)通過(guò)鼠標(biāo)觸發(fā)。人的手指雖然比鼠標(biāo)更加靈活，但是在精準(zhǔn)度方面沒(méi)有鼠標(biāo)更好，組件的設(shè)計(jì)就應(yīng)該擴(kuò)大可操作區(qū)域，降低手指的誤操作。比如在移動(dòng)端上的下拉選擇項(xiàng)中，選項(xiàng)面板會(huì)設(shè)計(jì)成從頁(yè)面底部彈出，更方便用戶選擇

我們把組件設(shè)計(jì)的更符合移動(dòng)端的一些特點(diǎn)，也是為了能簡(jiǎn)化用戶的操作，讓用戶能更容易完成表單的填寫。

5. 統(tǒng)一的數(shù)據(jù)格式處理

上文的3點(diǎn)都是針對(duì)移動(dòng)端用戶的，這一點(diǎn)是針對(duì)后臺(tái)或者數(shù)據(jù)收集方用戶的。因?yàn)橛脩籼顚懙臄?shù)據(jù)存在五花八門的可能性，收集的數(shù)據(jù)如果不做統(tǒng)一處理的話，可讀性很低，增加了后臺(tái)或者數(shù)據(jù)收集方用戶的使用成本。這要求我們?cè)谝苿?dòng)端提交數(shù)據(jù)的時(shí)候，對(duì)數(shù)據(jù)進(jìn)行抽象處理，根據(jù)業(yè)務(wù)場(chǎng)景按約定的數(shù)據(jù)格式統(tǒng)一處理。比如案例中的“家庭地址”選項(xiàng)，該組件有“省市區(qū) – 選擇項(xiàng)”和“詳細(xì)地址 – 多行文本輸入項(xiàng)”，已經(jīng)對(duì)于數(shù)據(jù)格式做了一步約束，省市區(qū)的填寫是規(guī)范的

但是收集上來(lái)的數(shù)據(jù)還是會(huì)存在問(wèn)題，盡管我們對(duì)省市區(qū)的填寫做了約束處理，但是仍有可能發(fā)生用戶重復(fù)填寫省市區(qū)；街道信息遺漏等情況。

• 用戶1填寫：浙江省杭州市濱江區(qū) XX街道XX社區(qū)XX幢201
• 用戶2填寫：浙江省杭州市蕭山區(qū) 蕭山區(qū)XX路XX社區(qū)XX幢801
• 用戶3填寫：浙江省杭州市江干區(qū) XX社區(qū)XX幢401

所以我們有必要采取統(tǒng)一的規(guī)則對(duì)收集上來(lái)的數(shù)據(jù)進(jìn)行處理：

1. 省市區(qū)去重
2. 如果用戶沒(méi)有填寫街道信息，根據(jù)詳細(xì)地址補(bǔ)全街道信息

統(tǒng)一處理后，展示給后臺(tái)或者數(shù)據(jù)收集方用戶的數(shù)據(jù)格式如下：XX省XX市XX區(qū)XX街道+詳細(xì)地址。減少了數(shù)據(jù)清洗的成本，方便了后續(xù)業(yè)務(wù)的繼續(xù)展開(kāi)

總結(jié)

在移動(dòng)端中，表單組件是被經(jīng)常使用到的組件，但是我們卻很容易忽略它。不合理的表單組件設(shè)計(jì)會(huì)影響用戶填寫的意愿和完成度，從而造成了業(yè)務(wù)流程的滯后甚至停頓，收集上來(lái)的數(shù)據(jù)可讀性也會(huì)較差，加重了數(shù)據(jù)收集方處理數(shù)據(jù)的難度或者打回?cái)?shù)據(jù)讓用戶重新填寫，增加了兩端用戶的使用成本。而通過(guò)合理的表單組件，不僅僅能提升用戶的使用體驗(yàn)，而且能增加用戶填寫表單的成功率，降低成本，對(duì)于產(chǎn)品具有積極的意義。

本文由 @晌午 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。