隨著移動(dòng)互聯(lián)網(wǎng)行業(yè)的飛速發(fā)展，人們?cè)玖?xí)慣在 PC 端填寫(xiě)的長(zhǎng)表單，也漸漸地在移動(dòng)端越來(lái)越常見(jiàn)。本文將基于驢媽媽移動(dòng)端供應(yīng)商加盟項(xiàng)目，從 PC 端和移動(dòng)端的不同之處入手，探討移動(dòng)端長(zhǎng)表單的設(shè)計(jì)有哪些注意事項(xiàng)。

相較于PC端，移動(dòng)端要減少手動(dòng)輸入

PC 端和移動(dòng)端在手動(dòng)輸入的便捷程度上是不同的。PC 端的輸入較便捷(鍵盤(pán)鼠標(biāo)觸控板，效率較高);移動(dòng)端的輸入較不便捷(手指與屏幕的觸碰面積較大，效率和精準(zhǔn)程度遠(yuǎn)不及 PC 端的鍵盤(pán)鼠標(biāo))。因此，為了打造便捷優(yōu)雅的操作體驗(yàn)，移動(dòng)端表單需要盡量減少用戶的手動(dòng)輸入。有以下方法可以減少手動(dòng)輸入。

方法1：當(dāng)前場(chǎng)景下的常用選項(xiàng)

提供當(dāng)前場(chǎng)景下的常用選項(xiàng)，用選擇代替輸入是最為基本的思路。值得注意的是，如果常用選項(xiàng)不能涵蓋用戶可能填寫(xiě)的全部?jī)?nèi)容，那么手動(dòng)輸入自定義選項(xiàng)的功能也要提供給用戶。

方法2：利用移動(dòng)端設(shè)備能獲取的信息

盡管移動(dòng)端在輸入上沒(méi)有那么便捷，但獲取到信息種類(lèi)與精確度，卻具有一定的優(yōu)勢(shì)。比如，移動(dòng)端設(shè)備能較為精確地獲取到用戶當(dāng)前的地理位置，這就為某些需要填寫(xiě)位置的表單提供了便捷(如收貨地址、聯(lián)系地址等)。再如，調(diào)用通訊錄的功能也經(jīng)常出現(xiàn)在各種需要填寫(xiě)手機(jī)號(hào)的表單中。

方法3：提供用戶的歷史輸入項(xiàng)

一份表單中出現(xiàn)了多處相同類(lèi)型的表單項(xiàng)，這時(shí)可以提供用戶的歷史輸入項(xiàng)供其選擇。另外，很多填單頁(yè)也會(huì)將用戶輸入的信息自動(dòng)保存為常用收貨人等，同樣也是用到了這一方法。

方法4：采用拍照識(shí)別的功能

由于 OCR 技術(shù)(Optical Character Recognition，光學(xué)字符識(shí)別)的發(fā)展，拍照識(shí)別文字的速度和準(zhǔn)確度都有了較大的提升，最常見(jiàn)的就是各大金融服務(wù)應(yīng)用中拍照識(shí)別銀行卡號(hào)的功能。如下所示，三證合一的營(yíng)業(yè)執(zhí)照中有 18 位的統(tǒng)一社會(huì)信用代碼，由阿拉伯?dāng)?shù)字和英文字母組成。如果采用手動(dòng)輸入的方式，不僅效率低，還容易輸錯(cuò)。在這里應(yīng)用 OCR 技術(shù)，旨在降低輸入成本，提升用戶體驗(yàn)。

相比于PC端，移動(dòng)端需考慮調(diào)出的鍵盤(pán)類(lèi)型及方式

相對(duì)于 PC 端的物理鍵盤(pán)，移動(dòng)端的虛擬鍵盤(pán)由于受限于屏幕尺寸，在各種類(lèi)型鍵盤(pán)間進(jìn)行切換的成本較高，且在數(shù)字和各類(lèi)中英文標(biāo)點(diǎn)符號(hào)的輸入上效率較低。因此，在移動(dòng)端長(zhǎng)表單的設(shè)計(jì)中，需要更多考慮：默認(rèn)調(diào)出哪種類(lèi)型的鍵盤(pán)，才是當(dāng)前場(chǎng)景下最為高效的選擇。

另外，當(dāng)連續(xù)多個(gè)表單項(xiàng)的輸入方式各不相同時(shí)，可考慮使用聯(lián)動(dòng)鍵盤(pán)。如下面的案例所示：

不難發(fā)現(xiàn)，案例中連續(xù) 3 個(gè)表單項(xiàng)對(duì)應(yīng)的輸入方式分別是：時(shí)間選擇器、數(shù)字鍵盤(pán)、選項(xiàng)選擇器。如果采用傳統(tǒng)的方式按順序填寫(xiě)，不僅需要依次點(diǎn)擊這 3 個(gè)表單項(xiàng)，而且對(duì)應(yīng)的選擇器和鍵盤(pán)也需要分別彈出和收起各 1 次(彈出和收起共計(jì)3*2=6次)，操作較為繁瑣。改為聯(lián)動(dòng)鍵盤(pán)后，可以在同 1 個(gè)底部彈出層中，流暢地填寫(xiě)完 3 個(gè)表單項(xiàng)，有助于打造更為便捷高效地填寫(xiě)體驗(yàn)。

PC端可在一個(gè)頁(yè)面中承載長(zhǎng)表單，移動(dòng)端則需分頁(yè)面展示

移動(dòng)端設(shè)備相比于 PC 端設(shè)備，屏幕尺寸小得多。一份在 PC 端可以用 1-2 屏展示完全的表單，在移動(dòng)端可能需滑動(dòng) 7-8 屏才能完整查看。如果在移動(dòng)端用一個(gè)頁(yè)面承載 7-8 屏才能看完的長(zhǎng)表單，可能會(huì)造成高跳出率和低完成率。表單設(shè)計(jì)領(lǐng)域的專(zhuān)家 Adam Silver 通過(guò)實(shí)際項(xiàng)目發(fā)現(xiàn)：將較長(zhǎng)表單拆解為若干部分，用若干頁(yè)面展示，能提升用戶滿意度以及支付轉(zhuǎn)化率。除此之外，Adam 還總結(jié)了這種設(shè)計(jì)理念的 16 個(gè)優(yōu)點(diǎn)，我覺(jué)得其中最主要的 3 個(gè)優(yōu)點(diǎn)如下：

• 降低認(rèn)知負(fù)荷，讓用戶能更專(zhuān)注地完成任務(wù);
• 使得每一頁(yè)的出錯(cuò)數(shù)得到降低，從而降低錯(cuò)誤帶給用戶的挫敗感以及跳出率;
• 配合進(jìn)度指示器，能給用戶一種前進(jìn)的正面感覺(jué)。

那么，分頁(yè)面展示就足夠了么?還不一定。根據(jù)具體的情況，有時(shí)還需要將一個(gè)頁(yè)面中的內(nèi)容劃分為不同的模塊。具體的做法是：將相關(guān)表單項(xiàng)進(jìn)行分類(lèi)組合，并通過(guò)卡片、分割線或間距將它們分成不同的語(yǔ)義組，并添加對(duì)應(yīng)模塊標(biāo)題以突出頁(yè)面的節(jié)奏感，從而幫助用戶更加高效地瀏覽和填寫(xiě)表單。

移動(dòng)端的長(zhǎng)表單在填寫(xiě)完畢后，可考慮提供預(yù)覽功能

為什么要考慮預(yù)覽功能呢?對(duì)于分頁(yè)面填寫(xiě)的表單，如需檢查之前已填寫(xiě)的內(nèi)容，要逐步返回之前的頁(yè)面查看，十分不便。因此，提供一個(gè)專(zhuān)門(mén)的預(yù)覽頁(yè)面讓用戶對(duì)表單進(jìn)行檢查和確認(rèn)，是很有必要的。而這也符合尼爾森可用性原則中的易取原則(Recognition rather than recall)，盡可能減少用戶的回憶負(fù)擔(dān)，把需要用戶記憶或確認(rèn)的內(nèi)容直接展示出來(lái)。

相比于PC端，移動(dòng)端的長(zhǎng)表單需更多地考慮異常情況

這點(diǎn)要從 PC 端和移動(dòng)端的使用場(chǎng)景說(shuō)起。PC 端的使用場(chǎng)景相對(duì)比較局限，人們?cè)谑褂脮r(shí)大多是坐在桌前;而移動(dòng)端的使用場(chǎng)景則寬泛得多，無(wú)論是站著、坐著、走著還是躺著，都能使用手機(jī)，這就讓發(fā)生誤操作的可能性更大。另外，兩端的使用場(chǎng)景同樣受到各自網(wǎng)絡(luò)環(huán)境的影響，PC 端的網(wǎng)絡(luò)質(zhì)量相對(duì)穩(wěn)定，而移動(dòng)端由于「移動(dòng)著」的特性，網(wǎng)絡(luò)質(zhì)量容易波動(dòng)，比如，從信號(hào)較好的室外進(jìn)入到信號(hào)較差的電梯內(nèi)。對(duì)于異常情況的發(fā)生，設(shè)計(jì)時(shí)可從這 2 點(diǎn)進(jìn)行考慮：

• 盡可能地幫助用戶保存已填寫(xiě)的表單信息;
• 如果實(shí)在無(wú)法保存已填寫(xiě)的表單信息，要友好且明確地提醒用戶這一風(fēng)險(xiǎn)。

當(dāng)長(zhǎng)表單需要上傳文件時(shí)，移動(dòng)端支持的文件類(lèi)型不如PC端多

這一點(diǎn)主要是對(duì)于 iOS 操作系統(tǒng)而言的。相比于 Android 操作系統(tǒng)，iOS 系統(tǒng)對(duì)數(shù)據(jù)讀寫(xiě)有限制，這是由于 iOS 系統(tǒng)的沙盒(SandBox)機(jī)制所決定的。所謂沙盒機(jī)制，就是各個(gè)應(yīng)用程序的數(shù)據(jù)都放在獨(dú)立的沙盒中進(jìn)行儲(chǔ)存，應(yīng)用程序只能在自己的沙盒中訪問(wèn)文件，不可以訪問(wèn)其他沙盒中的內(nèi)容。對(duì)于 iOS 系統(tǒng)的 APP 而言，一般只能訪問(wèn)設(shè)備的相冊(cè)資源(在用戶允許其訪問(wèn)相冊(cè)權(quán)限的情況下)。因此，如果移動(dòng)端表單需要上傳文件，需要考慮到 iOS 操作系統(tǒng)這一數(shù)據(jù)讀寫(xiě)的限制問(wèn)題，并根據(jù)限制來(lái)規(guī)范化支持上傳的文件格式。

總結(jié)

綜上所述，可將文中提到的內(nèi)容歸納為一張表格。

供應(yīng)商加盟項(xiàng)目的交互設(shè)計(jì)及原型制作：陳夢(mèng)蝶(此文作者)，視覺(jué)設(shè)計(jì)：陳叢哲。受限于開(kāi)發(fā)成本，文中部分示例的功能并未上線。