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

作者之前分享了《Axure教程｜簡(jiǎn)單但看起來(lái)厲害的微信原型》，整體制作比較粗糙，比如：鎖屏無(wú)需密碼直接解鎖。今天將補(bǔ)充一下上次的密碼解鎖部分，之所以單獨(dú)將這個(gè)部分拿出來(lái)，是因?yàn)殡m然只是一個(gè)密碼解鎖，但是引入了條件判斷以及全局變量?jī)蓚€(gè)點(diǎn)。

上次制作的微信原型傳送門請(qǐng)點(diǎn)擊這里：《Axure教程｜簡(jiǎn)單但看起來(lái)厲害的微信原型》。

本文涉及的邏輯判斷比較適合入門者的水平，基本上都是最基礎(chǔ)的內(nèi)容。相比較上次而言，多出的功能點(diǎn)有邏輯判斷，全局變量?？紤]到上次文章的描述過(guò)于粗略，對(duì)于新人而言很難知道如何操作，本次將會(huì)比較細(xì)致的描述整個(gè)過(guò)程。

一、制作結(jié)果

體驗(yàn)請(qǐng)點(diǎn)擊此處：體驗(yàn)地址

交互說(shuō)明：

1. 鎖屏頁(yè)面可以向右滑動(dòng)從而進(jìn)入密碼驗(yàn)證頁(yè)面；
2. 密碼驗(yàn)證頁(yè)面的密碼有10位數(shù)，因此當(dāng)輸入的數(shù)字大于十位的時(shí)候自動(dòng)返回鎖屏頁(yè)面，此次解鎖失??；
3. 輸入正確密碼1234567890后可以進(jìn)入手機(jī)界面；
4. 在任何頁(yè)面點(diǎn)擊下方的機(jī)械按鍵都可以返回鎖屏頁(yè)面并進(jìn)行下一次的解鎖操作。

二、制作過(guò)程

1. 將圖片導(dǎo)入axure

如上圖所示，首先將需要的圖片都導(dǎo)入進(jìn)來(lái)，一共導(dǎo)入三個(gè)元件，分別為手機(jī)框、鎖屏頁(yè)面、密碼輸入頁(yè)面。在實(shí)際操作的時(shí)候可以直接把鎖屏頁(yè)面復(fù)制一個(gè)，再更換其圖片，這樣可以很便捷的得到大小完全一致的圖片。

當(dāng)然也可以記住圖片的數(shù)據(jù)進(jìn)行調(diào)整，這樣可以確定圖片的大小以及坐標(biāo)。不過(guò)Axure本身提供有參考線，建議手動(dòng)操作，比較便捷。

2. 鎖屏頁(yè)面切換到密碼輸入頁(yè)面

這是第一個(gè)交互動(dòng)作，設(shè)置的方式很簡(jiǎn)單，如圖所示：將向右拖動(dòng)結(jié)束作為觸發(fā)條件，觸發(fā)的行為是隱藏鎖屏界面且顯示密碼輸入界面并將其置于頂層。

3. 為密碼驗(yàn)證界面增加元件

經(jīng)過(guò)上一步的操作，可以通過(guò)滑屏的方式到達(dá)密碼驗(yàn)證界面。要實(shí)現(xiàn)后面的操作必須加入熱區(qū)以及輸入框，輸入框設(shè)置為透明，顯示方式設(shè)置為密碼之后將其放在輸入密碼的位置。因?yàn)檩斎肟蚴峭该鞯?，所以除非輸入?nèi)容，否則完全不可見(jiàn)。

熱區(qū)則被放置于每一個(gè)可以交互的位置，即0-9這些數(shù)字所在的區(qū)域。返回并沒(méi)有設(shè)置交互，因?yàn)橛袡C(jī)械按鍵的存在。

4. 設(shè)置觸發(fā)行為

這里需要用到全局變量的概念，所謂全局變量就是可以在整個(gè)程序中調(diào)用的變量。而所謂變量就是可以對(duì)其進(jìn)行賦值的量，區(qū)別于常量。

如上圖所示：首先在項(xiàng)目中打開(kāi)全局變量對(duì)話框，設(shè)置一個(gè)全局變量，因?yàn)楸纠袃H僅用到一個(gè)變量，所以不進(jìn)行命名，直接使用默認(rèn)值。

點(diǎn)擊熱區(qū)1，對(duì)其進(jìn)行設(shè)置，首先要明白點(diǎn)擊數(shù)字1的時(shí)候應(yīng)該發(fā)生什么。

顯然，我們想要的結(jié)果就是點(diǎn)擊數(shù)字1之后在輸入框中出現(xiàn)一個(gè)數(shù)字1。因此輸入邏輯如上圖所示，當(dāng)單擊數(shù)字1的時(shí)候，全局變量和1進(jìn)行連接（不是相加，是連接，全局變量默認(rèn)空白，不是默認(rèn)0）并出現(xiàn)在輸入框中。然后將輸入框中的內(nèi)容賦值給全局變量，此時(shí)全局變量本身已經(jīng)發(fā)生了變化。

同理，其它的按鍵都按照這樣的方式進(jìn)行設(shè)置。設(shè)置后的邏輯如下：以按123為例。

• 當(dāng)按1的時(shí)候，顯示1且全局變量變?yōu)?；
• 當(dāng)按2的時(shí)候顯示2，且全局變量變?yōu)?2；
• 當(dāng)按3的時(shí)候顯示3，且全局變量變?yōu)?23。

5. 邏輯判斷

輸入了密碼之后就需要進(jìn)行邏輯判斷了，判斷的方法如下圖所示：

當(dāng)密碼為1234567890的時(shí)候，顯示解鎖成功的頁(yè)面，這一點(diǎn)不難理解。不過(guò)如果密碼不對(duì)呢，顯然也不能夠讓用戶一直輸入下去，應(yīng)該告知用戶已經(jīng)錯(cuò)誤了。本例的做法就是使用邏輯判斷，來(lái)判斷是否已經(jīng)位數(shù)過(guò)多。

判斷的方式如上圖所示：當(dāng)輸入的內(nèi)容大于10000000000的時(shí)候說(shuō)明位數(shù)已經(jīng)超過(guò)了密碼的標(biāo)準(zhǔn)，故而直接告知用戶密碼錯(cuò)誤，告知的方式就是跳回鎖屏界面。

然而到這里并沒(méi)有結(jié)束，如果細(xì)心就會(huì)發(fā)現(xiàn)，現(xiàn)在的全局變量有內(nèi)容，當(dāng)用戶下一次解鎖的時(shí)候?qū)?huì)發(fā)現(xiàn)默認(rèn)密碼框已經(jīng)有很多數(shù)字的問(wèn)題，因此需要加一個(gè)步驟，即全局變量清零。

通過(guò)上圖的方式就可以將全局變量在進(jìn)入鎖屏界面的同時(shí)全部清零。從而保證下一次輸入密碼時(shí)的正確顯示。

6. 返回鍵

為了能夠重復(fù)演示，也為了密碼錯(cuò)誤的時(shí)候可以快速重新輸入，所以設(shè)置了返回鍵。返回鍵的邏輯很簡(jiǎn)單，即此按鍵可以在任何頁(yè)面起作用且直接跳回鎖屏界面。

總結(jié)

本文簡(jiǎn)單的分享了密碼判斷實(shí)例，并對(duì)密碼輸入有誤的情況進(jìn)行了處理。雖然實(shí)例很簡(jiǎn)單，但是所用到的邏輯判斷以及全局變量卻是以后復(fù)雜操作的基礎(chǔ)。掌握這兩點(diǎn)對(duì)于制作更加復(fù)雜的交互原型有著重要的意義。

產(chǎn)品源文件下載地址：點(diǎn)擊此處下載。

#專欄作家#

馬璐，人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注產(chǎn)品設(shè)計(jì)以及用戶體驗(yàn)，力求在技術(shù)一定的情況下將產(chǎn)品做到極致，充分發(fā)揮技術(shù)的潛能。

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

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