用3個(gè)案例，讓你學(xué)會(huì)移動(dòng)端的長(zhǎng)表單設(shè)計(jì)

Echo ：基于營(yíng)業(yè)需求（常見于B端產(chǎn)品），偶然候用戶在操作過程中，不可避免的必要填寫許多表單。針對(duì)移動(dòng)端長(zhǎng)表單，我們應(yīng)該如何去精確的設(shè)計(jì)呢？

本文大綱：

• 三種主方案
• 主方案1的設(shè)計(jì)討論
• 主方案2的設(shè)計(jì)討論
• 主方案3的設(shè)計(jì)討論
• 總結(jié)

一. 三種主方案

針對(duì)長(zhǎng)表單的設(shè)計(jì)，按照設(shè)計(jì)思路的不同，可以分為三種主方案，如下所示：

圖中舉例的關(guān)鍵字段僅僅為舉例必要。

• 主方案1：我們常見的設(shè)計(jì)情勢(shì)，一個(gè)界面將所有表單信息展示出來。
• 主方案2：將不同的分組表單放在不同的下一級(jí)界面，用戶填寫之后返回。
• 主方案3：分步操作，一個(gè)界面完成一組表單內(nèi)容，點(diǎn)擊下一步進(jìn)入下一組表單。

二. 主方案1的設(shè)計(jì)討論

主方案1的設(shè)計(jì)優(yōu)瑕玷

好處：一個(gè)界面將所有表單信息展示出來，假如想查找某些填寫的信息也變得更容易，相對(duì)于主方案2和3，削減了網(wǎng)頁跳轉(zhuǎn)操作和查看。

瑕玷：基于移動(dòng)端界面承載能力較弱，一個(gè)界面將表單所有展示出來，用戶一次性欣賞和操作起來壓力較大，容易使操作流程失敗，導(dǎo)致成功率大大降低。

針對(duì)于主方案1，用戶完成表單后，提交按鈕有三種重要的設(shè)計(jì)方法:

• 提交按鈕放在表單最后。
• 提交按鈕放在導(dǎo)航欄上。
• 提交按鈕底部懸浮。

如下圖所示：

• 方案1.0，假如提交按鈕放在表單之后，那么用戶的視覺流和操作感覺是同等的，流暢而天然。但是會(huì)出現(xiàn)一個(gè)題目，用戶在輸入信息時(shí)，鍵盤調(diào)用會(huì)遮擋到提交按鈕。Android手機(jī)上的輸入法都可以點(diǎn)擊輸入法上的按鈕將鍵盤推下去。而iOS 原生輸入法沒辦法推下去，只能點(diǎn)擊其他非編輯區(qū)域才能推下鍵盤。如許就顯得很麻煩，用戶可能會(huì)忽略掉提交按鈕。
• 方案1.1，解決了提交按鈕會(huì)被鍵盤擋住的缺陷，但是視覺流和操作舉動(dòng)錯(cuò)亂，用戶在屏幕底部輸入完成之后，視覺和手指要返回到頂部操作。
• 方案1.2，提交按鈕底部懸浮，解決了方案1.1的視覺流和操作混亂的題目，解決了方案1.0提交按鈕被隱蔽的題目，但是當(dāng)輸入文本，調(diào)出鍵盤時(shí)，仍舊會(huì)被擋住。

使用底部懸浮按鈕的場(chǎng)景使操作按鈕特別很是緊張，例如手機(jī)淘寶的立即購買和加入購物車。

同時(shí)底部懸浮按鈕不適用于文本操作類。例如文章說的長(zhǎng)表單文本輸入。當(dāng)輸入文本，調(diào)出鍵盤時(shí)，仍舊會(huì)被擋住。

底部懸浮按鈕適用于非文本輸入的使用場(chǎng)景。從手機(jī)淘寶、新浪微博可以看出，適用于在界面中非文本輸入、提供一個(gè)功能入口或者是界面非文本輸入的選擇信息的確認(rèn)。

三. 主方案2的設(shè)計(jì)討論

主方案2的設(shè)計(jì)優(yōu)瑕玷

• 好處：與主方案3相比不同分組表單之前切換查看信息方便快捷。申請(qǐng)流程的首頁簡(jiǎn)潔，填寫信息悉數(shù)隱蔽到下一級(jí)界面。
• 瑕玷：往返跳轉(zhuǎn)，操作負(fù)荷較大，會(huì)把用戶繞暈。

在方案2.0中用戶填寫完成的分組和未填寫完成的分組區(qū)分不開，將方案2.0進(jìn)行優(yōu)化，例如填寫完成后，會(huì)出現(xiàn)已完成的標(biāo)簽，提醒用戶已完成和未完成不同的狀況（如方案2.1）

四. 主方案3的設(shè)計(jì)討論

Facebook曾針對(duì)分步注冊(cè)與非分步注冊(cè)做過A/B Test，其結(jié)論指出分步注冊(cè)的轉(zhuǎn)化率遠(yuǎn)高于非分步注冊(cè)。由此可見，非分步注冊(cè)強(qiáng)行削減注冊(cè)網(wǎng)頁，不如適當(dāng)拉長(zhǎng)戰(zhàn)線，給用戶輕負(fù)荷的操作，讓用戶在不知不覺中完成注冊(cè)流程。

主方案3的設(shè)計(jì)優(yōu)瑕玷

• 好處：流程分步操作，相對(duì)于主方案1，用戶操作成功率大幅度進(jìn)步。
• 瑕玷：假如用戶操作到了第三步，必要返回第一步確認(rèn)填寫信息的正確性，那么用戶必要兩次返回。

用戶填寫的信息做保存（緩存），用戶返回上一步，填寫的數(shù)據(jù)做保留。H5仍舊適用，用戶填寫的數(shù)據(jù)保存在數(shù)據(jù)庫，用戶返回上一步時(shí)，同時(shí)刷新載入數(shù)據(jù)庫記錄的數(shù)據(jù)。

對(duì)于方案3.0和3.1 。下一步按鈕不同。究竟采取哪種？方案3.0視覺流和操作流是正常情況，且不存在按鈕被鍵盤擋住，所以方案3.0最佳。

移動(dòng)端長(zhǎng)表單設(shè)計(jì)總結(jié)

主方案1、2和3，都有各自不同的優(yōu)瑕玷。

一個(gè)交互流程的好壞，最緊張的標(biāo)準(zhǔn)之一是讓用戶順利完成操作流程，保證操作流程的成功率，才能完成用戶的目標(biāo)。以此標(biāo)準(zhǔn)來看，主方案3是最好的。

接下來探究一個(gè)細(xì)節(jié)題目，就是提交按鈕是放在頂部導(dǎo)航欄、信息內(nèi)容區(qū)內(nèi)照舊底部懸??？

這里分為4種情況：

情況1：內(nèi)容區(qū)加上操作按鈕不被鍵盤覆蓋。建議按鈕放在內(nèi)容區(qū)內(nèi)。

情況2：必填的內(nèi)容未被鍵盤覆蓋，非必填被覆蓋，建議操作按鈕放在導(dǎo)航欄上，例如同伙圈、QQ空間和新浪微博。

情況3：必填的表單超過一屏，建議按鈕放在內(nèi)容區(qū)。

放在導(dǎo)航欄上不行的緣故原由有兩個(gè)：

• 視覺流錯(cuò)誤，從上往下，信息量很大，用戶滑動(dòng)欣賞時(shí)，會(huì)忽略且很難聯(lián)想點(diǎn)擊右上角下一步，行業(yè)常見放在導(dǎo)航欄上是由于必填的不超過一屏 ；
• 當(dāng)必填項(xiàng)過多時(shí)，要滑動(dòng)屏幕才能填完。 把按鈕放在右上角的導(dǎo)航欄，當(dāng)用戶還沒填寫完成，那么在按鈕放在導(dǎo)航欄上很容易去點(diǎn)擊，容易指導(dǎo)用戶犯錯(cuò)。

情況4：必填超過一屏，且無非文本輸入，建議可適用底部懸浮。

作者是前華為ITUX 的交互組組長(zhǎng)，最近剛離職，想找交互高手的公司可以加他小我微旌旗燈號(hào)：goldseng

迎接關(guān)注作者的微信公眾號(hào)：「UEDC」