手機App為生活帶來巨大便利，多種多樣的移動表單設(shè)計形式進入我們的工作與生活。表單是移動應(yīng)用中與用戶產(chǎn)生最多交互的地方，包括：用戶注冊、訂閱服務(wù)、用戶反饋、問卷表單、買賣交易等等。

一個優(yōu)秀的表單設(shè)計有助于提升產(chǎn)品用戶體驗，提高轉(zhuǎn)化率，達到更好的營銷效果。

每個表單都有特定的目的，或吸引注冊，或達成交易?？紤]不周或錯誤設(shè)計會導致用戶流失或交易失敗。

學習表單設(shè)設(shè)計，需要先了解表單設(shè)計的基本原則，避免做表單時進入雷區(qū)。

表單設(shè)計基本原則

1.?邏輯清晰

表單是產(chǎn)品與用戶溝通的語言，和對話一樣，表單應(yīng)當符合邏輯，幫助雙方完成交流。

?

2.?盡量使用單列設(shè)計

多列表單容易讓用戶漏填，無法集中精力完成填寫。單列表單填寫路徑單一、直接、相比更為高效。

?

3.?減少輸入

表單越長越復雜，用戶完成表單的意愿越低（尤其在移動端產(chǎn)品中）。最大限度減少輸入字段，使表單完成更快速，尤其向用戶索取大量信息時，更要注意表單簡潔。

?

4.?提供合適的輸入方式

輸入“賬號、密碼，郵箱，昵稱”時應(yīng)提供不同鍵盤，減少輸入錯誤，幫助用戶快速完成填寫。

?

5.?避免把標簽當占位符使用

有一種設(shè)計模式是讓標簽作為占位符置于輸入框中，用戶點擊輸入時自動消失。這種設(shè)計比較簡約，但用戶輸入時容易忘記需要輸入的字段是什么，從而產(chǎn)生問題。

優(yōu)秀案例：移動端表單設(shè)計?

↘Dropbox?by Sam Atmore

交互設(shè)計分析?：

Sam的登陸/注冊表單中，登陸、注冊邏輯非常清晰。

1.使用單列二選一表單設(shè)計。用戶使用App前，只需要二選一隨標簽提示進行下一步操作。就是誤操作也可以用滑動回到另一選項。

2.登陸、注冊頁面的主按鈕明確，有強引導作用。?

↘Location Switching?- by Nimasha Perera

交互設(shè)計分析：關(guān)鍵詞“智能自動填充選項”

表單設(shè)計融入更多自動化元素。如：自動定位功能，根據(jù)當前位置智能填充信息。省去用戶地理位置選擇操作，貨幣轉(zhuǎn)化操作，省時省力

↘Form Validation?- by Emmanuel Torres

?

交互設(shè)計分析?：關(guān)鍵詞“明顯可見的提示信息”

用戶登陸、注冊過程，理想狀態(tài)是完成信息填寫并提交。

但實際操作中錯誤不可避免，表單設(shè)計要考慮有辨識度的信息提示，實時提醒用戶填寫錯誤。而不是全部完成后再告訴他。

拆解表單組件樣式

表單的主要特點是引導用戶填寫信息，設(shè)計上應(yīng)考慮主要信息內(nèi)容如何引導用戶瀏覽。表單中的信息內(nèi)容包括：

1)輸入字段：包括文本字段、密碼字段、復選框、單選按鈕、滑塊和其他需要用戶輸入的字段；

2)字段標簽：說明用戶輸入字段的含義，如文本框前的“你的姓名”；

3)外觀和結(jié)構(gòu)：包括字段順序、表單在界面中的樣式及不同字段間邏輯關(guān)系；

4)動作按鈕：至少有一個操作按鈕（如提交按鈕）；

5)反饋信息：將操作結(jié)果通知用戶。如：“謝謝，表單提交成功！”、“你提供的數(shù)字不正確”。

l主流表單樣式

↘上標題下提示內(nèi)容的表單

優(yōu)點：標題、提示內(nèi)容可以很長，預(yù)覽速度快，可以加功能按鈕（如附件和照片添加）。

缺點：占據(jù)垂直空間較大。

多用于信息內(nèi)容填寫和維修工單信息填寫，可以減少頁面跳轉(zhuǎn)。

↘左標題右內(nèi)容（左右對齊）

優(yōu)點：常用組件，前端可以直接套用，節(jié)省垂直空間，引導用戶視覺左右移動，增加用戶思考時間，對關(guān)鍵信息填寫更加安全。

缺點：相比上下結(jié)構(gòu)表單，用戶視覺移動距離增加,行數(shù)量多，視覺會很亂。

適用于通用表單填寫場景。

↘左標題右內(nèi)容（全部居左對齊）

優(yōu)點：強暗示可輸入，視覺瀏覽速度快。

缺點：標題字段數(shù)量不能太過長短不一，會導致視覺不均衡。

主要適用場景：適合金額數(shù)字類和身份信息填寫。

↘歸類標題表單（內(nèi)容歸屬一類）

將同類表單項合成小組內(nèi)容，幫助用戶分類理解填寫內(nèi)容。符合格式塔原理的相似性和封閉性原理。

多用于詳情信息展示。

↘僅提示內(nèi)容表單

優(yōu)點：信息少，不需要思考。

缺點：當內(nèi)容一多很容易出現(xiàn)用戶“不知道產(chǎn)品要做什么”的困惑（表單無標題）。

用于登錄頁或內(nèi)容較少，如修改手機號/修改姓名/填寫備注等。

拆解表單組件交互

表單交互主要有兩個目標：引導操作和反饋。

交互操作時，表單有3個交互階段：輸入前、輸入中、輸入后

↘輸入前

引導用戶輸入內(nèi)容，如：密碼設(shè)置場景

輸入框在默認狀態(tài)提示文案引導用戶輸入相應(yīng)的內(nèi)容；或輸入框外有提示，僅支持字母、數(shù)字、某某符號輸入

↘輸入中

點擊輸入框彈出鍵盤，光標閃爍，定位用戶當前位置。

表單內(nèi)容一般有字符數(shù)量限制，輸入過程中超過字符限制實時報錯提示。

如下圖：聚焦請輸入原密碼時,線段顏色明顯加重，做為輸入中提示。

↘輸入后

web端

輸入框失焦即判斷輸入信息是否符合規(guī)則，不合規(guī)則報錯提示。例如：

玩家用戶名重復提醒，密碼首字母沒有大寫，密碼長度不符合要求；

輸入成功則成功反饋，例如：

輸入框右側(cè)圖標點亮

移動端

輸入所有內(nèi)容，不即刻做規(guī)則判斷，先激活按鈕。例如：

發(fā)布、完成、下一步按鈕激活

用戶點擊操作按鈕再進行輸入信息合規(guī)判斷。

案例：提升用戶體驗和客戶轉(zhuǎn)化的最佳表單設(shè)計

填寫表單對于用戶來說是一道檻，下面就來看一看提升用戶體驗和客戶轉(zhuǎn)化的注冊、登錄表單中最佳設(shè)計模式時應(yīng)注意哪些設(shè)計、交互細節(jié)：

1.說明注冊價值

用戶最不想做的事就是注冊。用明確的價值說明能激發(fā)注冊行為。表達的價值主張：在這里，連接世界。

2.設(shè)置醒目登陸輸入框

直接顯示輸入框，而不是設(shè)置“登錄”鏈接給用戶增加一次點擊。

3.允許使用第三方賬號注冊、登錄

允許用戶使用現(xiàn)有的第三方帳戶登錄產(chǎn)品能給用戶帶來便利，記很多密碼是令人頭痛的問題。

4.用戶名采用郵箱或手機號碼

使用電子郵件、手機號碼作為用戶名比起一個新名字讓用戶輕松很多，因為新起的用戶名往往已被占用。

5.登錄、注冊功能區(qū)分明顯

登錄（Sign in/Login）、注冊（Register/Sign up）鏈接放在一起，很容易使用戶混淆，盡可能將兩者區(qū)別表達

6.高亮顯示輸入框，允許記住用戶登錄信息

用戶在輸入框輸入內(nèi)容時，文本框高亮顯示提示正在該框內(nèi)工作。允許該表單記住本人登錄信息。

7.允許用戶查看密碼

密碼總是以圓點顯示，不能確認輸入的密碼是否正確，允許密碼明文顯示是充滿人性的設(shè)計。

8.必要的信息提示

輸入錯誤的信息提示，還包括一些重要的注意事項提示，例如以下三個表單：

9.顯示密碼強壯程度

10.少使用下拉選項

表單中某項目里只有3-4個參數(shù)要選擇，不要使用下拉框更有利于用戶體驗。不要要求用戶重復填寫Email地址。

關(guān)于陪學網(wǎng)（www.pexue.com）：我們6年來專注于產(chǎn)品管理類課程的開發(fā)與制作，志在為產(chǎn)品經(jīng)理、交互設(shè)計、平面設(shè)計、需求人員分享最新、最好的產(chǎn)品類課程。學員遍布國內(nèi)外知名互聯(lián)網(wǎng)產(chǎn)品團隊：百度、新浪、騰訊、領(lǐng)英等