編輯導語：表單是最常用的信息錄入工具，日常生活中，我們每個人都在和各種表單打交道。本文作者結合案例對錶單標籤的樣式及設計注意事項進行了詳細的説明，相信對錶單標籤不熟悉的同學看完後肯定會有不少的收穫~
輸入設計和表單設計是產品經理與交互設計師的核心技能，你可以把它們用在各類軟件和各種平台上。
一、首先什麼是標籤？我們先來複習一下文本輸入框的構成。
△文本輸入框的構成
- 文本容器/Container—可交互的輸入區域
- 輸入文本/Input text—所輸入的文本內容
- 標籤文本/Label Text—告訴用户這個表單字段中要輸入的內容屬性
- 佔位符文本/Placeholder text—輸入信息的範例，用户後續需要用自己的內容替代它
- 幫助和驗證（可選）/Helper or Validation text(optional)—提供上下文信息和驗證信息
- 引導圖標（可選）/Leading icon(optional)—描述文本字段所需的輸入類型和特徵
- 後綴圖標（可選）/Trailing icon(optional)—對輸入內容進行控制，比如顯示和隱藏
我們今天要聊的就是第3點：標籤文本/Label Text。
標籤應該用人們能明白的語言提出簡潔問題，以便於回答。
但依舊依賴於表單元素的佈局。
輸入框標籤應當頂對齊、右對齊還是左對齊？
先來看看這幾種對齊方式的優缺點。
1. 頂對齊標籤/Top aligned labels
△頂對齊標籤
優點：
- 頂對齊時間最快，由於標籤和輸入框的位置非常靠近，處理起來毫不費力。清晰的完成路徑，只需要往下移動。
- 提供了大量的橫向空間，可以用來擴大或者收縮標籤文字，而不會對整個頁面佈局產生負面影響。
- 比如説法語、德語或荷蘭語比英語長很多的語言，容易對錶單佈局產生破壞力。
- 橫向空間的富餘，可以以多種方式組合相關輸入框。
缺點：
eg: Amazon 寄送地址表單的頂對齊標籤提供了充裕空間，可水平分組相關內容.
2. 左對齊標籤/Left-aligned labels
△左對齊標籤
優點：
- 容易瀏覽標籤，只要上下瀏覽表單問題，不會被輸入框打斷。
- 垂直空間佔用少。
缺點：
- 標籤和相關輸入框相鄰間距過大，延長完成時間。
- 根據馬泰奧的研究，“典型掃視時間為500毫秒，很長，説明用户經歷着沉重的認知壓力。”
- 雖然速度是最慢的，但從辯證的角度來看，完成時間較長並不一定是壞事。
- 有時候我們需要用户謹慎的對待表單的填寫，特別是表單含有大量可選輸入框，類似“使用偏好”或者高級設置陌生數據時，就可以使用左對齊標籤。
△右對齊標籤
優點：
缺點：
- 右對齊佈局造成左側不齊，可讀性降低；
- 不夠靈活，如果標籤需要兩行文字進行展示，會導致閲讀困難。
- 但如果既要減少表單佔用的垂直空間，又要減少填表時間的話，右對齊標籤不失為一個較好的選擇。
eg: Jira 創建故事表單採用右對齊標籤佈局
4. 輸入框內標籤/Label in the input box優點：
對屏幕的佔用空間非常小
缺點：
- 填寫輸入框時，輸入框的標籤會消失，因此用户看不到提示；
- 填完後，也無法檢查對錯。
- 且輸入框內的標籤要明確的表明自己是標籤，而不是已填數據。
- 輸入框內標籤更適合用於只有一個問題（比如搜索框）或者幾個輸入框的表單或者問題非常熟悉的表單（比如通訊錄）。
eg：Dribbble 搜索頁面為輸入框內標籤
5. 浮動標籤/Float label當用户在Text field中輸入內容以後，內嵌Label會浮動到Text field上方，成為頂端對齊。
優點：兼具內嵌Label和頂端對齊的優點
缺點：輸入內容後，標籤顯示過小，對於小屏幕和視力不佳的用户來説是個挑戰。
eg：Yahoo登錄頁面，輸入框為浮動標籤
三、總結- 頂對齊標籤，能減少填寫時間，適用於本地化，標籤長度可以靈活多變。
- 右對齊標籤，與頂對齊標籤類似，但可以減少垂直空間的佔用。
- 左對齊標籤，要求人們仔細填寫或者回答多個問題中的若干特定問題。
- 輸入框內標籤，表單問題少，屏幕空間非常有限。
- 浮動標籤，注意場景與使用者視力問題。
- 注意區分標籤與數據。
擴展閲讀：
能迅速填完頂對齊標籤表單的原因之一，是因為眼球只需要在標籤和輸入框之間進行單一運動。
事實上，馬泰奧·彭佐從2006年7月進行的眼動研究發現，頂對齊標籤方式從標籤移動到輸入框只要50毫秒，比左對齊標籤方式快了10倍，後者需要500毫秒；比右對齊標籤方式快2倍，後者高達240毫秒。
可能覺得幾百毫秒，覺得也沒有多少多長時間，但是一旦涉及到需要填寫幾百個錄入項，時間也是成倍的。
所以在標籤對齊上要根據場景選擇合適的方式。
作者：Neko，支付產品經理/UI/UX；公眾號：吱了一聲
本文由 @Neko 原創發佈於人人都是產品經理，未經作者許可，禁止轉載。
題圖來自pexels，基於CC0協議