編輯導語：如何用Axure制作登錄頁面常見的密碼輸入框，實現輸入框顔色跟随光标的鍵入鍵出發生變化，以及查看密碼呢？本文作者對此作出了分析，一起來看一下吧。

什麼是密碼輸入框？

當然是用于注冊或登錄時輸入密碼的文本框啦，同時也可以點擊按鈕反複查看自己已輸入的密碼。

那在Axure如何制作呢？

本人學習後實現的效果如下：

1、輸入框顔色跟着光标鍵入鍵出變化顔色；鍵入，文本框變綠，光标離開，文本框變灰；

2、默認狀态下，輸入任何信息都會變成*；點擊“眼睛”按鈕，輸入的信息會顯示出來；

3、再點擊“眼睛”按鈕，信息再變為*，此時光标再次鍵入框中，輸入框顔色也變灰

實現上述的效果有什麼價值呢？

一是通過輸入框的顔色變化，讓用戶感知到輸入狀态；

二是提供“眼睛”按鈕讓用戶在輸入的過程中随時查看自己錄入的密碼，以免遺忘

三是在點擊“眼睛”按鈕的同時，将光标鍵入輸入框，方便用戶的繼續輸入；

這些都帶來了用戶輸入感受的提升。

詳細的實現步驟如下：

（1）左側放置矩形，文本為“密碼框”；右側需要使用動态面闆（寬204，高30）；雙擊動态面闆後新增兩個面闆狀态并分别命名：密碼隐和密碼顯。

（2）雙擊“密碼隐”動态面闆，裡面拖進輸入框（長204，寬30）、矩形框（X為3，Y為2，寬度200，高度26）、圖标（X為178，Y為12，寬19，高12）3個元件

（3）輸入框：類型是密碼；提示文字：密碼；“隐藏提示觸發”選擇輸入的情況下，鍵入框中時，“密碼”提示文字是不會消失的，如果設置為“獲取焦點”，則光标鍵入文本框中時，“密碼”二字會消失（建議“獲取焦點”，效果可回頭看上面的GIF）；

（4）對于輸入框，需要增加交互事件，實現在“密碼隐”頁面輸入的信息也傳遞到“密碼顯”頁面，否則點擊“眼睛”按鈕切換顯示狀态時，看不到自己之前輸入的信息了。實現方式如下圖：

（5）因為輸入框隐藏了邊框，所以在獲取焦點和失去焦點這兩個事件裡改變矩形框的選中和非選中的狀态，在矩形框上展示鍵入和非鍵入的輸入狀态。如下圖：

（6）矩形框：屬性裡的交互樣式也需要調整一下，否則在上面的選中狀态發生變化後，矩形框也不會有任何變化；需要将線段顔色改為#1EC695，線型為solid

（7）新增“眼睛”圖标：默認元件庫裡的Icons，搜索eye slash，包括交互事件的實現方式如下圖：

（8）“密碼顯”頁面，同樣有輸入框、矩形框、圖标，不同之處就在于輸入框類型不是密碼了，而是text，因為此時輸入是需要直接顯示出來的，而不是像密碼一樣隐藏起來；另外圖标不能使用eye slash，而是使用eye，其他都是一樣的。

通過上面的步驟，就可以制作出細節滿滿的密碼輸入框高清Axure原型啦。

關注細節，關注用戶體驗，peace~

本文由 @1526 原創發布于人人都是産品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部