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

一、原型需求

點(diǎn)擊獲取驗(yàn)證碼按鈕時(shí)手機(jī)頂端定時(shí)彈出隨機(jī)驗(yàn)證碼

點(diǎn)擊獲取驗(yàn)證碼按鈕后，按鈕顯示倒計(jì)時(shí)，倒計(jì)時(shí)自60開(kāi)始，每秒向后-1，倒計(jì)時(shí)為0時(shí)可手動(dòng)重新觸發(fā)

彈出驗(yàn)證碼彈窗后，可點(diǎn)擊復(fù)制驗(yàn)證碼按鈕，點(diǎn)擊后驗(yàn)證碼自動(dòng)按順序加載至手機(jī)頁(yè)面驗(yàn)證碼文本框內(nèi)，完成加載后跳轉(zhuǎn)至首頁(yè)

二、效果預(yù)覽

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

三、制作準(zhǔn)備

手動(dòng)制作或挑選使用手機(jī)背景。以下為小編手動(dòng)繪制手機(jī)背景：

繪制任意跳轉(zhuǎn)首頁(yè)面，以下為小編手動(dòng)繪制首頁(yè)：

完成準(zhǔn)備后將首頁(yè)置于空白頁(yè)下方。

四、制作流程

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

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

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

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

設(shè)置全局變量random_str，該步驟是為了等會(huì)驗(yàn)證碼彈窗自動(dòng)抽取數(shù)字。

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

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

在“獲取驗(yàn)證碼”按鈕設(shè)置交互動(dòng)作，該交互是為了點(diǎn)擊獲取驗(yàn)證碼按鈕后彈出驗(yàn)證碼彈窗，并切換動(dòng)態(tài)面板至倒計(jì)時(shí)頁(yè)面，交互如下：

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

載入時(shí)情形1為：

載入時(shí)情形2為：

單擊時(shí)情形1為：

完成以上操作后，將手機(jī)首頁(yè)輸入驗(yàn)證碼文本框框線取消，即可完成操作，快來(lái)一起試試吧！

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

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