輸入框雖然看上去簡(jiǎn)單，但需要考慮的細(xì)節(jié)也不少，本文將向你介紹輸入框的相關(guān)組成部分和注意事項(xiàng)。

Text fields（輸入框/文本框）是一個(gè)歷史悠久而經(jīng)典的控件，當(dāng)光標(biāo)位于輸入框時(shí)，用戶(hù)可以在其中輸入或復(fù)制粘貼文本、數(shù)字等內(nèi)容。輸入框雖然看上去簡(jiǎn)單，但需要考慮的細(xì)節(jié)也不少，本文將向你介紹輸入框的相關(guān)組成部分和注意事項(xiàng)。

Text fields的相關(guān)組成部分

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

Label是一個(gè)控件或一組相關(guān)控件的名稱(chēng)或標(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、圖標(biāo)Label、帶星號(hào)的Label

Label與Text fields的對(duì)齊方式

Label和Text fields的排版對(duì)用戶(hù)瀏覽和使用有很大影響，一般來(lái)說(shuō)可以把Label與Text fields對(duì)齊方式劃分為4種。

頂端對(duì)齊

Label和Text field垂直左對(duì)齊排列，用戶(hù)只需依次向下瀏覽，因此瀏覽和填寫(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ì)齊

水平右對(duì)齊

Label和Text field水平顯示，Label右對(duì)齊。占用的屏幕高度減小，但是由于Label長(zhǎng)短不一時(shí)顯得層次不齊，因此用戶(hù)瀏覽效率會(huì)比垂直頂端對(duì)齊低。

水平右對(duì)齊

水平左對(duì)齊

這種對(duì)齊方式利于用戶(hù)瀏覽Label，但是Label和Text field的距離較遠(yuǎn)，用戶(hù)從左往右瀏覽的時(shí)間會(huì)變得更長(zhǎng)?？蓪⒛承┒蘈abel通過(guò)增加字符間距的方式使之更易讀。當(dāng)然，時(shí)間長(zhǎng)也不是壞事，對(duì)于有陌生數(shù)據(jù)和需要謹(jǐn)慎填寫(xiě)內(nèi)容反倒是能讓用戶(hù)減少出錯(cuò)的可能。

水平左對(duì)齊

內(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ì)齊不相上下，但是一旦用戶(hù)在Text field輸入內(nèi)容后，Label就看不到了，因此只適合Label特別短或者搜索框、賬號(hào)密碼輸入框等用戶(hù)非常熟知的情況。

內(nèi)嵌Label

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)用戶(hù)在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)格。

Float Label

這種模式也有缺點(diǎn)，Label顯示過(guò)小，對(duì)于小屏幕和視力不佳的用戶(hù)來(lái)說(shuō)不是個(gè)好方案。此外，Label侵占了原本Placeholder text的空間，對(duì)于一些用戶(hù)陌生的Text field來(lái)說(shuō)需要額外的空間放提示和說(shuō)明。

占位符文本/提示語(yǔ)（Placeholder text / Hint text）

Placeholder text是Text field沒(méi)有內(nèi)容時(shí)出現(xiàn)的灰色文字，當(dāng)用戶(hù)輸入內(nèi)容后將會(huì)消失，因此只能展示一些比較簡(jiǎn)短的信息。通常使用Placeholder text作為輸入指引（例如：“請(qǐng)點(diǎn)擊輸入評(píng)論”）或者表明輸入的限制和示例（例如：“年/月/日”）。很多電商產(chǎn)品搜索框會(huì)把Placeholder text用于熱門(mén)商品促銷(xiāo)。

淘寶App的搜索框Placeholder text

iOS有一個(gè)特性，在軟鍵盤(pán)上方顯示Placeholder text，這樣即使在輸入過(guò)程中也能提示用戶(hù)正確的規(guī)則，且輸入過(guò)程中用戶(hù)視線(xiàn)停留在軟鍵盤(pán)上不用轉(zhuǎn)移。

在鍵盤(pán)上方顯示Placeholder text

輔助說(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)用戶(hù)輸入的內(nèi)容滿(mǎn)足一個(gè)條件，會(huì)給予相應(yīng)的反饋，告知用戶(hù)已滿(mǎn)足這個(gè)條件，這樣就把復(fù)雜的任務(wù)拆分得簡(jiǎn)單，用戶(hù)輸入不易出錯(cuò)。
MailChimp

初始默認(rèn)值（Default value）

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

起點(diǎn)Default value是用戶(hù)當(dāng)前位置

輸入限制

文本類(lèi)型多種多樣、長(zhǎng)短不一，但是計(jì)算機(jī)能接受的文本是有限的，業(yè)務(wù)方通常對(duì)文本類(lèi)型也有要求。例如手機(jī)號(hào)碼肯定是數(shù)字，如果輸入其他內(nèi)容會(huì)報(bào)錯(cuò)。為了減少用戶(hù)出錯(cuò)的可能性，維護(hù)計(jì)算機(jī)系統(tǒng)安全穩(wěn)定，必須對(duì)Text field進(jìn)行一些輸入限制，例如最短最常能輸入多少個(gè)字符；是否能輸入emoj表情符號(hào)等特殊字符；前后的空格是否過(guò)濾；能否支持從剪貼板粘貼等等。

此外要考慮如果用戶(hù)的輸入超出限制或出錯(cuò)，應(yīng)當(dāng)如何給予用戶(hù)合適的反饋，幫助用戶(hù)將內(nèi)容修改正確。

自動(dòng)獲取焦點(diǎn)（Autofocus）

當(dāng)用戶(hù)點(diǎn)擊Text field，光標(biāo)出現(xiàn)彈出軟鍵盤(pán)，表示該Text field已獲取焦點(diǎn)，此時(shí)用戶(hù)就能輸入或者修改內(nèi)容了。對(duì)于主要任務(wù)就是填寫(xiě)表單的頁(yè)面，可以在用戶(hù)進(jìn)入該頁(yè)面后，自動(dòng)獲取焦點(diǎn)。如果頁(yè)面有多個(gè)Text field，當(dāng)用戶(hù)填寫(xiě)完一個(gè)后，自動(dòng)獲取下一個(gè)的焦點(diǎn)，這樣操作會(huì)更流暢。

輸入方式

Text field的主流輸入方式是鍵盤(pán)，使用適當(dāng)?shù)能涙I盤(pán)布局有助于用戶(hù)提高輸入效率，降低出錯(cuò)的可能性。關(guān)于軟鍵盤(pán)布局等特性。

除鍵盤(pán)外，合理運(yùn)用其他輸入方式能提升輸入效率。例如語(yǔ)音輸入、GPS定位、拍照識(shí)別文字、文字自動(dòng)聯(lián)想、與其他輸入類(lèi)控件配合等。

淘寶App的Text field提供了非常豐富的輸入方式

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

對(duì)于需要字?jǐn)?shù)限制的Text field，目前有2種字?jǐn)?shù)限制展示風(fēng)格：

• 「當(dāng)前已經(jīng)輸入的字?jǐn)?shù)/字的最大長(zhǎng)度」
• 一直顯示「當(dāng)前已經(jīng)輸入的字?jǐn)?shù)」，達(dá)到最大字?jǐn)?shù)限制后會(huì)提示超出長(zhǎng)度。

這兩種方式給用戶(hù)帶來(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ù)量」，這樣做的好處是用戶(hù)不會(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í)代，電腦屏幕比較大，如果密碼直接明文顯示，容易被旁觀(guān)者偷窺竊取，因此用星號(hào)“*”或“?”隱藏真實(shí)的密碼。移動(dòng)時(shí)代密碼輸入框也密文顯示就值得斟酌了，首先手機(jī)屏幕比較小，不易被旁觀(guān)竊取。其次不法分子觀(guān)察軟鍵盤(pán)按鍵順序就可以竊取密碼，不需要去看密碼輸入框。

另外密文顯示給用戶(hù)輸入和檢查帶來(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行。

多行輸入框的最大行高

作者：龍爪槐守望者，微信公眾號(hào)：龍爪槐守望者

本文由 @龍爪槐守望者 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自PEXELS，基于CC0協(xié)議