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

本篇文章將會(huì)教大家利用Axure RP 9，制作顯示密碼和隱藏密碼的交互效果，enjoy~

前言

本期案例給大家展示的交互內(nèi)容包括：

• 60s倒計(jì)時(shí)
• 動(dòng)態(tài)面板的簡(jiǎn)單切換
• 輸入正確的密碼的時(shí)候登錄成功；否則登錄失敗
• 顯示密碼和隱藏密碼
• 本次教程主要講如何制作顯示密碼和隱藏密碼的交互，其他的效果請(qǐng)大家自信研究，如有需要，請(qǐng)留言

實(shí)現(xiàn)效果

點(diǎn)擊小眼睛時(shí)候，可以切換是否顯示密碼，點(diǎn)擊登錄的時(shí)候可以判斷輸入的賬號(hào)密碼是否正確。

60s倒計(jì)時(shí)/面板切換

密碼顯示與隱藏

實(shí)現(xiàn)邏輯

• 密碼顯示和隱藏邏輯：利用兩個(gè)輸入框，一個(gè)顯示密碼，一個(gè)隱藏密碼，點(diǎn)擊小眼睛來(lái)回切換來(lái)實(shí)現(xiàn)密碼的顯示和隱藏。
• 判斷賬號(hào)密碼是否正確：點(diǎn)擊登錄，當(dāng)賬號(hào)密碼都符合我們一開(kāi)始的預(yù)設(shè)的時(shí)候，登錄成功，否則登錄失敗。

操作步驟

顯示和隱藏密碼：

1. 準(zhǔn)備一個(gè)動(dòng)態(tài)面板，在動(dòng)態(tài)面板內(nèi)添加兩個(gè)狀態(tài)，分別為顯示密碼狀態(tài)和隱藏密碼狀態(tài)。
2. 在顯示密碼狀態(tài)和隱藏密碼狀態(tài)內(nèi)各方一個(gè)輸入框，隱藏密碼內(nèi)的輸入框選中后右鍵選擇輸入類型，選擇為密碼，這樣，該輸入框在輸入內(nèi)容的時(shí)候就會(huì)顯示為小星號(hào)*****。
3. 此時(shí)開(kāi)始設(shè)置交互，選中隱藏密碼的輸入框，當(dāng)文字改變時(shí)，設(shè)置文字到顯示密碼框，利用簡(jiǎn)單的局部變量使顯示密碼框內(nèi)的內(nèi)容和隱藏密碼框內(nèi)的相同。
4. 同樣，選中顯示密碼框設(shè)置交互，讓隱藏密碼框的內(nèi)容同顯示密碼框，3和4兩個(gè)步驟就是用于實(shí)現(xiàn)不管在隱藏密碼框輸入內(nèi)容還是在顯示密碼框輸入內(nèi)容都能保證兩個(gè)輸入框內(nèi)容是同步的。
5. 在Axure自帶的元件庫(kù)內(nèi)選擇一個(gè)小眼睛的icon，給小眼睛設(shè)置交互，點(diǎn)擊小眼睛，讓動(dòng)態(tài)面板在顯示密碼和不顯示密碼兩種狀態(tài)內(nèi)切換，就實(shí)現(xiàn)了密碼的顯示和隱藏。

判斷密碼正確與否：

在頁(yè)面內(nèi)放入一個(gè)輸入框取名叫賬號(hào)，放置一個(gè)按鈕用于登錄，點(diǎn)擊登錄，添加條件，賬號(hào)輸入框和密碼輸入框均填寫(xiě)正確的時(shí)候，讓頁(yè)面跳轉(zhuǎn)；填寫(xiě)錯(cuò)誤的時(shí)候Toast提示賬號(hào)或密碼錯(cuò)誤。

結(jié)語(yǔ)

本案例使用Axure RP 9制作，附上原型下載鏈接：

https://pan.baidu.com/s/1-V37JFY1Cualbikhd0M5fQ

作者：王得宇A(yù)IPM，公眾號(hào)：他們已經(jīng)在路上了

本文由 @王得宇A(yù)IPM 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議