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ì)于常見(jiàn)的主題有時(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ì)齊排列，用戶只需依次向下瀏覽服赎，因此瀏覽和填寫(xiě)的效率是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)慎填寫(xiě)內(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用于熱門(mén)商品促銷别智。
iOS有一個(gè)特性，在軟鍵盤(pán)上方顯示Placeholder text缝左，這樣即使在輸入過(guò)程中也能提示用戶正確的規(guī)則亿遂，且輸入過(guò)程中用戶視線停留在軟鍵盤(pán)上不用轉(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)前位置冕香，用戶只需輸入目的地即可開(kāi)始導(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)彈出軟鍵盤(pán)制市，表示該Text field已獲取焦點(diǎn)抬旺，此時(shí)用戶就能輸入或者修改內(nèi)容了。對(duì)于主要任務(wù)就是填寫(xiě)表單的頁(yè)面祥楣，可以在用戶進(jìn)入該頁(yè)面后开财，自動(dòng)獲取焦點(diǎn)。如果頁(yè)面有多個(gè)Text field误褪，當(dāng)用戶填寫(xiě)完一個(gè)后责鳍，自動(dòng)獲取下一個(gè)的焦點(diǎn)，這樣操作會(huì)更流暢兽间。
輸入方式
Text field的主流輸入方式是鍵盤(pán)历葛，使用適當(dāng)?shù)能涙I盤(pán)布局有助于用戶提高輸入效率，降低出錯(cuò)的可能性嘀略。關(guān)于軟鍵盤(pán)布局等特性恤溶，筆者已經(jīng)在前文《這個(gè)控件叫：Soft Keyboard/Virtual Keyboard/軟鍵盤(pán)/虛擬鍵盤(pán)》已經(jīng)有詳細(xì)論述。
除鍵盤(pán)外帜羊，合理運(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ì)在剛開(kāi)始輸入時(shí)因?yàn)榭吹阶謹(jǐn)?shù)限制而刻意控制輸入字?jǐn)?shù)打斷心流造成情緒不暢或者降低輸入動(dòng)機(jī)鳖宾，也許能提高發(fā)微博和評(píng)論的活躍 ????。
快速清除按鈕（Clear button）
對(duì)于手機(jī)軟鍵盤(pán)來(lái)說(shuō)逆航，連續(xù)多次點(diǎn)擊delete鍵刪除多個(gè)字符比物理鍵盤(pán)體驗(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钳踊，但是按一次軟鍵盤(pán)的delete鍵直接清空所有內(nèi)容衷敌。通常密碼輸入框出錯(cuò)后會(huì)用這種。
密碼輸入框和可見(jiàn)性切換圖標(biāo)
在PC時(shí)代拓瞪，電腦屏幕比較大缴罗，如果密碼直接明文顯示，容易被旁觀者偷窺竊取吴藻，因此用星號(hào)“*”或“?”隱藏真實(shí)的密碼瞒爬。移動(dòng)時(shí)代密碼輸入框也密文顯示就值得斟酌了，首先手機(jī)屏幕比較小沟堡，不易被旁觀竊取侧但。其次不法分子觀察軟鍵盤(pán)按鍵順序就可以竊取密碼，不需要去看密碼輸入框航罗。另外密文顯示給用戶輸入和檢查帶來(lái)很大麻煩禀横。國(guó)外有數(shù)據(jù)顯示，采用密碼默認(rèn)明文顯示粥血，通過(guò)可見(jiàn)性圖標(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/開(kāi)關(guān)/滑動(dòng)開(kāi)關(guān)/切換開(kāi)關(guān)
Toast（吐司提示）的曾經(jīng)、現(xiàn)在與未來(lái)
這個(gè)控件叫：Picker/選擇器/拾取器
這個(gè)控件叫：Soft Keyboard/Virtual Keyboard/軟鍵盤(pán)/虛擬鍵盤(pán)
這個(gè)控件叫：Action Sheet/動(dòng)作菜單/動(dòng)作面板/行動(dòng)列表
這個(gè)控件叫：Popover/氣泡彈出框/彈出式氣泡/氣泡
這個(gè)控件可能叫：Notice Bar/通告欄
