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

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

Axure 中的輸入框（Text Field）組件在多種應(yīng)用場(chǎng)景中都非常有用，這期內(nèi)容，我們來(lái)探討Axure中輸入框設(shè)計(jì)與交互技巧。

01 帶提示輸入框元件

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

1.打開(kāi)一個(gè)新的 RP 文件并在畫布上打開(kāi) Page 1。

2.在元件庫(kù)中拖出一個(gè)文本框元件。

3.選中文本框形元件，在樣式窗格中將文本框?qū)捲O(shè)為285，高35，線段填充顏色灰色（#D9D9D9）線框?yàn)?。

02 創(chuàng)建交互

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

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

預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面 輸入框中可以看到提示文，輸入內(nèi)容時(shí)提示文本則消失。

03 帶圖標(biāo)輸入框元件

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

1.復(fù)制前面做好的輸入框。

2.在https://www.iconfont.cn/這個(gè)網(wǎng)站上找到想要的圖標(biāo)。

3.復(fù)制圖標(biāo)SVG代碼，粘貼到畫布上，將icon寬高設(shè)置為15。

4.選中圖片右鍵變換圖片，轉(zhuǎn)換SCG圖片為形狀。

5.同理，再找個(gè)一關(guān)閉icon，并將icon顏色設(shè)置為灰色（#D9D9D9）。

6.將找到的icon圖標(biāo)和文本輸入框兩邊居中對(duì)齊。

04 創(chuàng)建交互

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

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

2.獲取焦點(diǎn)時(shí)，設(shè)置選中用戶圖標(biāo)為“真”。

3.失去焦點(diǎn)時(shí)，設(shè)置選中用戶圖標(biāo)為“假”。

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

1.選中清除按鈕,在交互窗格點(diǎn)擊新建交互，單擊時(shí)，設(shè)置文本輸入“”。

2.隱藏清除按鈕。

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

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

2.元件選中時(shí)的樣式填充色為藍(lán)色（#0052D9）。

預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面 輸入框中可以看到提示文，圖標(biāo)，填充色，輸入內(nèi)容時(shí)提示文本則消失。

05 帶嘆號(hào)提示輸入框元件

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

1.復(fù)制前面做好的輸入框。

2.在https://www.iconfont.cn/找一個(gè)感嘆號(hào)icon。

3.復(fù)制圖標(biāo)SVG代碼，粘貼到畫布上，將icon寬高設(shè)置為15，選中圖片右鍵變換圖片，轉(zhuǎn)換SCG圖片為形狀，填充顏色灰色（#999999）。

4.將感嘆號(hào)icon和文本輸入框兩邊居中對(duì)齊。

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

創(chuàng)建交互

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

1選中感嘆號(hào)icon，在交互窗格點(diǎn)擊新建交互，鼠標(biāo)移入時(shí)，顯示“提示框”逐漸 300毫秒，勾選置于頂層，彈出效果。

1.隱藏“提示框”。

預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面 輸入框中可以看到提示文，鼠標(biāo)移入提示icon時(shí)會(huì)出現(xiàn)提示框。

06 密碼輸入框元件

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

1，復(fù)制帶圖標(biāo)輸入框元件，并將用戶icon，替換成鎖樣式icon，提示文本改成請(qǐng)輸入密碼。

創(chuàng)建交互

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

1.選中提示輸入框，在交互窗格中將獲取焦點(diǎn)時(shí)，失去焦點(diǎn)時(shí)設(shè)置選中目標(biāo)替換成鎖icon。

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

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

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

2.元件選中時(shí)的樣式填充色為藍(lán)色（#0052D9）。

預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面 輸入框中可以看到提示文，圖標(biāo)，填充色，輸入密碼時(shí)密碼會(huì)被隱藏。

07 郵箱輸入框元件

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

1.復(fù)制帶圖標(biāo)輸入框元件，并將用戶icon，替換成郵箱樣式icon，提示文本改成請(qǐng)輸入郵箱。

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

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

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

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

創(chuàng)建交互

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

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

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

添加設(shè)置文本，設(shè)置輸入提示1插入一個(gè)變量。

選擇元件 This 變量

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

依次補(bǔ)充需要提示2，提示3的郵箱。

在添加一個(gè)動(dòng)作設(shè)置選中 郵箱icon 為“真”。

情形2：否則 如果 元件文字長(zhǎng)度于 當(dāng)前 ==”0”改為否則 如果 文字于1==“1”。

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

設(shè)置選中郵箱icon選中為“真”。

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

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

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

5.隱藏輔助矩形框1

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

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

雙擊郵箱icon 選項(xiàng)，在交互窗格，交互樣式中添加元件選中時(shí) 填充為藍(lán)色（#0052D9）。

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

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

2.設(shè)置輸入框 文本 值[[This.text]]

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

4.依次設(shè)置 輸入提示2、輸入提示3。

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

預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面 輸入框中可以看到提示文，圖標(biāo)，填充色，輸入郵箱會(huì)有郵箱提示選擇項(xiàng)。

08 字?jǐn)?shù)限制輸入框元件

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

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

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

3.將文本輸入框和字?jǐn)?shù)提示矩形對(duì)齊。

創(chuàng)建交互

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

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

添加局部變量，LVAR1=元件 文字 當(dāng)前

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

2.選中文本輸入框，在交互窗格，文本屬性窗格中，點(diǎn)擊顯示全部，最大長(zhǎng)度設(shè)置為15。

預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面 輸入框中輸入文字到達(dá)上限是無(wú)法繼續(xù)輸入。

預(yù)覽地址：https://3kn850.axshare.com

OK，這期內(nèi)容到這里就結(jié)束了。