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

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

2019/09/23 12220評論 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個優點告訴你,為什么表單設計應該用這個方法? – 優設

可能是最全面的表單設計完全手冊 – 優設

從交互設計角度,聊聊Web網站和移動App的六大差別 – 優設

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

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

發表評論 加載中....

評論加載中....

uisdc

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

您還沒有登錄

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

微信掃碼

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

把好文章收藏到微信

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