登錄功能在互聯(lián)網(wǎng)產(chǎn)品中基本上是一個(gè)必備的功能，形式也多種多樣，其中較為常見(jiàn)的是手機(jī)號(hào)驗(yàn)證碼登錄，那我們?nèi)绾沃谱鞲弑Ｕ娴慕换バЧ?？本篇文章筆者將以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é)議