很多APP或者網(wǎng)站都支持手機(jī)號(hào)登錄，手機(jī)號(hào)登錄一定會(huì)涉及短信驗(yàn)證的獲取。獲取的過(guò)程有時(shí)間有效性，一般默認(rèn)為60s，如果用戶在時(shí)效內(nèi)未接收到驗(yàn)證碼，可再次點(diǎn)擊“獲取驗(yàn)證碼”來(lái)獲取。今天，我們就來(lái)學(xué)習(xí)用Axure實(shí)現(xiàn)這種效果。

?前期準(zhǔn)備

• 軟件：Axure 9.0
• 硬件：Windows/Mac電腦
• 邏輯梳理

教程

1. 繪制手機(jī)號(hào)賬戶登錄頁(yè)面，如下圖

• 找一個(gè)手機(jī)殼的元件庫(kù)，或用矩形設(shè)置成標(biāo)準(zhǔn)手機(jī)尺寸。
• 制作內(nèi)容頁(yè)面，如左側(cè)圖所示。
• 在手機(jī)號(hào)輸入框中設(shè)置提示文字“請(qǐng)輸入手機(jī)號(hào)”。
• 在驗(yàn)證碼輸入框中設(shè)置提示文字“請(qǐng)輸入驗(yàn)證碼”。

2. 創(chuàng)建動(dòng)態(tài)面板，建立至少2個(gè)以上的狀態(tài)

動(dòng)態(tài)面板的作用主要用于切換狀態(tài)時(shí)的倒計(jì)時(shí)效果，簡(jiǎn)單的說(shuō)，點(diǎn)擊獲取后60秒到0秒的文案展示都是靠動(dòng)態(tài)面板實(shí)現(xiàn)的。這里留一個(gè)小思考，為什么要建立至少2個(gè)狀態(tài)呢？

3. 添加獲取驗(yàn)證碼按鈕交互效果

給獲取驗(yàn)證碼按鈕起一個(gè)名字，并設(shè)置禁用時(shí)樣式。

設(shè)置單擊時(shí)交互。首先，設(shè)置之前建好的動(dòng)態(tài)面板狀態(tài)，設(shè)置切換狀態(tài)下一項(xiàng)時(shí)能夠間隔向后循環(huán)。保證獲取驗(yàn)證后的等待時(shí)間變化。（動(dòng)態(tài)面板之前已起好名字為“切換狀態(tài)”）

在單擊時(shí)交互效果中添加動(dòng)作，設(shè)置一個(gè)全局變量x。并設(shè)置x的值為60。

4. 設(shè)置動(dòng)態(tài)面板狀態(tài)改變時(shí)交互動(dòng)作

情形1 ：全局變量x的值不等于0時(shí)，即大于0時(shí)設(shè)置讓x的值每次減一。實(shí)現(xiàn)點(diǎn)擊后變?yōu)?0秒倒計(jì)時(shí)，變?yōu)?之前禁止重復(fù)點(diǎn)擊獲取驗(yàn)證的效果。

情形2：全局變量x的值等于0時(shí)，實(shí)現(xiàn)可重新點(diǎn)擊獲取驗(yàn)證碼效果。

驗(yàn)證效果

OK，最終達(dá)到我們想要的效果，當(dāng)我們輸入手機(jī)號(hào)以后點(diǎn)擊獲取驗(yàn)證碼后，按鈕變?yōu)榻脿顟B(tài)，同時(shí)文案進(jìn)行倒計(jì)時(shí)展示，當(dāng)?shù)褂?jì)時(shí)為0時(shí)，按鈕變?yōu)閱⒂脿顟B(tài)。

結(jié)語(yǔ)

還是那句話，希望大家想一下。想要完成倒計(jì)時(shí)效果，除了我為大家講解的這種，是否還有其他方法可以實(shí)現(xiàn)呢？

Axure作為產(chǎn)品經(jīng)理的必備工具，不光是幫我們實(shí)現(xiàn)了交互效果，更多的是要學(xué)會(huì)它實(shí)現(xiàn)效果的思路，我希望大家能在我的文章中找到自己的進(jìn)步。感謝大家觀看～

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

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