這個控件是我們在平時寫原型時經常用到的,希望能對小白有點幫助(本人菜鳥),高端人士請繞過。
一、創建一個自己的元件庫
創建自己的元件庫,在今後使用這些控件的時候就不需要再去做了,直接拿來使用就行了:
- 點擊元件庫旁的“三”按鈕,顯示如①圖,創建元件庫,輸入任意名稱保存;
- 在新出現的頁面中雙擊(新元件1)出現新的編輯界面——可以重命名,可以創建多個元件,作為你自己的元件庫;
- 製作元件以後一定要保存,使用時會出現在元件庫菜單中,沒有出現的話點擊“三”刷新或載入元件庫。
以上就是創建一個自己的元件庫的過程啦 ,自己做的小控件都可以保存在裡面;下面我們開始製作小元件。
二、驗證碼倒計時
在視窗左上角找到項目,先設置一個全局變量,名稱隨意比如clock,確定保存。
新建一個空白的動態面板(計時器),為它設置兩個狀態State1、State2,並隱藏動態面板。
新建一個按鈕獲取驗證碼,併為它設置用例鼠標單擊時:
- 設置全局變量-設置變量值:clock=120;
- 設置元件-設置面板狀態:計時器=NEXT;向後循環;循環間隔1000毫秒;如果為了演示速度加快,可以把循環間隔調小;據我測算,如果和實際的時間相等,間隔應該是975毫秒(因為狀態的切換需要消耗時間);
- 設置元件-禁用:當前元件=禁用;使用交互樣式設置元件禁用時的樣式。
為動態面板計時器設置用例狀態改變時:
case1
①添加條件=“值”[[clock]]>=2;
其中[[clock]]為“fx”中“插入變量或函數”時選擇全局變量clock;
②設置 全局變量-設置變量值:clock=[[clock-1]];
其中[[clock-1]]為“fx”中“插入變量或函數”時選擇全局變量clock,並在”[[ ]]”內輸入“-1”;
③設置 元件-設置文本:當前元件(值)=[[clock]]秒再次獲取;
其中[[clock]]為“fx”中“插入變量或函數”時選擇全局變量clock。
case2
①設置 元件-設置面板狀態:計時器=停止循環;
②設置 元件-設置文本:獲取驗證碼(值)=重新獲取驗證碼;
③設置 元件-啟用:當前元件=啟用。
這樣就是一個完整的獲取驗證碼原型啦!
原型獲取:這個示例包括手機號的位數、驗證碼位數等判斷;
提取碼: ghw9
歡迎大家交流!
題圖來自 Unsplash,基於CC0協議。
閱讀更多 人人都是產品經理 的文章