移動端的長表單設計有哪些注意事項?這篇都總結好了! - 優設網 - UISDC

移動端的長表單設計有哪些注意事項?這篇都總結好了!

2019/09/23 10502評論 7

隨著移動互聯網行業的飛速發展,人們原本習慣在 PC 端填寫的長表單,也漸漸地在移動端越來越常見。本文將基于驢媽媽移動端供應商加盟項目,從 PC 端和移動端的不同之處入手,探討移動端長表單的設計有哪些注意事項。

供應商加盟項目的交互設計及原型制作:陳夢蝶(此文作者),視覺設計:陳叢哲。受限于開發成本,文中部分示例的功能并未上線。

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

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

方法1:當前場景下的常用選項

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

方法2:利用移動端設備能獲取的信息

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

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

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

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

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

相比于PC端,移動端需考慮調出的鍵盤類型及方式

相對于 PC 端的物理鍵盤,移動端的虛擬鍵盤由于受限于屏幕尺寸,在各種類型鍵盤間進行切換的成本較高,且在數字和各類中英文標點符號的輸入上效率較低。因此,在移動端長表單的設計中,需要更多考慮:默認調出哪種類型的鍵盤,才是當前場景下最為高效的選擇。

另外,當連續多個表單項的輸入方式各不相同時,可考慮使用聯動鍵盤。如下面的案例所示:

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

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

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

  • 降低認知負荷,讓用戶能更專注地完成任務;
  • 使得每一頁的出錯數得到降低,從而降低錯誤帶給用戶的挫敗感以及跳出率;
  • 配合進度指示器,能給用戶一種前進的正面感覺。

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

移動端的長表單在填寫完畢后,可考慮提供預覽功能

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

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

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

  • 盡可能地幫助用戶保存已填寫的表單信息;
  • 如果實在無法保存已填寫的表單信息,要友好且明確地提醒用戶這一風險。

當長表單需要上傳文件時,移動端支持的文件類型不如PC端多

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

總結

綜上所述,可將文中提到的內容歸納為一張表格。

參考

如何高效完成表單輸入?來看這個案例 – 優設
16個優點告訴你,為什么表單設計應該用這個方法? – 優設
Better Form Design: One Thing Per Page (Case Study) – Smashingmagazine
可能是最全面的表單設計完全手冊 – 優設
尼爾森可用性原則 – Nielsen Norman Group
從交互設計角度,聊聊Web網站和移動App的六大差異 – 優設
iPhone 20來了也沒用!這些功能iOS永遠不會有 – TechWeb
iOS進階第一天(數據處理之文件讀寫)- 簡書

歡迎關注「驢媽媽UED」的微信公眾號:

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.tawbbt.live/long-form-design-2

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計圈干貨 界面設計 排版布局 版式設計 職場 優設專訪 優設大課堂 設計師干貨 設計達人 配色 web前端開發 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 海報設計 設計規范 設計趨勢 用戶體驗設計 動效設計 logo設計 平面設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

二八杠千术