從3個角度講解：PM該如何畫出輸入框？

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

輸入框的狀態

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

• 默認狀態：即首次看到該輸入框的樣式效果。
• 懸停狀態：即鼠標懸停在輸入框的區域，此時光標會變化。
• 激活狀態：即鼠標點擊了輸入框，此時焦點在輸入框。
• 輸入狀態：即正在輸入文字。
• 輸入完成狀態：即輸入文字完成，且鼠標焦點不在輸入框。
• 禁用狀態：即該輸入框無法輸入。可用于查看或者代表當前用戶沒有權限。

輸入框是否必填

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

• 非必填：不做處理。
• 必填：標題前面加個紅色星號鍵。

輸入框的樣式

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

1. 左右結構：用得最多的樣式。
2. 上下結構：用得較多，缺點是需要多個輸入框的時候回占據非常多的區域。
3. 內嵌結構：利用提示文字充當標題，缺點是輸入的時候無法看到標題。

是否設置提示文字

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

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

驗證輸入結果

當用戶進行表單輸入后（判斷依據為當前輸入框丟失鼠標焦點），立即對輸入結果進行驗證并顯示結果。

• 驗證通過：輸入框后面顯示成功的圖標。
• 驗證未通過：輸入框后面顯示失敗的圖標，同時輸入框高亮提醒。

顯示約束條件文案

當用戶輸入內容的時候，系統自動判斷是否符合約束條件，如果不符合則立即顯示約束條件且輸入框高亮提醒。

• 左右結構：比較常見。
• 上下結構：需要提前預留空間，處理較麻煩。

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

當輸入類型為字符串的時候，可能需要加這種約束條件。

• 超過最大字數，無法顯示到輸入框；
• 同時輸入框下方顯示約束文案，且為紅色；
• 約束文案通常為“最多輸入x字”。

（2）輸入框最大值x

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

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

（3）輸入框最多x位小數

當輸入類型為金額的時候，可能需要加這種約束條件。

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

（4）輸入框內容不能重復

有時候我們還需要判斷輸入框內容，是否和數據庫里該字段的值重復？

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

總結

以上就是設計輸入框原型的時候，通常需要考慮的細節點，希望通過本文的梳理，PM能夠了解到輸入框的學問還是很深的。