Text fields - 文本字段
Text fields allow users to input text, select text, and lookup data via auto-completion.
【翻譯】
文本字段允許用戶通過(guò)自動(dòng)完成輸入文本生真,選擇文本和查找數(shù)據(jù)。
Text fields usually appear in forms.
Users may enter text, numbers, or mixed-format types of input.
【翻譯】
文本字段通常以格式顯示拱撵。
用戶可以輸入文本邻储,數(shù)字或混合格式類型的輸入。
Text field types - 文本字段類型
Single-line
Multi-line
Full-width
【翻譯】
單行
多行
全屏寬度
Available functionality - 可用功能
Character counter
Auto-complete
Search filter
Required fields
Password input redaction
【翻譯】
字符計(jì)數(shù)器
自動(dòng)完成
搜索過(guò)濾器
必填字段
密碼輸入修訂
Input - 輸入
Touching a text field makes the two actions occur:
Places the cursor there
Displays the keyboard
【翻譯】
觸摸文本字段將執(zhí)行以下兩個(gè)操作:
將光標(biāo)放在那里
顯示鍵盤
Text field anatomy - 文本字段解剖
Labels describe the type of input requested in each field
Hint text is placeholder text that suggests the type of information requested, sometimes in the form of an example
Helper text appears below input fields to provide additional context
【翻譯】
標(biāo)簽描述每個(gè)字段中請(qǐng)求的輸入類型
提示文本是占位符文本搏讶,用于指示請(qǐng)求的信息類型胖替,有時(shí)以示例的形式
幫助文本顯示在輸入字段下方焊唬,以提供其他上下文
Input types - 輸入類型
The type of text field determines what kind of characters are allowed inside the field. The virtual keyboard layout may be optimized for frequently used characters.
【翻譯】
文本字段的類型決定了字段內(nèi)允許使用什么樣的字符《ネ可以針對(duì)頻繁使用的字符優(yōu)化虛擬鍵盤布局玖姑。
Common input types for which you should optimize include:
Number: Phone number, credit card number, PIN
Text: Proper name, username, URL
Mixed format: Email address, street address, search query
【翻譯】
應(yīng)優(yōu)化的常見(jiàn)輸入類型包括:
號(hào)碼:電話號(hào)碼,信用卡號(hào)碼慨菱,PIN碼
文本:正確的名稱焰络,用戶名,URL
混合格式:電子郵件地址符喝,街道地址闪彼,搜索查詢
Auto-capitalization - 自動(dòng)大寫
The first letter in each text field should be capitalized where appropriate and if required by the locale, as well as the first letter of each sentence. For example, this is especially relevant for input fields that:
Ask to name something, such as a Bluetooth device, user, fingerprint, or alarm
Contain sentence-like messages, such as text messages
【翻譯】
每個(gè)文本字段中的第一個(gè)字母在適當(dāng)時(shí)應(yīng)大寫,如果語(yǔ)言環(huán)境需要协饲,以及每個(gè)句子的第一個(gè)字母畏腕。 例如,這對(duì)于以下輸入字段尤其相關(guān):
請(qǐng)求命名某些內(nèi)容茉稠,例如藍(lán)牙設(shè)備描馅,用戶,指紋或鬧鐘
包含類似語(yǔ)句的郵件而线,例如短信
- Label
- Hint text
- Helper text
【翻譯】
1.標(biāo)簽
2.提示文本
3.幫助文本
Labels - 標(biāo)簽
When the user engages with the text input field, the floating inline labels move to float above the field.
【翻譯】
當(dāng)用戶使用文本輸入字段時(shí)铭污,浮動(dòng)內(nèi)聯(lián)標(biāo)簽移動(dòng)到字段上方。
Floating inline labels
【翻譯】
浮動(dòng)內(nèi)聯(lián)標(biāo)簽
[圖片上傳失敗...(image-1ae052-1552293187289)]
Floating inline labels
【翻譯】
浮動(dòng)內(nèi)聯(lián)標(biāo)簽
**Label color - 標(biāo)簽顏色 **
The label’s color should reflect your app’s color palette, while also meeting appropriate contrast ratios.
【翻譯】
標(biāo)簽的顏色應(yīng)該反映您應(yīng)用的調(diào)色板膀篮,同時(shí)還滿足適當(dāng)?shù)膶?duì)比度嘹狞。
Light theme - 明亮主題
Floating inline labels light theme for: normal with hint text/label, focus, normal with input text, and label and disabled states
【翻譯】
浮動(dòng)內(nèi)嵌標(biāo)簽明亮主題為:正常與提示文本/標(biāo)簽,焦點(diǎn)誓竿,輸入文本正常刁绒,標(biāo)簽和禁用狀態(tài)
Dark theme - 暗色主題
Floating inline labels dark theme for: normal with hint text/label, focus, normal with input text, and label and disabled states
【翻譯】
浮動(dòng)內(nèi)嵌標(biāo)簽深色主題為:正常與提示文本/標(biāo)簽,焦點(diǎn)烤黍,輸入文本正常知市,標(biāo)簽和禁用狀態(tài)
Specs - 規(guī)格
Floating label - 浮動(dòng)標(biāo)簽
Roboto Regular 12sp
【翻譯】
Roboto Regular 12sp
Hint and input text - 提示和輸入文本
Regular labels: Roboto Regular 16sp
Dense labels: Roboto Regular 13sp
【翻譯】
常規(guī)標(biāo)簽:Roboto Regular 16sp
密集標(biāo)簽:Roboto Regular 13sp
Before input is entered, floating label text is 16sp (or 13sp for dense labels). As text is entered, the label moves to a new location above the input field and the label text becomes 12sp (for both regular and dense labels).
【翻譯】
在輸入輸入之前,浮動(dòng)標(biāo)簽文本為16sp(對(duì)于密集標(biāo)簽速蕊,為13sp)嫂丙。當(dāng)輸入文本時(shí),標(biāo)簽移動(dòng)到輸入字段上方的新位置规哲,標(biāo)簽文本變?yōu)?2sp(用于正常和密集標(biāo)簽)跟啤。
**Floating labels - 浮動(dòng)標(biāo)簽 **
Tile height: 72dp
【翻譯】
瓷磚高度:72dp
**Label text - 標(biāo)簽文本 **
Font size: 12sp
Padding above: 16dp
Padding below: 8dp
【翻譯】
字體大小:12sp
填充上面:16dp
填充下面:8dp
Hint and input text - 提示和輸入文本
Font size: 16sp
Padding below: 8dp
【翻譯】
字體大邪π俊:16sp
填充下面:8dp
Input line - 輸入線
Padding below: 8dp
【翻譯】
填充下面:8dp
Dense floating labels - 密集浮動(dòng)標(biāo)簽
Tile height: 60dp
【翻譯】
瓷磚高度:60dp
Label text - 標(biāo)簽文本
Font size: 12sp
Padding above: 12dp
Padding below: 4dp
【翻譯】
字體大杏绶省:12sp
填充上面:12dp
填充下面:4dp
Hint and input text - 提示和輸入文本
Font size: 13sp
Padding below: 12dp
【翻譯】
字體大小:13sp
填充下面:12dp
Input line - 輸入線
Padding below: 4dp
【翻譯】
填充下面:4dp
Style - 樣式
Density - 密度
When the mouse and keyboard are the primary input methods, measurements may be condensed to accommodate denser layouts.
【翻譯】
當(dāng)鼠標(biāo)和鍵盤是主要輸入方法時(shí)袄简,測(cè)量可以被壓縮以適應(yīng)更密集的布局腥放。
Color - 顏色
Text fields should reflect your product’s color palette. The following color applications are recommended:
**Text fields**** and text cursor: **Color these with your palette’s accent color, or a contrasting color
Error states: Use a contrasting color for error states, such as a warmer hue (for example, red or orange)
【翻譯】
文本字段應(yīng)反映您的產(chǎn)品的調(diào)色板。 建議使用以下顏色應(yīng)用程序:
文本字段和文本光標(biāo):用調(diào)色板的強(qiáng)調(diào)顏色或?qū)Ρ阮伾珜?duì)這些顏色進(jìn)行著色
錯(cuò)誤狀態(tài):對(duì)于錯(cuò)誤狀態(tài)使用對(duì)比顏色绿语,例如較暖的色調(diào)(例如秃症,紅色或橙色)
Single-line text field - 單行文本字段
Single-line fields - 單行字段
Single-line fields automatically scroll their content to the left as the text input cursor reaches the right edge of the input field.
【翻譯】
單行字段會(huì)在文本輸入光標(biāo)到達(dá)輸入字段的右邊緣時(shí)自動(dòng)將其內(nèi)容向左滾動(dòng)。
Single-line text field
【翻譯】
單行文本字段
Single-line text field
【翻譯】
單行文本字段
The color you choose should reflect your app’s color palette.
【翻譯】
你選擇的顏色應(yīng)該反映你的應(yīng)用程序的調(diào)色板吕粹。
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
【翻譯】
明亮的主題
提示和輸入字體:Roboto Regular 16sp
瓷磚高度:48dp
文本頂部和底部填充:16dp
文本字段分隔符填充:8dp
提示文本按下狀態(tài):54%黑色
[圖片上傳失敗...(image-37e8ab-1552293187289)]
Single-line text field light theme
【翻譯】
單行文本字段明亮主題
Dark theme - 暗色主題
Hint text for pressed state: 70% white
【翻譯】
提示文本按下狀態(tài):70%白色
Single-line text field dark theme
【翻譯】
單行文本字段黑暗主題
Single-line text field
Height: 48dp
Padding above and below text: 16dp
Padding below divider: 8dp
【翻譯】
單行文本字段
高:48dp
填充以上和以下文本:16dp
分隔符下面的填充:8dp
Dense single-line text field
Hint and input text: 13sp
Height: 40dp
Padding above and below text: 12dp
Padding below divider: 4dp
【翻譯】
密集單行文本字段
提示和輸入文本:13sp
高:40dp
填充以上和以下文本:12dp
分隔線下面的填充:4dp
Light theme with icon - 與圖標(biāo)的明亮的主題
Hint and input font: Roboto Regular 16sp
Tile height: 48dp
Text top and bottom padding: 16dp
Text field divider padding: 8dp
【翻譯】
提示和輸入字體:Roboto Regular 16sp
瓷磚高度:48dp
文本頂部和底部填充:16dp
文本字段分隔符填充:8dp
Light theme with: normal with hint text, focus, and normal with input text
【翻譯】
明亮主題:正常與提示文本种柑,焦點(diǎn)和正常與輸入文本
Dark theme with icon - 與圖標(biāo)的黑暗的主題
Dark theme with: normal with hint text, focus, and normal with input text
【翻譯】
黑暗主題:正常與提示文本,焦點(diǎn)和正常與輸入文本
Single-line text field with icon
Height: 48dp
Padding above and below text: 16dp
Padding below divider: 8dp
Icon: 24dp
【翻譯】
帶圖標(biāo)的單行文本字段
高:48dp
填充以上和以下文本:16dp
分隔符下面的填充:8dp
圖標(biāo):24dp
[圖片上傳失敗...(image-d7ad4b-1552293187289)]
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
【翻譯】
密集的單行文本字段帶有圖標(biāo)
提示和輸入文本:13sp
高:40dp
填充以上和以下文本:12dp
分隔線下面的填充:4dp
圖標(biāo):20dp
Multi-line text field - 多行文本字段
Multi-line text fields automatically break to a new line for overflow text and scroll vertically when the cursor reaches the lower edge.
【翻譯】
多行文本字段自動(dòng)折行到新行匹耕,溢出文本聚请,當(dāng)光標(biāo)到達(dá)下邊緣時(shí)垂直滾動(dòng)。
Multi-line text field
【翻譯】
多行文本字段
**The color you choose should reflect your UI’s color scheme. - **
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
【翻譯】
您選擇的顏色應(yīng)反映您的UI的配色方案稳其。
明亮的主題
提示和輸入字體:Roboto Regular 16sp
標(biāo)簽字體:Roboto Regular 12sp
文本頂部和底部填充:16dp
文本字段分隔符填充:8dp
Multi-line text field light theme for: normal with hint text, focused, and normal with multi-line input text
【翻譯】
多行文本字段光主題為:正常與提示文本驶赏,聚焦和正常與多行輸入文本
Dark theme - 暗色主題
[圖片上傳失敗...(image-a9f1-1552293187289)]
Dark theme for multi-line text field for these states: normal with hint text, focus, and normal with multi-line input text
【翻譯】
暗色主題為多行文本字段的這些狀態(tài):正常與提示文本,焦點(diǎn)和正常與多行輸入文本
Dark theme specs:
Padding above and below label: 16dp
【翻譯】
暗色主題規(guī)格:
標(biāo)簽上方和下方的填充:16dp
[圖片上傳失敗...(image-7fb774-1552293187289)]
Dense dark theme specs:
Label and input text: 13sp
Label text top and bottom padding: 12dp
【翻譯】
密集黑暗主題規(guī)格:
標(biāo)簽和輸入文字:13sp
標(biāo)簽文本頂部和底部填充:12dp
Full-width text field - 全角文本字段
Full-width text fields are useful for more in-depth tasks.
【翻譯】
全角度文本字段對(duì)于更深入的任務(wù)非常有用欢际。
Full-width text field
【翻譯】
全角文本字段
[圖片上傳失敗...(image-f639ca-1552293187289)]
Full-width text field
【翻譯】
全角文本字段
Single and multi-line fields - 單行和多行字段
Hint and input font: Roboto Regular 16sp
Top and bottom padding for text: 20dp
【翻譯】
提示和輸入字體:Roboto Regular 16sp
文本的頂部和底部填充:20dp
Single and multi-line fields for these states: normal, focused, and normal with multi-line input text
【翻譯】
這些狀態(tài)的單行和多行字段:正常母市,聚焦和正常與多行輸入文本
[圖片上傳失敗...(image-2cd3f4-1552293187289)]
Specs for full-width single line text field:
Height: 56dp
Text top and bottom padding: 20dp
【翻譯】
全寬單行文本字段的規(guī)范:
高:56dp
文本頂部和底部填充:20dp
[圖片上傳失敗...(image-b2fb0a-1552293187289)]
Specs for dense full-width single line text field:
Hint and input text: 13sp
Height: 48dp
Text top and bottom padding: 16dp
【翻譯】
密集全寬單線文本字段的規(guī)格:
提示和輸入文本:13sp
高:48dp
文本頂部和底部填充:16dp
Character counter - 字符計(jì)數(shù)器
Use a character counter in fields where a character restriction is in place.
【翻譯】
在有字符限制的字段中使用字符計(jì)數(shù)器。
Single line with character counter - 單行帶字符計(jì)數(shù)器
Counter text: Roboto Regular 12sp
【翻譯】
計(jì)數(shù)器文本:Roboto Regular 12sp
[圖片上傳失敗...(image-4d5991-1552293187289)]
Single line with character counter with a green line showing the user has not exceeded the character restriction
【翻譯】
帶有顯示用戶的綠線的字符計(jì)數(shù)器的單行沒(méi)有超出字符限制
[圖片上傳失敗...(image-77985-1552293187289)]
Single line with character counter with a red line showing that the character restriction has been exceeded
【翻譯】
帶有字符計(jì)數(shù)器的單行损趋,帶有紅色線患久,表示已超過(guò)字符限制
**Multi-line with character counter - 多行與字符計(jì)數(shù)器 **
Counter text: Roboto Regular 12sp
【翻譯】
計(jì)數(shù)器文本:Roboto Regular 12sp
[圖片上傳失敗...(image-d3fe91-1552293187289)]
Multi-line with character counter with a green line showing the user has not exceeded the character restriction
【翻譯】
多行與字符計(jì)數(shù)器,綠色線表示用戶沒(méi)有超過(guò)字符限制
Multi-line with character counter with a red line showing that the character restriction has been exceeded
【翻譯】
多行與字符計(jì)數(shù)器浑槽,紅色線表示已超過(guò)字符限制
Full-width text field with character counter - 帶字符計(jì)數(shù)器的全角度文本字段
Full-width text field with character counter
【翻譯】
帶字符計(jì)數(shù)器的全角度文本字段
Single-line focus and multi-line focus text fields
【翻譯】
單行焦點(diǎn)和多行焦點(diǎn)文本字段
Auto-complete text field - 自動(dòng)完成文本字段
Use auto-complete text fields to present real-time suggestions or completions in dropdowns, so users can enter information more accurately and efficiently.
Autocomplete is especially valuable for users with limited text literacy or who have difficulty with spelling, especially if they are using a non-native language. (Some users have to navigate the Internet in English because there are no localized pages for their native languages.)
【翻譯】
使用自動(dòng)完成文字字段在下拉菜單中顯示實(shí)時(shí)建議或完成情況蒋失,以便用戶更準(zhǔn)確,高效地輸入信息桐玻。
自動(dòng)完成功能對(duì)于文字素質(zhì)有限或拼字有困難的用戶尤其有用篙挽,尤其是在使用非母語(yǔ)的情況下。 (有些用戶必須用英語(yǔ)瀏覽互聯(lián)網(wǎng)镊靴,因?yàn)闆](méi)有本地語(yǔ)言的本地化頁(yè)面铣卡。)
Auto-complete text field
【翻譯】
自動(dòng)完成文本字段
[圖片上傳失敗...(image-75410-1552293187289)]
Auto-complete text field in dropdown
【翻譯】
自動(dòng)完成文本字段在下拉列表中
Inset auto-complete - 插入自動(dòng)完成
Inset auto-complete
【翻譯】
插入自動(dòng)完成
Inset auto-complete
【翻譯】
插入自動(dòng)完成
Full-width inline auto-complete - 全角內(nèi)聯(lián)自動(dòng)完成
Normal with hint text
【翻譯】
正常與提示文本
[圖片上傳失敗...(image-b6eb6f-1552293187289)]
Focus with suggestions
【翻譯】
專注于建議
In-line auto-complete - 在線自動(dòng)完成
[圖片上傳失敗...(image-d1ee57-1552293187289)]
In-line auto-complete
【翻譯】
在線自動(dòng)完成
Search filter - 搜索過(guò)濾器
The app bar can act as a text input field. As the user types, the content underneath is filtered and sorted.
【翻譯】
應(yīng)用欄可以充當(dāng)文本輸入字段链韭。隨著用戶鍵入,下面的內(nèi)容被過(guò)濾和排序煮落。
[圖片上傳失敗...(image-d46851-1552293187289)]
The app bar acts as a text input field..
【翻譯】
應(yīng)用欄充當(dāng)文本輸入字段敞峭。
The app bar acts as a text input field and the content underneath is filtered and sorted.
【翻譯】
應(yīng)用欄充當(dāng)文本輸入字段,并對(duì)下面的內(nèi)容進(jìn)行過(guò)濾和排序蝉仇。
Required fields - 必填字段
To indicate that a field is required, display an asterisk (*) next to the field. At the bottom of the form, include a note explaining that an asterisk indicates a required field.
【翻譯】
要指示需要字段旋讹,請(qǐng)?jiān)谧侄闻赃咃@示星號(hào)(*)。在表單底部轿衔,包含一個(gè)說(shuō)明沉迹,說(shuō)明星號(hào)表示必填字段。
Helper text - 幫助文本
Helper text should appear below the text field and either be persistently visible, or only visible on focus.
【翻譯】
輔助文本應(yīng)顯示在文本字段下方害驹,并且永久可見(jiàn)鞭呕,或僅在焦點(diǎn)上可見(jiàn)。
Required fields are marked with an asterisk. Helper text can either be visible on focus, or visible persistently.
【翻譯】
必填字段標(biāo)有星號(hào)裙秋。幫助文本可以在焦點(diǎn)上可見(jiàn)琅拌,也可以永久可見(jiàn)。
**Hint text - 提示文本 **
Hint text should display the type of information requested in a text field. It may be displayed in the form of an example, such as a placeholder phone number or URL.
【翻譯】
提示文本應(yīng)顯示文本字段中請(qǐng)求的信息類型摘刑。它可以以示例的形式顯示进宝,例如占位符電話號(hào)碼或URL。
[圖片上傳失敗...(image-cd6620-1552293187289)]
Hint text gives examples of text and numbers. The hint text field may also have a dropdown menu, where the user either types in their choice or selects one from the dropdown menu.
【翻譯】
提示文本給出了文本和數(shù)字的示例枷恕。提示文本字段還可以具有下拉菜單党晋,其中用戶鍵入他們的選擇或從下拉菜單中選擇一個(gè)。
Password input - 密碼輸入
Password input is disguised by default. Midline ellipses are displayed to represent each character of a password entered (such as ???????).
【翻譯】
密碼輸入默認(rèn)情況下偽裝徐块。顯示中線橢圓以表示輸入的密碼(例如???????)的每個(gè)字符未玻。
Enabling and disabling visibility - 啟用和停用可見(jiàn)性
When the visibility icon is displayed with a text field, it indicates whether or not that field’s input is visible.
【翻譯】
當(dāng)可見(jiàn)性圖標(biāo)與文本字段一起顯示時(shí),它指示該字段的輸入是否可見(jiàn)胡控。
A text field’s visibility may be toggled on or off using the icon:
【翻譯】
可以使用圖標(biāo)打開或關(guān)閉文本字段的公開程度:
Visibility enabled - 啟用可見(jiàn)性
The visibility icon is displayed, with the password visible
【翻譯】
將顯示可見(jiàn)性圖標(biāo)扳剿,并顯示密碼
Visibility disabled - 可見(jiàn)性已停用
The invisibility icon is displayed, with the password represented by midline ellipses
【翻譯】
顯示不可見(jiàn)圖標(biāo),密碼由中線橢圓表示
[圖片上傳失敗...(image-8dba96-1552293187289)]
The visibility icon appears on the text field, off to the side.
【翻譯】
可見(jiàn)性圖標(biāo)出現(xiàn)在文本字段上昼激,側(cè)邊庇绽。
The following transparency values are used for password text:
【翻譯】
密碼文本使用以下透明度值: