#我是一個(gè)可愛的搬磚工系列# 嘗試對照英文翻譯學(xué)習(xí)MD的組件設(shè)計(jì)，借此加深各種組件的應(yīng)用~
Material Design鏈接：Material Design——Text fields
文本字段允許用戶輸入和編輯文本。
一、用法
頂部應(yīng)用程序欄提供與當(dāng)前屏幕相關(guān)的內(nèi)容和操作，它用于品牌、屏幕標(biāo)題、導(dǎo)航和操作。
△ 原則
·?發(fā)現(xiàn)??文本字段應(yīng)突出顯示, 并指示用戶可以輸入信息
· 清晰??文本字段狀態(tài)應(yīng)清楚地區(qū)分開來
·?有效??文本字段應(yīng)便于理解所請求的信息并解決任何錯(cuò)誤
△ 原則
文本字段分為兩種類型:
·?填充文本字段
·?大綱文本字段
這兩種類型的文本字段都使用容器為交互提供一個(gè)明確的啟示, 使字段在布局中可以發(fā)現(xiàn)。
△?選擇正確的文本字段
這兩種類型的文本字段都提供相同的功能, 因此所使用的文本字段類型可以單獨(dú)依賴于樣式。
選擇以下類型:
· 選擇最合適的風(fēng)格
·?最佳地容納用戶界面的目標(biāo)
·?與其他組件 (如按鈕) 和周圍內(nèi)容非常不同
一個(gè) UI 中的兩種文本字段類型
如果兩種類型的文本字段都在單個(gè) UI 中使用, 則應(yīng)在不同的節(jié)中一致使用它們, 而不會在同一區(qū)域內(nèi)混合，例如, 可以在一個(gè)節(jié)中使用大綱文本字段, 并在另一個(gè)部分中填充文本字段。
二、分析
△?Container
容器通過在文本字段和周圍內(nèi)容之間創(chuàng)建對比度來改進(jìn)文本字段的發(fā)現(xiàn)。
·?填充和描邊
文本字段容器具有填充和描邊 (在整個(gè)容器的周圍, 或者只是底部邊緣)，筆畫的顏色和粗細(xì)可以更改為在文本字段處于活動狀態(tài)時(shí)指示。
·?圓角
"輪廓" 文本字段的容器具有圓角, 而填充文本字段的容器有圓形的頂部角和方形底角。
△?Label text
標(biāo)簽文本用于通知用戶對文本字段所請求的信息，每個(gè)文本字段都應(yīng)該有一個(gè)標(biāo)簽。
標(biāo)簽文本應(yīng)與輸入行對齊, 并且始終可見，它可以放在文本字段的中間, 或者放在容器頂部附近。
· 必需的文本指示器
要指示字段是必需的, 請?jiān)跇?biāo)簽文本旁邊顯示一個(gè)星號 (*), 并在星號指示必填字段的窗體附近注明。
1.如果需要某些字段, 請指示所有必需的域
2.如果需要大多數(shù)字段, 請通過在標(biāo)簽文本旁邊的括號中顯示 "可選" 字來指示可選字段
3.如果需要的文本是彩色的, 該顏色也應(yīng)用于星號
△?Input text
輸入文本是用戶輸入到文本字段中的文本。
·?Input text
輸入文本是用戶輸入的文本。
·?Cursor
游標(biāo)指示字段中文本輸入的當(dāng)前位置。
△?Assistive elements
輔助元素提供有關(guān)輸入到文本字段中的文本的其他詳細(xì)信息。
· Helper text
相關(guān)的說明文本可以輔助用戶填寫文本框，它將持續(xù)顯示。
·?Error message
當(dāng)文本輸入錯(cuò)誤, 提供有關(guān)如何修復(fù)它的說明，錯(cuò)誤說明顯示在輸入行下面, 直到文本輸入正確。
· icons
圖標(biāo)也可以用于提示輸入文本的錯(cuò)誤，將它們與錯(cuò)誤消息配對, 以提供冗余警報(bào), 這對盲用戶非常有用。
·?Character counter
如果有字符或單詞限制, 則應(yīng)使用字符或單詞計(jì)數(shù)器，它們顯示所用字符的比例和總字符限制。
· Error text
·?如果只可能出現(xiàn)一個(gè)錯(cuò)誤, 則錯(cuò)誤文本將描述如何避免錯(cuò)誤
·?如果可能出現(xiàn)多個(gè)錯(cuò)誤, 錯(cuò)誤文本將描述如何避免最可能的錯(cuò)誤
△?Icons
文本字段中的圖標(biāo)是可選的，文本字段圖標(biāo)可以描述有效的輸入方法 (如麥克風(fēng)圖標(biāo)), 提供啟示以訪問其他功能 (如清除字段內(nèi)容), 并可以表示錯(cuò)誤。
主導(dǎo)和轉(zhuǎn)換的圖標(biāo)根據(jù) LTR 或 RTL 上下文更改其位置。
· Icon signifier
