手機App為生活帶來巨大便利，多種多樣的移動表單設計形式進入我們的工作與生活。表單是移動應用中與用戶產生最多交互的地方，包括：用戶註冊、訂閱服務、用戶反饋、問卷表單、買賣交易等等。
壹個優秀的表單設計有助於提升產品用戶體驗，提高轉化率，達到更好的營銷效果。
每個表單都有特定的目的，或吸引註冊，或達成交易。考慮不周或錯誤設計會導致用戶流失或交易失敗。
學習表單設設計，需要先了解表單設計的基本原則，避免做表單時進入雷區。
表單設計基本原則
1.?邏輯清晰
表單是產品與用戶溝通的語言，和對話壹樣，表單應當符合邏輯，幫助雙方完成交流。
? 2.?盡量使用單列設計
多列表單容易讓用戶漏填，無法集中精力完成填寫。單列表單填寫路徑單壹、直接、相比更為高效。?
3.?減少輸入
表單越長越復雜，用戶完成表單的意願越低（尤其在移動端產品中）。最大限度減少輸入字段，使表單完成更快速，尤其向用戶索取大量信息時，更要註意表單簡潔。
4.?提供合適的輸入方式
輸入“賬號、密碼，郵箱，昵稱”時應提供不同鍵盤，減少輸入錯誤，幫助用戶快速完成填寫。?
5.?避免把標簽當占位符使用
有壹種設計模式是讓標簽作為占位符置於輸入框中，用戶點擊輸入時自動消失。這種設計比較簡約，但用戶輸入時容易忘記需要輸入的字段是什麽，從而產生問題。
優秀案例：移動端表單設計?
↘Dropbox?by Sam Atmore
交互設計分析?：
Sam的登陸/註冊表單中，登陸、註冊邏輯非常清晰。
1.使用單列二選壹表單設計。用戶使用App前，只需要二選壹隨標簽提示進行下壹步操作。就是誤操作也可以用滑動回到另壹選項。
2.登陸、註冊頁面的主按鈕明確，有強引導作用。?
↘Location Switching?- by Nimasha Perera
交互設計分析：關鍵詞“智能自動填充選項”
表單設計融入更多自動化元素。如：自動定位功能，根據當前位置智能填充信息。省去用戶地理位置選擇操作，貨幣轉化操作，省時省力
↘Form Validation?- by Emmanuel Torres
交互設計分析?：關鍵詞“明顯可見的提示信息”
用戶登陸、註冊過程，理想狀態是完成信息填寫並提交。
但實際操作中錯誤不可避免，表單設計要考慮有辨識度的信息提示，實時提醒用戶填寫錯誤。而不是全部完成後再告訴他。
拆解表單組件樣式
表單的主要特點是引導用戶填寫信息，設計上應考慮主要信息內容如何引導用戶瀏覽。表單中的信息內容包括：
1) 輸入字段： 包括文本字段、密碼字段、復選框、單選按鈕、滑塊和其他需要用戶輸入的字段；
2) 字段標簽： 說明用戶輸入字段的含義，如文本框前的“妳的姓名”；
3) 外觀和結構： 包括字段順序、表單在界面中的樣式及不同字段間邏輯關系；
4) 動作按鈕： 至少有壹個操作按鈕（如提交按鈕）；
5) 反饋信息： 將操作結果通知用戶。如：“謝謝，表單提交成功！”、“妳提供的數字不正確”。
l主流表單樣式
↘上標題下提示內容的表單
優點：標題、提示內容可以很長，預覽速度快，可以加功能按鈕（如附件和照片添加）。
缺點：占據垂直空間較大。
多用於信息內容填寫和維修工單信息填寫，可以減少頁面跳轉。
↘左標題右內容（左右對齊）
優點：常用組件，前端可以直接套用，節省垂直空間，引導用戶視覺左右移動，增加用戶思考時間，對關鍵信息填寫更加安全。
缺點：相比上下結構表單，用戶視覺移動距離增加,行數量多，視覺會很亂。
適用於通用表單填寫場景。
↘左標題右內容（全部居左對齊）
優點：強暗示可輸入，視覺瀏覽速度快。
缺點：標題字段數量不能太過長短不壹，會導致視覺不均衡。
主要適用場景：適合金額數字類和身份信息填寫。
↘歸類標題表單（內容歸屬壹類）
將同類表單項合成小組內容，幫助用戶分類理解填寫內容。符合格式塔原理的相似性和封閉性原理。
多用於詳情信息展示。
↘僅提示內容表單
優點：信息少，不需要思考。
缺點：當內容壹多很容易出現用戶“不知道產品要做什麽”的困惑（表單無標題）。
用於登錄頁或內容較少，如修改手機號/修改姓名/填寫備註等。
拆解表單組件交互
表單交互主要有兩個目標：引導操作和反饋。
交互操作時，表單有3個交互階段：輸入前、輸入中、輸入後
↘輸入前
引導用戶輸入內容，如：密碼設置場景
輸入框在默認狀態提示文案引導用戶輸入相應的內容；或輸入框外有提示，僅支持字母、數字、某某符號輸入
↘輸入中
點擊輸入框彈出鍵盤，光標閃爍，定位用戶當前位置。
表單內容壹般有字符數量限制，輸入過程中超過字符限制實時報錯提示。
如下圖：聚焦請輸入原密碼時,線段顏色明顯加重，做為輸入中提示。
↘輸入後
web端
輸入框失焦即判斷輸入信息是否符合規則，不合規則報錯提示。例如：
玩家用戶名重復提醒，密碼首字母沒有大寫，密碼長度不符合要求；
輸入成功則成功反饋，例如：
輸入框右側圖標點亮
移動端
輸入所有內容，不即刻做規則判斷，先激活按鈕。例如：
發布、完成、下壹步按鈕激活
用戶點擊操作按鈕再進行輸入信息合規判斷。
案例：提升用戶體驗和客戶轉化的最佳表單設計
填寫表單對於用戶來說是壹道檻，下面就來看壹看提升用戶體驗和客戶轉化的註冊、登錄表單中最佳設計模式時應註意哪些設計、交互細節：
1.說明註冊價值
用戶最不想做的事就是註冊。用明確的價值說明能激發註冊行為。表達的價值主張：在這裏，連接世界。
2.設置醒目登陸輸入框
直接顯示輸入框，而不是設置“登錄”鏈接給用戶增加壹次點擊。
3.允許使用第三方賬號註冊、登錄
允許用戶使用現有的第三方帳戶登錄產品能給用戶帶來便利，記很多密碼是令人頭痛的問題。
4.用戶名采用郵箱或手機號碼
使用電子郵件、手機號碼作為用戶名比起壹個新名字讓用戶輕松很多，因為新起的用戶名往往已被占用。
5.登錄、註冊功能區分明顯
登錄（Sign in/Login）、註冊（Register/Sign up）鏈接放在壹起，很容易使用戶混淆，盡可能將兩者區別表達
6.高亮顯示輸入框，允許記住用戶登錄信息
用戶在輸入框輸入內容時，文本框高亮顯示提示正在該框內工作。允許該表單記住本人登錄信息。
7.允許用戶查看密碼
密碼總是以圓點顯示，不能確認輸入的密碼是否正確，允許密碼明文顯示是充滿人性的設計。
8.必要的信息提示
輸入錯誤的信息提示，還包括壹些重要的註意事項提示，例如以下三個表單：
9.顯示密碼強壯程度
10.少使用下拉選項
表單中某項目裏只有3-4個參數要選擇，不要使用下拉框更有利於用戶體驗。不要要求用戶重復填寫Email地址。