Material Design 的UI組件設計：Text fields文本框 （上）

由於工作需要，仔細研究了下原生Material Design 的文本輸入框的規範，順道整理了出來。

原文（需翻牆）：https://material.io/guidelines/components/text-fields.html

內容簡介：

1. Input 輸入

2. Labels 標籤
3. Style 樣式
4. Single-line text field 輸入單行文本框
5. Multi-line text field 輸入多行文本框
6. Full-width text field 全寬文本框
7. Character counter 字元計數器
8. Auto-complete text field 自動補充文本
9. Search filter 搜索過濾器
10. Required fields 必填項

11. Password input 輸入密碼項

1、Input 輸入

當焦點在輸入框上時觸發兩個動作：

• 顯示游標
• 彈出鍵盤

Text field anatomy 分解輸入框

• Label 標籤是描述每個文本框請求的命令。

• Hint text 提示文本是對輸入信息建議的佔位符，有時是對輸入格式的舉例。
• Helper text 幫助文本出現在輸入框下方用來展示額外的信息。
如下圖所示：

1、Label 標籤

2、Hint text 提示文本

3、Helper text 幫助文本

Input types 輸入類型

輸入框的類型決定了輸入框里允許輸入什麼樣的欄位。虛擬鍵盤會針對輸入框需要的內容對輸入文本進行優化。需要優化常用類型包括：

• Number 數字:電話號碼、信用卡號、PIN
• Text 文本:專有名詞、用戶名、URL

• Mixed format 混合的格式：郵件地址、街道地址、搜索查詢

Auto-capitalization 自動大寫

在相應的必須輸入場景下首字元應該大寫，每個句子的首字母也是一樣。比如在輸入如下相關的文本時：

• 需要給一些東西命名，比如藍牙設備、用戶、指紋或者警報。
• 包含像句子一樣的信息，比如簡訊。

2、Labels標籤

當用戶開始在文本框輸入欄位時，浮動在文本線上的標籤移動到文本框上部。如下圖：

Label color 標籤顏色

標籤顏色應該符合產品的用色，同時滿足相應的對比度。

Light theme 正常主題

各種樣式如下圖所示：

normal with hint text/label正常提示文本/標籤樣式

focus獲取焦點樣式

normal with input text and label正常輸入文本和標籤樣式

and disabled states不可點樣式

（這幾種樣式會在下面多次出現，不再一一介紹）

Dark theme 夜間主題

夜間主題各種樣式如下圖所示：

Specs 規格

Floating label 浮動標籤

• Roboto Regular 12sp

Hint and input text 提示和輸入的文本

• 常規標籤Regular labels: Roboto Regular 16sp

• 密集標籤Dense labels: Roboto Regular 13sp

在文本被輸入之前，浮動標籤文字是16sp(或以13sp密集標籤存在)。一旦文本被輸入進去，標籤被移動到文本框之上且字型大小變為12sp（不論是常規標籤還是密集標籤）。

Floating labels浮動標籤

Tile height: 72dp

Label text標籤文字

Font size: 12sp

Padding above: 16dp

Padding below: 8dp

Hint and input text提示和輸入的文字

Font size: 16sp

Padding below: 8dp

Input line輸入框的底線

Padding below: 8dp

Dense floating labels浮動標籤

Tile height: 60dp

Label text標籤文字

Font size: 12sp

Padding above: 12dp

Padding below: 4dp

Hint and input text提示和輸入的文字

Font size: 13sp

Padding below: 12dp

Input line輸入框的底線

Padding below: 4dp

3、Style樣式

Density 密度

當滑鼠和鍵盤是主要的輸入方法時，需要以密集文本框的方式去顯示。

Color 顏色

輸入框應當反應產品的用色。推薦以下顏色：

• 輸入框和游標：使用應用用色規範里的提亮色或對比鮮明的顏色。

• 錯誤提示：使用對比鮮明的顏色用於提示錯誤，比如更熱烈的顏色（紅色或黃色）。

正常主題 - 黑色文本 （#000000），不同狀態下的文本不透明度值：

普通 Normal 38%

滑鼠經過 Hover 54%

點擊/按下 Press 54%

獲取焦點 Focus 87%

普通輸入文本 Normal with input text 87%

錯誤 Error 100%

不可用 Disabled 38%

夜間主題 - 白色文本 (#ffffff) ，不同狀態下的文本不透明度值：

普通 Normal 50%滑鼠經過 Hover 70%

點擊/按下 Press 70%

獲取焦點 Focus 100%

普通輸入文本 Normal with input text 100%

錯誤 Error 100%

不可用 Disabled 50%

4、Single-line text field 輸入單行文本框

Single-line fields 輸入單行文本框

在單行輸入框上，輸入的內容自動向左滾動，游標顯示在輸入內容的最右。

顏色的選擇應該遵循產品的用色。

Light theme 正常主題

• Hint and input font: Roboto Regular 16sp

• Tile height: 48dp

• Text top and bottom padding: 16dp

• Text field divider padding: 8dp

• Hint text for pressed state: 54% black

Dark theme 夜間主題

l Hint text for pressed state: 70% white

Single-line text field 常規單行文本框

Height: 48dp

Padding above and below text: 16dp

Padding below divider: 8dp

Dense single-line text field密集單行文本框

Hint and input text: 13sp

Height: 40dp

Padding above and below text: 12dp

Padding below divider: 4dp

Light theme with icon 帶有提示圖標的正常主題

• Hint and input font: Roboto Regular 16sp
• Tile height: 48dp
• Text top and bottom padding: 16dp
• Text field divider padding: 8dp

Dark theme with icon 帶有提示圖標的黑暗主題

Single-line text field with icon 帶有提示圖標的單行文本框

Height: 48dp

Padding above and below text: 16dp

Padding below divider: 8dp

Icon: 24dp

Dense single-line text field with icon 帶有提示圖標的單行密集文本框

Hint and input text: 13sp

Height: 40dp

Padding above and below text: 12dp

Padding below divider: 4dp

Icon: 20dp

5、Multi-line text field

輸入多行文本框在游標到達下邊緣時候，文字溢出時自動換行和垂直滾動。

顏色的選擇應該遵循產品的用色。

Light theme 正常主題

• Hint and input font: Roboto Regular 16sp

• Label font: Roboto Regular 12sp

• Text top and bottom padding: 16dp

• Text field divider padding: 8dp

Dark theme 夜間主題

Dark theme specs夜間主題常規文本框標註 :

Padding above and below label: 16dp

Dense dark theme specs 夜間主題的密集文本框標註:

Label and input text: 13sp

Label text top and bottom padding: 12dp

6、Full-width text field 全寬文本框

全寬文本輸入適用於更深入的工作。

Single and multi-line fields 單行和多行文本框

• Hint and input font: Roboto Regular 16sp

• Top and bottom padding for text: 20dp

Specs for full-width single line text field 常規全寬文本框：

Height: 56dp

Text top and bottom padding: 20dp

Specs for dense full-width single line text field 密集全寬文本框：

Hint and input text: 13sp

Height: 48dp

Text top and bottom padding: 16dp

（下）篇會在兩周內發出來：

7、Character counter 字元計數器

8、Auto-complete text field 自動補充文本

9、Search filter 搜索過濾器

10、Required fields 必填項

11、Password input 輸入密碼項

歡迎關注專欄「一枚設計」 知乎專欄

咩~~

————————————————以上

推薦閱讀：