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

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

相較于PC端，移動端要減少手動輸入

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

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

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

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

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

方法3：提供用戶的歷史輸入項

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

方法4：采用拍照識別的功能

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

相比于PC端，移動端需考慮調(diào)出的鍵盤類型及方式

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

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

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

PC端可在一個頁面中承載長表單，移動端則需分頁面展示

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

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

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

移動端的長表單在填寫完畢后，可考慮提供預(yù)覽功能

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

相比于PC端，移動端的長表單需更多地考慮異常情況

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

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

當(dāng)長表單需要上傳文件時，移動端支持的文件類型不如PC端多

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

總結(jié)

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

參考

[1]如何高效完成表單輸入？來看這個案例 - 優(yōu)設(shè)
[2]16個優(yōu)點(diǎn)告訴你，為什么表單設(shè)計應(yīng)該用這個方法？ - 優(yōu)設(shè)
[3]Better Form Design: One Thing Per Page (Case Study) - Smashingmagazine
[4]可能是最全面的表單設(shè)計完全手冊 - 優(yōu)設(shè)
[5]尼爾森可用性原則 - Nielsen Norman Group
[6]從交互設(shè)計角度，聊聊Web網(wǎng)站和移動App的六大差異 - 優(yōu)設(shè)
[7]iPhone 20來了也沒用！這些功能iOS永遠(yuǎn)不會有 - TechWeb
[8]iOS進(jìn)階第一天（數(shù)據(jù)處理之文件讀寫）- 簡書

歡迎關(guān)注「驢媽媽UED」的微信公眾號：