輸入框在互聯(lián)網(wǎng)產(chǎn)品中可能是最常用和常見(jiàn)的交互組件之一，對(duì)于輸入框的定義相信大家都了解是用戶輸入文本內(nèi)容的載體組件。但是對(duì)于一些細(xì)節(jié)交互的“潛規(guī)則”，一些新人設(shè)計(jì)師常常容易忽略。

以下內(nèi)容是我們對(duì)輸入框交互細(xì)節(jié)的一些思考及需要注意問(wèn)題，與大家分享：

根據(jù)不同的場(chǎng)景需求，我們大致可將輸入框分為短文本輸入框、長(zhǎng)文本輸入框、浮動(dòng)型文本輸入框、特定場(chǎng)景輸入框（如應(yīng)用在搜索、二維碼校驗(yàn)等特定場(chǎng)景下）。我們今天不介紹每種類型的輸入框具體的定義，就說(shuō)說(shuō)各個(gè)輸入框容易被新手忽略的“潛規(guī)則”吧～

“潛”規(guī)則一：輸入極限值如何處理？

不同的輸入框類型對(duì)于極限場(chǎng)景的規(guī)則不同，通常以短文本與長(zhǎng)文本兩種輸入框?yàn)榈湫汀?/p>

我們來(lái)具體看一下：

1. 短文本輸入的極限場(chǎng)景

短文本輸入框意味著輸入的內(nèi)容都比較簡(jiǎn)短，如姓名等。一般的處理方式是會(huì)在邏輯層限制最大的字符數(shù)，但是不需要一開(kāi)始就告知用戶。在字符限制內(nèi)允許用戶無(wú)限向后輸入，此時(shí)文本框顯示最近輸入的內(nèi)容從右向左推進(jìn)。只有當(dāng)用戶不小心誤觸或“調(diào)戲輸入框”，輸入超長(zhǎng)文本時(shí)，才會(huì)出現(xiàn)對(duì)應(yīng)的提示。

Trip.com 短文本輸入極限?

對(duì)應(yīng)的提示方式我們認(rèn)為可以根據(jù)具體的場(chǎng)景及設(shè)計(jì)規(guī)范去選擇，屬于兜底處理?？梢允窍馮rip.com這樣輕量精準(zhǔn)的提示，也可以像美團(tuán)外賣帶有“趣味性”的提示

2. 長(zhǎng)文本輸入的極限場(chǎng)景

我們通常固定的設(shè)計(jì)思路是在超出字?jǐn)?shù)限制時(shí)輸入即無(wú)效，簡(jiǎn)而言之就是不讓再輸入了，同時(shí)加入提示告知用戶不可再輸入的原因（這里的提示盡量以輕量清晰的方式出現(xiàn)）。

假設(shè)用戶輸入恰好在字?jǐn)?shù)限制的臨界點(diǎn)的場(chǎng)景，用戶原本的想要輸入的文字是在字?jǐn)?shù)范圍內(nèi)，但由于單個(gè)文字輸入時(shí)是由拼音字母組成，此時(shí)輸入的字?jǐn)?shù)統(tǒng)計(jì)為字母數(shù)，導(dǎo)致用戶的編輯無(wú)法生效——這對(duì)于用戶來(lái)說(shuō)是一個(gè)不好的體驗(yàn)點(diǎn)。

輸入狀態(tài)時(shí)會(huì)因?yàn)槠匆糇帜競(jìng)€(gè)數(shù)而超出限制?

雖說(shuō)這是屬于非常極端和細(xì)微的場(chǎng)景，考慮到設(shè)計(jì)的細(xì)致性，還是建議在超出字?jǐn)?shù)的時(shí)候仍可允許用戶輸入；可在輸入框下方顯示提示文字以及置灰用戶的下一步操作來(lái)告知用戶，用戶可在已輸入的內(nèi)容中自由對(duì)其進(jìn)行刪減順利進(jìn)入到下一步。

超出時(shí)僅以統(tǒng)計(jì)字?jǐn)?shù)來(lái)告知用戶，同時(shí)置灰下一步操作?

關(guān)于字?jǐn)?shù)統(tǒng)計(jì)這里有個(gè)小tips：

給開(kāi)發(fā)小哥們是關(guān)于字?jǐn)?shù)而不是字符數(shù)的統(tǒng)計(jì)，特別是在輸入內(nèi)容涉及多種語(yǔ)言的場(chǎng)景下，對(duì)于字?jǐn)?shù)統(tǒng)計(jì)的規(guī)則會(huì)有所不同，如若需要，設(shè)計(jì)側(cè)可以列出一個(gè)白名單（可計(jì)入字?jǐn)?shù)的字符說(shuō)明）或是黑名單（不可計(jì)入字?jǐn)?shù)的字符說(shuō)明）給開(kāi)發(fā)小哥們，以此確保設(shè)計(jì)還原的準(zhǔn)確性。

“潛”規(guī)則二：輸入框是否支持伸展

不知大家是否試用過(guò)長(zhǎng)文本輸入框的極限場(chǎng)景，在沒(méi)有做字?jǐn)?shù)限制的情況下如果持續(xù)的輸入文字，會(huì)發(fā)生什么？

1. 高度伸展

1）一種通常的設(shè)計(jì)是固定長(zhǎng)文本輸入框的高度。在此高度內(nèi)向下輸入，同時(shí)會(huì)出現(xiàn)滑動(dòng)條或最上方的文字露出半行來(lái)告知用戶這里有多行內(nèi)容可以自行滑動(dòng)查看，這種設(shè)計(jì)適用于內(nèi)容比較多的頁(yè)面，限制的高度不會(huì)影響頁(yè)面的整體結(jié)構(gòu)和美觀度。

2）還有一種設(shè)計(jì)是當(dāng)輸入內(nèi)容超出輸入框高度時(shí)，輸入框隨著內(nèi)容自動(dòng)向下延伸。這樣的設(shè)計(jì)能讓用戶清楚自動(dòng)自己輸入的所有內(nèi)容，方便用戶檢查和刪改，但高度的延伸會(huì)影響頁(yè)面整體的結(jié)構(gòu)，如果輸入框下面還有其他的控件，也需要跟隨著高度進(jìn)行自適應(yīng)的調(diào)整，因此這樣的設(shè)計(jì)應(yīng)用比較少，更適合用戶頁(yè)面結(jié)構(gòu)比較簡(jiǎn)單且長(zhǎng)文本輸入框的內(nèi)容很重要的場(chǎng)景。

輸入框隨著文本輸入而伸展?

2. 模式切換

輸入框伸展還有一種方式是提供用戶自主選擇進(jìn)入專注輸入的模式，常見(jiàn)于用戶可自由選擇輸入長(zhǎng)文本或是超長(zhǎng)文本的場(chǎng)景，如評(píng)論，若用戶可做一番“長(zhǎng)篇大論”，可自主進(jìn)入專注編輯的模式，便于超長(zhǎng)文本的輸入。

點(diǎn)擊進(jìn)入評(píng)論編輯的頁(yè)面?

“潛”規(guī)則三：如何與微動(dòng)效進(jìn)行“合體”

輸入框與微動(dòng)效結(jié)合并應(yīng)用的場(chǎng)景越來(lái)越廣泛，這里的微動(dòng)效出現(xiàn)在用戶進(jìn)入輸入狀態(tài)前和進(jìn)行輸入時(shí)。這樣的輸入框也就是我們前文所說(shuō)的浮動(dòng)型文本輸入框。

1. 怎么「合體」？

這一類的輸入框不固定出現(xiàn)標(biāo)題，只有一行占位符文本，在用戶激活輸入框進(jìn)行輸入時(shí)，占位符文本上移成為小標(biāo)題，用戶在輸入時(shí)和輸入完成后，輸入框的展示方式是小標(biāo)題+輸入的內(nèi)容。

輸入與動(dòng)效結(jié)合?

2. 為什么要「合體」？

浮動(dòng)型文本輸入框適用于多輸入框的頁(yè)面，因?yàn)樗梢越鉀Q以下問(wèn)題：

1）減少用戶的認(rèn)知障礙。在多輸入框的頁(yè)面，如果有固定標(biāo)題的展示，用戶進(jìn)入頁(yè)面后會(huì)看到很大篇幅的輸入框，影響用戶對(duì)頁(yè)面信息的獲取及關(guān)注。采用浮動(dòng)型文本輸入框可以減少文本信息對(duì)用戶的干擾；

2）在第1點(diǎn)的基礎(chǔ)上，可以輔助用戶明確當(dāng)下輸入的內(nèi)容是否正確有效，可以解決用戶對(duì)當(dāng)下輸入的內(nèi)容需要小標(biāo)題去輔助其認(rèn)知的場(chǎng)景。

3. 「合體」要注意什么？

1）注意浮動(dòng)型輸入框輸入框的高度。在保證輸入初始狀態(tài)美觀度的同時(shí)要考慮標(biāo)題出現(xiàn)的空間。

2）注意錯(cuò)誤反饋的出現(xiàn)方式及位置。如果是用戶未輸入內(nèi)容，其提示可以高亮占位符文本及輸入框告知用戶；若是輸入內(nèi)容不符合規(guī)則時(shí)可以在輸入框下方延伸錯(cuò)誤提示的區(qū)域，同時(shí)高亮輸入框。

3）注意鍵盤的處理。用戶在進(jìn)入輸入狀態(tài)時(shí)會(huì)拉起鍵盤，這時(shí)候可以把鍵盤「確認(rèn)」的按鈕改為「下一項(xiàng)」，即確認(rèn)當(dāng)前輸入框的內(nèi)容同時(shí)進(jìn)入下一個(gè)內(nèi)容輸入，這個(gè)設(shè)計(jì)適用于多輸入框的表單場(chǎng)景，可以減少用戶操作。這里需要特別提醒，到最后一項(xiàng)輸入時(shí)記得把這個(gè)按鈕改為「完成」。

多項(xiàng)輸入時(shí)鍵盤按鈕的變化?

“潛”規(guī)則四：披上馬甲就是“新”的自己

前面我們有說(shuō)到特殊場(chǎng)景的輸入框，如輸入驗(yàn)證碼、輸入密碼、進(jìn)行搜索等等。這樣的輸入框看起來(lái)像是一個(gè)輸入框，又不像是輸入框的范疇，根本原因在于其規(guī)則場(chǎng)景比普通的輸入框多了許多限制或功能。

1. 驗(yàn)證碼輸入

驗(yàn)證碼輸入是限定了輸入字?jǐn)?shù)和字符類型，對(duì)輸入內(nèi)容的校驗(yàn)具有時(shí)效性，對(duì)此不展開(kāi)多說(shuō)，相信大家都不陌生。

2. 密碼輸入

密碼輸入通常也會(huì)有字?jǐn)?shù)的限制和字符的規(guī)則限制，同時(shí)還帶著密碼可視的功能。

3. 搜索框

搜索框的場(chǎng)景規(guī)則可謂是相當(dāng)復(fù)雜，給用戶提供的搜索建議、搜索歷史記錄、搜索生效規(guī)則、再次編輯的規(guī)則等等，后續(xù)我會(huì)再寫一篇文章進(jìn)行具體分析。

簡(jiǎn)而言之，關(guān)于規(guī)則的定義永遠(yuǎn)是服務(wù)于當(dāng)下的用戶場(chǎng)景，我們需要思考在極限情況下可能會(huì)出現(xiàn)的偏差以及解決方案，特別是在C端的產(chǎn)品上，差之毫厘的設(shè)計(jì)可能造成失之千里的后果，結(jié)合場(chǎng)景的思考是一件很有意思的事情。

以上是我們的一點(diǎn)思考與總結(jié)，與大家共勉。

本文由 @設(shè)計(jì)牛奶盒 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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