編輯導語：在各種移動端設備中，我們經常能夠見到表單，表單不僅簡潔清晰的為我們呈現出了信息，還能夠提升用戶的體驗感。表單看似很容易設計，實則包含許多的細節(jié)，稍不注意就會出錯。本文作者作者就以表單為例，為我們談了談移動端產品細節(jié)的重要性。

不管是APP還是Web端界面設計，我們最常見的元素應該就是表單了，表單幾乎是每一款數字產品都不可或缺的組成部分，也是設計師必須要親身經歷的設計組件之一，它的作用無可替代。

表單是提升用戶體驗的一個核心點，但在視覺呈現的時候，大部分都忽視了它的體驗。對于一個設計師來說，就需要根據實際情況在設計中進行靈活調整，設計出符合用戶預期的表單。

不僅能帶給用戶操作效率上的提升，節(jié)約時間成本；還能避免錯誤出現，在體驗過程中心情更加的愉悅。

下面用Bee Express實際項目案例來帶你全面了解表單設計：

一、什么是表單

在我們的現實生活中，從小到大都在和表單打交道，從我們在學習使用的作業(yè)本、學?；@球場里的線條、班級里面每個小組區(qū)域的劃分；再到樓層及墻面阻隔、超市里面的貨架、馬路上的斑馬線等。

雖然這些潛在的表單沒有明確的標識，但對我們已經形成了條件反射，也有了深刻的記憶。它們隨時都在告訴我們，在哪個區(qū)域可以做什么？需要注意什么？以及行動之后的結果反饋。

表單在產品中主要負責數據采集的功能，用來搜集和呈現一些數據、信息和特定的字段，大部分涉及到數據采集功能的模塊，我們都可以稱其為表單。

范疇極為廣泛，應用情況牽涉到方方面面，可以被靈活運用于多種功能模塊中。

表單并不是表格，是最為常見的頁面模塊， 比如登錄網站填寫信息、購物填寫地址、填寫調查問卷、修改個人中心信息時……都是在和表單發(fā)生互動。

表單是由多種元素組成，最常用的元素就那么幾個。在設計過程中，設計師需要合理組織這些元素，幫助用戶在填寫表單時，輕松愉快的完成。

二、Bee express項目表單存在的問題

Bee Express主要經營的是快遞、速遞柜業(yè)務，前期主要經營泰國市場，所有APP/網頁的視覺語言定為中文、英文、泰文三種。

那么我們設計的界面就需要去考慮在表達同一個信息時，中、英、泰三文不同長度的占比，需要預留足夠的位置以供所有譯文顯示完整。

同時也碰到了諸多問題，在設計之前，基本就是以中文為主，組織好視覺語言后是沒有辦法隨時提供英、泰兩文的；即使提供了，也會碰到一些比較尷尬問題。

下面我就以表單為主，將存在的問題列舉部分。

從上面的實例，我們能看出來，在中文正常的情況下，翻譯英/泰文時候，很多問題就顯現出來：

• 標簽左對齊的方式在英、泰兩文狀態(tài)下，顯的不夠友好，參差不齊造成視覺有些混亂；
• 英文翻譯在超過3個單詞或某個單詞過長時，就會出現重疊/覆蓋的情況；
• 泰文都是非常碎小的單個符號，在標簽過長時，無法確定從哪里折行以確保詞組不會脫節(jié)；
• 輸入的部分信息因橫向距離過短，造成顯示不全而自動省略，給用戶帶來記憶負擔；
• 因視覺的混亂，導致可操作性很差，易用性過低。

上面只是根據展示的單個頁面列舉的部分問題，其實在其他各種類型的表單里，還有更多可改進及優(yōu)化的空間。

比如：完成的先后順序、合適的輸入格式、下拉還是彈窗、狀態(tài)反饋、操作按鈕、如何簡化以及分頁等，都需要設計師去細心的打磨，以便于用戶高效、愉快的完成表單內容。

三、表單的組成結構與類型.

1. 表單的組合元素

表單的目的、內容、大小長度等雖然各不相同，但基本元素比較固定，在進行布局和交互設計的時候，這些元素有著較高設計要求。合理組織這些元素有助于用戶輕松完成表單填寫，在產品上需要高效、顯著且有良好的可訪問性。

表單主要有以下幾部分組成：

• 標簽：告訴用戶這里應該輸入的元素是什么，如：姓名、電話、地址；
• 輸入域：可交互的輸入區(qū)域，如：文本框、選項框、下拉選擇、文件上傳；
• 占位符：占位符是對標簽進行額外的信息描述，如：輸入信息的范例、填寫幫助；
• 前導圖標（可選）：描述文本所需的輸入類型和特征，如：登錄的賬號、密碼、驗證碼；
• 后綴圖標（可選）：對輸入內容進行控制，如：下拉的展開與收起、清空；
• 幫助（可選）：提供表單內容的注釋或輔助類容，如：說明、注意事項；
• 反饋（可選）：告知用戶當前操作可能或已出現的問題，如：提交成功、錯誤提示、網絡問題；
• 鍵盤（可選）：在文本編輯時需要使用鍵盤，如：設備系統(tǒng)鍵盤、應用內置鍵盤；
• 動作按鈕：動作按鈕是在表單的結尾，如：提交、下一步、清空所有信息。

2. 選擇合理的對齊方式

常見的對齊的方式有三種，左對齊、右對齊和頂對齊。不同的對齊方式都有各自的優(yōu)點和缺點，我們需要根據項目實際情況來選擇最合適的對齊方式。

1）標簽左對齊

• 優(yōu)點：左對齊有足夠的垂直空間，可以充分利用，而且便于信息的擴展。
• 缺點：?需要更多的橫向空間，主要由標簽的字數決定，需要刻意控制，否則會顯得參差不齊。與輸入字段關聯性弱，完成速度最慢，導致加長用戶完成表單的時間，增加用戶的時間成本。

從上面的實例，Bee Express項目在中文/英文/泰文狀態(tài)下，不適合標簽左對齊的方式。

2）標簽右對齊

• 優(yōu)點：標簽到輸入框的間距是固定的，用戶在瀏覽時速度更快，減少了用戶完成表單的時間
• 缺點：所占空間與左對齊相同，左右邊緣呈鋸齒狀，標簽與輸入字段距離一致，完成速度一般。感覺上有些隨意，在視覺上不易快速了解表單的全部信息，且缺乏統(tǒng)一感。

從上面的實例，Bee Express項目在中文/英文/泰文狀態(tài)下，相比左對齊可以提升用戶完成效率，但并未解決因不同文本信息過長而造成自動省略的問題，同樣不適合標簽右對齊的方式。

3）標簽頂對齊

• 優(yōu)點：符合自然視線，完成速度最快，好布局，適合長短不同的標簽；用戶在視覺掃描時能快速的捕捉表單信息，更快的完成操作。
• 缺點：面對表單內容較多、內容過長時，需要更多的縱向空間。

從上面的實例看，相比左對齊和右對齊的方式，Bee Express項目在中文/英文/泰文狀態(tài)下，更加適合標簽頂對齊。

雖然面對表單內容較多、內容過長時，會占據更多的縱向空間，但方便用戶能更加快速便捷的完成表單，提升易用性，視覺更加統(tǒng)一；還能根據表單內容進行分頁來解決單頁縱向空間過長的問題。

3. 選填與必填

需要正確區(qū)分必填及選填的字段信息，盡量避免可填字段，如果不可避免，應該做明確區(qū)分。避免用戶不知道哪些字段必須填寫、哪些是選擇性填寫。根據用戶長期使用產品被培養(yǎng)出來的習慣，可以用下列方式區(qū)分：

• 使用帶 * 標記加入標簽提示，來告知用戶必填字段，選填字段不做標記；
• 必填字段過多時，不用做任何標記，選填字段標簽處備注“選填”；
• 避免必填和選填字段同時標記或者都沒有任何標記。

4. 內容分組

在我們設計表單需要的字段內容較多是，需要合理的使用內容分組，這樣整體看起來更加有組織性。

接近性（格式塔原理）原則告訴我們：相互靠近的物體被認為比相互距離較遠的物體更有關聯性，這樣能使設計界面層次有序，視覺清晰，減少視覺噪音。

分組時需要注意：

• 內容屬性相近或有關聯性的放在一組；
• 根據信息的重要性及難易程度排列分組，將選填的表單內容靠后。

5. 合理分頁

表單信息內容過多時，需要合理的使用分頁，避免用戶在事先就覺得需要在這個表單上花費大量的時間，就有可能產生放棄的想法。比如我們申請信用卡，就是采用多個表單頁面逐步完成的。

另外，在表單信息較少時，為了提升易用性和轉化率，也可以采用分頁、分步驟完成。

如：問卷調查，每個問題都是單獨的頁面，這樣可以避免信息的相互干擾，也讓用戶得以放松心情，專注于當前選項，提升易用性；還有部分APP登錄，把手機號輸入和驗證碼分為兩個頁面操作，Facebook 的數據表明，分步也是可以提高成功率的。

6. 展示與隱藏

部分內容在用戶需要的時候可以展示，或者系統(tǒng)強烈推薦的選填內容也可以呈現給用戶，但在用戶明確不需要時，適時將信息隱藏；避免多余表單信息的干擾，造成用戶的不確定性。

7. 匹配合適的鍵盤

根據表單內容的不同屬性，應對不同的輸入需求，應該提供不同的鍵盤類型，以便于用戶使用更加快捷。常見鍵盤有以下類型：

• 設備系統(tǒng)內置的輸入法，或者下載符合我們長期使用習慣的輸入法APP；
• 涉及資產安全方面，提供內置鍵盤，打亂鍵盤字母及數字的固定位置，可以防止窺竊，提高安全性；
• 數字輸入，提供純數字鍵盤，能夠提升用戶的完成效率，讓輸入變的更簡單。

四、信息的錄入方式.

1. 文本輸入類型

用戶在完成表單進行文本輸入時，當然希望填寫的信息越少越好，所以我們盡可能提供合適的輸入格式、適當的自動輸入、合理的輸入順序以及避免重復輸入來提升用戶完成表單的效率。

1）輸入格式

通過合理的格式約束，能夠方便用戶更快的完成填寫，而減少錯誤出現。自動對焦第一個輸入字段可以引導用戶開始進行輸入。

2）自動輸入

根據已知信息，幫助用戶預判內容并自動錄入。

如：用戶在輸入電話號碼前，需要先輸入國家的代碼，我們可以根據產品的運營市場所在的國家自動錄入。

3）輸入順序

先易后難；先必填后選填；先公開信息后隱私信息；有關聯性的合成一組，特殊問題后置，用戶輸入時、不會覺得突兀、門檻太高 。

4）避免多次詢問相同信息，重復輸入的內容盡量減少

比如：用戶可以顯示和隱藏所設置的密碼，不是讓用戶輸入2次來進行驗證，這對于生成有效的密碼更重要。

2. 信息選擇類型

在用戶完成表單的過程中，為了應對不同的信息，除了文本輸入之外，還會有選擇的方式。通常會包含有至少2個或以上的選項，用戶可以選擇其中的一個或多個。

選擇的類型最常見的有單選、復選（多選）；選擇樣式有彈窗、下拉菜單、跳轉新頁面。

它們看起來不復雜，但是在實際使用的時候講究非常之多，不僅關乎用戶體驗，而且涉及到一些界面邏輯問題，每種選擇方式也都有各自不同的狀態(tài)顯示。

1) 單選

單選項是界面中非常常見的表單元素。它通常被用來從一組互斥的相關選項中選擇一個單獨的選項。當點擊一個未選中的單選項時，它會被選中，其他按鈕則會變成未選中狀態(tài)。

單選可根據用戶最可能會選中或者數據統(tǒng)計選擇最多的一個標簽作為默認選項，如果此字段屬于非必填，需要有一個“無”的標簽選項，以方便用戶在選擇之后又不想做出選擇時能夠更改。

單選的樣式有單選框、按鈕、波動開關，請根據不同需求選擇不同的樣式：

單選框：

存在兩個以上的選項且標簽是一句/多句話組成，需要選擇一個正確的選項。使用單選框時，靠左對齊的選框+標簽的樣式是效果最好的，單選框有選中、未選中、不可選狀態(tài)。

按鈕：

存在2~6個選項時且選項信息是一個詞語，文本一般不超過4個字，需要選擇一個正確的選項，使用按鈕樣式——有選中、未選中、不可選狀態(tài)；

波動開關：

只存在兩個選項且選項具有判斷性質，需要選擇一個正確的信息，觸發(fā)之后能夠立即生效，使用波動開關，有開啟、關閉兩種樣式。

2）復選

復選也是界面中很常見的表單元素，通常會有一個或多選項供用戶選擇，同時選項的內容是不互斥的，可以選擇一個或多個正確的選項。

復選無需提供默認選項，也不需要提供“無”的標簽，用戶可在同一選項上重復點擊進行選中/未選中操作。復選最常見的樣式就只有復選框、按鈕兩種：

復選框：

一個具有判斷性質（用戶協(xié)議）的選項或者有兩個正確答案以上的多個選項組成，復選框有選中、未選中兩種常用狀態(tài)；另外當選項存在子父級關系時，還有一種未定狀態(tài)，常用于Web端管理后臺。

按鈕：

存在2~6個選項時且選項信息是一個詞語，文本最好不超過4個字，有兩個以上的正確選項，使用按鈕樣式；有選中、未選中、不可選狀態(tài)；

3. 選擇方式

不管是單選還是復選、按鈕還是框選的形式，都需要結合表單當前選項的實際需求，以對應不同選擇方式。最為常見的選擇方式有彈窗、下拉、新頁面跳轉等。

不同的選擇方式有各自的優(yōu)勢和劣勢，選擇不當可能會造成用戶體驗差而導致轉化率低或用戶流失。

• 彈窗：在完成表單需要選擇的字段內容時，當選項超過6條或特定（低于6條但文本過長、調用系統(tǒng)功能…）情況，可使用動作欄彈窗的方式；
• 下拉（展示與隱藏）：有多種樣式，正確使用下拉可以有效幫助用戶縮小選擇范圍；
• 新頁面：當選項信息較多且復雜時，使用新頁面跳轉更便于操作。如：選擇用戶地址則跳轉至地址列表。

對于如何選擇適合表單當前字段的方式，還需要注意一下幾點：

1. 需要使用簡潔明了的標簽，不要讓用戶思考，使用簡短而明確的詞匯，讓用戶明確行為的意圖和功能；
2. 清晰告知用戶完成整個表單的步驟 ，給用戶一個預期，避免用戶在完成過程中產生不耐煩的情緒；
3. 盡可能減少不必要的表單項目，?每多一個項目需要填寫，就有可能流失一部分用戶；
4. 填寫順序應先易后難、先必填后選填、涉及隱私的內容靠后，反之用戶容易被嚇到，從而放棄整個任務；
5. 識別代替輸入，善于利用技術的力量，技術上能解決的就不要讓用戶輸入；
6. 能不填寫就不填寫，能選擇就不要輸入，能選擇一下就不要選兩下；
7. 當輸入可能更快時，就別讓用戶在菜單選擇；
8. 選項過少，避免使用下拉菜單，以免給視覺瀏覽動線造成了不必要的阻礙；
9. 選項被禁用或不可用時，將其顯示為灰色。

五、信息保存方式.

1. 手動保存

手動保存即依賴用戶做額外操作才可以達成的保存行為，此類保存，我們往往依賴保存按鈕。

這種保存方式大多用于網頁，如：個人信息、簡歷等。大多用于表單內容較多的頁面，根據表單信息將內容屬性相近或有關聯性的放在一組，組的下方提供一個保存按鈕。

2. 自動保存

自動保存的目的是記住用戶已經填寫的內容，從而避免用戶需要再次輸入而放棄。

可以設定間隔時間或者用戶未操作后的一段時間進行自動保存，比如：每隔30秒或者用戶在10秒內未操作，系統(tǒng)進行自動保存一次，比較適合需要大量編輯功能的表單（這種保存方式屬后臺發(fā)送請求，視覺無任何變化）。

3. 兜底保存

其實前面兩種保存方式在移動端都有局限性，手動保存不利于用戶體驗，自動保存比較占資源和影響用戶操作，那么我們就需要有一個更好的方案。

類似信息較多的表單，系統(tǒng)檢測到用戶填寫了部分內容但沒有完成表單就要離開時，以彈窗的形式給用戶一個溫馨提示，讓用戶自行選擇保存還是直接離開。

另外在用戶使用網絡問題或應用意外退出，都應自動保存用戶已完成的信息，以便用戶再次使用時不會因為重新填寫嫌麻煩而放棄。

六、視覺反饋

設計表單時，對于一些專業(yè)詞匯或較難理解的概念，要給予明確的解釋，有較高要求的表單信息也要給予明確的示例供用戶參考。

復雜的流程，還可以提供在線咨詢幫助，協(xié)助用戶完成整個表單的填寫。

當用戶填寫內容出錯的時候，應當指明發(fā)生錯誤的條目，以及錯誤的原因，最好將反饋定位到具體位置。反饋的前提是不打擾用戶，但在用戶需要的時候及時出現。

1. 提示反饋（輸入前）

• 聚焦狀態(tài)：光標插入輸入框，當前輸入框應予以不同的樣式，便于用戶清楚當前處于什么位置；
• 標簽提示：針對用戶容易出錯的格式問題，可在標簽中提示，如：字數限制、格式要求等；
• 引導提示：部分完成難度較大的表單，以圖表或按鈕引導用戶點擊，用彈窗或跳轉新的頁面詳細解答。如：需要用戶填寫相對隱私的信息時，請給予解釋這么做的原因及目的。

2. 驗證反饋（輸入后）

• 行內提示：行內提示不需要服務器上傳驗證的數據，就可以判斷，例如手機格式，當光標離開時理解為用戶輸入完成，通過前端對格式進行驗證；
• toast提示：屬于后臺驗證，需要服務器上傳驗證數據，或者其他類型的突發(fā)事件。如果是表單問題，需要有清晰的定位提示位置，就近原則，方便用戶發(fā)現并修改操作。請注意錯誤的字段，請勿在鍵入后直接清除，請給用戶在此基礎上修改的機會，記住用戶才是決定者。
• 彈窗提示：彈窗提示是直接打斷當前的操作，同時會引導用戶進行新的操作。比如成功提示，是對用戶完成信息輸入的提示和感謝；失敗提示則會通過彈窗引導用戶返回或者重新提交。

七、操作按鈕.

操作按鈕是在表單的結尾，有個確認提交的動作控件，是專門為觸控而設計。不僅可點擊，更需要容易點擊；還需要根據表單的不同條件反饋不同的按鈕狀態(tài)，清晰可預測，應該準確地描述用戶點擊按鈕后會發(fā)生什么，比如提交、復位、下一步等。

按鈕是關系到頁面的最終轉化的重要元素，在按鈕的設計上要更加費心。

顏色是影響按鈕隔離效果的首要因素，多個按鈕基本都是通過顏色來區(qū)分主次；其次才是樣式，設計師利用同理心來理解用戶「心理模型」，利用設計手段將「實現模型」改變成用戶可以接受和理解的「心理模型」，給用戶提供最常用樣式，如果設計和常規(guī)樣式差異過大的按鈕，容易帶來額外的認知負擔。

1. 按鈕位置

• 右上角：以純文字的形式固定在導航欄的右側（屏幕右上角）；
• 表單底部：置于表單的最下方，根據表單內容縱向空間的大小而上下移動。表單內容較多時，容易下沉過多而導致按鈕不可見；
• 設備底部懸浮：懸浮在設備底部，隨時可見，會占用一定的縱向空間；
• 跟隨鍵盤：固定在鍵盤的某個位置，跟隨鍵盤展示或隱藏，常用于單個字段內容的表單。如：登錄頁面，填寫完手機號碼，點擊鍵盤上的確定，會跳轉至驗證碼頁面，輸入驗證碼后確定，直接登錄成功。

綜合實例，Bee Express項目為了適配中文/英文/泰文狀態(tài)，綜合了每個位置的利弊得出：當表單內容+按鈕少于一屏內容時，操作按鈕置于表單底部；超過一屏則在設備底部懸浮。

2. 交互狀態(tài)

• 待激活狀態(tài)：需要完成表單中的部分條件方可激活，變成正?？山换顟B(tài)；
• 正常狀態(tài)：已完成表單必填的內容，按鈕是可交互的，并且可用的狀態(tài)；
• 激活狀態(tài)：用戶已點擊按鈕后的狀態(tài)（且還未結束按按鈕的動作）；
• 加載狀態(tài)：送出表單后，正在加載中，但操作還未完成，沒有立即實現的狀態(tài)；
• 禁用狀態(tài)：非交互狀態(tài)，目前不可交互，但以后可以使用。

3. 多按鈕樣式

• 主操作按鈕：一個表單頁面只能存在一個主操作，也是最醒目、最突出、最重要的按鈕；
• 次操作按鈕：存在多個等級，可以通過弱化主操作按鈕、圖標或突出文字來表現次操作按鈕，次級按鈕可以多個同時存在。

八、總結

以上只是對表單設計的一些總結，視覺體驗只占了整體體驗一部分 。

一個表單是否真的好用，還需要深入研究表單設計，從結構化的思維分析表單的設計問題，從而能夠全面的認識一個事物并進行了解掌握。

通過優(yōu)化視覺表現提升表單體驗只是表象，更多是要考慮到表單最終要幫用戶解決什么問題，先想好為什么，再想怎么做。

作者：大漠飛鷹；公眾號：能量眼球

本文由 @大漠飛鷹 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Pexels，基于 CC0 協(xié)議