Text fields（輸入框/文本框）是一個(gè)歷史悠久而經(jīng)典的控件，當(dāng)光標(biāo)位于輸入框時(shí)，用戶可以在其中輸入或復(fù)制粘貼文本、數(shù)字等內(nèi)容。輸入框雖然看上去簡(jiǎn)單，但需要考慮的細(xì)節(jié)也不少，本文將向你介紹輸入框的相關(guān)組成部分和注意事項(xiàng)。
標(biāo)題 / 輸入框標(biāo)簽（Label）
Label是一個(gè)控件或一組相關(guān)控件的名稱或標(biāo)題，與Text field成對(duì)出現(xiàn)時(shí)表示輸入框的標(biāo)題或者內(nèi)容，對(duì)于常見的主題有時(shí)也用圖標(biāo)代替Label。在表單中為了標(biāo)明輸入框是必填的，通常在Label旁邊添加一個(gè)星號(hào)“*”。
Label與Text fields的對(duì)齊方式
Label和Text fields的排版對(duì)用戶瀏覽和使用有很大影響，一般來(lái)說(shuō)可以把Label與Text fields對(duì)齊方式劃分為4種。
頂端對(duì)齊
Label和Text field垂直左對(duì)齊排列，用戶只需依次向下瀏覽，因此瀏覽和填寫的效率是4個(gè)對(duì)齊方式中最好的，而且占用屏幕橫向空間少，即使Label特別長(zhǎng)也能很好的顯示（這對(duì)支持多國(guó)語(yǔ)言的軟件特別有用，因?yàn)橛行┱Z(yǔ)言比英文還要長(zhǎng)很多）。但這種對(duì)齊方式會(huì)占用過(guò)多的屏幕高度，此外應(yīng)當(dāng)注意每組Label和Text field與其他組的間距，以免密密麻麻降低可讀性。
水平右對(duì)齊
Label和Text field水平顯示，Label右對(duì)齊。占用的屏幕高度減小，但是由于Label長(zhǎng)短不一時(shí)顯得層次不齊，因此用戶瀏覽效率會(huì)比垂直頂端對(duì)齊低。
水平左對(duì)齊
這種對(duì)齊方式利于用戶瀏覽Label，但是Label和Text field的距離較遠(yuǎn)，用戶從左往右瀏覽的時(shí)間會(huì)變得更長(zhǎng)。可將某些短Label通過(guò)增加字符間距的方式使之更易讀。當(dāng)然，時(shí)間長(zhǎng)也不是壞事，對(duì)于有陌生數(shù)據(jù)和需要謹(jǐn)慎填寫內(nèi)容反倒是能讓用戶減少出錯(cuò)的可能。
內(nèi)嵌Label
Text field內(nèi)嵌Label是最節(jié)省空間的做法，為了讓Label和真正輸入的內(nèi)容做區(qū)分通常會(huì)把Label顏色調(diào)淡并且在最后加“...”，實(shí)際上是把Placeholder text當(dāng)做Label。內(nèi)嵌Label瀏覽效率上和頂端對(duì)齊不相上下，但是一旦用戶在Text field輸入內(nèi)容后，Label就看不到了，因此只適合Label特別短或者搜索框、賬號(hào)密碼輸入框等用戶非常熟知的情況。
Float Label（浮動(dòng)標(biāo)簽）
設(shè)計(jì)師Matt D Smith在內(nèi)嵌Label的基礎(chǔ)上發(fā)明了一種新穎的交互模式Float Label（ https://dribbble.com/shots/1254439--GIF-Float-Label-Form-Interaction ）：當(dāng)用戶在Text field中輸入內(nèi)容以后，內(nèi)嵌Label會(huì)浮動(dòng)到Text field上方，成為頂端對(duì)齊。這種方式兼具內(nèi)嵌Label和頂端對(duì)齊的優(yōu)點(diǎn)，目前已經(jīng)成為Material Design里Text field默認(rèn)風(fēng)格。
這種模式也有缺點(diǎn)，Label顯示過(guò)小，對(duì)于小屏幕和視力不佳的用戶來(lái)說(shuō)不是個(gè)好方案。此外，Label侵占了原本Placeholder text的空間，對(duì)于一些用戶陌生的Text field來(lái)說(shuō)需要額外的空間放提示和說(shuō)明。
占位符文本/提示語(yǔ)（Placeholder text / Hint text）
Placeholder text是Text field沒(méi)有內(nèi)容時(shí)出現(xiàn)的灰色文字，當(dāng)用戶輸入內(nèi)容后將會(huì)消失，因此只能展示一些比較簡(jiǎn)短的信息。通常使用Placeholder text作為輸入指引（例如：“請(qǐng)點(diǎn)擊輸入評(píng)論”）或者表明輸入的限制和示例（例如：“年/月/日”）。很多電商產(chǎn)品搜索框會(huì)把Placeholder text用于熱門商品促銷。
iOS有一個(gè)特性，在軟鍵盤上方顯示Placeholder text，這樣即使在輸入過(guò)程中也能提示用戶正確的規(guī)則，且輸入過(guò)程中用戶視線停留在軟鍵盤上不用轉(zhuǎn)移。
輔助說(shuō)明/額外說(shuō)明/幫助文字（ Helper text）
如果Text field的輸入規(guī)則或者注意事項(xiàng)比較復(fù)雜，建議在Text field附近（一般是下面）添加Helper text進(jìn)行額外說(shuō)明。Helper text也可以用Tooltips或者Popover的形式來(lái)呈現(xiàn)。
MailChimp給密碼輸入框的Helper text加入了互動(dòng)：輸入框的復(fù)雜規(guī)則拆分成多個(gè)簡(jiǎn)單的條件，每當(dāng)用戶輸入的內(nèi)容滿足一個(gè)條件，會(huì)給予相應(yīng)的反饋，告知用戶已滿足這個(gè)條件，這樣就把復(fù)雜的任務(wù)拆分得簡(jiǎn)單，用戶輸入不易出錯(cuò)。
初始默認(rèn)值（Default value）
輸入框內(nèi)默認(rèn)預(yù)留的字符，獲取焦點(diǎn)后不消失，用戶可以刪除或者修改這些字符。好的初始默認(rèn)值能減少用戶的輸入負(fù)擔(dān)。例如地圖App路線導(dǎo)航功能的起點(diǎn)輸入框Default value是用戶的當(dāng)前位置，用戶只需輸入目的地即可開始導(dǎo)航，提高了效率。
輸入限制
文本類型多種多樣、長(zhǎng)短不一，但是計(jì)算機(jī)能接受的文本是有限的，業(yè)務(wù)方通常對(duì)文本類型也有要求。例如手機(jī)號(hào)碼肯定是數(shù)字，如果輸入其他內(nèi)容會(huì)報(bào)錯(cuò)。為了減少用戶出錯(cuò)的可能性，維護(hù)計(jì)算機(jī)系統(tǒng)安全穩(wěn)定，必須對(duì)Text field進(jìn)行一些輸入限制，例如最短最常能輸入多少個(gè)字符；是否能輸入emoj表情符號(hào)等特殊字符；前后的空格是否過(guò)濾；能否支持從剪貼板粘貼等等。
此外要考慮如果用戶的輸入超出限制或出錯(cuò)，應(yīng)當(dāng)如何給予用戶合適的反饋，幫助用戶將內(nèi)容修改正確。
自動(dòng)獲取焦點(diǎn)（Autofocus）
當(dāng)用戶點(diǎn)擊Text field，光標(biāo)出現(xiàn)彈出軟鍵盤，表示該Text field已獲取焦點(diǎn)，此時(shí)用戶就能輸入或者修改內(nèi)容了。對(duì)于主要任務(wù)就是填寫表單的頁(yè)面，可以在用戶進(jìn)入該頁(yè)面后，自動(dòng)獲取焦點(diǎn)。如果頁(yè)面有多個(gè)Text field，當(dāng)用戶填寫完一個(gè)后，自動(dòng)獲取下一個(gè)的焦點(diǎn)，這樣操作會(huì)更流暢。
輸入方式
Text field的主流輸入方式是鍵盤，使用適當(dāng)?shù)能涙I盤布局有助于用戶提高輸入效率，降低出錯(cuò)的可能性。關(guān)于軟鍵盤布局等特性，筆者已經(jīng)在前文《這個(gè)控件叫：Soft Keyboard/Virtual Keyboard/軟鍵盤/虛擬鍵盤》已經(jīng)有詳細(xì)論述。
除鍵盤外，合理運(yùn)用其他輸入方式能提升輸入效率。例如語(yǔ)音輸入、GPS定位、拍照識(shí)別文字、文字自動(dòng)聯(lián)想、與其他輸入類控件配合等。
字?jǐn)?shù)限制展示
對(duì)于需要字?jǐn)?shù)限制的Text field，目前有2種字?jǐn)?shù)限制展示風(fēng)格：1）「當(dāng)前已經(jīng)輸入的字?jǐn)?shù)/字的最大長(zhǎng)度」。2）一直顯示「當(dāng)前已經(jīng)輸入的字?jǐn)?shù)」，達(dá)到最大字?jǐn)?shù)限制后會(huì)提示超出長(zhǎng)度。
這兩種方式給用戶帶來(lái)的感受是不一樣的，例如發(fā)微博和回復(fù)微博的Text area（文本區(qū)域/多行文本輸入?yún)^(qū)）字?jǐn)?shù)限制提示由原來(lái)「當(dāng)前已經(jīng)輸入的字?jǐn)?shù)/140字」，改為「輸入130字以后顯示剩余可輸入的字符數(shù)量」，這樣做的好處是用戶不會(huì)在剛開始輸入時(shí)因?yàn)榭吹阶謹(jǐn)?shù)限制而刻意控制輸入字?jǐn)?shù)打斷心流造成情緒不暢或者降低輸入動(dòng)機(jī)，也許能提高發(fā)微博和評(píng)論的活躍 ????。
快速清除按鈕（Clear button）
對(duì)于手機(jī)軟鍵盤來(lái)說(shuō)，連續(xù)多次點(diǎn)擊delete鍵刪除多個(gè)字符比物理鍵盤體驗(yàn)要差得多，因此對(duì)于有修改內(nèi)容需求的Text field可在右側(cè)放一個(gè)Clear button，點(diǎn)擊即可一鍵清空Text field中的所有內(nèi)容。
Clear button出現(xiàn)時(shí)機(jī)有4種：1）獲取焦點(diǎn)時(shí)才出現(xiàn)。2）有內(nèi)容時(shí)就出現(xiàn)，即使沒(méi)有獲取焦點(diǎn)。這種適合搜索框，點(diǎn)擊Clear button后清空內(nèi)容再自動(dòng)獲取焦點(diǎn)，一氣呵成，直接進(jìn)行下次搜索。3）一直出現(xiàn)。4）沒(méi)有明顯的Clear button，但是按一次軟鍵盤的delete鍵直接清空所有內(nèi)容。通常密碼輸入框出錯(cuò)后會(huì)用這種。
密碼輸入框和可見性切換圖標(biāo)
在PC時(shí)代，電腦屏幕比較大，如果密碼直接明文顯示，容易被旁觀者偷窺竊取，因此用星號(hào)“*”或“?”隱藏真實(shí)的密碼。移動(dòng)時(shí)代密碼輸入框也密文顯示就值得斟酌了，首先手機(jī)屏幕比較小，不易被旁觀竊取。其次不法分子觀察軟鍵盤按鍵順序就可以竊取密碼，不需要去看密碼輸入框。另外密文顯示給用戶輸入和檢查帶來(lái)很大麻煩。國(guó)外有數(shù)據(jù)顯示，采用密碼默認(rèn)明文顯示，通過(guò)可見性圖標(biāo)（Invisibility icon/Visibility icon）切換明文/密文，能明顯提高轉(zhuǎn)化率，而且不會(huì)降低安全性。（詳細(xì)請(qǐng)閱讀
http://www.uisdc.com/should-login-show-password ）
多行輸入框的最大行高
根據(jù)Text field可以輸入的行數(shù)，可分為單行文本框（Single-line text field）和多行文本框（Multi-line text field），由于手機(jī)的屏幕比較小，建議給多行文本框限制一個(gè)最大行高，如果達(dá)到最大行高，輸入框內(nèi)的文本可通過(guò)滾動(dòng)條滑動(dòng)。為了方便拇指滾動(dòng)，建議最大行高大于5行。
《這個(gè)控件叫什么》專題
這個(gè)控件叫：Badge/徽標(biāo)/小紅點(diǎn)
這個(gè)控件叫：A-Z index/字母索引導(dǎo)航
這個(gè)控件叫：Segment Controls/分段控件（附錄與Tabs的區(qū)別）
這個(gè)控件叫：Skeleton Screen/加載占位圖
這個(gè)控件叫：Page Indicator/Page Controls/頁(yè)面指示器
這個(gè)控件叫：Stepper/步進(jìn)器
這個(gè)控件叫：Switch/開關(guān)/滑動(dòng)開關(guān)/切換開關(guān)
Toast（吐司提示）的曾經(jīng)、現(xiàn)在與未來(lái)
這個(gè)控件叫：Picker/選擇器/拾取器
這個(gè)控件叫：Soft Keyboard/Virtual Keyboard/軟鍵盤/虛擬鍵盤
這個(gè)控件叫：Action Sheet/動(dòng)作菜單/動(dòng)作面板/行動(dòng)列表
這個(gè)控件叫：Popover/氣泡彈出框/彈出式氣泡/氣泡
這個(gè)控件可能叫：Notice Bar/通告欄
