Axure RP - 使用者介面

---

---

安裝 Axure 後，您將看到如下所示的介面。

此螢幕將在啟動時始終顯示，直到您選擇不顯示它。

在此螢幕上，您有以下選項 -

• 在 Axure 中建立新檔案
• 開啟現有的 Axure 專案

現在讓我們使用 Axure 建立一個新檔案。

單擊“新建檔案”按鈕後，將顯示以下螢幕以建立新的原型。

如上圖所示，工作區分為 6 個部分。

• 頁面
• 庫
• 檢查器
• 大綱
• 母版
• 設計區域

讓我們逐一瀏覽這些部分。

頁面

此部分顯示您正在處理的頁面。這些頁面以預設的樹狀結構顯示，如下所示。主頁有以下子頁面。

首頁

頁面 1

頁面 2

頁面 3

您可以繼續使用給定的結構，也可以根據您的需要更改它。為此，右鍵單擊任何頁面，然後將顯示新增、移動、刪除、重新命名、複製等選項。

與大多數可用的不同工具一樣，此部分允許您與原型中的頁面進行互動。您可以使用它來規劃預期原型中的螢幕。

庫面板

在庫面板中，提供了原型所需的大多數控制元件。此部分中提供的典型控制元件包括 - 框、影像、佔位符、按鈕等。Axure RP 提供了一套豐富的 UI 控制元件，並按其應用領域進行分類。

如上圖 (a) 所示，庫的類別為 - 常用、表單、選單和表格以及標記。開啟應用程式時，所有這些類別都會展開。為了方便起見，在此螢幕截圖中將其摺疊。

常用庫包括基本形狀、按鈕、標題文字、熱點、動態面板等。

使用 Axure RP，對於您的所有原型設計需求，都提供了一個非常有效的控制元件，稱為熱點。使用此控制元件，您可以為 UI 中幾乎任何控制元件提供點選互動。將在後續頁面中提供示例。

在表單庫中，顧名思義，包含列表框、複選框、單選按鈕、文字區域和文字欄位控制元件。要設計使用者輸入表單，您可以使用庫下此部分中的控制元件。

選單和表格具有傳統的結構。這種結構，可以是水平或垂直形式，在此稱為選單和表格的庫下可用。

最後但並非最不重要的是標記庫，其中包括便籤、標記和箭頭。大多數情況下，這將用於原型中的註釋。

設計區域

這是 UX 工程師的實際遊樂場。此空間將用於根據您的需求建立原型。首先，請參考以下螢幕截圖中標有數字 6 的區域。

在此區域中，您可以從庫中拖放所需的控制元件。讓我們使用庫快速建立一個選單欄。

示例 - 選單欄

從庫中，在“選單和表格”下，將“經典選單 - 水平”控制元件拖動到設計區域。

將控制元件拖動到設計區域後，您將看到以下螢幕。

如上圖所示，Axure RP 足夠智慧，可以在選單中顯示預期的文字。考慮到它是一個選單欄，Axure RP 已自動在控制元件中建立了檔案、編輯和檢視選單。

如箭頭所示，檢查器部分顯示控制元件的屬性。建立複雜原型時，使用此部分為控制元件建立名稱以進行唯一識別。

讓我們為此控制元件命名為 TestMenu。我們將在後續示例中使用此名稱。

頁面屬性

在規劃原型時，瞭解使用者以及將在其上展示/檢視原型的裝置的想法非常有意義。為了獲得最佳的原型互動體驗，Axure 提供了設定頁面屬性的功能。

如上圖所示，編號 3 表示的區域是頁面屬性部分。在此部分中，您將能夠看到互動下拉選單和自適應子部分。

讓我們詳細討論這些部分。

互動部分處理頁面可能的互動（案例）。如您所見，互動案例 OnPageLoad 處理頁面載入時的事件。在大多數原型中，UX 工程師更喜歡新增動畫以留下第一印象。此特定用於顯示動畫的事件通常在 OnPageLoad 案例中觸發。

同樣，其他案例包括 - OnWindowResize、OnWindowScroll。在下拉選單“更多事件”中，您可以看到其他支援的案例，以配置與頁面相關的互動。

使用自適應部分，Axure RP 進入了響應式網頁設計。如今，僅為網站設計體驗是不夠的，除此之外，企業更喜歡移動網站與網站共存。

從不同螢幕尺寸和佈局檢視的同一頁面構成不同的自適應檢視。通常，自適應檢視專為手機和平板電腦設計。Axure 提供了自適應檢視的功能，以便 UX 工程師從一開始就掌握原型的響應式方面。

元件的檢查器面板

元件互動面板是 Axure 中最關鍵的部分。您可以透過單擊設計區域中的任何元件來檢視此面板。

考慮我們在上一節中使用的選單項的示例。選擇名為 TestMenu 的選單項，並觀察以下螢幕截圖中突出顯示的部分。

如您在“屬性”選項卡下所見，存在不同的互動，例如 OnMove、OnShow、OnHide 和 OnLoad。這些特定於整個選單控制元件。

現在，從選單控制元件中單擊“檔案”。

您會注意到元件屬性面板中互動型別的變化。此外，它還提供了為該選單項提供名稱的靈活性。讓我們以 OnClick 案例為例。

OnClick - OnClick 案例定義了控制元件的行為，當您在執行原型時單擊控制元件時。這使您可以進行各種互動，例如頁面導航、選單彈出視窗等。

註釋面板 - 在檢查器面板本身中，有一個名為註釋的子部分。在註釋面板中，您將能夠為所選控制元件新增某些要點以供記住。

在下一章深入探討示例後，這些要點將更加清晰。

網格和參考線

對於具有最大質量和精度的原型，UX 工程師需要能夠將一個控制元件與另一個控制元件對齊/定位。

例如，假設您想顯示一個登入彈出視窗。如果此彈出視窗要顯示在螢幕正中間，則需要螢幕的整體尺寸。此外，要精確對齊到螢幕中央，您應該使用網格來適當地對齊它。

Axure 提供了網格和參考線的功能，以便您可以有效地使用設計區域。

要檢視可用的網格和參考線，請右鍵單擊設計區域，然後將彈出以下螢幕截圖中所示的上下文選單。

現在，讓我們瞭解可用的選項。

網格 - 上下文選單中顯示的前三個選項與網格相關。它們是顯示網格、吸附到網格和網格設定。

• 顯示網格 - 啟用“顯示網格”後，您將能夠在設計區域中看到網格，如以下螢幕截圖所示。這在將控制元件與螢幕上的其他控制元件對齊時非常有用。

• 吸附到網格 - 啟用“吸附到網格”後，控制元件將根據周圍存在的網格自動附加。在拖動控制元件並將其附加到附近的網格時，您將能夠看到此行為。

• 網格設定 - 此對話方塊中提供了更多與網格相關的設定。如以下螢幕截圖所示，此對話方塊中將提供網格之間的間距、網格型別等。您可以根據需要選擇交叉型別網格。

參考線 - 在以下螢幕截圖中所示的上下文選單中，第一個分隔符後的選項與參考線相關。

我們將介紹常用參考線選項。

• 顯示全域性參考線 - 當您從設計區域中的水平和垂直標尺拖動時，這些參考線將可見。自己試試吧！

• 顯示頁面參考線 - 參考線在頁面級別上也可用。當您從垂直和水平標尺拖動它們時，會建立這些參考線。它們比全域性參考線更常見。使用頁面參考線可以提高頁面級別的設計靈活性。

• 顯示自適應參考線 - 在為不同的自適應檢視設計頁面時，使用自適應參考線非常有用。此選項啟用自適應參考線的可見性，這些參考線將用於跨不同自適應檢視對齊物件。

• 對齊到參考線 - 在設計區域排列不同的螢幕元素時，此功能使物件能夠對齊到參考線。當您將特定物件放置在螢幕上並相對於其他物件進行排列時，此功能非常方便。