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

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

第一步

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

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

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

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

第二步

進入可見-輸入框；

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

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

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

賦值操作：

第三步

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

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

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

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

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

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

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

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

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