Axure 9 教程:如何制作驗(yàn)證碼倒計(jì)時(shí),并重新獲取交互效果?

0 評(píng)論 6029 瀏覽 15 收藏 6 分鐘

登錄功能在互聯(lián)網(wǎng)產(chǎn)品中基本上是一個(gè)必備的功能,形式也多種多樣,其中較為常見(jiàn)的是手機(jī)號(hào)驗(yàn)證碼登錄,那我們?nèi)绾沃谱鞲弑U娴慕换バЧ??本篇文章筆者將以Axure9為工具給大家分享如何去制作這個(gè)效果。

首先,我們還是要明確一個(gè)思路,當(dāng)我們?cè)谥谱魅魏我粋€(gè)交互效果時(shí),都需要對(duì)這個(gè)交互的步驟進(jìn)行拆分,然后分別把對(duì)應(yīng)步驟代入到Axure的交互設(shè)置中,是否可以用某些動(dòng)作進(jìn)行一一實(shí)現(xiàn)。這一思路大家可以參考之前設(shè)計(jì)知乎問(wèn)答卡片的文章-Axure高保真:如何在原型圖上實(shí)現(xiàn)「知乎」問(wèn)答卡片交互效果?

我們仔細(xì)思考一下獲取驗(yàn)證碼到重新獲取的流程:

一、元件準(zhǔn)備

根據(jù)這個(gè)流程,我們可以很清楚地知道,我們需要的元件有文本輸入框、按鈕以及全局變量的設(shè)置(一般涉及到數(shù)據(jù)動(dòng)態(tài)變化的設(shè)計(jì)效果,我們都可以考慮是否需要全局變量)。

二、元件布局與美化

準(zhǔn)備好元件之后,我們接下來(lái)將元件進(jìn)行布局以及細(xì)節(jié)的美化。

文本框:進(jìn)行輸入內(nèi)容提示(手機(jī)號(hào)、驗(yàn)證碼)、位數(shù)限制(11位、6位)、邊框美化。

按鈕:說(shuō)明按鈕功能、按鈕顏色與大小、圓角大小。

最終布局效果:

三、全局變量設(shè)置

我們?cè)贏xure9的最上面找到「項(xiàng)目」-「全局變量設(shè)置」,并點(diǎn)擊添加新的變量captcha(命名隨意),默認(rèn)值設(shè)置為60。

四、交互效果設(shè)置

在設(shè)置交互效果之前,我們?cè)龠M(jìn)一步思考一下,點(diǎn)擊獲取驗(yàn)證碼這個(gè)動(dòng)作之后,元件有哪些變化。我們可以了解到,點(diǎn)擊之后,獲取驗(yàn)證碼的按鈕文案變?yōu)榱说褂?jì)時(shí)+后重新獲取,計(jì)時(shí)結(jié)束后文案變?yōu)橹匦芦@取且可以再次點(diǎn)擊獲取。

這一過(guò)程我們可以對(duì)應(yīng)拆分到交互設(shè)置上。

第一階段:點(diǎn)擊進(jìn)入倒計(jì)時(shí)

文案變化為倒計(jì)時(shí)文案:點(diǎn)擊后對(duì)按鈕進(jìn)行「設(shè)置文本」。

倒計(jì)時(shí):設(shè)置等待時(shí)間為1000ms,且設(shè)置變量值captcha-1,之后對(duì)于這個(gè)動(dòng)作進(jìn)行循環(huán)觸發(fā)。

在我們思考第二階段如何去做時(shí),我們需要了解到,captcha值最終會(huì)變?yōu)?,當(dāng)為0時(shí)繼續(xù)觸發(fā)執(zhí)行變量值-1時(shí),會(huì)變?yōu)樨?fù)值,這時(shí)恰好是變?yōu)橹匦芦@取的時(shí)機(jī),即為進(jìn)入第二階段,故我們?cè)诘谝浑A段和第二階段應(yīng)該分別假如情形進(jìn)行判斷,則第一階段完整的交互設(shè)置如下:

第二階段:重新獲取并可再次點(diǎn)擊倒計(jì)時(shí)

文案再變化為重新獲?。狐c(diǎn)擊后對(duì)按鈕進(jìn)行「設(shè)置文本」。

再次點(diǎn)擊可倒計(jì)時(shí),重置倒計(jì)時(shí):設(shè)置變量值captcha為60。

五、最終效果

設(shè)置完所有交互效果之后,我們可以在每個(gè)元件上添加說(shuō)明,方便與開(kāi)發(fā)人員進(jìn)行溝通。

最終效果:

謝謝大家閱讀,我是把產(chǎn)品當(dāng)做刻章去打磨的偽文青,歡迎指正和訂閱!

 

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!