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

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

思路：

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

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

3.      實現動態面板與兩張圖片的交互。

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

***步：

需要一個矩形來放動態面板、圖像按鈕。添加相應元件如圖：

第二步：

為動態面板添加狀態：

狀態1：隱藏密碼字符

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

狀態2：顯示密碼字符

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

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

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

1.通過單擊切換圖片的選中狀態；

2.圖片選中狀態改變時，切換為另一張圖片：

第四步：添加交互

當圖片按鈕的選中狀態改變時，切換動態面板狀態：

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

先為hide文本框添加：

同理，為show文本框添加：

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

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