文本字段（輸入框/文本框）是一個長期和經典的控件。當光標在輸入框中時，用戶可以輸入或復制并粘貼文本，數字等。雖然輸入框看起來很簡單，但需要考慮很多細節(jié)。本文將向您介紹輸入框的相關組件和注意事項。

△文本字段的相關組件

標題/輸入框標簽（標簽）

標簽是控件或一組相關控件的名稱或標題。當它與文本字段成對出現時，它表示輸入框的標題或內容。對于常見主題，有時會使用圖標而不是Label。為了表明表單中需要輸入框，通常在Label旁邊添加一個星號“*”。

△文本標簽，圖標標簽，帶星號的標簽

標簽和文本字段對齊

標簽和文本字段的布局對用戶的瀏覽和使用有很大影響。通常，標簽和文本字段對齊可以分為四種類型。

頂部對齊

標簽和文本字段垂直對齊在左側，因此用戶只需要依次向下瀏覽，因此瀏覽和填充的效率在4個對齊中最佳，并且它占用屏幕上較少的水平空間，即使標簽特別長。 （這對于支持多種語言的軟件特別有用，因為某些語言比英語長得多）。但是，這種對齊將占用太多的屏幕高度。另外，您應該注意每組Label和Text字段與其他組之間的間距，以免使其密集且易于閱讀。

△頂部對齊

水平對齊

標簽和文本字段水平顯示，標簽右對齊。占用的屏幕高度減小，但由于標簽的長度不均勻，因此用戶瀏覽效率低于垂直頂部對齊。

△水平右對齊

水平左對齊

此對齊方便用戶在Label中導航，但Label和Text字段之間的距離很遠，用戶從左向右導航所需的時間將變得更長。通過增加字符間距，可以使一些短標簽更具可讀性。當然，長時間不是壞事。對于奇怪的數據和需要仔細填寫內容，可以減少出錯的可能性。

△水平對齊左

嵌入式標簽

嵌入在標簽中的文本字段是最節(jié)省空間的方式。為了區(qū)分Label和實際輸入的內容，標簽顏色通常會變亮并且“…”在最后添加。實際上，占位符文本被視為標簽。嵌入式標簽瀏覽效率可與頂部對齊相媲美，但一旦用戶在文本字段中輸入內容，標簽將不可見，因此它僅適用于標簽很短或搜索框，帳戶密碼輸入盒子和其他用戶對這種情況非常熟悉。

△嵌入式標簽

浮動標簽

設計師Matt D Smith基于嵌入式標簽發(fā)明了一種新穎的交互模式Float Label（dribbble）：當用戶在Text字段中輸入內容時，嵌入的Label浮動在Text字段上方并成為頂部對齊。此方法結合了內聯標簽和頂部對齊的優(yōu)點。它已成為Material Design中文本字段的默認樣式。

△浮標簽

這種模式也有缺點。標簽顯示太小，對于小屏幕和視力不佳的用戶來說不是一個好的解決方案。此外，Label會侵占原始占位符文本的空間。對于某些用戶不熟悉的文本字段，提示和說明需要額外的空間。

占位符文本/提示文本

占位符文本是文本字段沒有內容時顯示的灰色文本。當用戶輸入內容時它將消失，因此只能顯示一些簡短信息。通常使用占位符文本作為輸入指南（例如：“點擊以輸入評論”）或指示輸入的限制和示例（例如：“年/月/日”）。許多電子商務產品搜索框使用占位符文本進行流行的商品促銷。

△淘寶應用的搜索框占位符文本

iOS具有在軟鍵盤頂部顯示占位符文本的功能，因此即使在輸入過程中用戶也可以提示用戶輸入正確的規(guī)則，并且在輸入過程中用戶的視線保持在軟鍵盤上移動。

△在鍵盤上方顯示占位符文本

幫助者文本/幫助者文本

如果“文本”字段的輸入規(guī)則或注意事項更復雜，建議在“文本”字段（通常在下方）附近添加幫助文本以獲取其他說明。輔助文本也可以以工具提示或彈出窗口的形式呈現。

MailChimp將交互添加到密碼輸入框的幫助文本中：輸入框的復雜規(guī)則分為多個簡單條件。當用戶輸入的內容滿足條件時，將給出相應的反饋以通知用戶已滿足條件。分割復雜的任務很容易，用戶輸入也不容易出錯。

△MailChimp

初始值（

獲取焦點后，輸入框中默認保留的字符不會消失。用戶可以刪除或修改這些字符。良好的初始默認值可以減少用戶的輸入負擔。例如，地圖App路線導航功能的起始值輸入框是用戶的當前位置，用戶只需輸入目的地即可開始導航，從而提高了效率。

△起點默認值是用戶的當前位置

輸入限制

文本類型的長度和長度各不相同，但計算機可接受的文本有限，業(yè)務方通常對文本類型有要求。例如，手機號碼肯定是一個號碼，如果您輸入其他內容，則會收到錯誤消息。為了減少用戶錯誤的可能性并保持計算機系統(tǒng)的安全性和穩(wěn)定性，必須對文本字段施加一些輸入限制，例如可以在最短和最頻繁地輸入多少字符;是否可以輸入表情符號等特殊字符;過濾前后的空格是否過濾;不支持從剪貼板等粘貼

還要考慮如果用戶的輸入超出限制或錯誤，應如何向用戶提供適當的反饋，從而幫助用戶正確地修改內容。

自動獲得焦點（自動對焦）

當用戶單擊文本字段時，光標會彈出軟鍵盤，指示文本字段已獲得焦點，用戶可以輸入或修改內容。主要任務是填寫頁面的形式，用戶進入頁面后可以自動獲得焦點。如果頁面有多個文本字段，當用戶填寫一個時，它將自動獲得下一個焦點，這將使操作更平滑。

輸入法

Text字段的主要輸入方法是鍵盤。使用適當的軟鍵盤布局有助于用戶提高輸入效率并減少出錯的可能性。軟鍵盤布局等的功能已在《「這個控件叫什么」系列之虛擬鍵盤/軟鍵盤/Soft Keyboard》中詳細討論過。

除鍵盤外，使用其他輸入法可以提高輸入效率。例如，語音輸入，GPS定位，照片識別文本，自動文本關聯和其他輸入控制。

△淘寶應用的文本字段提供了非常豐富的輸入法

字數限制顯示

對于需要限制單詞數量的文本字段，目前有2個單詞限制顯示樣式：

當前輸入的最大字數/單詞數。

始終顯示“當前輸入的字數”。達到最大字數限制時，將顯示長度。

這兩種方式給用戶帶來不同的感受，如微博的文字區(qū)域（文字區(qū)/多行文字輸入區(qū)）和回復微博限制提示從原來“當前輸入的單詞/140字改為”顯示數字輸入130個單詞后可以輸入的字符“。這樣做的好處是用戶不會故意控制輸入單詞的數量，因為輸入開始時單詞數量的限制，中斷情緒的流動和引起情緒。平滑或減少輸入動機可能會改善發(fā)送微博和評論的活動。

△微博修改之前和之后

清除按鈕

對于手機軟鍵盤，多次單擊刪除鍵刪除多個字符比物理鍵盤體驗差得多。因此，對于具有已修改內容要求的“文本”字段，可以在右側放置“清除”按鈕，然后單擊以清除它。文本字段中的所有內容。

清除按鈕外觀有4種：

僅在獲得焦點時出現。

有內容時出現，即使沒有焦點。這適用于搜索框，單擊“清除”按鈕，然后清除內容，然后自動獲得焦點，一次性直接進行下一次搜索。

總是出現。

沒有明顯的清除按鈕，但按下軟鍵盤上的刪除按鈕可直接清除所有內容。這通常在密碼輸入框錯誤后使用。

密碼輸入框和可見性切換圖標

在PC時代，電腦屏幕比較大。如果密碼直接以明文顯示，很容易被旁觀者偷偷摸摸，所以請使用星號“*”或“•”隱藏真實密碼移動時代的密碼輸入框也值得考慮。首先，手機屏幕相對較小，觀看時不容易被盜。其次，犯罪分子可以通過觀察軟鍵盤按鍵序列來竊取密碼，而不需要進入密碼輸入框。另外，密文顯示對用戶輸入和檢查造成很大的麻煩。國外數據顯示，使用密碼的默認純文本顯示，通過可見性圖標（隱形圖標/可見性圖標）切換明文/密文可以顯著提高轉換率而不降低安全性。

編者注：何時顯示而不顯示？或者，什么設計方法可以滿足方便性和安全性要求？答案就在這里→《不易察覺的細節(jié)!常見的登錄界面該不該顯示密碼?》

多行輸入框的最大行高

根據“文本”字段可以輸入的行數，可以將其劃分為單行文本字段和多行文本字段。由于手機的屏幕相對較小，建議將一行限制為多行文本框。最大行高，如果達到最大行高，則可以通過滾動條滑動輸入框中的文本。為了便于拇指滾動，建議最大線高度大于5行。

△多線輸入框的最大線高

« 為什么90％的公司未能正式完成？ | 做好百度，讓你入睡，有源找到門 »