移動端 鍵盤把搜尋内容頂上去_必看幹貨：UI中移動端長表單應如何設計?

大家應該發現了，現在除了百分之90以上人群會選擇在手機端網購之外，很多原來在PC端操作的内容也逐漸轉移到手機端，這都得益于手機的快捷和普及。今天譽财教育就和大家來探讨一下移動端長表單的UI設計，那麼我們首先就從PC端和手機端的不同分析起。

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

PC端和移動端在手動輸入的便捷程度上是不同的。PC 端的輸入較便捷;移動端的輸入較不便捷，畢竟手指與螢幕的觸碰面積較大，效率和精準程度遠不及 PC 端的鍵盤滑鼠。是以，為了打造便捷優雅的操作體驗，移動端表單需要盡量減少使用者的手動輸入。我們發現有以下幾種方法可以減少手動輸入。

方法1：目前場景下的常用選項

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

方法2：利用移動端裝置能擷取的資訊

盡管移動端在輸入上沒有那麼便捷，但擷取到資訊種類與精确度，卻具有一定的優勢。比如，移動端裝置能較為精确地擷取到使用者目前的地理位置，這就為某些需要填寫位置的表單提供了便捷(如收貨位址、聯系位址等)。再如，調用通訊錄的功能也經常出現在各種需要填寫手機号的表單中。

方法3：提供使用者的曆史輸入項

一份表單中出現了多處相同類型的表單項，這時可以提供使用者的曆史輸入項供其選擇。另外，很多填單頁也會将使用者輸入的資訊自動儲存為常用收貨人等，同樣也是用到了這一方法。

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

由于 OCR 技術(Optical Character Recognition，光學字元識别)的發展，拍照識别文字的速度和準确度都有了較大的提升，最常見的就是各大金融服務應用中拍照識别銀行卡号的功能。

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

相對于 PC 端的實體鍵盤，移動端的虛拟鍵盤由于受限于螢幕尺寸，在各種類型鍵盤間進行切換的成本較高，且在數字和各類中英文标點符号的輸入上效率較低。是以，在移動端長表單的設計中，需要更多考慮：預設調出哪種類型的鍵盤，才是目前場景下最為高效的選擇。

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

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

移動端裝置相比于 PC 端裝置，螢幕尺寸小得多。一份在 PC 端可以用 1-2 屏展示完全的表單，在移動端可能需滑動 7-8 屏才能完整檢視。如果在移動端用一個頁面承載 7-8 屏才能看完的長表單，可能會造成高跳出率和低完成率。表單設計領域的專家 Adam Silver 通過實際項目發現：将較長表單拆解為若幹部分，用若幹頁面展示，能提升使用者滿意度以及支付轉化率。

那麼，分頁面展示就足夠了麼?還不一定。根據具體的情況，有時還需要将一個頁面中的内容劃分為不同的子產品。具體的做法是：将相關表單項進行分類組合，并通過卡片、分割線或間距将它們分成不同的語義組，并添加對應子產品标題以突出頁面的節奏感，進而幫助使用者更加高效地浏覽和填寫表單。

四、移動端的長表單在填寫完畢後，可考慮提供預覽功能

為什麼要考慮預覽功能呢?對于分頁面填寫的表單，如需檢查之前已填寫的内容，要逐漸傳回之前的頁面檢視，十分不便。是以，提供一個專門的預覽頁面讓使用者對表單進行檢查和确認，是很有必要的。而這也符合尼爾森可用性原則中的易取原則，盡可能減少使用者的回憶負擔，把需要使用者記憶或确認的内容直接展示出來。

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

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

對于異常情況的發生，譽财建議大家設計時可從這 2 點進行考慮：盡可能地幫助使用者儲存已填寫的表單資訊;如果實在無法儲存已填寫的表單資訊，要友好且明确地提醒使用者這一風險。

六、當長表單需要上傳檔案時，移動端支援的檔案類型不如PC端多

這一點主要是對于 iOS 作業系統而言的。相比于 Android 作業系統，iOS 系統對資料讀寫有限制，這是由于 iOS 系統的沙盒(SandBox)機制所決定的。所謂沙盒機制，就是各個應用程式的資料都放在獨立的沙盒中進行儲存，應用程式隻能在自己的沙盒中通路檔案，不可以通路其他沙盒中的内容。對于 iOS 系統的 APP 而言，一般隻能通路裝置的相冊資源。是以，如果移動端表單需要上傳檔案，需要考慮到 iOS 作業系統這一資料讀寫的限制問題，并根據限制來規範化支援上傳的檔案格式。

總結起來還是UI設計的中心思想，“以人為本”，所有的一切都是在基于功能的情況下使界面更加人性化，使用者更願意使用該界面，留住使用者，幫助使用者完成任務就是終極目的。UI設計的學習道艱且長，同學們要一直堅持下去哦，要知道不斷更新的行業才是可持續發展的!