Axure小元件(一)獲取驗(yàn)證碼
這個(gè)控件是我們?cè)谄綍r(shí)寫原型時(shí)經(jīng)常用到的,希望能對(duì)小白有點(diǎn)幫助(本人菜鳥),高端人士請(qǐng)繞過。
一、創(chuàng)建一個(gè)自己的元件庫
創(chuàng)建自己的元件庫,在今后使用這些控件的時(shí)候就不需要再去做了,直接拿來使用就行了:
- 點(diǎn)擊元件庫旁的“三”按鈕,顯示如①圖,創(chuàng)建元件庫,輸入任意名稱保存;
- 在新出現(xiàn)的頁面中雙擊(新元件1)出現(xiàn)新的編輯界面——可以重命名,可以創(chuàng)建多個(gè)元件,作為你自己的元件庫;
- 制作元件以后一定要保存,使用時(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é)議。
學(xué)習(xí)了 感謝
鏈接失效 ??
我試了,可以的呀 ??
我把VPN關(guān)了 可以了 哈哈哈