很多時候,產品的一大段文字描述不如一張清晰的原型圖來的有效。文章通過一些具體的業務場景,結合Axure實戰案例,給大家說明瞭Axure函數的用法。
操作步驟是我在實踐中想到的,不是最優,也不是唯一,希望給大家做個參考:)
今天來看看【全局變量】在axure中的使用。
為什麼要使用全局變量?主要是起信息傳遞作用,或者標誌作用,可以在多個頁面間傳遞信息,或者作為特殊場景的判斷依據。
01 業務場景
用戶在app登錄頁面輸入手機號後,平臺發現用戶未註冊,引導註冊時,不需要用戶再次輸入手機號,在賬號框內直接帶入剛纔輸入的手機號,可引導用戶快速註冊,減少用戶考慮的時間,自然可以減少流失。
先來看看整體效果:
具體步驟為:
- 用戶輸入手機號,點擊【登錄】按鈕;
- 系統檢測到用戶未註冊,提示“用戶不存在,點擊去註冊”,用戶點擊【去註冊】按鈕,跳轉註冊頁;
- 註冊頁的手機號輸入框內,帶入用戶在登錄界面輸入的手機號。
02 分解頁面
1. 驗證碼登錄頁組成
- 手機號輸入框(文本框)
- 驗證碼輸入框(文本框)
- 獲取驗證碼按鈕(矩形)
- 登錄按鈕(矩形)
2. 跳轉對話框組成
- “去註冊”按鈕(矩形)
- “暫不註冊”按鈕(矩形)
3. 註冊頁組成
- 手機號輸入框(文本框)
- 密碼輸入框(文本框)
- 驗證碼輸入框(文本框)
- 獲取驗證碼按鈕(矩形)
- 登錄按鈕(矩形)
03 實踐步驟
做到帶手機號效果的思路是:
- 在登錄頁輸入手機號,在跳轉“去註冊”時將輸入的值保存在全局變量中;
- 跳轉註冊頁時,將保存在全局變量中的值寫入手機號輸入框中。
沒錯!所以重點在一個全局變量、一個按鈕和兩個手機號輸入框(文本框)。
1. 給兩個輸入框命名,方便查找
此步可以根據個人需要選擇,建議操作,可以提高效率
登錄頁的手機號文本框叫做“手機號輸入框”,
註冊頁叫做“手機號”,方便區分。
2. 添加全局變量,取登錄頁手機號
(1)添加全局變量,命名為“telVar”
點擊“去註冊”按鈕->給“鼠標單擊時”添加用例->選擇【全局變量】-【設置全局變量】-【添加全局變量】,如圖:
點擊【添加全局變量】,新增一個全局變量,命名為“telVar”(取名隨意,記住就行),如圖:
(2)設置點擊“去註冊”按鈕時,將登錄頁手機號文本內容賦予“telVar”
點擊“去註冊”按鈕的用例編輯框->選擇【全局變量】-【設置全局變量】->勾選“telVar”,在“設置全局變量值為”選擇“元件文字”和“手機號輸入框”,表示選取“手機號輸入框”的內容文字。
3. 在用戶選擇“去註冊”時,跳轉註冊頁
這個步驟就不累述了,關鍵要註意,一定要先給變量賦值,再打開窗口,否則變量賦值會失效!
4. 設置註冊頁初始化時,將手機號寫入輸入框
點擊註冊頁->編輯“頁面載入時”用例->選擇【設置文本】->勾選“手機號(文本框)”,如圖
在“設置文本為”選擇“值”,變量內容點擊【fx】按鈕,選擇【插入變量或函數】,選擇全局變量“telVar”,關閉變量選擇框,如圖
設置之後的效果如下圖,熟悉以後,也可以直接在變量框中輸入“[[telVar]]”,表示取變量telVar
設置完畢!保存!預覽看效果!
當然也可以選擇在輸入手機號時就保存在變量里,但考慮到有其他場景跳轉註冊頁,避免帶入多餘的值,還是放在確定要帶手機號的場景下賦值。
有什麼好想法可以一起交流呀~!
本文由 @調皮小吉 原創發佈於人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Unsplash,基於CC0協議。