輸入框是PM設(shè)計(jì)原型常用的控件，那么在畫相應(yīng)原型的時(shí)候需要考慮哪些點(diǎn)呢？本文從視覺、交互、邏輯等3個(gè)角度來講解如何畫出輸入框，如何畫原型和寫文檔。

輸入框的狀態(tài)

輸入框的常見狀態(tài)，相信大家都有一定的了解。

• 默認(rèn)狀態(tài)：即首次看到該輸入框的樣式效果。
• 懸停狀態(tài)：即鼠標(biāo)懸停在輸入框的區(qū)域，此時(shí)光標(biāo)會變化。
• 激活狀態(tài)：即鼠標(biāo)點(diǎn)擊了輸入框，此時(shí)焦點(diǎn)在輸入框。
• 輸入狀態(tài)：即正在輸入文字。
• 輸入完成狀態(tài)：即輸入文字完成，且鼠標(biāo)焦點(diǎn)不在輸入框。
• 禁用狀態(tài)：即該輸入框無法輸入?？捎糜诓榭椿蛘叽懋?dāng)前用戶沒有權(quán)限。

輸入框是否必填

通常表單頁面有很多輸入框，不是所有的都必填，所以需要區(qū)分顯示。

• 非必填：不做處理。
• 必填：標(biāo)題前面加個(gè)紅色星號鍵。

輸入框的樣式

每個(gè)輸入框必然伴隨著標(biāo)題描述該輸入框的用途，常見的有以下三種樣式：

1. 左右結(jié)構(gòu)：用得最多的樣式。
2. 上下結(jié)構(gòu)：用得較多，缺點(diǎn)是需要多個(gè)輸入框的時(shí)候回占據(jù)非常多的區(qū)域。
3. 內(nèi)嵌結(jié)構(gòu)：利用提示文字充當(dāng)標(biāo)題，缺點(diǎn)是輸入的時(shí)候無法看到標(biāo)題。

是否設(shè)置提示文字

為了讓用戶知曉輸入框的約束條件或者該輸入什么，可以在輸入框內(nèi)部設(shè)置提示文字。

• 無提示文字：即該輸入框無需提示約束條件。
• 帶提示文字：設(shè)置之后，如果輸入內(nèi)容則自動隱藏。

驗(yàn)證輸入結(jié)果

當(dāng)用戶進(jìn)行表單輸入后（判斷依據(jù)為當(dāng)前輸入框丟失鼠標(biāo)焦點(diǎn)），立即對輸入結(jié)果進(jìn)行驗(yàn)證并顯示結(jié)果。

• 驗(yàn)證通過：輸入框后面顯示成功的圖標(biāo)。
• 驗(yàn)證未通過：輸入框后面顯示失敗的圖標(biāo)，同時(shí)輸入框高亮提醒。

顯示約束條件文案

當(dāng)用戶輸入內(nèi)容的時(shí)候，系統(tǒng)自動判斷是否符合約束條件，如果不符合則立即顯示約束條件且輸入框高亮提醒。

• 左右結(jié)構(gòu)：比較常見。
• 上下結(jié)構(gòu)：需要提前預(yù)留空間，處理較麻煩。

（1）輸入框最多輸入XX字

當(dāng)輸入類型為字符串的時(shí)候，可能需要加這種約束條件。

• 超過最大字?jǐn)?shù)，無法顯示到輸入框；
• 同時(shí)輸入框下方顯示約束文案，且為紅色；
• 約束文案通常為“最多輸入x字”。

（2）輸入框最大值x

當(dāng)輸入類型為數(shù)字(含金額)的時(shí)候，可能需要加這種約束條件。

• 失去焦點(diǎn)的時(shí)候，判斷是否超過最大值，如果超過，則自動修正為最大值；
• 同時(shí)輸入框下方顯示約束文案，且為紅色；
• 約束文案通常為“最大輸入x”。

（3）輸入框最多x位小數(shù)

當(dāng)輸入類型為金額的時(shí)候，可能需要加這種約束條件。

• 失去焦點(diǎn)的時(shí)候，判斷是否超過x位小數(shù)，如果超過，則自動略去后面的小數(shù)。
• 約束文案通常為“最多允許x位小數(shù)”。

（4）輸入框內(nèi)容不能重復(fù)

有時(shí)候我們還需要判斷輸入框內(nèi)容，是否和數(shù)據(jù)庫里該字段的值重復(fù)？

• 輸入類型通常為字符串；
• 失去焦點(diǎn)的時(shí)候，判斷輸入值是否已存在，如果已存在，請高亮輸入框；
• 同時(shí)輸入框下方顯示約束文案，且為紅色；
• 約束文案通常為“該名稱已存在，請換一個(gè)”。

總結(jié)

以上就是設(shè)計(jì)輸入框原型的時(shí)候，通常需要考慮的細(xì)節(jié)點(diǎn)，希望通過本文的梳理，PM能夠了解到輸入框的學(xué)問還是很深的。

提供原型下載學(xué)習(xí)：https://pan.baidu.com/s/1lOysRY59IOQN7Hhl7jrI3g

相關(guān)閱讀

善用Axure寫PRD，APP文本框通用的輸入規(guī)則

善用Axure寫PRD，全局規(guī)范一個(gè)都不能少

善用Axure寫PRD，徹底丟棄Word和PPT

#專欄作家#

浪子，公眾號：浪子畫原型(langzipm)。擅長于APP原型設(shè)計(jì)和產(chǎn)品架構(gòu)。

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

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