Axure小元件(一)獲取驗(yàn)證碼

4 評(píng)論 5306 瀏覽 22 收藏 5 分鐘

這個(gè)控件是我們?cè)谄綍r(shí)寫原型時(shí)經(jīng)常用到的,希望能對(duì)小白有點(diǎn)幫助(本人菜鳥),高端人士請(qǐng)繞過。

一、創(chuàng)建一個(gè)自己的元件庫

創(chuàng)建自己的元件庫,在今后使用這些控件的時(shí)候就不需要再去做了,直接拿來使用就行了:

  1. 點(diǎn)擊元件庫旁的“三”按鈕,顯示如①圖,創(chuàng)建元件庫,輸入任意名稱保存;
  2. 在新出現(xiàn)的頁面中雙擊(新元件1)出現(xiàn)新的編輯界面——可以重命名,可以創(chuàng)建多個(gè)元件,作為你自己的元件庫;
  3. 制作元件以后一定要保存,使用時(shí)會(huì)出現(xiàn)在元件庫菜單中,沒有出現(xiàn)的話點(diǎn)擊“三”刷新或載入元件庫。

以上就是創(chuàng)建一個(gè)自己的元件庫的過程啦 ,自己做的小控件都可以保存在里面;下面我們開始制作小元件。

二、驗(yàn)證碼倒計(jì)時(shí)

在視窗左上角找到項(xiàng)目,先設(shè)置一個(gè)全局變量,名稱隨意比如clock,確定保存。

新建一個(gè)空白的動(dòng)態(tài)面板(計(jì)時(shí)器),為它設(shè)置兩個(gè)狀態(tài)State1、State2,并隱藏動(dòng)態(tài)面板。

新建一個(gè)按鈕獲取驗(yàn)證碼,并為它設(shè)置用例鼠標(biāo)單擊時(shí):

  • 設(shè)置全局變量-設(shè)置變量值:clock=120;
  • 設(shè)置元件-設(shè)置面板狀態(tài):計(jì)時(shí)器=NEXT;向后循環(huán);循環(huán)間隔1000毫秒;如果為了演示速度加快,可以把循環(huán)間隔調(diào)??;據(jù)我測(cè)算,如果和實(shí)際的時(shí)間相等,間隔應(yīng)該是975毫秒(因?yàn)闋顟B(tài)的切換需要消耗時(shí)間);
  • 設(shè)置元件-禁用:當(dāng)前元件=禁用;使用交互樣式設(shè)置元件禁用時(shí)的樣式。

為動(dòng)態(tài)面板計(jì)時(shí)器設(shè)置用例狀態(tài)改變時(shí):

case1

①添加條件=“值”[[clock]]>=2;

其中[[clock]]為“fx”中“插入變量或函數(shù)”時(shí)選擇全局變量clock;

②設(shè)置??全局變量-設(shè)置變量值:clock=[[clock-1]];

其中[[clock-1]]為“fx”中“插入變量或函數(shù)”時(shí)選擇全局變量clock,并在”[[ ]]”內(nèi)輸入“-1”;

③設(shè)置??元件-設(shè)置文本:當(dāng)前元件(值)=[[clock]]秒再次獲??;

其中[[clock]]為“fx”中“插入變量或函數(shù)”時(shí)選擇全局變量clock。

case2

①設(shè)置 元件-設(shè)置面板狀態(tài):計(jì)時(shí)器=停止循環(huán);

②設(shè)置??元件-設(shè)置文本:獲取驗(yàn)證碼(值)=重新獲取驗(yàn)證碼;

③設(shè)置??元件-啟用:當(dāng)前元件=啟用。

這樣就是一個(gè)完整的獲取驗(yàn)證碼原型啦!

原型獲取:這個(gè)示例包括手機(jī)號(hào)的位數(shù)、驗(yàn)證碼位數(shù)等判斷;

鏈接: https://pan.baidu.com/s/1nOT2-xDMIGvCsiYfbXKNPg

提取碼: ghw9

歡迎大家交流!

 

本文由 @戎馬嘯西風(fēng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 學(xué)習(xí)了 感謝

    回復(fù)
  2. 鏈接失效 ??

    來自臺(tái)灣 回復(fù)
    1. 我試了,可以的呀 ??

      來自廣東 回復(fù)
    2. 我把VPN關(guān)了 可以了 哈哈哈

      來自北京 回復(fù)