本篇文章將會教大家利用Axure RP 9，制作顯示密碼和隱藏密碼的交互效果，enjoy~

前言

本期案例給大家展示的交互內(nèi)容包括：

• 60s倒計時
• 動態(tài)面板的簡單切換
• 輸入正確的密碼的時候登錄成功；否則登錄失敗
• 顯示密碼和隱藏密碼
• 本次教程主要講如何制作顯示密碼和隱藏密碼的交互，其他的效果請大家自信研究，如有需要，請留言

實現(xiàn)效果

點擊小眼睛時候，可以切換是否顯示密碼，點擊登錄的時候可以判斷輸入的賬號密碼是否正確。

60s倒計時/面板切換

密碼顯示與隱藏

實現(xiàn)邏輯

• 密碼顯示和隱藏邏輯：利用兩個輸入框，一個顯示密碼，一個隱藏密碼，點擊小眼睛來回切換來實現(xiàn)密碼的顯示和隱藏。
• 判斷賬號密碼是否正確：點擊登錄，當(dāng)賬號密碼都符合我們一開始的預(yù)設(shè)的時候，登錄成功，否則登錄失敗。

操作步驟

顯示和隱藏密碼：

1. 準(zhǔn)備一個動態(tài)面板，在動態(tài)面板內(nèi)添加兩個狀態(tài)，分別為顯示密碼狀態(tài)和隱藏密碼狀態(tài)。
2. 在顯示密碼狀態(tài)和隱藏密碼狀態(tài)內(nèi)各方一個輸入框，隱藏密碼內(nèi)的輸入框選中后右鍵選擇輸入類型，選擇為密碼，這樣，該輸入框在輸入內(nèi)容的時候就會顯示為小星號*****。
3. 此時開始設(shè)置交互，選中隱藏密碼的輸入框，當(dāng)文字改變時，設(shè)置文字到顯示密碼框，利用簡單的局部變量使顯示密碼框內(nèi)的內(nèi)容和隱藏密碼框內(nèi)的相同。
4. 同樣，選中顯示密碼框設(shè)置交互，讓隱藏密碼框的內(nèi)容同顯示密碼框，3和4兩個步驟就是用于實現(xiàn)不管在隱藏密碼框輸入內(nèi)容還是在顯示密碼框輸入內(nèi)容都能保證兩個輸入框內(nèi)容是同步的。
5. 在Axure自帶的元件庫內(nèi)選擇一個小眼睛的icon，給小眼睛設(shè)置交互，點擊小眼睛，讓動態(tài)面板在顯示密碼和不顯示密碼兩種狀態(tài)內(nèi)切換，就實現(xiàn)了密碼的顯示和隱藏。

判斷密碼正確與否：

在頁面內(nèi)放入一個輸入框取名叫賬號，放置一個按鈕用于登錄，點擊登錄，添加條件，賬號輸入框和密碼輸入框均填寫正確的時候，讓頁面跳轉(zhuǎn)；填寫錯誤的時候Toast提示賬號或密碼錯誤。

結(jié)語

本案例使用Axure RP 9制作，附上原型下載鏈接：

https://pan.baidu.com/s/1-V37JFY1Cualbikhd0M5fQ

作者：王得宇A(yù)IPM，公眾號：他們已經(jīng)在路上了

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

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