文本字段（輸入框/文本框）是一個(gè)長期和經(jīng)典的控件。當(dāng)光標(biāo)在輸入框中時(shí)，用戶可以輸入或復(fù)制并粘貼文本，數(shù)字等。雖然輸入框看起來很簡單，但需要考慮很多細(xì)節(jié)。本文將向您介紹輸入框的相關(guān)組件和注意事項(xiàng)。

△文本字段的相關(guān)組件

標(biāo)題/輸入框標(biāo)簽（標(biāo)簽）

標(biāo)簽是控件或一組相關(guān)控件的名稱或標(biāo)題。當(dāng)它與文本字段成對出現(xiàn)時(shí)，它表示輸入框的標(biāo)題或內(nèi)容。對于常見主題，有時(shí)會(huì)使用圖標(biāo)而不是Label。為了表明表單中需要輸入框，通常在Label旁邊添加一個(gè)星號“*”。

△文本標(biāo)簽，圖標(biāo)標(biāo)簽，帶星號的標(biāo)簽

標(biāo)簽和文本字段對齊

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

頂部對齊

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

△頂部對齊

水平對齊

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

△水平右對齊

水平左對齊

此對齊方便用戶在Label中導(dǎo)航，但Label和Text字段之間的距離很遠(yuǎn)，用戶從左向右導(dǎo)航所需的時(shí)間將變得更長。通過增加字符間距，可以使一些短標(biāo)簽更具可讀性。當(dāng)然，長時(shí)間不是壞事。對于奇怪的數(shù)據(jù)和需要仔細(xì)填寫內(nèi)容，可以減少出錯(cuò)的可能性。

△水平對齊左

嵌入式標(biāo)簽

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

△嵌入式標(biāo)簽

浮動(dòng)標(biāo)簽

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

△浮標(biāo)簽

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

占位符文本/提示文本

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

△淘寶應(yīng)用的搜索框占位符文本

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

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

幫助者文本/幫助者文本

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

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

△MailChimp

初始值（

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

△起點(diǎn)默認(rèn)值是用戶的當(dāng)前位置

輸入限制

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

還要考慮如果用戶的輸入超出限制或錯(cuò)誤，應(yīng)如何向用戶提供適當(dāng)?shù)姆答?，從而幫助用戶正確地修改內(nèi)容。

自動(dòng)獲得焦點(diǎn)（自動(dòng)對焦）

當(dāng)用戶單擊文本字段時(shí)，光標(biāo)會(huì)彈出軟鍵盤，指示文本字段已獲得焦點(diǎn)，用戶可以輸入或修改內(nèi)容。主要任務(wù)是填寫頁面的形式，用戶進(jìn)入頁面后可以自動(dòng)獲得焦點(diǎn)。如果頁面有多個(gè)文本字段，當(dāng)用戶填寫一個(gè)時(shí)，它將自動(dòng)獲得下一個(gè)焦點(diǎn)，這將使操作更平滑。

輸入法

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

除鍵盤外，使用其他輸入法可以提高輸入效率。例如，語音輸入，GPS定位，照片識別文本，自動(dòng)文本關(guān)聯(lián)和其他輸入控制。

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

字?jǐn)?shù)限制顯示

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

當(dāng)前輸入的最大字?jǐn)?shù)/單詞數(shù)。

始終顯示“當(dāng)前輸入的字?jǐn)?shù)”。達(dá)到最大字?jǐn)?shù)限制時(shí)，將顯示長度。

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

△微博修改之前和之后

清除按鈕

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

清除按鈕外觀有4種：

僅在獲得焦點(diǎn)時(shí)出現(xiàn)。

有內(nèi)容時(shí)出現(xiàn)，即使沒有焦點(diǎn)。這適用于搜索框，單擊“清除”按鈕，然后清除內(nèi)容，然后自動(dòng)獲得焦點(diǎn)，一次性直接進(jìn)行下一次搜索。

總是出現(xiàn)。

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

密碼輸入框和可見性切換圖標(biāo)

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

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

多行輸入框的最大行高

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

△多線輸入框的最大線高

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