Axure RP - 基本互動

---

---

本章將引導您瞭解 Axure 在設計螢幕時提供的基本互動集。

Axure RP 的目的是允許建立互動式原型。現在，當涉及到製作互動式原型時，總是存在建立過度互動式原型的風險。這就是為什麼，一次只從單個重要互動開始是有意義的，以便快速完成其餘可用頁面。

Axure 互動

互動是為將靜態線框圖轉換為可點選的互動式原型而創造的功能元素的術語。為了使互動方法更簡單，Axure 透過提供用於定義結構和邏輯的介面，消除了編寫原型程式碼的需要。

在生成 HTML 原型時，Axure RP 會將互動轉換為真實的程式碼（HTML、CSS 和 JavaScript）。這有助於在頁面上展示預期的設計和互動。

通常，互動將從互動何時發生開始。例如，頁面在瀏覽器中載入時，使用者點選其中一個元素時等。

然後是問題，互動在螢幕上的哪個位置發生。它可以是一個簡單的螢幕元素，例如矩形，我們希望將其轉換為選單的可點選按鈕（稍後將顯示示例）。

最後，是對互動中發生了什麼的描述。讓我們考慮頁面在瀏覽器載入頁面時載入；您可以簡單地選擇一個特定的幻燈片播放開始，或者在進入螢幕時讓影像變大。

Axure 事件

Axure 中的事件可以由兩種型別的事件觸發。

頁面和母版級別事件

頁面載入時，會發生大量事件來獲取設計資訊、內容，從而獲取螢幕上每個元素的對齊方式。由於這些事件發生在初始頁面載入期間，您可以認為這些事件在每次頁面載入時都會重複。以下是頁面和母版級別事件的一些示例。

• OnPageLoad（頁面載入）
• OnWindowResize（視窗大小調整）
• OnMouseMove（滑鼠移動）
• OnAdaptiveViewChange（自適應檢視更改）

物件或元件級別事件

讓我們考慮一下，我們已經建立了一個頁面和頁面上的一個特定按鈕元件。現在，為了與這個按鈕元件互動，也許是透過觸控（在移動原型上）或滑鼠點選。以下是物件或元件級別事件的一些示例。

• OnClick（點選）
• OnMouseEnter（滑鼠進入）
• OnDrag（拖動）
• OnDrop（放下）
• OnMouseHover（滑鼠懸停）

用例

如上一章所述，在頁面屬性部分，可以設計特定的元件互動。這些被稱為用例。一個特定的互動可以由多個用例組成。

讓我們考慮一個例子，以便更好地理解這一點。

示例：Axure 原型 – 滑鼠懸停顯示選單

要開始此示例，請點選檔案選單下的新建或使用快捷鍵Ctrl + N建立一個新檔案。

在此示例中，我們將設計大多數軟體產品中常見的簡單選單欄。選單結構將包含以下選單元素及其下的子選單。

檔案

• 新建
• 開啟
• 儲存
• 關閉

編輯

• 剪下
• 複製
• 貼上
• 查詢
• 替換

檢視

• 顯示狀態列
• 工具欄
  • 主工具欄
  • 樣式工具欄

幫助

• 入門
• 使用幫助
• 這是什麼

要開始，請將經典選單 - 水平拖放到設計區域。您可以在庫→選單和表格中找到它。將控制元件命名為 MenuBarExample。讓我們將此元素的寬度設定為 300 px，高度設定為 30 px。將其 X 軸位置設定為 100，Y 軸位置設定為 30。您可以在右側“檢查器”部分的“樣式”選項卡下調整這些值。

在上述過程結束時，您將能夠看到如下所示的最終結果。

讓我們也在檢查器部分新增選單標題的名稱。點選每個選單標題並觀察檢查器部分。如果未為特定選單欄指定名稱，則名稱將顯示為（選單項名稱）。

將“檔案”選單命名為FileMenu。

“編輯”選單命名為EditMenu，“檢視”選單命名為ViewMenu。

要確認是否已提供名稱，請點選每個單獨的選單並在“檢查器：選單項”下確認。您將能夠看到名稱，而不是（選單項名稱）。

現在，根據我們的要求，讓我們使用“幫助”選單完成選單欄。右鍵點選選單欄標題 - 檢視，您將看到一個上下文選單。點選“在之後新增選單項”。

將出現一個空白選單項。雙擊空白選單項，然後輸入選單標題“幫助”。重複此過程，在“檢查器：選單項名稱”下為其提供名稱。完成後，您將看到設計區域如下所示。

接下來，讓我們設計“檔案”選單的互動。

點選“檔案”選單欄標題並觀察“檢查器：選單項”。

如上圖所示，觀察“屬性”選項卡。

在“屬性”選項卡下，我們將建立“檔案”選單的互動。

向選單新增子選單非常簡單。右鍵點選“檔案”選單，在出現的上下文選單中，點選“新增子選單”。

注意 - 我們也可以透過重複相同的步驟並點選“刪除子選單”來刪除子選單。

新增子選單後，將出現一個空白子選單。雙擊每個選單項並提供名稱，例如 - 新建、開啟、儲存。

右鍵點選最後一個子選單項並新增另一個子選單項。將其命名為“關閉”。

最好也在“檢查器”部分命名所有子選單項。這有助於在整體設計過程中引用它們。

在設計此部分時，請注意，每當我們點選設計區域的任何其他部分時，子選單都會消失。我們需要點選“檔案”選單項才能檢視子選單。

讓我們談談互動 - 懸停。當滑鼠指標懸停在特定元素上時，此互動具有獨特的觸發行為。在 Axure 中，此互動會自動與“經典選單 - 水平”一起實現。

要檢視實際互動，請點選工具欄中的“預覽”按鈕。Axure 將在預設瀏覽器中開啟預覽。

將滑鼠懸停在“檔案”選單上。子選單將顯示如下所示。

如果我們客觀地看待它，我們只是利用 Axure 建立了一個複雜的互動，例如將滑鼠懸停在選單項上。在通常的 HTML 編碼中，這將需要大約 1 到 1.5 小時的時間。

作為一個作業，請完成其餘選單的子選單。

現在，讓我們快速在“檔案”選單下的“關閉”子選單上建立一個互動。我們將滑鼠懸停時將其高亮顯示為紅色。為此，請右鍵點選“關閉”子選單。點選“互動樣式…”

在“滑鼠懸停”選項卡下，選中“選擇填充顏色”並選擇紅色。Axure 將立即在設計區域中顯示預覽。假設“應用於”部分選擇“選定選單和所有子選單”，它將以紅色突出顯示整個選單。

點選“僅選定選單項”。現在選中“選擇字型顏色”併為字型選擇白色。預覽將立即更新。

點選“確定”以完成此設定。

再次點選“預覽”以檢視實際互動。

本例到此結束。

您可以嘗試以下互動作為快速作業。

使用按鈕元件的 OnClick 屬性。