中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：如何用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 協議