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

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

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

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

一、元件準(zhǔn)備

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

二、元件布局與美化

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

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

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

最終布局效果：

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

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

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

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

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

第一階段：點擊進入倒計時

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

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

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

第二階段：重新獲取并可再次點擊倒計時

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

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

五、最終效果

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

最終效果：

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

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

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