很多時候,產品的一大段文字描述不如一張清晰的原型圖來的有效。文章通過一些具體的業務場景,結合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協議。