我們平時註冊或者登錄時，輸入密碼的時候，通常都會有密碼的可見與不可見切換設置，看起來簡單又常見的交互效果，做起來卻沒有想象中那麼簡單，我們一起來看看怎麼做吧~
國際慣例，看了效果圖再說哈哈
起初，密碼可見，點擊不可見的眼睛按鈕，密碼轉為不可見（現實操作中，一般都是由密碼不可見切換到可見，方法都是一樣的，只是創建面板狀態時，把不可見放在首位就可以了。）
教程來襲
（1）創建一個動態面板。
（2）創建動態面板的2個狀態並進行編輯。
（3）創建密碼不可見狀態的基本元件：文本框以及密碼可見的眼睛按鈕，並對文本框進行設置。
（4）創建密碼可見狀態的基本元件：文本框以及密碼不可見按鈕，選擇文本框類型為text以及對文本框進行命名。
（5）對密碼可見按鈕進行交互設計，同時設置hide文本框中的文本內容與unhide文本框的相同：點擊密碼可見按鈕動態面板轉到密碼可見狀態；hide文本內容=unhide文本內容。
（6）對密碼不可見按鈕進行交互設計，同時設置unhide文本框中的文本內容與hide文本框的相同：點擊密碼不可見按鈕動態面板轉到密碼不可見狀態；unhide文本內容=hide文本內容。
（7）現在已經設置好了按鈕交互，兩文本框的內容也設置相同了，點擊預覽來測試吧，是不是做成功了？
希望你可以為你自己感到驕傲啦~~
題圖來自Unsplash，基於CC0協議
分享到:
閱讀更多 人人都是產品經理 的文章
