手機版WordPress網站建設中長表單只有這樣設計才能留住多使用者！

移動端的應用越來越廣泛，多使用者不再侷限於 B 端產品的需求，網站建設中越來越多的企業選擇同步做手機版網站。基於客戶業務需求，有時候多使用者在操作過程中，不可避免的需要填寫很多表單，針對於移動端長表單，應該如何設計才能給多使用者更好的體驗呢？

移動端網頁長表單的設計，按照設計思路的不同，一般有三種主方案，如下所示：

主方案 1——我們常見的設計形式，一個介面將所有表單資訊展示出來；

主方案 2——將不同的分組表單放在不同的下一級介面，多使用者填寫之後返回；

主方案 3——分步操作，一個介面完成一組表單內容，點選下一步進入下一組表單；

主方案 1 的設計討論

優點：一個介面將所有表單資訊展示出來，如果想查詢某些填寫的資訊也變得更容易，相對於主方案 2 和 3，減少了頁面跳轉操作和檢視。

缺點：基於移動端介面承載能力較弱，一個介面將表單所有展示出來，多使用者一次性瀏覽和操作起來壓力較大，容易使操作流程失敗，導致成功率大大降低。

針對於主方案 1，多使用者完成表單完成後，提交按鈕有三種主要的設計方法，一種是提交按鈕放在表單後，一種是提交按鈕放在導航欄上。另一種是，提交按鈕底部懸浮。如下圖所示：

方案 1.0，如果提交按鈕放在表單之後，那麼多使用者的視覺流和操作感覺是一致的，流暢而自然。但是會出現一個問題，多使用者在輸入資訊時，鍵盤呼叫會遮擋到提交按鈕。 Android 手機上的輸入法都可以點選輸入法上的按鈕將鍵盤推下去。而 iOS 原生輸入法沒辦法推下去，只能點選其他非編輯區域才能推下鍵盤。這樣就顯得很麻煩，多使用者可能會忽略掉提交按鈕。

方案 1.1，解決了提交按鈕會被鍵盤擋住的缺陷，但是視覺流和操作行為錯亂，多使用者在螢幕底部輸入完成之後，視覺和手指要返回到頂部操作。

方案 1.2，提交按鈕底部懸浮，解決了方案 1.1 的視覺流和操作紊亂的問題，解決了方案 1.0 提交按鈕被隱藏的問題，但是當輸入文字，調出鍵盤時，依舊會被擋住。

使用底部懸浮按鈕的場景是操作按鈕非常重要，例如手機淘寶的立即購買和加入購物車。

同時底部懸浮按鈕不適用於文字操作類。例如文章說的長表單文字輸入。當輸入文字，調出鍵盤時，依舊會被擋住。

底部懸浮按鈕適用於非文字輸入的使用場景。從手機淘寶、新浪微博可以看出，適用於在介面中非文字輸入、提供一個功能入口或者是介面非文字輸入的選擇資訊的確認。

主方案 2 的設計討論

優點：與主方案 3 相比不同分組表單之前切換檢視資訊方便快捷。申請流程的頁簡潔，填寫資訊全部隱藏到下一級介面。

缺點：來回跳轉，操作負荷較大，會把多使用者繞暈。

在方案 2.0 中多使用者填寫完成的分組和未分組填寫分組區分不開，將方案 2.0 進行最佳化，例如填寫完成後，會出現已完成的標籤，提示多使用者已完成和未完成不同的狀態 (如方案 2.1)

主方案 3 的設計討論

Facebook 曾針對分步註冊與非分步註冊做過 A/B Test，其結論指出分步註冊的轉化率遠高於非分步註冊。由此可見，非分步註冊強行減少註冊頁面，不如適當拉長戰線，給多使用者輕負荷的操作，讓多使用者在不知不覺中完成註冊流程。

優點：流程分步操作，相對於主方案 1，多使用者操作成功率大幅度提高。