中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

輸入框的狀態(tài)

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

• 默認狀態(tài)：即首次看到該輸入框的樣式效果。
• 懸停狀態(tài)：即鼠標懸停在輸入框的區(qū)域，此時光標會變化。
• 激活狀態(tài)：即鼠標點擊了輸入框，此時焦點在輸入框。
• 輸入狀態(tài)：即正在輸入文字。
• 輸入完成狀態(tài)：即輸入文字完成，且鼠標焦點不在輸入框。
• 禁用狀態(tài)：即該輸入框無法輸入?？捎糜诓榭椿蛘叽懋斍坝脩魶]有權限。

輸入框是否必填

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

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

輸入框的樣式

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

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

是否設置提示文字

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

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

驗證輸入結果

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

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

顯示約束條件文案

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

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

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

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

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

（2）輸入框最大值x

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

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

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

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

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

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

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

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

總結

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

提供原型下載學習：https://pan.baidu.com/s/1lOysRY59IOQN7Hhl7jrI3g

相關閱讀

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

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

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

#專欄作家#

浪子，公眾號：浪子畫原型(langzipm)。擅長于APP原型設計和產品架構。

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

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