編輯導(dǎo)語：表單是最常用的信息錄入工具，日常生活中，我們每個(gè)人都在和各種表單打交道。本文作者結(jié)合案例對(duì)表單標(biāo)簽的樣式及設(shè)計(jì)注意事項(xiàng)進(jìn)行了詳細(xì)的說明，相信對(duì)表單標(biāo)簽不熟悉的同學(xué)看完后肯定會(huì)有不少的收獲~

輸入設(shè)計(jì)和表單設(shè)計(jì)是產(chǎn)品經(jīng)理與交互設(shè)計(jì)師的核心技能，你可以把它們用在各類軟件和各種平臺(tái)上。

一、首先什么是標(biāo)簽？

我們先來復(fù)習(xí)一下文本輸入框的構(gòu)成。

△文本輸入框的構(gòu)成

1. 文本容器/Container—可交互的輸入?yún)^(qū)域
2. 輸入文本/Input text—所輸入的文本內(nèi)容
3. 標(biāo)簽文本/Label Text—告訴用戶這個(gè)表單字段中要輸入的內(nèi)容屬性
4. 占位符文本/Placeholder text—輸入信息的范例，用戶后續(xù)需要用自己的內(nèi)容替代它
5. 幫助和驗(yàn)證（可選）/Helper or Validation text(optional)—提供上下文信息和驗(yàn)證信息
6. 引導(dǎo)圖標(biāo)（可選）/Leading icon(optional)—描述文本字段所需的輸入類型和特征
7. 后綴圖標(biāo)（可選）/Trailing icon(optional)—對(duì)輸入內(nèi)容進(jìn)行控制，比如顯示和隱藏

我們今天要聊的就是第3點(diǎn)：標(biāo)簽文本/Label Text。

標(biāo)簽應(yīng)該用人們能明白的語言提出簡(jiǎn)潔問題，以便于回答。

但依舊依賴于表單元素的布局。

二、標(biāo)簽對(duì)齊方式

輸入框標(biāo)簽應(yīng)當(dāng)頂對(duì)齊、右對(duì)齊還是左對(duì)齊？

先來看看這幾種對(duì)齊方式的優(yōu)缺點(diǎn)。

1. 頂對(duì)齊標(biāo)簽/Top aligned labels

△頂對(duì)齊標(biāo)簽

優(yōu)點(diǎn)：

• 頂對(duì)齊時(shí)間最快，由于標(biāo)簽和輸入框的位置非?？拷?，處理起來毫不費(fèi)力。清晰的完成路徑，只需要往下移動(dòng)。
• 提供了大量的橫向空間，可以用來擴(kuò)大或者收縮標(biāo)簽文字，而不會(huì)對(duì)整個(gè)頁面布局產(chǎn)生負(fù)面影響。
• 比如說法語、德語或荷蘭語比英語長(zhǎng)很多的語言，容易對(duì)表單布局產(chǎn)生破壞力。
• 橫向空間的富余，可以以多種方式組合相關(guān)輸入框。

缺點(diǎn)：

• 占用額外的縱向空間。
• 如果可供使用的垂直較小，要謹(jǐn)慎使用。

eg: Amazon 寄送地址表單的頂對(duì)齊標(biāo)簽提供了充裕空間，可水平分組相關(guān)內(nèi)容.

2. 左對(duì)齊標(biāo)簽/Left-aligned labels

△左對(duì)齊標(biāo)簽

優(yōu)點(diǎn)：

• 容易瀏覽標(biāo)簽，只要上下瀏覽表單問題，不會(huì)被輸入框打斷。
• 垂直空間占用少。

缺點(diǎn)：

• 標(biāo)簽和相關(guān)輸入框相鄰間距過大，延長(zhǎng)完成時(shí)間。
• 根據(jù)馬泰奧的研究，“典型掃視時(shí)間為500毫秒，很長(zhǎng)，說明用戶經(jīng)歷著沉重的認(rèn)知壓力?！?/li>
• 雖然速度是最慢的，但從辯證的角度來看，完成時(shí)間較長(zhǎng)并不一定是壞事。
• 有時(shí)候我們需要用戶謹(jǐn)慎的對(duì)待表單的填寫，特別是表單含有大量可選輸入框，類似“使用偏好”或者高級(jí)設(shè)置陌生數(shù)據(jù)時(shí)，就可以使用左對(duì)齊標(biāo)簽。

3. 右對(duì)齊標(biāo)簽/Right-aligned labels

△右對(duì)齊標(biāo)簽

優(yōu)點(diǎn)：

• 標(biāo)簽和相關(guān)輸入框相鄰，能快速填完；
• 垂直空間占用少。

缺點(diǎn)：

• 右對(duì)齊布局造成左側(cè)不齊，可讀性降低；
• 不夠靈活，如果標(biāo)簽需要兩行文字進(jìn)行展示，會(huì)導(dǎo)致閱讀困難。
• 但如果既要減少表單占用的垂直空間，又要減少填表時(shí)間的話，右對(duì)齊標(biāo)簽不失為一個(gè)較好的選擇。

eg: Jira 創(chuàng)建故事表單采用右對(duì)齊標(biāo)簽布局

4. 輸入框內(nèi)標(biāo)簽/Label in the input box

優(yōu)點(diǎn)：

對(duì)屏幕的占用空間非常小

缺點(diǎn)：

• 填寫輸入框時(shí)，輸入框的標(biāo)簽會(huì)消失，因此用戶看不到提示；
• 填完后，也無法檢查對(duì)錯(cuò)。
• 且輸入框內(nèi)的標(biāo)簽要明確的表明自己是標(biāo)簽，而不是已填數(shù)據(jù)。
• 輸入框內(nèi)標(biāo)簽更適合用于只有一個(gè)問題（比如搜索框）或者幾個(gè)輸入框的表單或者問題非常熟悉的表單（比如通訊錄）。

eg：Dribbble 搜索頁面為輸入框內(nèi)標(biāo)簽

5. 浮動(dòng)標(biāo)簽/Float label

當(dāng)用戶在Text field中輸入內(nèi)容以后，內(nèi)嵌Label會(huì)浮動(dòng)到Text field上方，成為頂端對(duì)齊。

優(yōu)點(diǎn)：兼具內(nèi)嵌Label和頂端對(duì)齊的優(yōu)點(diǎn)

缺點(diǎn)：輸入內(nèi)容后，標(biāo)簽顯示過小，對(duì)于小屏幕和視力不佳的用戶來說是個(gè)挑戰(zhàn)。

eg：Yahoo登錄頁面，輸入框?yàn)楦?dòng)標(biāo)簽

三、總結(jié)

• 頂對(duì)齊標(biāo)簽，能減少填寫時(shí)間，適用于本地化，標(biāo)簽長(zhǎng)度可以靈活多變。
• 右對(duì)齊標(biāo)簽，與頂對(duì)齊標(biāo)簽類似，但可以減少垂直空間的占用。
• 左對(duì)齊標(biāo)簽，要求人們仔細(xì)填寫或者回答多個(gè)問題中的若干特定問題。
• 輸入框內(nèi)標(biāo)簽，表單問題少，屏幕空間非常有限。
• 浮動(dòng)標(biāo)簽，注意場(chǎng)景與使用者視力問題。
• 注意區(qū)分標(biāo)簽與數(shù)據(jù)。

擴(kuò)展閱讀：

能迅速填完頂對(duì)齊標(biāo)簽表單的原因之一，是因?yàn)檠矍蛑恍枰跇?biāo)簽和輸入框之間進(jìn)行單一運(yùn)動(dòng)。

事實(shí)上，馬泰奧·彭佐從2006年7月進(jìn)行的眼動(dòng)研究發(fā)現(xiàn)，頂對(duì)齊標(biāo)簽方式從標(biāo)簽移動(dòng)到輸入框只要50毫秒，比左對(duì)齊標(biāo)簽方式快了10倍，后者需要500毫秒；比右對(duì)齊標(biāo)簽方式快2倍，后者高達(dá)240毫秒。

可能覺得幾百毫秒，覺得也沒有多少多長(zhǎng)時(shí)間，但是一旦涉及到需要填寫幾百個(gè)錄入項(xiàng)，時(shí)間也是成倍的。

所以在標(biāo)簽對(duì)齊上要根據(jù)場(chǎng)景選擇合適的方式。

作者：Neko，支付產(chǎn)品經(jīng)理/UI/UX；公眾號(hào)：吱了一聲

本文由 @Neko 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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