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

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

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

我們先來(lái)復(fù)習(xí)一下文本輸入框的構(gòu)成。膜內(nèi)標(biāo)簽,膜內(nèi)標(biāo)簽廠家

△文本輸入框的構(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)該用人們能明白的語(yǔ)言提出簡(jiǎn)潔問(wèn)題，以便于回答。

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

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

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

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

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

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

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

• 頂對(duì)齊時(shí)間最快，由于標(biāo)簽和輸入框的位置非常靠近，處理起來(lái)毫不費(fèi)力。清晰的完成路徑，只需要往下移動(dòng)。

• 提供了大量的橫向空間，可以用來(lái)擴(kuò)大或者收縮標(biāo)簽文字，而不會(huì)對(duì)整個(gè)頁(yè)面布局產(chǎn)生負(fù)面影響。

• 比如說(shuō)法語(yǔ)、德語(yǔ)或荷蘭語(yǔ)比英語(yǔ)長(zhǎng)很多的語(yǔ)言，容易對(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)簽，只要上下瀏覽表單問(wèn)題，不會(huì)被輸入框打斷。

• 垂直空間占用少。

缺點(diǎn)：

• 標(biāo)簽和相關(guān)輸入框相鄰間距過(guò)大，延長(zhǎng)完成時(shí)間。

• 根據(jù)馬泰奧的研究，“典型掃視時(shí)間為500毫秒，很長(zhǎng)，說(shuō)明用戶經(jīng)歷著沉重的認(rèn)知壓力。”

• 雖然速度是最慢的，但從辯證的角度來(lái)看，完成時(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ì)消失，因此用戶看不到提示；

• 填完后，也無(wú)法檢查對(duì)錯(cuò)。

• 且輸入框內(nèi)的標(biāo)簽要明確的表明自己是標(biāo)簽，而不是已填數(shù)據(jù)。

• 輸入框內(nèi)標(biāo)簽更適合用于只有一個(gè)問(wèn)題（比如搜索框）或者幾個(gè)輸入框的表單或者問(wèn)題非常熟悉的表單（比如通訊錄）。

eg：Dribbble 搜索頁(yè)面為輸入框內(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)簽顯示過(guò)小，對(duì)于小屏幕和視力不佳的用戶來(lái)說(shuō)是個(gè)挑戰(zhàn)。

eg：Yahoo登錄頁(yè)面，輸入框?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è)問(wèn)題中的若干特定問(wèn)題。

• 輸入框內(nèi)標(biāo)簽，表單問(wèn)題少，屏幕空間非常有限。

• 浮動(dòng)標(biāo)簽，注意場(chǎng)景與使用者視力問(wèn)題。

• 注意區(qū)分標(biāo)簽與數(shù)據(jù)。