U控制元件系列-文字框/輸入框
Text fields（輸入框/文字框）是一個歷史悠久而經典的控制元件，當游標位於輸入框時，使用者可以在其中輸入或複製貼上文字、數字等內容。文字框是設計工作中常見的元件之一，無論是PC還是Mobile端，大多僅是樣式上的不同，它們的互動行為上是可以相互參照的。輸入框雖然看上去簡單，但需要考慮的細節確不少，本文將詳細介紹輸入框的相關組成部分和注意事項。
之前有看過別人寫關於輸入框的文章，搞得我也想寫寫關於文字框這個控制元件使用場景的理解啦，因為看別人寫的都是別人的理解，一定要自己深思熟慮總結後才是自己的，所以廢話不多說，直接上乾貨。
先說說文字框都有哪些型別吧，從Text fields的不同樣式分為以下幾種：
內嵌式；
水平左對齊式；
水平右對齊式；
頂端對齊式；
1.內嵌式-文字框：
在這裡不得不提到Label元件，他應該是控制元件或一組相關控制元件的名稱或標題，與文字輸入框成對出現時，則表示輸入框的標題或內容，當然，也會有
特殊處理，對於常見的內容也可以用圖示來代替Label,如果還需要標識出必填項這個屬性，常規做法是在傍邊增加一個「*」，甚至直接寫”必填“漢字的。
Text field內嵌Label是最節省空間的做法，為了讓Label和真正輸入的內容做區分通常會把Label顏色調淡；實際上是把Placeholder text當碼輸入框等使用者非常熟知的情況。
當然，還有更合適的方案來解決這個問題：
浮動標籤(Float Labe)：
設計師Matt D Smith在內嵌Label的基礎上發明了一種新穎的互動模式Float Label（dribbble ）：當用戶在Text field中輸入內容以後，內嵌Label會浮動到Text field
上方，成為頂端對齊。這種方式兼具內嵌Label和頂端對齊的優點，現在已經成為Material Design裡Text field預設風格啦。
另外提一句，有時候在一個文字域控制元件內需輸入較多文字
時則在最後還會加「…」。
2.水平左對齊式文字框：
這種對齊方式優點在於符合大部分使用者的瀏覽習慣，便於使用者快速瀏覽Label，但是在某些有短Label時與Text field的距離就較遠，
使用者從左往右瀏覽的時間會變得更長。當然，時間長也不是全是壞事，對於有陌生資料和需要謹慎填寫內容的場景時反倒是能讓使用者減少出錯的可能。
3.水平右對齊式文字框：
Label和Text field水平顯示，Label右對齊。佔用的螢幕高度減小，與左對齊一樣節省了垂直空間，但Label長短不一時會顯得參差不齊，
因此使用者瀏覽效率會比垂直頂端對齊低很多。
凡事沒有絕對，例如：這種對齊方式在pc端會更適合一些，pc顯示面積要大很多，如果兩側的距離很充裕，
則參差不齊的視覺感受會被減弱很多，也會讓Labe與Field的距離很理想，閱讀起來會更加連貫自然。
4.頂端對齊式文字框：
Label和Text field垂直左對齊排列，從而形成頂端對齊的效果。使用者只需從上往下依次瀏覽，因此瀏覽和填寫的效率是4個對齊方式中最好的，而且佔用螢幕橫向空間少，
即使Label特別長也能很好的顯示（這對支援多國語言的軟體特別有用，因為有些語言比英文還要長很多）。但這種對齊方式會佔用過多的螢幕高度，此外應當注意每組Label和Text field與其他組的間距，以免密密麻麻降低可讀性。
接下來得說說一些細節的處理和具體場景的應用方式：
佔位符文字/提示語（Placeholder text / Hint text）
Placeholder text是Text field沒有內容時出現的灰色文字，當用戶輸入內容後將會消失，因此只能展示一些比較簡短的資訊。通常使用Placeholder text作為輸入指引
（例如：“請點選輸入評論”）或者表明輸入的限制和示例（例如：“年/月/日”）。很多電商產品搜尋框會把Placeholder text用於熱門商品促銷。
輔助說明/額外說明/幫助文字（ Helper text）
如果Text field的輸入規則或者注意事項比較複雜，建議在Text field附近（一般是下面）新增Helper text進行額外說明。Helper text也可以用Tooltips或者Popover的形式來呈現。
MailChimp給密碼輸入框的Helper text加入了互動：輸入框的複雜規則拆分成多個簡單的條件，每當使用者輸入的內容滿足一個條件，會給予相應的反饋，告知使用者已滿足這個條件，這樣就把複雜的任務拆分得簡單，使用者輸入不易出錯。
初始預設值（Default value）
輸入框內預設預留的字元，獲取焦點後也不會消失，只有使用者輸入資訊時才會消失，使用者可以刪除或者修改輸入的字元。好的初始預設值能減少和降低使用者的輸入和認知負擔。例如地圖App路線導航功能的起點
輸入框Default value是使用者的當前位置，使用者只需根據預設說明輸入目的地即可開始導航，非常恰到好處的提高了效率。
自動獲取焦點（Autofocus）
當用戶點選Text field，光標出現彈出軟鍵盤，表示該Text field已獲取焦點，此時使用者就能輸入或者修改內容了。對於主要任務就是填寫表單的頁面，可以在使用者進入該頁面後，自動獲取焦點。如果頁面有多
個Text field，當用戶填寫完一個後，自動獲取下一個的焦點，這樣操作會更流暢。
輸入方式
Text field的主要輸入方式pc端是實體鍵盤，Mobile端主要輸入方式是虛擬鍵盤，各端的方式都有助於使用者提高輸入效率，降低出錯的可能性。
其實除了鍵盤外，合理運用其他輸入方式也能提升輸入效率。例如語音輸入、常用標籤輸入、拍照識別文字、文字自動聯想、歷史記錄、與其他輸入類控制元件配合等。
輸入限制展示
通常不同的產品對文字型別也有不同的要求，同時，文字型別多種多樣、長短不一，但計算機能接收的文字是有限的。例如：手機號碼肯定是數字，如果輸入其他內容會報錯。為了減少使用者出錯的可能性，
維護計算機系統安全穩定，必須對Text field進行一些輸入限制，
例如：
最短最長能輸入多少個字元；
是否能輸入emoj表情符號等特殊字元；
前後的空格是否過濾；
能否支援從剪貼簿貼上等等。
此外要考慮如果使用者的輸入超出限制或出錯，應當如何給予使用者合適的反饋，幫助 使用者將內容修改正確。
對於需要字數限制的Text field，目前有3種字數限制展示風格：
1. 當前已經輸入的字數/字的最大長度。
2. 一直顯示「當前已經輸入的字數」，達到最大字數限制後會提示超出長度。
3. 當輸入字數超過最大長度時，顯示負數值且標紅。
這三種方式給使用者帶來的感受是不一樣的，這裡舉一個做的較好的例子，例如發微博和回覆微博的Text area（文字區域/多行文字輸入區）字數限制提示由原來「當前已經輸入的字數/140字」，改為「只顯示當前輸入的字數，當字數最大值時會有提示標記元素。如果繼續輸入則會有更醒目的提示標記(紅色氣泡會有負數出現)且傳送按鈕置灰」，這樣做的好處是使用者不會在剛開始輸入時，因為看到字數限制而刻意控制輸入字數，打斷心流造成情緒不暢或者降低輸入動機，或許可以提高發微博和評論的活躍 。
快速清除按鈕（Clear button）
對於手機軟鍵盤來說，連續多次點選delete鍵刪除多個字元比物理鍵盤體驗要差得多，因此對於有修改內容需求的Text field可在右側放一個Clear button，點選即可一鍵清空Text field中的所有內容。
Clear button出現時機有4種：
1.獲取焦點時才出現。
2.有內容時就出現，即使沒有獲取焦點。這種適合搜尋框，點選Clear button後清空 3.內容再自動獲取焦點，一氣呵成，直接進行下次搜尋。
一直出現。
4.沒有明顯的Clear button，但是按一次軟鍵盤的delete鍵直接清空所有內容。通常 密碼輸入框出錯後會用這種。
密碼輸入框和可見性切換圖示
在PC時代，電腦螢幕比較大，如果密碼直接明文顯示，容易被旁觀者偷窺竊取，因此用星號「*」或「•」隱藏真實的密碼。移動時代密碼輸入框密文顯示也是很好的保護隱私的方式之一，但是，不法分子可觀察軟鍵盤按鍵順序就可以竊取密碼，不需要去看密碼輸入框，這點在涉及使用者重要隱私和財產的產品中需要重點考慮。有資料顯示，採用密碼預設密文顯示，通過可見性圖示（Invisibility icon/Visibility icon）切換明文/密文，能明顯提高轉化率，而且不會降低安全性。
多行輸入框的最大行高
根據Text field可以輸入的行數，可分為單行文字框（Single-line text field）和多行文字框（Multi-line text field），由於手機現在的螢幕大小皆有，建議給多行文字框限制一個最大行高，如果達到最大行高，輸入框內的文字可通過滾動條滑動。為了方便拇指滾動，建議最大行高大於3行。
特殊場景的實時校驗
輸入框校驗意味著給使用者反饋並引導他們改正錯誤，消除使用者的疑惑。這個校驗的結果應該是人性化的而非像機器般冷冰。資料處理過程中最重要也是最容易讓人累覺不愛的地方是錯誤處理。犯錯是人類天性，我們在填寫輸入框時也不可避免。如果設計得當，校驗可以使原本表意不清的互動行為變得清晰易懂。
當用戶在輸入資料的過程中，他們不喜歡在最後提交時才發現自己犯了錯誤。正確的做法是，我們應該在使用者剛剛剛填寫完某條資訊後就立刻告知他是否正確。
實時的頁內校驗可以立刻告知使用者他們輸入的資訊是否正確。使用者可以更快地修改錯誤，而不必等到按下提交按鈕後才知道哪裡錯了。設計師可以給錯誤文案定義鮮明的顏色，比如紅色或者橙色這種暖色調。
左圖，表單輸入內容直到點選提交後才報錯，並且錯誤資訊在輸入框之外
右圖，輸入框下方實時顯示了錯誤資訊
校驗不僅應該告知使用者錯誤，還應告訴他們怎麼做才是正確的，使用者才會更有信心完成輸入過程，也才校驗的真正價值所在。
清晰的資訊
使用者時常有這樣的困惑“剛才發生了什麼？為什麼會這樣？”。此時應該提供一個直接了當的答案。因此校驗資訊應該清晰地說明：
• 錯誤是什麼以及可能產生錯誤的原因
• 使用者下一步應該做什麼來改正錯誤
再次提醒，一定要避免使用機械性的術語。這條規則看起來很簡單，但是有時卻很容易被忽略。
適當的顏色
當設計校驗資訊時，顏色是一個可利用的好工具。根據慣例，紅色表示錯誤資訊，黃色表示警告資訊，綠色表示成
功，這些都算是行業規範吧，但是也不是一定要去一味的遵守，具體要看專案的性質和對應人群。下圖是一個校驗密碼輸入框的好案例：
補充一點，再輸入密碼或者設定密碼時現在好多產品都會允許或引導使用者去設定首字母大寫的情況，這樣可以提升
密碼的安全性，那麼，就需要考慮使用者在輸入大寫時的反饋以及輸入錯誤時需要給出有效的提示和糾錯機制。
另一個運用顏色來對文字輸入框做出字數限制的反應。紅色的字元計數器及紅色下劃線說明該輸入框字數已超限。
介面中顏色的應用應該符合使用者認知，這是衡量優秀視覺設計的重要標準之一。
到這你以為就完了嗎？哈哈，當然沒有，我們最後還是回顧下輸入框需注意的常見情況。
預先提示：
告訴使用者輸入內容是否有特殊要求（如規定不能使用標點符號）。
告訴使用者輸入的字數是否有要求（如規定只能輸入20個字）。
告訴使用者輸入的內容是否要具有唯一性（如使用者名稱）。
特殊限制提示：
輸入內容出現不合規的字元提示使用者。
輸入的字數超出限定的範圍提示使用者。
輸入的內容在系統中已存在時提示使用者。
再深入挖掘的話，還有很多細節，如：當用戶在輸入的最後多敲擊了一下空格鍵，得在輸入框中增加了一個字元，是否要將其自動去除，以幫助使用者完成操作。
最後我找了一個例子，更加直觀的來展示輸入框的常見具體情況：
綜上所述，希望給大家帶來一些不一樣的思考。