Axure 9 教程:如何制作驗證碼倒計時,并重新獲取交互效果?

0 評論 2101 瀏覽 11 收藏 6 分鐘

登錄功能在互聯網產品中基本上是一個必備的功能,形式也多種多樣,其中較為常見的是手機號驗證碼登錄,那我們如何制作高保真的交互效果呢?本篇文章筆者將以Axure9為工具給大家分享如何去制作這個效果。

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

我們仔細思考一下獲取驗證碼到重新獲取的流程:

一、元件準備

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

二、元件布局與美化

準備好元件之后,我們接下來將元件進行布局以及細節的美化。

文本框:進行輸入內容提示(手機號、驗證碼)、位數限制(11位、6位)、邊框美化。

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

最終布局效果:

三、全局變量設置

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

四、交互效果設置

在設置交互效果之前,我們再進一步思考一下,點擊獲取驗證碼這個動作之后,元件有哪些變化。我們可以了解到,點擊之后,獲取驗證碼的按鈕文案變為了倒計時+后重新獲取,計時結束后文案變為重新獲取且可以再次點擊獲取。

這一過程我們可以對應拆分到交互設置上。

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

文案變化為倒計時文案:點擊后對按鈕進行「設置文本」。

倒計時:設置等待時間為1000ms,且設置變量值captcha-1,之后對于這個動作進行循環觸發。

在我們思考第二階段如何去做時,我們需要了解到,captcha值最終會變為0,當為0時繼續觸發執行變量值-1時,會變為負值,這時恰好是變為重新獲取的時機,即為進入第二階段,故我們在第一階段和第二階段應該分別假如情形進行判斷,則第一階段完整的交互設置如下:

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

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

再次點擊可倒計時,重置倒計時:設置變量值captcha為60。

五、最終效果

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

最終效果:

謝謝大家閱讀,我是把產品當做刻章去打磨的偽文青,歡迎指正和訂閱!

 

本文由 @偽文青 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!