如何用AXURE做出密碼可見/隱藏的交互效果？本文將用實(shí)例為大家作出解答。

很多時(shí)候，我們發(fā)現(xiàn)一些網(wǎng)站的登錄頁(yè)面，密碼輸入框欄目右側(cè)，有一只可點(diǎn)擊的眼睛開關(guān)，或者是滑動(dòng)開關(guān)，點(diǎn)擊會(huì)密碼明文和隱藏相互切換，如何在AXURE中實(shí)現(xiàn)？

第一步

1. 從AXURE軟件的工具欄拖出一個(gè)輸入框，并生成動(dòng)態(tài)面板；

2. 將動(dòng)態(tài)面板命名為密碼輸入框；

3. 在動(dòng)態(tài)面板中復(fù)制一個(gè)輸入框，兩個(gè)輸入框分別命名為可見和隱藏，如下圖；

4. 可見輸入框格式設(shè)置為數(shù)字，隱藏輸入框格式設(shè)置為密碼；

第二步

進(jìn)入可見-輸入框；

設(shè)置文本改變時(shí)，把輸入值賦值給隱藏輸入框；

文本改變時(shí)，設(shè)置條件如下：

同理，隱藏輸入框文本改變時(shí)，把值賦值給可見輸入框元件：

賦值操作：

第三步

設(shè)置眼睛動(dòng)態(tài)面板；

分別對(duì)應(yīng)睜眼和閉眼圖標(biāo)。

https://image.woshipm.com/wp-files/2019/01/N4hN4wXnDtvw0iLHRZIF.png

并設(shè)置條件，鼠標(biāo)點(diǎn)擊眼睛按鈕時(shí)，切換到下一個(gè)面板，如圖：

并在眼睛面板狀態(tài)改變時(shí)，分別設(shè)置輸入框?qū)?yīng)的面板；

• 當(dāng)眼睛面板為睜眼時(shí)，設(shè)置輸入框面板為可見；
• 當(dāng)眼睛面板為閉眼時(shí)，設(shè)置輸入框面板為隱藏；

好了，收工，當(dāng)我們輸入密碼時(shí)，點(diǎn)擊右側(cè)的眼睛圖標(biāo)，明文和密碼相互切換哈~

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

題圖來(lái)自Unsplash，基于CC0協(xié)議