本文是我在學習了《案例講解 | 移動端的長表單應(yīng)該如何設(shè)計？》后，結(jié)合日常工作經(jīng)驗后的習作。新手上路，總結(jié)學習居多。再次感謝Echo君的原作。
基于業(yè)務(wù)需求（常見于B端產(chǎn)品），有時候用戶在操作過程中，不可避免的需要填寫很多表單。針對于移動端長表單，我們應(yīng)該如何去正確的設(shè)計呢？
文本大綱：
1.三種方案
2.方案1的設(shè)計討論
3.方案2的設(shè)計討論
4.方案3的設(shè)計討論
5.表單內(nèi)按鈕擺放位置的設(shè)計討論
6.總結(jié)
1.三種方案
針對長表單的設(shè)計，按照設(shè)計思路不同，可以分為三種方案，如下所示：
方案1：在一個界面上展示所有的表單內(nèi)容。
方案2：將表單分組，在界面上展示分好的組。將組里的表單內(nèi)容放到下一級頁面，用戶在下一級頁面填寫完成后，返回上一頁進行下一步操作。
方案3：分步驟操作，一個界面完成一個組的表單內(nèi)容，點擊下一步進入下一組表單界面。
2.方案1的設(shè)計討論
方案1的設(shè)計優(yōu)缺點
優(yōu)點：所有表單內(nèi)容在一個界面展示出來，與方案2、方案3相比，減少了頁面的跳轉(zhuǎn)，可以很方便地查看表單里面的內(nèi)容。
缺點：由于移動端界面承載能力較弱，所有的表單內(nèi)容在一個界面展示出來，用戶一次性瀏覽和操作起來的壓力較大，容易使操作流程失敗，導致成功率大大降低。
3.方案2的設(shè)計討論
方案2的設(shè)計優(yōu)缺點及注意點
優(yōu)點：填寫信息的首頁簡潔，填寫信息全部隱藏到下一級界面。與方案3相比不同的分組之間切換查看表單內(nèi)容更為方便。
缺點：來回跳轉(zhuǎn)，操作負荷較大，加大用戶的用腦力度。
注意點：要將用戶填寫完成的分組和未填寫完成的分組區(qū)分開來?？梢约由弦呀?jīng)完成的標簽或符號來進行區(qū)分。如下圖：
4.方案3的設(shè)計討論
Facebook曾針對分步注冊與非分步注冊做過A/B Test，其結(jié)論指出分步注冊的轉(zhuǎn)化率遠高于非分步注冊。由此可見，非分步注冊強行減少注冊頁面，不如適當拉長戰(zhàn)線，給用戶輕負荷操作，讓用戶在不知不覺中完成注冊流程。
方案3的設(shè)計優(yōu)缺點及注意點
優(yōu)點：流程分步操作，相對于方案1，簡化任務(wù)，讓用戶感覺到自己在一點點往前進行中，減輕了用戶操作和心理壓力，并且不會漏掉重要內(nèi)容，減少犯錯幾率，操作成功率大幅度提高。
缺點：用戶操作到了第三步的時候，如果需要返回第一步確認填寫信息的準確性，那么用戶需要兩次返回操作。分步太多，容易引起用戶的心理抵觸情緒。一般3-5步比較合適。
注意點：
① 分步數(shù)量以及分步邏輯要合理。盡量讓分步數(shù)量較少，一般3-5步比較合適。
②?表明步驟的進行方向（從左到右還是從上到下）。
③ 每一步的目的要明確。3步以上建議采用下圖方案3.0的方案，導航欄上顯示此分步操作目的的簡短說明，每一步都有清楚準確的分步標題。
④ 要清楚地標識出當前的步數(shù)和總步數(shù)，讓已完成步驟和其他步驟有所區(qū)別，標明接下來還剩幾步，讓用戶清楚自己處于過程中的哪一步，最后一步完成時，給一個鼓勵性的提示。
⑤ 允許重做每一步。讓用戶可以修改前幾步的內(nèi)容，后者檢查一下。除當前步驟外所有已填寫的步驟上加上跳轉(zhuǎn)鏈接（點擊跳轉(zhuǎn)到對應(yīng)的步驟）。
⑥ 用戶填寫的內(nèi)容做實時保存（H5依舊適用），記錄在數(shù)據(jù)庫。
⑦ 用戶返回前面的步驟時，同時刷新加載入數(shù)據(jù)庫記錄的數(shù)據(jù)。
⑧ 去掉界面上不必要的元素。讓用戶專注于任務(wù)。
⑨ 可以在操作完成之前，提供所有信息的整體匯總預覽，讓用戶在最后點擊“提交”之前，重新檢查一遍自己所輸入的內(nèi)容。此條應(yīng)按照具體需求決定是否加入此功能。
5.表單內(nèi)按鈕擺放位置的設(shè)計討論
表單里的按鈕有三種擺放位置，分別是內(nèi)容區(qū)、頂部導航欄和底部懸浮。如下圖：
按鈕放在內(nèi)容區(qū)的優(yōu)缺點
優(yōu)點：用戶的視覺流和操作行為是一致的，順暢自然的。
缺點：用戶輸入信息時，調(diào)用的鍵盤會遮擋到提交按鈕。Android系統(tǒng)的鍵盤可以點擊鍵盤上的隱藏按鈕將鍵盤推下去；iOS系統(tǒng)原生鍵盤沒有隱藏按鈕，只能通過點擊其他非編輯區(qū)域才能將鍵盤推下去。當表單下面是非必填選項的時候，用戶需要滑動到底部才能看到提交按鈕，操作過于繁重，用戶可能會忽略掉提交按鈕。
所以，必填表單和按鈕不被鍵盤覆蓋時或者必填表單超過一屏時，適用此方案。
按鈕放在頂部導航欄的優(yōu)缺點
優(yōu)點：按鈕的位置一直在視野內(nèi)，不會被鍵盤擋住。
缺點：視覺流和操作行為不一致，視覺流從上往下。當必填表單超過一屏時，信息量很大，用戶集中注意力滑動屏幕完成填寫后，視覺流被打斷，很容易忽略導航欄上的按鈕，而且用戶需要移動手指到屏幕頂部才能進行操作，降低提交的成功率。并且，在上述情況下，用戶還沒有填寫完成時，很容易引導看到提交按鈕的用戶去點擊提交按鈕，導致用戶犯錯，容易使用戶產(chǎn)生煩躁心理，降低提交的成功率。
所以，必填表單未被鍵盤覆蓋，非必填被覆蓋時，適用此方案。必填表單超過一屏的時候，不適用把按鈕放在頂部導航欄的方案。
按鈕在底部懸浮的優(yōu)缺點
優(yōu)點：提交按鈕比較明顯，不會被忽略。
缺點：當輸入文本，調(diào)出鍵盤時，iOS系統(tǒng)上的底部懸浮按鈕依舊會被擋住，需要來回調(diào)用推下鍵盤才可以看到提交按鈕，操作繁重；Android系統(tǒng)的按鈕會被釘在鍵盤上，但是減少了用戶可視區(qū)域的面積。
所以，底部懸浮按鈕適用于非文本輸入的界面，或者給一個界面提供一個功能入口。適用于在界面中非文本輸入、提供一個功能入口或者是界面非文本輸入的選擇信息的確認。
綜上所述
① 必填表單超過一屏時，建議采用按鈕放在內(nèi)容區(qū)的方案；
② 必填表單表單超過一屏，且無文本輸入時，建議采用按鈕底部懸浮的方案；
③ 表單加上操作按鈕不被鍵盤覆蓋，建議采用按鈕放在內(nèi)容區(qū)的方案；
④ 必填表單未被鍵盤覆蓋，建議采用按鈕放在導航欄上的方案。
影響按鈕擺放位置的還有其他因素，比如還有其他按鈕等等，不是絕對的，要具體情況具體分析。
6.總結(jié)
方案1、方案2和方案3各有自己的優(yōu)缺點，一般情況下，方案3好一些。
表單內(nèi)按鈕的擺放位置基本規(guī)則如下：
① 必填表單超過一屏時，建議采用按鈕放在內(nèi)容區(qū)的方案；
② 必填表單表單超過一屏，且無文本輸入時，建議采用按鈕底部懸浮的方案；
③ 表單加上操作按鈕不被鍵盤覆蓋，建議采用按鈕放在內(nèi)容區(qū)的方案；
④ 必填表單未被鍵盤覆蓋，建議采用按鈕放在導航欄上的方案。
規(guī)則是死板的，產(chǎn)品經(jīng)理或者設(shè)計師應(yīng)具體情況具體分析，避免被規(guī)則框住。
