在原型設計中，輸入框應該是大家操作最多的設計了。但如果是要加入交互效果，需要注意什么呢？

Axure 中的輸入框（Text Field）組件在多種應用場景中都非常有用，這期內容，我們來探討Axure中輸入框設計與交互技巧。

01 帶提示輸入框元件

創(chuàng)建帶提示輸入框所需的元件

1.打開一個新的 RP 文件并在畫布上打開 Page 1。

2.在元件庫中拖出一個文本框元件。

一款产品无到有，产品经理需要做些什么？

在一个产品从无到有的过程中，要做好产品经理这个角色实在是不容易，除了大家都知道的写需求、写需求、写需求，要做的事多着呢。产品经理不是你眼中的只会找你麻烦，提要求..

查看详情 >

3.選中文本框形元件，在樣式窗格中將文本框寬設為285，高35，線段填充顏色灰色（#D9D9D9）線框為1。

02 創(chuàng)建交互

創(chuàng)建“提示輸入框”的交互狀態(tài)

1.選中文本框形元件,在交互窗格提示文本中輸入想要提示的文本。

預覽交互

點擊預覽，在預覽頁面 輸入框中可以看到提示文，輸入內容時提示文本則消失。

03 帶圖標輸入框元件

創(chuàng)建帶圖標輸入框所需的元件

1.復制前面做好的輸入框。

2.在https://www.iconfont.cn/這個網站上找到想要的圖標。

3.復制圖標SVG代碼，粘貼到畫布上，將icon寬高設置為15。

4.選中圖片右鍵變換圖片，轉換SCG圖片為形狀。

5.同理，再找個一關閉icon，并將icon顏色設置為灰色（#D9D9D9）。

6.將找到的icon圖標和文本輸入框兩邊居中對齊。

04 創(chuàng)建交互

創(chuàng)建“提示輸入框”的交互狀態(tài)

1.選中文本框形元件,在交互窗格點擊新建交互，文本改變時，啟用情形判斷，情形1：如果 元件文字長度于 當前 >”0″則，顯示清空按鈕，情形2：否則如果 元件文字長度于 當前 ==”0″則，隱藏清空按鈕。

2.獲取焦點時，設置選中用戶圖標為“真”。

3.失去焦點時，設置選中用戶圖標為“假”。

創(chuàng)建“清除”按鈕的交互狀態(tài)

1.選中清除按鈕,在交互窗格點擊新建交互，單擊時，設置文本輸入“”。

2.隱藏清除按鈕。

創(chuàng)建“用戶圖標”icon的交互狀態(tài)

1.選中“用戶圖標”icon,在交互窗格交互樣式中選擇鼠標懸停的樣式填充色為藍色（#0052D9）。

2.元件選中時的樣式填充色為藍色（#0052D9）。

預覽交互

點擊預覽，在預覽頁面 輸入框中可以看到提示文，圖標，填充色，輸入內容時提示文本則消失。

05 帶嘆號提示輸入框元件

創(chuàng)建帶嘆號提示輸入框所需的元件

1.復制前面做好的輸入框。

2.在https://www.iconfont.cn/找一個感嘆號icon。

3.復制圖標SVG代碼，粘貼到畫布上，將icon寬高設置為15，選中圖片右鍵變換圖片，轉換SCG圖片為形狀，填充顏色灰色（#999999）。

4.將感嘆號icon和文本輸入框兩邊居中對齊。

5.創(chuàng)建一個提示提示框，提示框可以用鋼筆工具畫，這個具體咋畫，有空的時候單獨講一期，畫好之后填充色設置為灰黑色（#635D5D），命名為“提示框”。

創(chuàng)建交互

“提示輸入框”的交互狀態(tài)之前已經創(chuàng)建好了，所以現(xiàn)在只需要為感嘆號icon創(chuàng)建交互。

1選中感嘆號icon，在交互窗格點擊新建交互，鼠標移入時，顯示“提示框”逐漸 300毫秒，勾選置于頂層，彈出效果。

1.隱藏“提示框”。

預覽交互

點擊預覽，在預覽頁面 輸入框中可以看到提示文，鼠標移入提示icon時會出現(xiàn)提示框。

06 密碼輸入框元件

創(chuàng)建密碼輸入框所需的元件

1，復制帶圖標輸入框元件，并將用戶icon，替換成鎖樣式icon，提示文本改成請輸入密碼。

創(chuàng)建交互

修改“提示輸入框”的交互狀態(tài)。

1.選中提示輸入框，在交互窗格中將獲取焦點時，失去焦點時設置選中目標替換成鎖icon。

2.交互樣式中輸入類型 Text 改成密碼。

創(chuàng)建“鎖”icon的交互狀態(tài)

1.選中“鎖”icon,在交互窗格交互樣式中選擇鼠標懸停的樣式填充色為藍色（#0052D9）。

2.元件選中時的樣式填充色為藍色（#0052D9）。

預覽交互

點擊預覽，在預覽頁面 輸入框中可以看到提示文，圖標，填充色，輸入密碼時密碼會被隱藏。

07 郵箱輸入框元件

創(chuàng)建郵箱輸入框所需的元件

1.復制帶圖標輸入框元件，并將用戶icon，替換成郵箱樣式icon，提示文本改成請輸入郵箱。

2.創(chuàng)建一個輔助矩形，從元件庫中拖入一個矩形，線段值為0，輸入文本1，與關閉按鈕對齊。

創(chuàng)建郵箱選項所需的元件

1.創(chuàng)建郵箱提示選項背景，從元件庫中拖入一個矩形，線段值為0，寬為285，高為120，外部陰影設置為灰色（#000000）15%透明度，與輸入框對齊。

2.創(chuàng)建郵箱提示選項，從元件庫中拖入一個矩形，線段值為0，輸入文本“輸入提示1”、“輸入提示2”、“輸入提示3”并命名。

創(chuàng)建交互

修改“提示輸入框”的交互狀態(tài)。

1.選中全部郵箱選項元件，右鍵轉為動態(tài)面板，選中提示輸入框和創(chuàng)建好的動態(tài)面板，右鍵轉為動態(tài)面板。

2.雙擊動態(tài)面板，選中輸入框元件，在交互窗格中，將文本改變時，情形1：如果 元件文字長度于 當前 >“0”改為，如果 文字于1==“0”，顯示/隱藏動作不變，添加顯示/隱藏動作，顯示郵箱選項動態(tài)面板，逐漸 300 毫秒。

添加設置文本，設置輸入提示1插入一個變量。

選擇元件 This 變量

添加文本格式，輸入郵箱后綴

依次補充需要提示2，提示3的郵箱。

在添加一個動作設置選中 郵箱icon 為“真”。

情形2：否則 如果 元件文字長度于 當前 ==”0”改為否則 如果 文字于1==“1”。

添加顯示/隱藏交互，隱藏提示動態(tài)面板 逐漸 300毫秒。

設置選中郵箱icon選中為“真”。

3.修改失去焦點時交互狀態(tài)，添加設置文本，選中輔助矩形框1為“1”等待200毫秒。

添加設置顯示/隱藏，隱藏 清空按鈕；顯示/隱藏 隱藏 提示動態(tài)面板 逐漸 300毫秒，設置選中郵箱icon選中為“假”。

4.修改獲取焦點時 交互轉態(tài)，設置文本 選中輔助矩形框1為“0”。

5.隱藏輔助矩形框1

6.在交互樣式中輸入類型窗格將密碼 改為Text。

創(chuàng)建“郵箱icon”的交互狀態(tài)。

雙擊郵箱icon 選項，在交互窗格，交互樣式中添加元件選中時 填充為藍色（#0052D9）。

創(chuàng)建“郵箱選項”的交互狀態(tài)。

1.雙擊郵箱選項動態(tài)面板，選中輸入提示1在交互窗格中，新建單擊時交互，單擊時顯示/隱藏 隱藏 郵箱選項動態(tài)面板

2.設置輸入框 文本 值[[This.text]]

3.添加交互樣式，鼠標懸停是樣式，填充色（#F7F7F7）。

4.依次設置 輸入提示2、輸入提示3。

5.隱藏郵箱選項動態(tài)面板

預覽交互

點擊預覽，在預覽頁面 輸入框中可以看到提示文，圖標，填充色，輸入郵箱會有郵箱提示選擇項。

08 字數(shù)限制輸入框元件

創(chuàng)建字數(shù)限制輸入框所需的元件

1.復制做好的帶提示文本輸入框。

2.創(chuàng)建字數(shù)提示矩形，在元件庫中拖出一個矩形框，線寬設為0，輸入文本15，字體顏色（#999999）

3.將文本輸入框和字數(shù)提示矩形對齊。

創(chuàng)建交互

創(chuàng)建“輸入框”的交互狀態(tài)。

1.選中輸入框元件，在交互窗格中新建文本改變時，設置文本，字數(shù)提示矩形 15，插入一個變量。

添加局部變量，LVAR1=元件 文字 當前

插入變量，找到字串length，并插入;LVAR1變量，[[15-LVAR1.length]]

2.選中文本輸入框，在交互窗格，文本屬性窗格中，點擊顯示全部，最大長度設置為15。

預覽交互

點擊預覽，在預覽頁面 輸入框中輸入文字到達上限是無法繼續(xù)輸入。

預覽地址：https://3kn850.axshare.com

OK，這期內容到這里就結束了。