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

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

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

一、元件準(zhǔn)備

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

二、元件布局與美化

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

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

按鈕：說明按鈕功能、按鈕顏色與大小、圓角大小。

最終布局效果：

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

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

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

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

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

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

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

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

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

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

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

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

五、最終效果

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

最終效果：

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

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

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