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

編輯導讀：移動端產(chǎn)品經(jīng)理經(jīng)常會需要繪制APP各頁面原型圖，那么在繪制頁面原型圖時，我們需要注意什么？作者與大家分享了一個使用Axure制作實用的驗證碼登錄頁面原型，快來一起看一下吧。

一、原型需求

點擊獲取驗證碼按鈕時手機頂端定時彈出隨機驗證碼

點擊獲取驗證碼按鈕后，按鈕顯示倒計時，倒計時自60開始，每秒向后-1，倒計時為0時可手動重新觸發(fā)

彈出驗證碼彈窗后，可點擊復制驗證碼按鈕，點擊后驗證碼自動按順序加載至手機頁面驗證碼文本框內，完成加載后跳轉至首頁

二、效果預覽

原型演示地址：https://gduqir.axshare.com

三、制作準備

手動制作或挑選使用手機背景。以下為小編手動繪制手機背景：

繪制任意跳轉首頁面，以下為小編手動繪制首頁：

完成準備后將首頁置于空白頁下方。

四、制作流程

選擇兩個文本標簽，輸入“輸入驗證碼”、“驗證碼已發(fā)送至手機+86? 185????9905”等文字，可根據(jù)需要調整文字內容、大小，布局，色彩等。

文字下方放置6個大小相同的文本框及橫線（文本框需分別命名，以便交互時區(qū)分）。示例如下：

制作一個驗證碼彈窗，需注意驗證碼6個數(shù)字部分需加不同矩形框且分別命名（以便交互時區(qū)分及隨機抽取數(shù)字使用）。示例如下：

給驗證碼彈窗“復制驗證碼”按鈕制作交互（文1等名稱是手機背景頁面六個文本框的命名，該步驟是為了將驗證碼彈窗內數(shù)字驗證碼獲取至手機頁面文本框內，等待是為了有延遲效果，設置頁面狀態(tài)是為了六個文本框驗證碼都加載完成后將手機首頁置頂顯示），交互如下：

設置全局變量random_str，該步驟是為了等會驗證碼彈窗自動抽取數(shù)字。

點擊驗證碼彈窗，給6個驗證碼框增加交互動作，交互動作含義為在頁面載入時random_str是0123456789，然后6個驗證碼文本框分別抽取其中1位數(shù)字。抽取的變量為[[random_str.substr(random_str.length*Math.random(),1)]]。

選擇一個按鈕輸入“獲取驗證碼”文字調整大小后，將模塊設置為動態(tài)面板，在動態(tài)面板內增加一個state2，將按鈕復制粘貼至state2并修改文字為60（本文中state頁面名稱錯誤，理解用意即可）。

在“獲取驗證碼”按鈕設置交互動作，該交互是為了點擊獲取驗證碼按鈕后彈出驗證碼彈窗，并切換動態(tài)面板至倒計時頁面，交互如下：

在“60”state頁設置交互動作，該交互動作是為了讓60每秒向后倒計時-1，=0時文本變?yōu)橹匦芦@取，點擊重新獲取后文字變60繼續(xù)循環(huán)。

載入時情形1為：

載入時情形2為：

單擊時情形1為：

完成以上操作后，將手機首頁輸入驗證碼文本框框線取消，即可完成操作，快來一起試試吧！

本文由 @哪有那么多計較 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉載。

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