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

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

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

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

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

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

01 業務場景

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

先來看看整體效果:

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

具體步驟為:

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

02 分解頁面

1. 驗證碼登錄頁組成

  1. 手機號輸入框(文本框)
  2. 驗證碼輸入框(文本框)
  3. 獲取驗證碼按鈕(矩形)
  4. 登錄按鈕(矩形)
Axure函數應用:全局變量的使用,跳轉帶上手機號

2. 跳轉對話框組成

  1. “去註冊”按鈕(矩形)
  2. “暫不註冊”按鈕(矩形)
Axure函數應用:全局變量的使用,跳轉帶上手機號

3. 註冊頁組成

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

03 實踐步驟

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


分享到:


相關文章: