"Axure函數應用:全局變量的使用,跳轉帶上手機號"

很多時候,產品的一大段文字描述不如一張清晰的原型圖來的有效。文章通過一些具體的業務場景,結合Axure實戰案例,給大家說明瞭Axure函數的用法。

操作步驟是我在實踐中想到的,不是最優,也不是唯一,希望給大家做個參考:)

今天來看看【全局變量】在axure中的使用。

為什麼要使用全局變量?主要是起信息傳遞作用,或者標誌作用,可以在多個頁面間傳遞信息,或者作為特殊場景的判斷依據。

01 業務場景

用戶在app登錄頁面輸入手機號後,平臺發現用戶未註冊,引導註冊時,不需要用戶再次輸入手機號,在賬號框內直接帶入剛纔輸入的手機號,可引導用戶快速註冊,減少用戶考慮的時間,自然可以減少流失。

先來看看整體效果:

具體步驟為:

  1. 用戶輸入手機號,點擊【登錄】按鈕;
  2. 系統檢測到用戶未註冊,提示“用戶不存在,點擊去註冊”,用戶點擊【去註冊】按鈕,跳轉註冊頁;
  3. 註冊頁的手機號輸入框內,帶入用戶在登錄界面輸入的手機號。

02 分解頁面

1. 驗證碼登錄頁組成

  1. 手機號輸入框(文本框)
  2. 驗證碼輸入框(文本框)
  3. 獲取驗證碼按鈕(矩形)
  4. 登錄按鈕(矩形)

2. 跳轉對話框組成

  1. “去註冊”按鈕(矩形)
  2. “暫不註冊”按鈕(矩形)

3. 註冊頁組成

  1. 手機號輸入框(文本框)
  2. 密碼輸入框(文本框)
  3. 驗證碼輸入框(文本框)
  4. 獲取驗證碼按鈕(矩形)
  5. 登錄按鈕(矩形)

03 實踐步驟

做到帶手機號效果的思路是:

  1. 在登錄頁輸入手機號,在跳轉“去註冊”時將輸入的值保存在全局變量中;
  2. 跳轉註冊頁時,將保存在全局變量中的值寫入手機號輸入框中。

沒錯!所以重點在一個全局變量、一個按鈕和兩個手機號輸入框(文本框)。

1. 給兩個輸入框命名,方便查找

此步可以根據個人需要選擇,建議操作,可以提高效率

登錄頁的手機號文本框叫做“手機號輸入框”,

註冊頁叫做“手機號”,方便區分。

2. 添加全局變量,取登錄頁手機號

(1)添加全局變量,命名為“telVar”

點擊“去註冊”按鈕->給“鼠標單擊時”添加用例->選擇【全局變量】-【設置全局變量】-【添加全局變量】,如圖:

點擊【添加全局變量】,新增一個全局變量,命名為“telVar”(取名隨意,記住就行),如圖:

(2)設置點擊“去註冊”按鈕時,將登錄頁手機號文本內容賦予“telVar”

點擊“去註冊”按鈕的用例編輯框->選擇【全局變量】-【設置全局變量】->勾選“telVar”,在“設置全局變量值為”選擇“元件文字”和“手機號輸入框”,表示選取“手機號輸入框”的內容文字。

3. 在用戶選擇“去註冊”時,跳轉註冊頁

這個步驟就不累述了,關鍵要註意,一定要先給變量賦值,再打開窗口,否則變量賦值會失效!

4. 設置註冊頁初始化時,將手機號寫入輸入框

點擊註冊頁->編輯“頁面載入時”用例->選擇【設置文本】->勾選“手機號(文本框)”,如圖

在“設置文本為”選擇“值”,變量內容點擊【fx】按鈕,選擇【插入變量或函數】,選擇全局變量“telVar”,關閉變量選擇框,如圖

設置之後的效果如下圖,熟悉以後,也可以直接在變量框中輸入“[[telVar]]”,表示取變量telVar

設置完畢!保存!預覽看效果!

當然也可以選擇在輸入手機號時就保存在變量里,但考慮到有其他場景跳轉註冊頁,避免帶入多餘的值,還是放在確定要帶手機號的場景下賦值。

有什麼好想法可以一起交流呀~!

本文由 @調皮小吉 原創發佈於人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基於CC0協議。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *