如何用Axure做一個清清爽爽的「密碼輸入框」?

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

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

思路:

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

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

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

思路有了,那么下面就開始做吧!

第一步:

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

第二步:

為動態面板添加狀態:

狀態1:隱藏密碼字符

首先添加一個文本框,添加屬性如下:

狀態2:顯示密碼字符

再添加一個文本框元件,添加屬性如下:

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

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

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

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

第四步:添加交互

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

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

先為hide文本框添加:

同理,為show文本框添加:

到這里,我們就完成這個原型的制作啦!

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

下載鏈接: https://pan.baidu.com/s/1kVzJJUJ 密碼: vurr

文/明明

贊 (0) 評論 分享 ()

福彩30选5