在使用APP時，用戶獲得信息往往是通過輸入框，然而這部分卻是很多設計者容易忽略的部分。本篇文章為大家總結了常見的四大輸入框樣式，并分析了其使用場景和注意事項。

輸入框作為頁面中主要的數據錄入入口，可引導用戶錄入信息。我們從APP中獲得的所有信息來源，均是由用戶通過輸入框得來，可見他的重要性。

往往很多APP在設計時卻很容易忽視這塊，標注不清楚、字體限制未標明、文字單行和多行樣式等都不設計出來，導致技術人員在實現時要么靠過往經驗，要么找你繼續了解。

不過無論哪一種方式其實都比較浪費時間，這些如果我們平時去總結分析后，是可以避免的。

今天的文章，我們總結下APP中常見的四大輸入框樣式，即獨立文本標簽輸入框、行內標簽輸入框、對話輸入框、段落文字等，同時總結分析他們的使用場景和注意事項。

一、獨立文本標簽輸入框

獨立文本標簽即在左側以文字的形式提示輸入內容，同時在內容輸入取預設內容，當輸入信息后，由于左側清晰的文字標簽，不管內容多少我們仍然能夠很清晰的瀏覽和操作。

當然由于內容信息的組合、多少不同，我將其歸納為四種形式：

1. 單項輸入
2. 多項輸入
3. 段落文本
4. 多行輸入

以下分別是獨立文本標簽輸入框中的四種形式，掌握這些可以讓我們在表格列表設計中更加高效。

（配圖來自微信小程序規范）

當然，除了知道它有哪些形式是不夠的？

作為設計師，我們還需要知道它對應的一些規范，只有掌握了這些規范，我們才能夠更好的落地，首先來看看有規范和沒規范是怎么樣的。

1. 當沒有規范時：

標題長短未規定，同時輸入文本未對齊，整個界面感覺混亂不堪。

2. 當有規范時：

個界面清晰明了，當你將這個規范交給技術，他就能夠按照你設計的效果實現，而如果你前期設計不到位，技術就按照他自身的想法實現，自然出來的效果你總會說還原度不高，別人也說這個體驗不好。有時候還原度不高，體驗不好，作為設計師你是不是應該好好想想。

下圖以微信小程序規范為例：

最后，掌握了規范還不夠，我們還可以做得更加細化？

1. 設計錯誤提示：在信息輸入錯誤后，即可看到報錯提示，這樣可以提醒用戶讓其及時修正。

市面上很多APP為了方便，直接提交整個表單后才提示錯誤，這樣開發成本雖然降低，但是用戶的操作成本增加，具體如何選擇就看你產品的用戶量如何，當然一個好的用戶體驗需要考慮這些問題。

2. 輸入鍵盤對應輸入信息： 輸入框往往有金額、文字、電話號碼、卡號、身份證號輸入等，一個好的交互體驗就是當你需要輸入電話號碼，鍵盤直接幫你定位在數字鍵，當你輸入身份證號，鍵盤直接是數字加X，讓你輸入更便捷不用切換。

上圖你看到支付寶的充值和銀行卡界面，這些細節的體現正是決定一個好的產品和差的產品的區別。

二、行內標簽輸入框

行內標簽輸入框是UI設計中最常見的控件，在絕大多數的場合用來給用戶輸入少量的文字。

比如：搜索、登陸注冊等。

行內標簽相對于獨立文本標簽樣式較為流行，相對較為簡潔，但是對于屏幕上顯示超過2個文本框的情況，行內標簽則不是獨立文本標簽的一個好的取代方案。

其缺點就是一旦用戶點擊了輸入框，標簽就消失了，這樣用戶就不能二次檢查他們輸入的內容是不是他們應該輸入的類型。同時由于已經輸入過一次，因此第二個輸入框很容易被忽略。

三、對話輸入框

對話輸入框常見于聊天消息類界面，其特點是當你輸入一行信息時，不會有什么變化，但是當你輸入多行信息時，如果你不出相應規則，那么后期落地就只有根據技術喜好了。

在設計時，我們不僅要做常規樣式，還需要做輸入多行的效果，這樣開發拿到手才不會一抹黑，也不會在心里默默罵你不專業了。

以微信對話輸入框為例，當文字一行時，輸入框正常顯示；當文字兩行時，輸入框自動向上升，圖標按鈕位置不變；當為五行以上時，文字可上下滑動顯示，同時露出一點文字，讓用戶清楚，上面還有字的情況。

四、段落文字

段落文字的使用場景主要分兩種情況：

• 一種是常見的APP社交模塊處，具有發表發布的模塊；
• 一種是設置頁面，需要設置一些個人資料。

1. 發表或者發布模塊：

以新浪微博為例，如果你輸入的文字超出140字，超過該字數則以橙色文字顯示，區別的是他并沒有和其他發布平臺限制字數，而是當文字超出140字時展示會將文字進行折疊顯示。

2. 個人設置模塊：

該位置的輸入框有字數限制，這時候在界面上就會顯示限制文字多少，當前輸入文字多少，同時超出文字范圍，以提示框顯示。

上面以轉轉為例，轉轉個人設置頁面限制300個字，當默認狀態顯示0/300，同時輸入時顯示輸入文字個數，當超出限制字數，則以氣泡提示，這才是一個好的交互流程。

五、總結

1. 獨立文本標簽輸入框：獨立文本標簽即在左側以文字的形式提示輸入內容，因此當輸入信息后，其結構仍然清晰。多用于設置頁面、資料修改頁面等。主要有4中表現形式：單項輸入、多項輸入、段落文本、多行輸入。
2. 行內標簽輸入框：在絕大多數的場合用來給用戶輸入少量的文字，不適用文字列表超過2個的情況。但是由于其樣式流行，因此多用于登陸界面等。
3. 對話輸入框：在設計時需要考慮不同狀態的設計，不要只做個基礎界面就給開發，一行文字情況、多行、超過5行的情況，分別是什么樣式，需要設計并標注清楚。
4. 段落文字：多用于資料修改、文字發布等地，在設計時需要考慮未輸入情況、輸入文字情況、超出文字限制等情況。

參考鏈接

http://www.aharts.cn/ucd/392706.html/ 文本輸入框設計的那些潛規則，你知道多少？

作者：風箏，做個正能量的小太陽，不拖延，不偷懶，勵志為孩子做個好榜樣，公眾號：海鹽社。

本文由 @ 風箏KK 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議