Axure RP 9萌新修煉手冊-第五章-交互應用(2)

AxureRP9教程 小樓一夜聽春語 588℃ 0評論

第三節 變量詳解

一、概述

某小白:請問誰知道Axure中變量和函數怎么用啊?

某老白:原型還要用變量和函數?搞得太復雜了吧?

以上是Axure群中的常見對話。

很多人在自己的理解角度認為變量和函數是比較復雜的知識,不但學起來耗費精力,在產品原型中使用也是多此一舉,所以干脆不舉...呃...是不用。

這就是理解過于膚淺所產生的偏見。

存在即合理。

既然軟件中提供了這樣的功能,那么就一定是基于需求的。

實際上,使用變量與函數的目的是:提高原型制作效率和解決問題。

舉個例子,頁面垂直滾動到一定位置時,出現返回頂部按鈕。

這個交互就必須使用系統變量才能夠實現。

因為,在這個例子中,我們需要獲取瀏覽器中頁面Y軸滾動距離的值。

變量與函數主要作用是幫助我們進行【值】的運算。

在之后的內容中,我們能夠看到很多使用變量與函數的示例,大家可以從中體會使用變量與函數后,原型內容會變得更加容易修改、擴展以及重用。

二、概念

變量分為兩種:系統變量和自定義變量

而自定義變量又分為兩種:全局變量和局部變量

在使用變量之前,我們需要先理解變量的概念,對概念了解了,使用的時候才會有清晰的思路。

不要只是看到“變量”這個名稱就渾身酥麻了,當我給你深入淺出的演示一番,你就會知道,原來變量如此簡單。

實際上很多人都使用過變量,只是自己不知道而已。

相信很多讀者都使用過Excel這款軟件。

那么,在Excel中,想在C1單元格對A1和B1單元格的數值求和,你需要怎么做呢?

我們會在點中C1單元格后,在“fx”(熟悉吧?)的后方的輸入框中輸入“=A1+B1”。(圖5-20)

等號“=”后方寫算式,這是Excel的公式格式,就和我們在Axure RP中中括號“[[]]”中間寫算式是一個意思。

注:算式,又叫算術表達式,感謝小學數學老師!

那么,算式中的“A1”和“B1”是什么呢?

如果我們在A1和B1單元格中分別輸入“3”和“5”,此時算式中“A1”就是“3”,“B1”就是“5”。

也就是說算式中“A1”和“B1”是兩個數值。

好了,記住他們是數值。

接下來,我們在A1和B1單元格中分別輸入“4”和“6”,此時算式中“A1”就是“4”,“B1”就是“6”。

如果看到現在,你的理解沒有問題,你應該知道算式中的“A1”和“B1”是兩個可以改變的數值。

優秀的產品經理善于使用搜索引擎,讓我們來百度一下。(圖5-21)

獅屎勝于熊便啊!

算式中的“A1”和“B1”都是變量,具體來說是局部變量,因為它們只作用于一個Excel工作表,而不是整個工作簿中。“A1”和“B1”只是兩個固定的變量名稱,他們的值是變化的。就好像“班長”這個稱謂,在不同年級可能代表不同的人。

那么,為什么算式中會使用變量呢?

因為我們沒辦法把直接把單元格寫在算式中,只有通過變量去代替。

當我們把變量名稱寫入公式,就能夠獲取到變量的值,參與公式的運算。

所以說,變量的用途是幫助我們進行值的運算

三、局部變量

什么是局部變量呢?

局部是指變量的有效作用范圍。

還是以Excel舉例。

我們在表“Sheet1”的公式中所寫的“A1”,只會在表“Sheet1”中有效,在其他表的公式中即便也有“A1”,它也不能獲取到表“Sheet1”中A1單元格的內容。

Excel工作簿中能夠包含多張表,在表“Sheet1”的公式中所寫的“A1”只做用于當前表,而無法作用于工作簿中的所有表,所以它的作用范圍是局部的,也就是說“A1”是個局部變量。

我們在Axure RP中會經常需要局部變量參與公式運算。

變量都有三個必須的操作:

  • 創建:也就是命名,給變量取一個名稱,要求25個字符以內的數字、字母以及下劃線組成,首位字符不可以是數字。
  • 寫入:變量不寫入內容,就會永遠為空值,我們要把需要獲取的內容寫入變量,才能夠讓它在公式中參與運算。
  • 讀取:創建與寫入就是為了能夠在公式運算中讀取,所以在公式中我們寫入變量的名稱就代表一個指定(寫入)的數值。

我們來看一個案例。

案例16:商品數量遞增與遞減

在電商網站的購物車頁面中,我們經常能夠看見一個商品數量的輸入框,當我們點擊加減號的時候,可以對數量進行增減,同時商品的小計也會跟隨著改變。(圖5-22)

這里就會涉及到計算小計金額的公式運算。

1、準備好相關的元件。(圖5-23)

注意每個元件的類型,對于把矩形當文本框使用的行為,是很令人傷心的。

2、為元件添加交互。

交互有兩個,一個是點擊加號按鈕的交互,另一個是點擊減號按鈕的交互。

(1)點擊加號按鈕時,設置文本框“Num”的文本為“Num”文本框當前的數值加1;

(2)點擊減號按鈕時,設置文本框“Num”的文本為“Num”文本框當前的數值減1;

(3)無論數量如何變化,都要設置小計“Subtotal”的文本為價格“Price”乘以數量“Num”的積;

(4)點擊減號按鈕時,當前商品數量必須大于1,才能會有減少的交互動作。

我們根據上方的四個交互描述添加交互事件。

步驟1

但是,是不是第一個交互動作設置到【值】的時候就卡住了?(圖5-24)

輸入框中應該寫什么?這個值是一個固定值嗎?

很顯然不是固定值,因為如果你填寫一個“2”,每次點擊加號按鈕,商品數量都是2。

所以,這里應該填寫一個計算公式,一個計算當前數量加1的公式:[[當前數量+1]]。

但是,當前數量如何獲取呢?

當前數量不是一個固定值,所以它是一個變量。

我們點擊輸入框后方的“fx”按鈕,打開【編輯值】的界面,在編輯值的界面中,我們需要點擊【添加局部變量】按鈕創建一個變量,并設置名稱為“n”。然后,通過選擇選項將 “Num”的【元件文字】寫入變量“n”中。最后,在公式中讀取變量“n”中寫入的數值進行運算。(圖5-25)

此時,預覽原型,加號按鈕的第一個交互已經可以呈現。

步驟2

我們可以將加號按鈕的交互復制給減號按鈕。

點擊加號按鈕上的【單擊時】交互事件,通過上下文菜單或者快捷鍵<Ctrl+C>,進行復制。

再選中減號按鈕,通過快捷鍵<Ctrl+V>鍵進行粘貼,或者通過點擊【新建交互】,找到【單擊時】后方的【粘貼】按鈕進行粘貼。

最后,點擊交互中【值】的設置,將公式"[[n+1]]"修改為“[[n-1]]”。(圖5-26)

這里需要注意一點,復制交互的同時變量的設置也一起進行了復制,單獨進行減號按鈕的交互設置時,不可省略變量的設置,也就是說仍然要按步驟1的完整過程進行交互的添加。

另外,局部變量“n”的作用范圍只是在一個【值】的運算中,所以復制添加的交互中,雖然變量名稱同樣為“n”,但也與步驟1中設置的變量“n”沒有任何關系。就好像兩個不同的家庭中,有姓名相同的人一樣,隔壁老王即便跟你同名也不能...吃你們家餃子。

步驟3

為了能夠更簡單的實現交互,在元件準備時,價格元件“Price”中只包含數字,不包含人民幣符號。

以加號按鈕為例,點擊時我們仍然要進行公式運算,這一次的公式是:[[價格元件的文字*數量元件的文字]]。

所以,關鍵在于如何獲取價格元件與數量元件的文字,把它們放入公式。

這一次,我們需要添加兩個局部變量。

不過,這一次的交互事件,我們添加到哪個元件上呢?

其實,不管點擊加號按鈕還是減號按鈕,元件“Num”的文字都會發生變化。而“Num”是一個文本框元件,它有一個獨特的觸發叫做【文本改變時】,所以這個交互,我們就添加到元件“Num”的【文本改變時】交互事件中。

添加【設置文本】的動作,設置小計元件“Subtotal”的【文本】【值】。(圖5-27)

然后,點擊【值】輸入框后方的“fx”按鈕,在編輯值的界面中添加局部變量“p”和“n”,并分別寫入元件“Price”和“Num”的【元件文字】。最后,在公式中通過變量名稱讀取數值參與運算。(圖5-28)

注:小計的金額前面帶有人民幣符號,所以在公式的左側外部,要帶有一個人民幣符號。另外,商品小計的計算結果還存在一些問題,不能夠保留兩位小數,我們將在函數部分繼續完善。

步驟4

減號按鈕不像加號按鈕一樣,可以不加限制的遞增,而是只有一種情形下才能夠遞減。

這種情形就是“商品數量大于1時”。

所以,我們需要在減號按鈕【單擊時】的交互事件上點擊【添加情形】的按鈕,設置必要的條件。(圖5-29)

到這里,這個案例的交互就已經全部完成。

從這個案例,我們能夠看出,使用局部變量只是因為它能夠幫助我們獲取公式運算中所需要的一些關鍵數據內容,僅此而已。

【提示】圖書案例源文件及素材,請關注微信公眾號“chanpinban”后,回復“萌新手冊”獲取。


~~~~~~~~~~~~ 正文結束 下面沒了 ~~~~~~~~~~~~

小樓老師全新打造Axure RP 9精品課程,以獨有的教學方法與技巧,幫助你以最短的時間高效的完成學習目標。

《Axure RP 9 萌新修煉視頻》-----從零入門進階的優質課程------【點此查看詳情】


轉載請注明:Axure原創教程網 » Axure RP 9萌新修煉手冊-第五章-交互應用(2)

喜歡 (5)or分享 (0)
頭像
發表我的評論
取消評論

表情

Hi,您需要填寫昵稱和郵箱!

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
(3)個小伙伴在吐槽
  1. 頭像
    深入淺出,學到了
    文海2019-05-08 14:29 回復
  2. 頭像
    請問這邊默認值怎么設置,如果加減號沒點擊是沒有值的
    小白2019-09-10 15:47 回復
    • 小樓一夜聽春語
      文本框里直接輸入
      小樓一夜聽春語2019-09-10 19:36 回復
辽宁快乐12选5走势图表