入行產(chǎn)品已經(jīng)有好些日子了，打算從產(chǎn)品壹佰的小透明轉(zhuǎn)變一下，將工作學(xué)習(xí)中的知識心得總結(jié)出來，既是一種分享，也是自己在兵荒馬亂的工作中的梳理和記錄。

今天想分享一下用Axure制作可以隱藏密碼文本的輸入框，制作效果如下圖：

思路：

1.      首先需要一個輸入框，但是Axure的文本框并不能實現(xiàn)對密碼的隱藏。所以，我們需要一個動態(tài)面板，面板的狀態(tài)1是一個現(xiàn)實密碼字符的文本框，面板2的狀態(tài)是隱藏密碼字符的密碼框。

2.      需要兩張圖片，表示顯示/隱藏密碼字符。這兩張圖片通過單擊進(jìn)行切換。

3.      實現(xiàn)動態(tài)面板與兩張圖片的交互。

思路有了，那么下面就開始做吧！

***步：

需要一個矩形來放動態(tài)面板、圖像按鈕。添加相應(yīng)元件如圖：

第二步：

為動態(tài)面板添加狀態(tài)：

狀態(tài)1：隱藏密碼字符

首先添加一個文本框，添加屬性如下：

狀態(tài)2：顯示密碼字符

再添加一個文本框元件，添加屬性如下：

同時我們需要取消兩個文本框的填充顏色，否則與矩形容器的顏色會不一樣。

第三步：制作圖片點擊切換效果

1.通過單擊切換圖片的選中狀態(tài)；

2.圖片選中狀態(tài)改變時，切換為另一張圖片：

第四步：添加交互

當(dāng)圖片按鈕的選中狀態(tài)改變時，切換動態(tài)面板狀態(tài)：

另外，還需要將動態(tài)面板兩個狀態(tài)中的輸入字符同步：

先為hide文本框添加：

同理，為show文本框添加：

到這里，我們就完成這個原型的制作啦！

在早期的時候，密碼框的設(shè)計習(xí)慣默認(rèn)為隱藏密碼字符。但是相信你們跟我一樣都有同感：大多數(shù)情況下沒有人站在背后偷看你的密碼，隱藏字符后反而為自己帶來不便。所以，這里我默認(rèn)是顯示密碼字符，當(dāng)有需要的時候，點擊圖片按鈕就可以切換到隱藏字符按鈕啦！