點擊下載《Axure常用變量及使用方法詳解.pdf》

摘要

Axure RP 作為一款領先的前端原型設計工具，提供了全面的 變量 和 函數 系統，以支持復雜的交互設計和動態內容展示。本文將從專業角度詳細解析 Axure 中的 全局變量、中繼器數據集變量/函數、元件變量/函數、頁面變量/函數、窗口變量/函數、鼠標指針變量/函數、數值處理函數、字符串處理函數、日期處理函數 以及 布爾值 的邏輯運算符。通過詳細的示例和步驟說明，幫助讀者全面理解和掌握這些關鍵功能，從而在原型設計中實現更高效、更靈活的交互效果。

---

1. 全局變量（Global Variables）

1.1 變量類型

• [[GlobalVariableName]]：自定義全局變量，用于在整個原型中共享數據。

1.2 使用場景

• 跨頁面數據傳遞：在多個頁面之間傳遞用戶輸入或計算結果。

  • 示例：

    在登錄頁面設置 userName，當用戶輸入用戶名登錄成功后，使用該變量保存用戶輸入的用戶名，然后在其他頁面展示當前登錄的用戶。

    <!-- 在主頁顯示 -->
    歡迎, [[userName]]!
    

• 用戶偏好設置存儲：存儲用戶的偏好設置，如主題、語言等。

  • 示例：設置 [[theme]] 為用戶選擇的值，并在不同頁面應用相應的主題。

• 多組件共享參數：在多個組件之間共享參數，如篩選條件、排序方式等。

  • 示例：設置 [[filterCriteria]] 為用戶選擇的篩選條件，并在多個中繼器中使用該變量。

1.3 注意事項

• 命名規范：使用有意義的名稱，避免使用保留字。
• 作用域管理：全局變量在整個原型中共享，需謹慎使用以避免命名沖突和數據污染。

---

2. 中繼器數據集（Repeater Dataset）

2.1 變量類型

• [[Item.ColumnName]]：當前行中指定列的值。
• [[TargetItem.ColumnName]]：目標行中指定列的值（用于條件判斷或交互）。
• [[Repeater]]：當前中繼器對象，可用于訪問中繼器的屬性和方法。

2.2 核心函數

函數	描述	示例
Item.Repeater	當前項所屬的中繼器對象	[[Item.Repeater.name]]
Item.index	當前項的索引（從 1 開始）	[[Item.index]]
Item.isFirst	當前項是否為第一項	[[Item.isFirst]]
Item.isLast	當前項是否為最后一項	[[Item.isLast]]
Item.isEven	當前項的索引是否為偶數	[[Item.isEven]]
Item.isOdd	當前項的索引是否為奇數	[[Item.isOdd]]
Item.isMarked	當前項是否被標記	[[Item.isMarked]]
Item.isVisible	當前項是否可見	[[Item.isVisible]]
Item.columnCount	當前中繼器的列數	[[Item.columnCount]]
Item.rowCount	當前中繼器的總行數	[[Item.rowCount]]

2.3 使用示例

• 動態生成列表項：

  "[[Item.Name]]: [[Item.Description]]"
  

  

2.4 注意事項

• 數據集操作：通過 “設置數據集” 動作可以動態更新中繼器數據。
• 分頁控制：使用 Item.rowCount 和 Item.index 實現分頁功能。

---

3. 元件變量/函數（Widget）

3.1 變量類型

• [[This]]：當前元件對象。
• [[Target]]：目標元件對象（用于交互中引用其他元件）。

3.2 核心函數

函數	描述	示例
this.text	當前元件的文本內容	[[This.text]]
this.x	當前元件的 x 坐標	[[This.x]]
this.y	當前元件的 y 坐標	[[This.y]]
this.width	當前元件的寬度	[[This.width]]
this.height	當前元件的高度	[[This.height]]
this.rotation	當前元件的旋轉角度	[[This.rotation]]
this.opacity	當前元件的透明度	[[This.opacity]]
this.isVisible	當前元件是否可見	[[This.isVisible]]
this.isSelected	當前元件是否被選中	[[This.isSelected]]
this.scrollX	當前元件的水平滾動位置	[[This.scrollX]]
this.scrollY	當前元件的垂直滾動位置	[[This.scrollY]]

3.3 使用示例

• 動態調整元件大小：

  // 設置元件寬度為 200px
  [[This.width]] = 200
  

• 切換元件可見性：

  // 切換元件的可見性
  [[This.isVisible]] = ![[This.isVisible]]
  

• 移動元件位置：

  // 將元件移動到 (100, 100) 坐標
  [[This.x]] = 100
  [[This.y]] = 100
  

3.4 注意事項

• 動態更新：通過 “設置文本”、“設置尺寸” 等動作可以動態更新元件的屬性。
• 事件驅動：元件變量常用于事件驅動的交互設計中。

---

4. 頁面變量/函數（Page）

4.1 變量類型

• [[PageName]]：當前頁面的名稱。

4.2 核心函數

函數	描述	示例
Page.width	當前頁面的寬度	[[Page.width]]
Page.height	當前頁面的高度	[[Page.height]]
Page.scrollX	當前頁面的水平滾動位置	[[Page.scrollX]]
Page.scrollY	當前頁面的垂直滾動位置	[[Page.scrollY]]
Page.url	當前頁面的 URL	[[Page.url]]
Page.title	當前頁面的標題	[[Page.title]]

4.3 使用示例

• 顯示當前頁面名稱：

  "當前頁面: [[PageName]]"
  

• 根據頁面寬度調整布局：

  // 根據頁面寬度設置背景顏色
  [[Page.width]] > 1200 ? "large-layout" : "small-layout"
  

4.4 注意事項

• 頁面導航：通過頁面變量可以實現頁面間的數據傳遞和導航控制。
• 動態頁面：適用于需要根據用戶操作動態改變頁面屬性的場景。

---

5. 窗口變量/函數（Window）

5.1 核心函數

函數	描述	示例
Window.width	瀏覽器窗口的寬度	[[Window.width]]
Window.height	瀏覽器窗口的高度	[[Window.height]]
Window.scrollX	當前窗口的水平滾動位置	[[Window.scrollX]]
Window.scrollY	當前窗口的垂直滾動位置	[[Window.scrollY]]
Window.name	當前窗口的名稱	[[Window.name]]
Window.top	當前窗口的頂部位置	[[Window.top]]
Window.left	當前窗口的左側位置	[[Window.left]]

5.2 使用示例

• 顯示窗口大小：

  "窗口大小: [[Window.width]]x[[Window.height]]"
  

• 根據滾動位置顯示按鈕：

  // 當滾動位置超過 100px 時顯示按鈕
  [[Window.scrollY]] > 100 ? "show-button" : "hide-button"
  

5.3 注意事項

• 響應式設計：通過窗口變量可以實現響應式布局和動態調整。
• 滾動控制：適用于需要根據滾動位置觸發交互的場景。

---

6. 鼠標指針（Cursor）

6.1 核心函數

函數	描述	示例
Cursor.x	鼠標指針的 x 坐標	[[Cursor.x]]
Cursor.y	鼠標指針的 y 坐標	[[Cursor.y]]
Cursor.dragX	鼠標拖動的水平距離	[[Cursor.dragX]]
Cursor.dragY	鼠標拖動的垂直距離	[[Cursor.dragY]]
Cursor.totalDragX	鼠標拖動的總水平距離	[[Cursor.totalDragX]]
Cursor.totalDragY	鼠標拖動的總垂直距離	[[Cursor.totalDragY]]
Cursor.downTime	鼠標按下持續的時間	[[Cursor.downTime]]

6.2 使用示例

• 顯示鼠標位置：

  "鼠標位置: ([[Cursor.x]], [[Cursor.y]])"
  

• 檢測鼠標拖動：

  // 當拖動距離超過 50px 時執行操作
  [[Cursor.totalDragX]] > 50 || [[Cursor.totalDragY]] > 50 ? "drag-detected" : "no-drag"
  

6.3 注意事項

• 交互觸發：通過鼠標指針變量可以實現鼠標懸停、點擊、拖動等交互觸發。
• 動態響應：適用于需要根據鼠標位置或狀態動態改變元件屬性的場景。

---

7. 數值處理（Number）

7.1 變量類型

• [[LVAR1]]：數值型局部變量。

7.2 核心函數

函數	描述	示例
toFixed(decimalPlaces)	將數字格式化為指定的小數位數	[[NumberVar.toFixed(2)]]
toExponential(decimalPlaces)	將數字轉換為指數表示法	[[NumberVar.toExponential(2)]]
toPrecision(precision)	將數字格式化為指定的總位數	[[NumberVar.toPrecision(5)]]
Math.abs()	返回數字的絕對值	[[Math.abs(NumberVar)]]
Math.ceil()	返回大于或等于數字的最小整數	[[Math.ceil(NumberVar)]]
Math.floor()	返回小于或等于數字的最大整數	[[Math.floor(NumberVar)]]
Math.max()	返回一組數字中的最大值	[[Math.max(num1, num2)]]
Math.min()	返回一組數字中的最小值	[[Math.min(num1, num2)]]
Math.random()	返回 0 到 1 之間的隨機數	[[Math.random()]]
Math.round()	返回四舍五入后的整數	[[Math.round(NumberVar)]]
Math.sqrt()	返回數字的平方根	[[Math.sqrt(NumberVar)]]

7.3 使用示例

• 計算總和：

  [[Math.round([[num1]] + [[num2]])]
  

• 生成隨機數：

  [[Math.random()]]
  

7.4 注意事項

• 數據類型：確保參與運算的變量是數值類型，否則可能導致計算錯誤。
• 精度控制：在處理浮點數時，注意精度問題。

---

8. 字符串處理（String）

8.1 核心函數

函數	描述	示例
length	返回字符串的長度	[[StringVar.length]]
concat(string)	連接兩個或多個字符串	[[StringVar.concat("!")]]
indexOf(searchValue)	返回子字符串首次出現的位置	[[StringVar.indexOf("test")]]
lastIndexOf(searchValue)	返回子字符串最后一次出現的位置	[[StringVar.lastIndexOf("test")]]
replace(searchValue, replaceValue)	替換字符串中的子字符串	[[StringVar.replace("test", "sample")]]
slice(startIndex, endIndex)	提取字符串的子字符串	[[StringVar.slice(0, 5)]]
split(separator)	將字符串分割成數組	[[StringVar.split(",")]]
substr(startIndex, length)	從指定位置開始提取指定長度的子字符串	[[StringVar.substr(2, 3)]]
substring(startIndex, endIndex)	提取兩個指定位置之間的子字符串	[[StringVar.substring(0, 5)]]
toLowerCase()	將字符串轉換為小寫	[[StringVar.toLowerCase()]]
toUpperCase()	將字符串轉換為大寫	[[StringVar.toUpperCase()]]
trim()	去除字符串兩端的空白字符	[[StringVar.trim()]]

8.2 使用示例

• 拼接字符串：

  [["Hello, " + [[userName]] + "!"]]
  

• 截取字符串：

  [["Hello World!".substring(0, 5)]]
  

8.3 注意事項

• 編碼問題：處理多語言文本時，注意字符編碼。
• 格式化：根據需要格式化字符串以匹配特定需求。

---

9. 日期處理（Date）

9.1 變量類型

• [[Now]]：當前日期時間。

9.2 核心函數

函數	描述	示例
getDate()	返回日期中的日	[[Now.getDate()]]
getDay()	返回星期中的第幾天	[[Now.getDay()]]
getFullYear()	返回四位數的年份	[[Now.getFullYear()]]
getHours()	返回小時	[[Now.getHours()]]
getMilliseconds()	返回毫秒	[[Now.getMilliseconds()]]
getMinutes()	返回分鐘	[[Now.getMinutes()]]
getMonth()	返回月份	[[Now.getMonth()]]
getSeconds()	返回秒	[[Now.getSeconds()]]
getTime()	返回時間戳	[[Now.getTime()]]
getTimezoneOffset()	返回時區偏移量	[[Now.getTimezoneOffset()]]
Date.parse(dateString)	解析日期字符串	[[Date.parse("2023-10-01")]]

9.3 使用示例

• 顯示當前日期：

  "當前日期: [[Now.getFullYear()]]年[[Now.getMonth() + 1]]月[[Now.getDate()]]日"
  

9.4 注意事項

• 時區問題：處理跨時區應用時，注意時區的影響。
• 格式轉換：根據需要格式化日期和時間以匹配特定需求。

---

10. 布爾值（Boolean）

10.1 邏輯運算符

運算符	描述	示例
==	等于	[[num1 == num2]]
!=	不等于	[[num1 != num2]]
>	大于	[[num1 > num2]]
<	小于	[[num1 < num2]]
>=	大于等于	[[num1 >= num2]]
<=	小于等于	[[num1 <= num2]]
&&	邏輯與	[[(num1 > 0) && (num2 > 0)]]
`		`
!	邏輯非	[[!(num1 > 0)]]

10.2 使用示例

• 條件判斷：

  [[If([[userIsLoggedIn]], "已登錄", "未登錄")]]
  

• 邏輯運算：

  [[If([[(num1 > 0) && (num2 > 0)]], "兩者都大于零", "至少有一個不大于零")]]
  

10.3 注意事項

• 邏輯正確性：確保邏輯運算符的使用符合預期。
• 短路運算：了解邏輯運算符的短路特性，避免不必要的計算。

---

總結

Axure 提供了全面的 變量 和 函數 系統，涵蓋了從全局變量到布爾值的多種數據類型和操作函數。通過詳細的分類和說明，本文全面介紹了 Axure 中各個類別所有的方法和變量，幫助讀者在原型設計中更加得心應手。希望本文的內容能為你的 Axure 原型設計提供有價值的參考和指導。

點擊下載《Axure常用變量及使用方法詳解.pdf》