前言

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

本期分享

• 什么是表單？
• 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)點和缺點，我們需要根據項目實際情況來選擇最合適的對齊方式。

標簽左對齊：

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

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

標簽右對齊：

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

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

標簽頂對齊：

• 優(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；
• 涉及資產安全方面，提供內置鍵盤，打亂鍵盤字母及數字的固定位置，可以防止窺竊，提高安全性；
• 數字輸入，提供純數字鍵盤，能夠提升用戶的完成效率，讓輸入變得更簡單。

本期就主要分享我們在實際的項目中如何選擇合適的表單以及表單的結構介紹，下期將分享表單設計過程需要注意的細節(jié)、問題點和表單組件庫的建立。