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

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

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

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

不同的輸入框類型對于極限場景的規(guī)則不同，通常以短文本與長文本兩種輸入框為典型。

我們來具體看一下：

1. 短文本輸入的極限場景

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

Trip.com 短文本輸入極限?

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

2. 長文本輸入的極限場景

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

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

輸入狀態(tài)時會因為拼音字母個數(shù)而超出限制?

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

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

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

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

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

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

1. 高度伸展

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

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

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

2. 模式切換

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

點擊進(jìn)入評論編輯的頁面?

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

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

1. 怎么「合體」？

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

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

2. 為什么要「合體」？

浮動型文本輸入框適用于多輸入框的頁面，因為它可以解決以下問題：

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

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

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

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

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

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

多項輸入時鍵盤按鈕的變化?

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

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

1. 驗證碼輸入

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

2. 密碼輸入

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

3. 搜索框

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

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

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

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

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