對(duì)一個(gè)產(chǎn)品小白來說，產(chǎn)品設(shè)計(jì)中任何一個(gè)細(xì)節(jié)都是一座難以逾越的大山。于是乎，我們開始觀察生活，整理一些細(xì)節(jié)設(shè)計(jì)時(shí)需要注意的事項(xiàng)，以備不時(shí)之需，同時(shí)造福更多的產(chǎn)品小白。

第一期我們?yōu)榇蠹沂崂淼氖禽斎肟虻脑O(shè)計(jì)。下圖是我們針對(duì)這個(gè)細(xì)節(jié)展開的思維導(dǎo)圖。

接下來我們從幾種常見的輸入框來分析設(shè)計(jì)時(shí)需要注意的點(diǎn)。

信息輸入框

信息輸入框是最常見的輸入框之一，往往以表單輸入框的形式存在。

輸入前

1、輸入框大小

表單輸入框的大小往往會(huì)影響用戶輸入的心情。由于拇指的觸發(fā)區(qū)域控制在 45~57px之間，因此輸入框的高度應(yīng)該保持在設(shè)計(jì)在32~40px之間比較合理。

2、必填項(xiàng)提醒

• 輸入框內(nèi)出現(xiàn)“必填”的文字占位符。
• 輸入框內(nèi)出現(xiàn)“*”的符號(hào)。

3、告知用戶輸入什么內(nèi)容

• 輸入框前文案提示：一般為短語，簡(jiǎn)短易懂。
• 輸入框內(nèi)占位符文本提示：可以是一句話，也可以是短語。缺點(diǎn)是一旦輸入提示會(huì)消失。
• 輸入框前文案提示+輸入框內(nèi)文字補(bǔ)充說明。（推薦使用）

4、重要信息的提示

格式提示

①輸入框內(nèi)文字占位符提示

②格式拆分編輯

舉個(gè)栗子，要求填手機(jī)號(hào)碼時(shí)很多人往往會(huì)忽略區(qū)號(hào)的輸入，因此很多輸入框在設(shè)計(jì)時(shí)，會(huì)將區(qū)號(hào)單獨(dú)提出來，避免此類錯(cuò)誤的發(fā)生。

字?jǐn)?shù)限制提醒

一般以文案形式提醒。比如：在輸入框后顯示不得超過X字。

規(guī)則補(bǔ)充說明

一般在輸入框下方以文案形式提醒，重要的提示可以標(biāo)亮提醒。

輸入時(shí)

1、當(dāng)前輸入位置提示

光標(biāo)提示

外框標(biāo)亮提示

2、限制條件提示

字?jǐn)?shù)

①字?jǐn)?shù)限制輸入

先看一個(gè)反面案例：手機(jī)號(hào)碼位數(shù)是規(guī)定的，但在下圖中，當(dāng)輸入位數(shù)超過時(shí)，仍然可以輸入。

比較好的處理方式應(yīng)當(dāng)是當(dāng)達(dá)到限制字?jǐn)?shù)時(shí)，鍵盤自動(dòng)縮回，不允許再輸入內(nèi)容，這樣可以提醒用戶檢查輸入的內(nèi)容是否不小心多輸了文字。

②字?jǐn)?shù)實(shí)時(shí)提醒

實(shí)時(shí)提醒用戶當(dāng)前輸入內(nèi)容字?jǐn)?shù)。

格式

鍵盤默認(rèn)彈出。

比如手機(jī)號(hào)、銀行卡號(hào)默認(rèn)需要輸入數(shù)字的輸入框，彈出的鍵盤默認(rèn)為數(shù)字鍵盤；若輸入的內(nèi)容包涵文字、字母等內(nèi)容，默認(rèn)彈出字母鍵盤。

3、減少用戶輸入

歷史記錄

在用自己的手機(jī)電腦時(shí)，經(jīng)常會(huì)需要經(jīng)常填手機(jī)號(hào)或者一些內(nèi)容?？梢?/p>

4、一鍵刪除功能

有內(nèi)容輸入后，會(huì)出現(xiàn)×控件，可以讓用戶一鍵刪除。

輸入后

1、敏感信息的顯示

針對(duì)于手機(jī)號(hào)碼、密碼或銀行卡號(hào)等敏感信息，呈現(xiàn)為“*”或“· ”。

2、格式拆分顯示

可以使用戶快速檢查是否輸錯(cuò)。比如：銀行卡號(hào)按照4-4-4-4顯示；手機(jī)號(hào)按照4-3-3顯示等等。

3、內(nèi)容放大顯示

輸入內(nèi)容放大顯示，便于用戶進(jìn)行內(nèi)容的預(yù)覽。

登錄注冊(cè)框

登錄注冊(cè)框在設(shè)計(jì)時(shí)需要注意以下幾點(diǎn)：

1、輸入框文案填寫類型提示

默認(rèn)情況下輸入框內(nèi)會(huì)有文案告知用戶填寫的信息類型，輸入框下方有溫馨提醒關(guān)于填寫內(nèi)容更詳細(xì)的一些要求或建議（比如編輯狀態(tài)下的密碼輸入框下方有文案提示：不能包括空格、b.長(zhǎng)度為8-16個(gè)字符、c.必須包含字母、數(shù)字、符號(hào)中至少2種）

2、輸入時(shí)鍵盤調(diào)用

根據(jù)輸入框填寫內(nèi)容類型不同分別調(diào)用不同類型的鍵盤：字母鍵盤或數(shù)字鍵盤。

3、密碼顯示

密碼保密處理：鍵盤鍵入密碼過程中，系統(tǒng)會(huì)隱藏用戶實(shí)際輸入的字符以“.”替代；點(diǎn)擊輸入框后面的顯示按鈕即可查看核實(shí)密碼輸入是否正確，且查看操作可以在密碼輸入任何過程中進(jìn)行。

4、反饋

• 對(duì)于一些內(nèi)容，可以實(shí)時(shí)反饋。當(dāng)表單輸入框有一系列需要輸入的內(nèi)容時(shí)，如果在進(jìn)入下一個(gè)文本框時(shí)，能夠?qū)崟r(shí)判斷上一個(gè)文本框輸入的內(nèi)容是否合乎規(guī)范，可供用戶實(shí)時(shí)修改。
• 標(biāo)注錯(cuò)誤原因。提示文本內(nèi)容不符合規(guī)范時(shí)，最好提示原因，這樣有利于用戶快速修改。

• 密碼默認(rèn)顯示。當(dāng)點(diǎn)擊登錄按鈕后，若密碼不正確，密碼自動(dòng)顯示內(nèi)容，可以讓用戶檢查密碼是否正確。
  

  搜索框

  常見的交互控件，幫助用戶在海量?jī)?nèi)容中快速定位到目標(biāo)內(nèi)容。搜索框可以形象的被拆分為輸入框+icon(搜索圖標(biāo)or圖片圖標(biāo)or音頻圖標(biāo))+按鈕。

  常見的搜索框應(yīng)用場(chǎng)景：

  a、搜索引擎入口

  b、電商、社區(qū)等內(nèi)容導(dǎo)向型平臺(tái)的內(nèi)容推薦

  c、工具、應(yīng)用、好友等準(zhǔn)確定位

  d、復(fù)用型(支持同搜索框搜索不同類型內(nèi)容)

設(shè)計(jì)時(shí)需要注意的細(xì)節(jié)

1、編輯內(nèi)容提示

①社區(qū)、新聞中心等內(nèi)容導(dǎo)向型的平臺(tái)或者電商平臺(tái)用搜索框內(nèi)文案提示達(dá)到內(nèi)容推薦效果,此類文案一般根據(jù)用戶自身行為數(shù)據(jù)或內(nèi)容熱度值來設(shè)置，且文案有時(shí)效性。

②搜索引擎入口、準(zhǔn)確定位、復(fù)用等使用場(chǎng)景下的搜索框內(nèi)文案固定不變且簡(jiǎn)短，意在提醒用戶此交互動(dòng)作及搜索的內(nèi)容。

2、字?jǐn)?shù)限制

在輸入框中文本做字?jǐn)?shù)限制很容易被大家忽視，測(cè)試了QQ、微信、微博、淘寶等，發(fā)現(xiàn)QQ、微信、微博對(duì)字?jǐn)?shù)做了限制(范圍比較大，一般情況下不容易超過字?jǐn)?shù)限制)。其中微博超過字?jǐn)?shù)限時(shí)的時(shí)候會(huì)有彈窗告知，而QQ、微信則是通過比較婉轉(zhuǎn)的方式告知用戶：使鍵盤失效，無法成功將字打入輸入框。相比之下后者體驗(yàn)比較差，導(dǎo)致用戶出現(xiàn)后知后覺的情況。

3、支持一鍵清空功能

輸入框處于編輯狀態(tài)下且已有字符鍵入時(shí)，出現(xiàn)清除icon，點(diǎn)擊icon即可一鍵清除輸入框的所有內(nèi)容，內(nèi)容清除為空時(shí)，icon隱藏。

4、其他

• ?鍵盤調(diào)用。初始狀態(tài)下不出現(xiàn)鍵盤；當(dāng)點(diǎn)擊輸入框，系統(tǒng)默認(rèn)調(diào)用字母鍵盤；輸入完成點(diǎn)擊鍵盤自帶的“搜索”鍵，鍵盤回收，頁面進(jìn)入結(jié)果頁。
• ?光標(biāo)鎖定。獲取焦點(diǎn)：初始狀態(tài)下輸入框未被光標(biāo)鎖定；編輯過程時(shí)，輸入框獲取焦點(diǎn)，光標(biāo)位于首個(gè)字符將要出現(xiàn)的位置，并且會(huì)隨著的內(nèi)容的增加光標(biāo)移動(dòng)；輸入完成后，光標(biāo)消失。
• ?實(shí)時(shí)檢索。a.搜索框會(huì)根據(jù)輸入框內(nèi)輸入的字符實(shí)時(shí)進(jìn)行檢索，將結(jié)果呈現(xiàn)在用戶面前；（通常在用于好友、工具、應(yīng)用等準(zhǔn)確定位的情況下比較常見）
• ?建議機(jī)制。系統(tǒng)記錄用戶所有的搜索行為數(shù)據(jù)，根據(jù)輸入框內(nèi)關(guān)鍵詞信息會(huì)提供含有相同關(guān)鍵詞信息且已有成形回答的搜索語句。

• 內(nèi)容預(yù)覽。內(nèi)容較少時(shí)，輸入框能夠透露出用戶所填所有信息；內(nèi)容長(zhǎng)度超過輸入框長(zhǎng)度時(shí)，無法完整查看所有所填信息。

原創(chuàng)內(nèi)容編輯框

原創(chuàng)內(nèi)容編輯框是指在微信、微博等平臺(tái)上發(fā)表原創(chuàng)內(nèi)容時(shí)的文本輸入框。

輸入前

1、占位符文本

原創(chuàng)內(nèi)容編輯框內(nèi)的占位符文本一般是一句話，輸入內(nèi)容時(shí)占位符文本自動(dòng)消失。

2、鍵盤自動(dòng)喚醒

對(duì)于直接輸入文字的原創(chuàng)內(nèi)容編輯款來說，打開文本框時(shí)鍵盤自動(dòng)喚醒，可以減少用戶的操作。比如微信的發(fā)表文字、微博的發(fā)表文字都是這樣的做法，進(jìn)入功能之后鍵盤自動(dòng)彈起、光標(biāo)自動(dòng)定位。

輸入時(shí)

1、字?jǐn)?shù)實(shí)時(shí)提示

你是否曾遇到過輸入了長(zhǎng)長(zhǎng)的一段話，單擊發(fā)表時(shí)卻被告知你輸入的內(nèi)容過長(zhǎng)，無法發(fā)送。

因此在輸入過程中實(shí)時(shí)提醒字?jǐn)?shù)很重要！舉個(gè)栗子：

以顏色區(qū)分

以微博為例，當(dāng)沒有達(dá)到限制字?jǐn)?shù)之前，微博顯示的是當(dāng)前輸入的字?jǐn)?shù)，顏色為灰色；當(dāng)超過限制字?jǐn)?shù)時(shí)，微博顯示的是超過了多少字，顏色為橙色。

顯示當(dāng)前輸入字?jǐn)?shù)和最高限制字?jǐn)?shù)

以站酷為例，在輸入時(shí)實(shí)時(shí)顯示當(dāng)前輸入字?jǐn)?shù)和最高限制字?jǐn)?shù)。

2、輸入框?qū)ξ谋镜淖赃m應(yīng)

在進(jìn)行文本輸入時(shí)，往往會(huì)遇到輸入的文字超過文本框初始范圍的情況。

較糟糕的解決方式時(shí)是：文本框的大小隨著輸入文字的增多而變大。變大到一定程度時(shí)，內(nèi)容會(huì)被鍵盤擋住。

QQ的說說內(nèi)容編輯框就是這種處理方式，文字增多，文本框變大，內(nèi)容被鍵盤擋住，無法看到之后輸入的內(nèi)容。需要點(diǎn)擊文本框縮回鍵盤，定位光標(biāo)到當(dāng)前輸入位置繼續(xù)輸入。

比較好的處理方式為：

①文字框大小不變，文字內(nèi)容上移

下圖所示的INS編輯框,網(wǎng)易云音樂的內(nèi)容編輯框都是通過這種方式處理此類情況的。

②文本框隨著輸入文字的增多變大，到達(dá)接近鍵盤位置時(shí)，文字內(nèi)容上移

輸入后

鍵盤縮回與內(nèi)容預(yù)覽

在輸入完成后，往往會(huì)需要縮回鍵盤來進(jìn)行內(nèi)容的預(yù)覽。

1、滑動(dòng)文本內(nèi)容框鍵盤縮回，文本內(nèi)容框最大化進(jìn)行內(nèi)容的預(yù)覽。

2、點(diǎn)擊按鈕鍵盤縮回，文本框大小不變，通過上下滑動(dòng)進(jìn)行內(nèi)容的預(yù)覽。

對(duì)話框

1、對(duì)話款的形狀

2、交互

輸入內(nèi)容時(shí)，文本框變大。比如ins的消息輸入框。

3、字?jǐn)?shù)限制提醒

對(duì)話框一般也會(huì)設(shè)有字?jǐn)?shù)限制，比如說QQ,字?jǐn)?shù)限制為3420字，但一般情況下不會(huì)達(dá)到這個(gè)限制，所以一般在輸入前沒有字?jǐn)?shù)限制提示。

先來幾個(gè)比較坑的栗子：

當(dāng)輸入字?jǐn)?shù)超過微信輸入框最高限制字?jǐn)?shù)時(shí)，點(diǎn)擊發(fā)送，出現(xiàn)以下左圖所示，會(huì)讓用戶誤認(rèn)為消息發(fā)送成功，返回聊天界面在對(duì)話列表頁就可以發(fā)現(xiàn)！號(hào)，證明消息發(fā)送失敗。

微博私信單條信息發(fā)送不得超過300字，但當(dāng)用戶輸入超過300字時(shí)，點(diǎn)擊發(fā)送，消息發(fā)送成功，默認(rèn)將超過300字的內(nèi)容刪除，但卻沒有提示用戶，會(huì)導(dǎo)致發(fā)送信息不完整。

比較好的解決方式：

QQ聊天輸入框超過字?jǐn)?shù)上限時(shí)，消息無法發(fā)送，提示“字?jǐn)?shù)超過上限”。

4、輸入內(nèi)容超過初始輸入框大小時(shí)

先隨著輸入文字的增多而變大，變大到一定程度時(shí)，文字自動(dòng)上移，光標(biāo)自動(dòng)定位到最新輸入位置處。

結(jié)束語

好了，以上就是輸入框的設(shè)計(jì)細(xì)節(jié)分享！如有需要補(bǔ)充或者寫的不對(duì)的地方，歡迎大家指正！

我們的目標(biāo)是：相互學(xué)習(xí)，共同進(jìn)步，早日成為一名合(優(yōu)）格（秀）的產(chǎn)品經(jīng)理?。。?/p>

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

題圖來自u(píng)nsplash，基于CC0協(xié)議