在使用APP時(shí)，用戶獲得信息往往是通過(guò)輸入框，然而這部分卻是很多設(shè)計(jì)者容易忽略的部分。本篇文章為大家總結(jié)了常見(jiàn)的四大輸入框樣式，并分析了其使用場(chǎng)景和注意事項(xiàng)。

輸入框作為頁(yè)面中主要的數(shù)據(jù)錄入入口，可引導(dǎo)用戶錄入信息。我們從APP中獲得的所有信息來(lái)源，均是由用戶通過(guò)輸入框得來(lái)，可見(jiàn)他的重要性。

往往很多APP在設(shè)計(jì)時(shí)卻很容易忽視這塊，標(biāo)注不清楚、字體限制未標(biāo)明、文字單行和多行樣式等都不設(shè)計(jì)出來(lái)，導(dǎo)致技術(shù)人員在實(shí)現(xiàn)時(shí)要么靠過(guò)往經(jīng)驗(yàn)，要么找你繼續(xù)了解。

不過(guò)無(wú)論哪一種方式其實(shí)都比較浪費(fèi)時(shí)間，這些如果我們平時(shí)去總結(jié)分析后，是可以避免的。

今天的文章，我們總結(jié)下APP中常見(jiàn)的四大輸入框樣式，即獨(dú)立文本標(biāo)簽輸入框、行內(nèi)標(biāo)簽輸入框、對(duì)話輸入框、段落文字等，同時(shí)總結(jié)分析他們的使用場(chǎng)景和注意事項(xiàng)。

一、獨(dú)立文本標(biāo)簽輸入框

獨(dú)立文本標(biāo)簽即在左側(cè)以文字的形式提示輸入內(nèi)容，同時(shí)在內(nèi)容輸入取預(yù)設(shè)內(nèi)容，當(dāng)輸入信息后，由于左側(cè)清晰的文字標(biāo)簽，不管內(nèi)容多少我們?nèi)匀荒軌蚝芮逦臑g覽和操作。

當(dāng)然由于內(nèi)容信息的組合、多少不同，我將其歸納為四種形式：

1. 單項(xiàng)輸入
2. 多項(xiàng)輸入
3. 段落文本
4. 多行輸入

以下分別是獨(dú)立文本標(biāo)簽輸入框中的四種形式，掌握這些可以讓我們?cè)诒砀窳斜碓O(shè)計(jì)中更加高效。

（配圖來(lái)自微信小程序規(guī)范）

當(dāng)然，除了知道它有哪些形式是不夠的？

作為設(shè)計(jì)師，我們還需要知道它對(duì)應(yīng)的一些規(guī)范，只有掌握了這些規(guī)范，我們才能夠更好的落地，首先來(lái)看看有規(guī)范和沒(méi)規(guī)范是怎么樣的。

1. 當(dāng)沒(méi)有規(guī)范時(shí)：

標(biāo)題長(zhǎng)短未規(guī)定，同時(shí)輸入文本未對(duì)齊，整個(gè)界面感覺(jué)混亂不堪。

2. 當(dāng)有規(guī)范時(shí)：

個(gè)界面清晰明了，當(dāng)你將這個(gè)規(guī)范交給技術(shù)，他就能夠按照你設(shè)計(jì)的效果實(shí)現(xiàn)，而如果你前期設(shè)計(jì)不到位，技術(shù)就按照他自身的想法實(shí)現(xiàn)，自然出來(lái)的效果你總會(huì)說(shuō)還原度不高，別人也說(shuō)這個(gè)體驗(yàn)不好。有時(shí)候還原度不高，體驗(yàn)不好，作為設(shè)計(jì)師你是不是應(yīng)該好好想想。

下圖以微信小程序規(guī)范為例：

最后，掌握了規(guī)范還不夠，我們還可以做得更加細(xì)化？

1. 設(shè)計(jì)錯(cuò)誤提示：在信息輸入錯(cuò)誤后，即可看到報(bào)錯(cuò)提示，這樣可以提醒用戶讓其及時(shí)修正。

市面上很多APP為了方便，直接提交整個(gè)表單后才提示錯(cuò)誤，這樣開(kāi)發(fā)成本雖然降低，但是用戶的操作成本增加，具體如何選擇就看你產(chǎn)品的用戶量如何，當(dāng)然一個(gè)好的用戶體驗(yàn)需要考慮這些問(wèn)題。

2. 輸入鍵盤(pán)對(duì)應(yīng)輸入信息： 輸入框往往有金額、文字、電話號(hào)碼、卡號(hào)、身份證號(hào)輸入等，一個(gè)好的交互體驗(yàn)就是當(dāng)你需要輸入電話號(hào)碼，鍵盤(pán)直接幫你定位在數(shù)字鍵，當(dāng)你輸入身份證號(hào)，鍵盤(pán)直接是數(shù)字加X(jué)，讓你輸入更便捷不用切換。

上圖你看到支付寶的充值和銀行卡界面，這些細(xì)節(jié)的體現(xiàn)正是決定一個(gè)好的產(chǎn)品和差的產(chǎn)品的區(qū)別。

二、行內(nèi)標(biāo)簽輸入框

行內(nèi)標(biāo)簽輸入框是UI設(shè)計(jì)中最常見(jiàn)的控件，在絕大多數(shù)的場(chǎng)合用來(lái)給用戶輸入少量的文字。

比如：搜索、登陸注冊(cè)等。

行內(nèi)標(biāo)簽相對(duì)于獨(dú)立文本標(biāo)簽樣式較為流行，相對(duì)較為簡(jiǎn)潔，但是對(duì)于屏幕上顯示超過(guò)2個(gè)文本框的情況，行內(nèi)標(biāo)簽則不是獨(dú)立文本標(biāo)簽的一個(gè)好的取代方案。

其缺點(diǎn)就是一旦用戶點(diǎn)擊了輸入框，標(biāo)簽就消失了，這樣用戶就不能二次檢查他們輸入的內(nèi)容是不是他們應(yīng)該輸入的類型。同時(shí)由于已經(jīng)輸入過(guò)一次，因此第二個(gè)輸入框很容易被忽略。

三、對(duì)話輸入框

對(duì)話輸入框常見(jiàn)于聊天消息類界面，其特點(diǎn)是當(dāng)你輸入一行信息時(shí)，不會(huì)有什么變化，但是當(dāng)你輸入多行信息時(shí)，如果你不出相應(yīng)規(guī)則，那么后期落地就只有根據(jù)技術(shù)喜好了。

在設(shè)計(jì)時(shí)，我們不僅要做常規(guī)樣式，還需要做輸入多行的效果，這樣開(kāi)發(fā)拿到手才不會(huì)一抹黑，也不會(huì)在心里默默罵你不專業(yè)了。

以微信對(duì)話輸入框?yàn)槔?，?dāng)文字一行時(shí)，輸入框正常顯示；當(dāng)文字兩行時(shí)，輸入框自動(dòng)向上升，圖標(biāo)按鈕位置不變；當(dāng)為五行以上時(shí)，文字可上下滑動(dòng)顯示，同時(shí)露出一點(diǎn)文字，讓用戶清楚，上面還有字的情況。

四、段落文字

段落文字的使用場(chǎng)景主要分兩種情況：

• 一種是常見(jiàn)的APP社交模塊處，具有發(fā)表發(fā)布的模塊；
• 一種是設(shè)置頁(yè)面，需要設(shè)置一些個(gè)人資料。

1. 發(fā)表或者發(fā)布模塊：

以新浪微博為例，如果你輸入的文字超出140字，超過(guò)該字?jǐn)?shù)則以橙色文字顯示，區(qū)別的是他并沒(méi)有和其他發(fā)布平臺(tái)限制字?jǐn)?shù)，而是當(dāng)文字超出140字時(shí)展示會(huì)將文字進(jìn)行折疊顯示。

2. 個(gè)人設(shè)置模塊：

該位置的輸入框有字?jǐn)?shù)限制，這時(shí)候在界面上就會(huì)顯示限制文字多少，當(dāng)前輸入文字多少，同時(shí)超出文字范圍，以提示框顯示。

上面以轉(zhuǎn)轉(zhuǎn)為例，轉(zhuǎn)轉(zhuǎn)個(gè)人設(shè)置頁(yè)面限制300個(gè)字，當(dāng)默認(rèn)狀態(tài)顯示0/300，同時(shí)輸入時(shí)顯示輸入文字個(gè)數(shù)，當(dāng)超出限制字?jǐn)?shù)，則以氣泡提示，這才是一個(gè)好的交互流程。

五、總結(jié)

1. 獨(dú)立文本標(biāo)簽輸入框：獨(dú)立文本標(biāo)簽即在左側(cè)以文字的形式提示輸入內(nèi)容，因此當(dāng)輸入信息后，其結(jié)構(gòu)仍然清晰。多用于設(shè)置頁(yè)面、資料修改頁(yè)面等。主要有4中表現(xiàn)形式：?jiǎn)雾?xiàng)輸入、多項(xiàng)輸入、段落文本、多行輸入。
2. 行內(nèi)標(biāo)簽輸入框：在絕大多數(shù)的場(chǎng)合用來(lái)給用戶輸入少量的文字，不適用文字列表超過(guò)2個(gè)的情況。但是由于其樣式流行，因此多用于登陸界面等。
3. 對(duì)話輸入框：在設(shè)計(jì)時(shí)需要考慮不同狀態(tài)的設(shè)計(jì)，不要只做個(gè)基礎(chǔ)界面就給開(kāi)發(fā)，一行文字情況、多行、超過(guò)5行的情況，分別是什么樣式，需要設(shè)計(jì)并標(biāo)注清楚。
4. 段落文字：多用于資料修改、文字發(fā)布等地，在設(shè)計(jì)時(shí)需要考慮未輸入情況、輸入文字情況、超出文字限制等情況。

參考鏈接

http://www.codemsi.com/ucd/392706.html/ 文本輸入框設(shè)計(jì)的那些潛規(guī)則，你知道多少？

作者：風(fēng)箏，做個(gè)正能量的小太陽(yáng)，不拖延，不偷懶，勵(lì)志為孩子做個(gè)好榜樣，公眾號(hào)：海鹽社。

本文由 @ 風(fēng)箏KK 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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