不論是移動端還是PC端的登錄，目前大多都是可以切換顯示與隱藏密碼框中所輸入的內(nèi)容，以保證用戶在登錄報錯的時候，可以確認(rèn)自己所輸入面的正確性，修正后再次進行登錄。
Axure RP升級到9之后，元件及交互的使用與之前的RP 8相比，都有了一些不同，借鑒了小樓老師Axure RP8.0教程后，基于Axure RP 9來簡單聊一下如何用借助態(tài)面板實現(xiàn)密碼輸入框字符顯示/隱藏切換。
第一步，也先來捋一下，我們用到的元件（圖1）
1、隱藏密碼icon（非SVG圖片，而是導(dǎo)入的外部元件）
2、顯示密碼icon（非SVG圖片，而是導(dǎo)入的外部元件）
3、動態(tài)面板，使用兩個狀態(tài)，兩個狀態(tài)中分別放入不同類型的文本框，在同一個區(qū)域，切換不同的元件類型
第二步，不同元件的樣式及交互設(shè)置
1、隱藏密碼icon（圖2）
想要實現(xiàn)的需求是，點擊“隱藏密碼icon”后，出現(xiàn)的是“顯示密碼icon”，因此選擇為該元件添加【單擊時】的【顯示/隱藏】事件，單擊時隱藏當(dāng)前，顯示另一個
2、顯示密碼icon（圖3）
邏輯同1，只是要反向思考，因為我們這次想實現(xiàn)的是：點擊“顯示密碼icon”后，出現(xiàn)的是“隱藏密碼icon”，同樣為該元件添加【單擊時】的【顯示/隱藏】事件
3、動態(tài)面板-密碼框-元件樣式設(shè)置
3.1 State 1-隱藏密碼文本框（圖4）
3.2 State 2-顯示密碼文本框（圖5）
3.3 兩個State下的文本框邊框都需要進行隱藏（圖6）
4、動態(tài)面板-密碼框-元件交互設(shè)置
我們想要實現(xiàn)的一直都是：初始輸入時密碼為隱藏狀態(tài)，點擊“隱藏密碼icon”后，出現(xiàn)“顯示密碼icon”，且密碼框內(nèi)的密碼變?yōu)榭梢姞顟B(tài)。就需要為動態(tài)面板的文本框添加【文本改變時】的【設(shè)置文本】事件，使其中一個文本框的文本改變時，另一個文本框的文本也能隨之同步。
4.1 State 1-隱藏密碼文本框（圖7）
4.1 State 1-顯示密碼文本框（圖8）
第三步，確認(rèn)最終交互設(shè)置
動態(tài)面板-文本框的交互改變，也是基于“顯示密碼icon”與“隱藏密碼icon”的【單擊時】事件，因此將動態(tài)面板的【文本改變時】的【設(shè)置文本】事件，添加到“顯示密碼icon”與“隱藏密碼icon”的【單擊時】事件內(nèi)。
最終交互設(shè)置如下（圖8）：
通過以上步驟，我們就成功的在Axure RP9中借助動態(tài)面板實現(xiàn)密碼輸入框字符顯示/隱藏切換交互。
最近剛升級使用Axure RP9 ，許多還在摸索中，以上如有不足之處，歡迎評論區(qū)批評指正，謝謝。
參考資料：
