一跋破、Text fields（輸入框/文本框）是一個歷史悠久而經(jīng)典的控件，當光標位于輸入框時瓶蝴，用戶可以在其中輸入或復制粘貼文本毒返、數(shù)字等內(nèi)容。輸入框雖然看上去簡單舷手，但需要考慮的細節(jié)也不少拧簸，本文將向你介紹輸入框的相關(guān)組成部分和注意事項。
1.標題 / 輸入框標簽（Label）
Label是一個控件或一組相關(guān)控件的名稱或標題男窟，與Text field成對出現(xiàn)時表示輸入框的標題或者內(nèi)容盆赤，對于常見的主題有時也用圖標代替Label。在表單中為了標明輸入框是必填的歉眷，通常在Label旁邊添加一個星號「*」牺六。
2.Label與Text fields的對齊方式
Label和Text fields的排版對用戶瀏覽和使用有很大影響淑际，一般來說可以把Label與Text fields對齊方式劃分為4種。
① 頂端對齊
Label和Text field垂直左對齊排列扇住，用戶只需依次向下瀏覽春缕，因此瀏覽和填寫的效率是4個對齊方式中最好的，而且占用屏幕橫向空間少艘蹋，即使Label特別長也能很好的顯示（這對支持多國語言的軟件特別有用锄贼，因為有些語言比英文還要長很多）。但這種對齊方式會占用過多的屏幕高度女阀，此外應當注意每組Label和Text field與其他組的間距宅荤，以免密密麻麻降低可讀性米间。
② 水平右對齊
Label和Text field水平顯示，Label右對齊膘侮。占用的屏幕高度減小屈糊，但是由于Label長短不一時顯得層次不齊，因此用戶瀏覽效率會比垂直頂端對齊低琼了。
③ 水平左對齊
這種對齊方式利于用戶瀏覽Label逻锐，但是Label和Text field的距離較遠，用戶從左往右瀏覽的時間會變得更長雕薪∶劣眨可將某些短Label通過增加字符間距的方式使之更易讀。當然所袁，時間長也不是壞事盏档，對于有陌生數(shù)據(jù)和需要謹慎填寫內(nèi)容反倒是能讓用戶減少出錯的可能。
④ 內(nèi)嵌Label
Text field內(nèi)嵌Label是最節(jié)省空間的做法燥爷，為了讓Label和真正輸入的內(nèi)容做區(qū)分通常會把Label顏色調(diào)淡并且在最后加「…」蜈亩，實際上是把Placeholder text當做Label。內(nèi)嵌Label瀏覽效率上和頂端對齊不相上下前翎，但是一旦用戶在Text field輸入內(nèi)容后稚配，Label就看不到了，因此只適合Label特別短或者搜索框港华、賬號密碼輸入框等用戶非常熟知的情況道川。
3. Float Label（浮動標簽）
設計師Matt D Smith在內(nèi)嵌Label的基礎上發(fā)明了一種新穎的交互模式Float Label（dribbble）：當用戶在Text field中輸入內(nèi)容以后，內(nèi)嵌Label會浮動到Text field上方立宜，成為頂端對齊冒萄。這種方式兼具內(nèi)嵌Label和頂端對齊的優(yōu)點，目前已經(jīng)成為Material Design里Text field默認風格橙数。
二尊流、占位符文本/提示語（Placeholder text / Hint text）
Placeholder text是Text field沒有內(nèi)容時出現(xiàn)的灰色文字，當用戶輸入內(nèi)容后將會消失商模，因此只能展示一些比較簡短的信息奠旺。通常使用Placeholder text作為輸入指引（例如：“請點擊輸入評論”）或者表明輸入的限制和示例（例如：“年/月/日”）蜘澜。很多電商產(chǎn)品搜索框會把Placeholder text用于熱門商品促銷施流。
iOS有一個特性，在軟鍵盤上方顯示Placeholder text鄙信，這樣即使在輸入過程中也能提示用戶正確的規(guī)則瞪醋，且輸入過程中用戶視線停留在軟鍵盤上不用轉(zhuǎn)移。
三装诡、輔助說明/額外說明/幫助文字（ Helper text）
如果Text field的輸入規(guī)則或者注意事項比較復雜银受，建議在Text field附近（一般是下面）添加Helper text進行額外說明践盼。Helper text也可以用Tooltips或者Popover的形式來呈現(xiàn)。
MailChimp給密碼輸入框的Helper text加入了互動：輸入框的復雜規(guī)則拆分成多個簡單的條件宾巍，每當用戶輸入的內(nèi)容滿足一個條件咕幻，會給予相應的反饋，告知用戶已滿足這個條件顶霞，這樣就把復雜的任務拆分得簡單肄程，用戶輸入不易出錯。
四选浑、初始默認值（Default value）
輸入框內(nèi)默認預留的字符蓝厌，獲取焦點后不消失，用戶可以刪除或者修改這些字符古徒。好的初始默認值能減少用戶的輸入負擔拓提。例如地圖App路線導航功能的起點輸入框Default value是用戶的當前位置，用戶只需輸入目的地即可開始導航隧膘，提高了效率代态。
五、輸入限制
文本類型多種多樣疹吃、長短不一胆数，但是計算機能接受的文本是有限的，業(yè)務方通常對文本類型也有要求互墓。例如手機號碼肯定是數(shù)字必尼，如果輸入其他內(nèi)容會報錯。為了減少用戶出錯的可能性篡撵，維護計算機系統(tǒng)安全穩(wěn)定判莉，必須對Text field進行一些輸入限制，例如最短最常能輸入多少個字符育谬；是否能輸入emoj表情符號等特殊字符券盅；前后的空格是否過濾；能否支持從剪貼板粘貼等等膛檀。
此外要考慮如果用戶的輸入超出限制或出錯锰镀，應當如何給予用戶合適的反饋，幫助用戶將內(nèi)容修改正確咖刃。
六泳炉、自動獲取焦點（Autofocus）
當用戶點擊Text field，光標出現(xiàn)彈出軟鍵盤嚎杨，表示該Text field已獲取焦點花鹅，此時用戶就能輸入或者修改內(nèi)容了。對于主要任務就是填寫表單的頁面枫浙，可以在用戶進入該頁面后刨肃，自動獲取焦點古拴。如果頁面有多個Text field，當用戶填寫完一個后真友，自動獲取下一個的焦點黄痪，這樣操作會更流暢。
七盔然、輸入方式
Text field的主流輸入方式是鍵盤满力，使用適當?shù)能涙I盤布局有助于用戶提高輸入效率，降低出錯的可能性轻纪。
除鍵盤外油额，合理運用其他輸入方式能提升輸入效率。例如語音輸入刻帚、GPS定位潦嘶、拍照識別文字、文字自動聯(lián)想崇众、與其他輸入類控件配合等掂僵。
八、字數(shù)限制展示
對于需要字數(shù)限制的Text field顷歌，目前有2種字數(shù)限制展示風格：①當前已經(jīng)輸入的字數(shù)/字的最大長度锰蓬。②一直顯示「當前已經(jīng)輸入的字數(shù)」，達到最大字數(shù)限制后會提示超出長度眯漩。
這兩種方式給用戶帶來的感受是不一樣的芹扭，例如發(fā)微博和回復微博的Text area（文本區(qū)域/多行文本輸入?yún)^(qū)）字數(shù)限制提示由原來「當前已經(jīng)輸入的字數(shù)/140字」，改為「輸入130字以后顯示剩余可輸入的字符數(shù)量」赦抖，這樣做的好處是用戶不會在剛開始輸入時舱卡，因為看到字數(shù)限制而刻意控制輸入字數(shù)，打斷心流造成情緒不暢或者降低輸入動機队萤，也許能提高發(fā)微博和評論的活躍 ????轮锥。
九、快速清除按鈕（Clear button）
對于手機軟鍵盤來說要尔，連續(xù)多次點擊delete鍵刪除多個字符比物理鍵盤體驗要差得多舍杜，因此對于有修改內(nèi)容需求的Text field可在右側(cè)放一個Clear button，點擊即可一鍵清空Text field中的所有內(nèi)容赵辕。
Clear button出現(xiàn)時機有4種：
獲取焦點時才出現(xiàn)既绩。
有內(nèi)容時就出現(xiàn)，即使沒有獲取焦點匆帚。這種適合搜索框熬词，點擊Clear button后清空內(nèi)容再自動獲取焦點，一氣呵成吸重，直接進行下次搜索互拾。
一直出現(xiàn)。
沒有明顯的Clear button嚎幸，但是按一次軟鍵盤的delete鍵直接清空所有內(nèi)容颜矿。通常密碼輸入框出錯后會用這種。
十嫉晶、密碼輸入框和可見性切換圖標
在PC時代骑疆，電腦屏幕比較大，如果密碼直接明文顯示替废，容易被旁觀者偷窺竊取箍铭，因此用星號「*」或「?」隱藏真實的密碼。移動時代密碼輸入框也密文顯示就值得斟酌了椎镣，首先手機屏幕比較小诈火，不易被旁觀竊取。其次不法分子觀察軟鍵盤按鍵順序就可以竊取密碼状答，不需要去看密碼輸入框冷守。另外密文顯示給用戶輸入和檢查帶來很大麻煩。國外有數(shù)據(jù)顯示惊科，采用密碼默認明文顯示拍摇，通過可見性圖標（Invisibility icon/Visibility icon）切換明文/密文，能明顯提高轉(zhuǎn)化率馆截，而且不會降低安全性充活。
十一、多行輸入框的最大行高
根據(jù)Text field可以輸入的行數(shù)蜡娶，可分為單行文本框（Single-line text field）和多行文本框（Multi-line text field）堪唐，由于手機的屏幕比較小，建議給多行文本框限制一個最大行高翎蹈，如果達到最大行高淮菠，輸入框內(nèi)的文本可通過滾動條滑動。為了方便拇指滾動荤堪，建議最大行高大于5行合陵。
