手機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地址。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!