- Axure RP 教程
- Axure RP - 首頁
- 原型設計入門
- Axure RP - 簡介
- Axure RP - 使用者介面
- Axure RP - 基本互動
- 使用母版和動態面板
- Axure RP - 條件邏輯
- Axure RP - 高階互動
- Axure RP - 元件庫
- Axure RP - 匯出原型
- Axure RP 有用資源
- Axure RP 快速指南
- Axure RP - 有用資源
- Axure RP - 討論
Axure RP 快速指南
Axure RP - 原型設計入門
術語原型設計在軟體開發和建築開發領域都非常常見且相關。在建築開發方面，埃及就存在著吉薩大金字塔的原型。這些原型（當然）是用較小的尺寸建造的，目的是為了獲得統治者的同意或批准。
這個小型但意義重大的例子精確地說明了原型的目的。根據維基百科，原型是“一種裝置或車輛的第一個或初步版本，其他形式都是由此發展而來。”
對於軟體開發而言，這個定義可以修改為：頁面、螢幕或功能的初步版本，透過有效地視覺化螢幕元素和展示互動來支援其他開發。這個定義包含了最關鍵的部分：互動。
在軟體開發中，開發部分功能或完整功能本身都需要投入大量的時間和精力。這是一個持續不斷的開發、驗證和根據客戶反饋糾正問題的過程。
大多數軟體開發公司希望這個過程儘可能快。因此，他們不會讓所有團隊成員都投入時間和精力。相反，他們會採取明智的策略，聘用一位使用者體驗 (UX) 工程師，他們擁有視覺化特定功能的技能。這使他們在產品開發中佔據主導地位。
本質上，原型設計需要在開發的早期模擬和視覺化軟體需求。這個過程最終對軟體開發公司和客戶都有益，因為它減少了功能中的不確定性，從而為開發指明瞭正確的方向。
原型開發的正確階段
在當前高規格的軟體開發時代，整個軟體開發生命週期表已經取得了許多進步。這些進步體現在技術方面，以及特定團隊成員在生命週期中的角色/職位。其中一個職位開始受到關注，那就是 UX 工程師。
UX 工程師具備對客戶有益的技能。透過使用不同的技術或步驟來更好地瞭解客戶，UX 工程師可以很好地掌握使用者對給定軟體產品的期望。
通常，在需求收集過程中，科技公司現在會讓 UX 工程師進入市場，以瞭解使用者的需求。隨著響應式網頁設計和移動優先方法在軟體開發中的最新趨勢，人們可能需要關注許多領域。UX 工程師會採用使用者訪談、市場調查等流程來了解目標受眾的脈搏。
這個過程既費時又重要，因為它為軟體產品在市場上的適用性鋪平了道路。這些步驟在收集和闡述軟體需求時採用。這是一個理想的階段，因為它降低了整體開發成本。但是，當軟體產品成熟時，可以引入 UX 研究階段來衡量所做增強的可行性。
Axure RP - 簡介
對於 UX 工程師來說，瞭解其使用者群的過程不僅僅侷限於從客戶那裡獲取輸入或相關的對話。他們需要採取一些有趣的步驟來了解使用者想要什麼。當他們對使用者可能對軟體產品有什麼期望有所瞭解時，真正的工作就開始了。
一旦獲得了關於使用者如何看待即將推出的軟體或現有軟體改進的一些資料，UX 工程師就會回到自己的崗位上為他們設計使用者介面。傳統上或作為一種常見方法，當有人說設計時，是指諸如 Adobe Photoshop、CorelDraw 甚至 Microsoft Paint 等軟體。有時，為了快速反饋給使用者，UX 設計師會使用傳統的筆和紙來設計介面。
然而，對於 UX 設計師來說，提供高質量的使用者介面設計不僅僅意味著展示一個很棒的設計。使用者體驗不僅包括使用者如何看待介面，還包括使用者如何與介面互動。上述軟體工具以及市場上的類似工具都具有其自身的功能集。對於 UX 工程師來說，選擇合適的軟體來支援頭腦風暴、設計和獲取反饋確實是一項繁瑣的任務。
Axure 應運而生，它是目前設計精美使用者介面和互動的流行軟體。Axure 已經存在近十年了，它允許 UX 工程師輕鬆地建立軟體原型的細節。Axure 不僅是原型設計工具，還擁有強大的社群，為 UX 世界貢獻了許多示例和巧妙的互動。
在更高層次上，以下是 Axure 提供的功能：
- 圖表和文件
- 使用動態內容進行有效的原型設計
- 條件流程
- 精美的動畫以增強互動
- 自適應檢視
- 支援 Windows 和 Mac
要瀏覽 Axure 提供的詳細功能列表，請訪問 https://www.axure.com。有關安裝說明，請點選連結 https://www.axure.com/download。
對於快速原型設計，Axure RP 提供了各種工具和技術，這些工具和技術始終有助於分析師/使用者體驗工程師視覺化最終目標。
憑藉始終可用的強大社群支援，Axure RP 正在成為 UX 愛好者和實踐者的首選工具。
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 提供了網格和參考線功能，以便您可以有效地使用設計區域。
要檢視可用的網格和參考線，請右鍵單擊設計區域，則會彈出以下截圖中所示的上下文選單。
現在，讓我們瞭解可用的選項。
網格 − 上下文選單中顯示的前三個選項與網格相關。它們分別是“顯示網格”、“吸附到網格”和“網格設定”。
顯示網格 − 啟用“顯示網格”後，您將能夠在設計區域看到網格，如下面的截圖所示。這在將控制元件與螢幕上的其他控制元件對齊時非常有用。
吸附到網格 − 啟用“吸附到網格”後，控制元件將根據周圍存在的網格自動附著。當您拖動控制元件時，您將能夠看到此行為，它會自動附著到附近的網格。
網格設定 − 此對話方塊中提供了更多與網格相關的設定。如以下截圖所示，網格間距、網格型別等都將在此對話方塊中提供。您可以根據自己的方便選擇交叉型網格。
參考線 − 如以下截圖所示的上下文選單中，第一個分隔符後的選項與參考線相關。
我們將介紹常用參考線選項。
顯示全域性參考線 − 當您從設計區域的水平和垂直標尺拖動時，這些參考線將可見。自己試試看！
顯示頁面參考線 − 參考線也可用於頁面級別。當您從垂直和水平標尺拖動它們時，這些參考線就會建立。它們比全域性參考線更常用。使用頁面參考線可以提高頁面級別的設計靈活性。
顯示自適應參考線 − 在設計不同自適應檢視的頁面時，使用自適應參考線是值得的。此選項啟用自適應參考線的可見性，這些參考線將用於在不同的自適應檢視中對齊物件。
吸附到參考線 − 在設計區域中排列不同的螢幕元素時，此功能使物件能夠吸附到參考線。當您將特定物件放置在螢幕上並相對於其他物件進行排列時，這將非常方便。
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。將其水平位置設定為 100，垂直位置設定為 30。您可以在右側檢查器部分的“樣式”選項卡下調整這些值。
完成上述過程後，您將能夠看到以下截圖中所示的最終結果。
讓我們也在檢查器部分新增選單標題的名稱。點選每個選單標題並觀察檢查器部分。如果未為特定選單欄指定名稱，則名稱將變為（選單項名稱）。
將“檔案”選單命名為FileMenu。
“編輯”選單同理，命名為EditMenu，“檢視”選單命名為ViewMenu。
要確認是否已提供名稱，請點選每個單獨的選單，並在檢查器：選單項下確認。您將能夠看到名稱，而不是（選單項名稱）。
現在，根據我們的要求，讓我們用“幫助”選單完成選單欄。右鍵點選選單欄標題 – 檢視，您將看到一個上下文選單。點選“在之後新增選單項”。
將出現一個空白選單項。雙擊空白選單項，輸入選單標題“幫助”。重複此過程，在檢查器：選單項名稱下為其提供名稱。完成後，您將看到設計區域如下所示。
接下來，讓我們設計“檔案”選單的互動。
點選“檔案”選單欄標題，並觀察檢查器：選單項。
如上圖所示，觀察“屬性”選項卡。
在“屬性”選項卡下，我們將建立“檔案”選單的互動。
向選單新增子選單非常簡單。右鍵點選“檔案”選單，在出現的上下文選單中，點選“新增子選單”。
注意 − 我們也可以透過重複相同的步驟並點選“移除子選單”來移除子選單。
新增子選單後，將出現一個空白子選單。雙擊每個選單項並提供名稱，例如 – 新建、開啟、儲存。
右鍵點選最後一個子選單項，並新增另一個子選單項。將其命名為“關閉”。
最好也在檢查器部分命名所有子選單項。這有助於在您的整體設計過程中引用它們。
在設計這部分時，請注意，每當我們點選設計區域的任何其他部分時，子選單都會消失。我們需要點選“檔案”選單項才能檢視子選單。
讓我們談談互動 – 懸停。當滑鼠指標懸停在特定元素上時，此互動具有獨特的觸發行為。在 Axure 中，此互動會自動與“經典選單 – 水平”一起實現。
要檢視互動效果，請單擊工具欄中的“預覽”按鈕。Axure 將在預設瀏覽器中開啟預覽。
將滑鼠懸停在“檔案”選單上。子選單將顯示如下截圖所示。
客觀地說，我們剛剛利用 Axure 建立了一個複雜的互動，例如將滑鼠懸停在選單項上。在通常的 HTML 編碼中，這將花費近 1 到 1.5 個小時的時間。
作為作業，請完成其餘選單的子選單。
現在，讓我們快速在“檔案”選單下的“關閉”子選單上建立一個互動。我們將滑鼠懸停在其上時將其突出顯示為紅色。為此，請右鍵單擊“關閉”子選單。單擊“互動樣式…”
在“滑鼠懸停”選項卡下，選中“填充顏色”並選擇紅色。Axure 將立即在設計區域中顯示預覽。假設已選擇“應用於”部分中的“所選選單和所有子選單”，則它將以紅色突出顯示整個選單。
單擊“僅所選選單項”。現在選中“字型顏色”併為字型選擇白色。預覽將立即更新。
單擊“確定”完成此設定。
再次單擊“預覽”以檢視互動效果。
本例到此結束。
您可以嘗試以下互動作為快速作業。
使用按鈕部件的 OnClick 屬性。
Axure RP - 使用母版和動態面板
許多軟體開發方法，在使用者介面開發方面，都採用一種常見的技術——建立母版。
母版是一個可重用的線框圖，它將建立一次，並在隨後的頁面上廣泛使用。使用 Axure RP 時，當我們建立母版頁面時，對該頁面所做的更改將應用於使用它的頁面。因此，它在很大程度上減少了所有頁面共有元件的時間。
要開始使用母版，您可以關注母版部分（標記為 5），如下面的螢幕截圖中突出顯示的那樣。
使用此母版部分可以：
透過新增、刪除或編輯母版頁面/資料夾來組織原型的母版。
選擇特定母版進行編輯。
動態面板
在 Axure RP 中，正如我們在上一章中看到的，與給定部件關聯的不同狀態。為了合併/組織特定部件或一組部件的狀態，我們需要一個容器/佔位符。動態面板充當部件狀態的容器/佔位符。
讓我們使用一個示例更好地理解動態面板。我們將從我們的選單欄示例繼續。
此示例中的新增將是選單欄下方的影像區域和按鈕。使用常用部件下的部件佔位符作為影像區域和按鈕。將佔位符命名為 ImageAreaPlaceholder，按鈕命名為 showImageButton。
此外，讓我們將選單欄新增到母版中。右鍵單擊選單欄，然後單擊“轉換為母版”。將出現一個對話方塊，提示母版的名稱。新增名稱為 menuBarMaster。
如上圖所示，選單欄變為粉紅色，並且已新增母版的條目。
現在，讓我們建立一個動態面板。動態面板的上下文是，您希望根據“顯示影像”按鈕的單擊來控制影像區域的可見性。擁有動態面板將允許影像區域的靈活性。
讓我們看看如何建立動態面板。右鍵單擊影像區域，將出現上下文選單，選擇“轉換為動態面板”。
動態面板將位於“大綱：頁面”下。此外，在“檢查器”中，它顯示了動態面板。將動態面板命名為 showImageDynamicPanel。此動態面板的名稱將在“大綱：頁面”部分下更新。
在設計區域中，右鍵單擊“顯示影像”動態面板以檢視上下文選單。選擇“設定為隱藏”，動態面板將從螢幕上消失。
可以透過雙擊“大綱：頁面”下的動態面板來訪問它。
現在，讓我們為按鈕提供一個單擊事件。單擊“顯示影像”按鈕，在“檢查器”→“屬性”下，雙擊 OnClick 互動。
如上圖所示，單擊部件下的“顯示/隱藏”。它將自動顯示可用於配置操作的部件。選中 showImageDynamicPanel。單擊“確定”。
現在，單擊“預覽”。在預覽螢幕上，單擊“顯示影像”。最終建立了另一個按鈕互動。
Axure RP - 條件邏輯
在本章中，我們將討論 Axure RP 中使用的條件邏輯。
Axure 中的 If-Then-Else
與任何其他程式設計工具一樣，Axure 也支援條件邏輯，以在原型中建立增強的互動。一旦您熟悉如何提供互動，為互動提供條件邏輯就是下一個層次。
以下是條件邏輯的簡單簡潔流程：
- 如果單擊特定部件/螢幕
- 則執行特定操作/互動
- 否則，保持/更改部件或螢幕的狀態
為了更好地理解這一點，讓我們從前面的示例繼續我們的流程。為此，我們需要熟悉條件構建器。
條件構建器
雙擊任何互動，例如 OnClick。您將能夠看到如下面的螢幕截圖所示的案例編輯器。
單擊按鈕 – 在“案例名稱”附近新增條件。它將在對話方塊中顯示在下方。
如“描述”下所示，條件構建器將根據條件部分中選擇的條件建立 If-Then-Else 流程。
讓我們在這個按鈕上建立一個條件。
我們希望顯示隱藏影像按鈕，一旦動態面板可見。我們在前面的示例中透過單擊“顯示影像”按鈕使動態面板可見。現在，讓我們使另一個按鈕“隱藏影像”可見。
關閉條件構建器，返回到設計區域。
從常用庫下的庫中插入“隱藏影像”按鈕。重申一下，最好在將其插入設計區域後立即命名 UI 元素。
右鍵單擊“隱藏影像”按鈕，然後單擊“設定為隱藏”。按鈕將從設計區域中隱藏，如下面的螢幕截圖所示。
現在，讓我們回到“顯示影像”按鈕的互動。
首先，在“顯示影像”按鈕互動下，雙擊“案例 1”，您將能夠看到案例編輯器。使用“顯示/隱藏”操作，選擇 hideImageButton 並將其可見性設定為顯示。
同樣，使用“顯示/隱藏”操作，選擇 showImageButton 並將其可見性設定為隱藏。
我們已經管理了“隱藏影像”按鈕的可見性，這樣，當我們單擊“顯示影像”按鈕時，該按鈕將顯示。
完整的條件將如下面的螢幕截圖所示。
讓我們構建條件。
在設計區域下，單擊“隱藏影像”按鈕。在“檢查器”部分中，單擊“新增案例”。
在“新增案例”下，單擊“新增條件”按鈕。根據前面提供的背景，使用條件構建器中的下拉值建立條件集。
簡而言之，使用上述條件，我們正在檢查動態面板 showImageDynamicPanel 是否可見。
現在，讓我們設計“隱藏影像”按鈕的互動，配置如下：
- 選擇“顯示/隱藏”操作。
- 選擇部件 showImageDynamicPanel。
- 將可見性設定為隱藏。
同樣，對顯示 showImageButton 和隱藏 hideImageButton 重複此過程。
完成後，單擊“確定”關閉案例編輯器。
然後，單擊“預覽”以檢視所做的更改。
成功的結果將如下面的螢幕截圖所示。
單擊“顯示影像”按鈕時：
單擊“隱藏影像”按鈕時：
Axure RP - 高階互動
到目前為止，我們已經瞭解了 Axure 互動的基本功能。但是，在許多現實世界的場景中，原型必須是智慧的。透過“智慧”這個詞，原型需要檢測某個部件的狀態才能執行操作/觸發某種行為。
這種互動的一個典型示例是設定按鈕的顏色。這需要 UX 工程師戴上思考帽，並將原型設計提升到一個新的水平。
在 Axure 中使用變數
變數，根據定義，代表易於變化或改變的因素。在 Axure 中，我們可以使用變數來表示或識別部件/互動的狀態。
一個典型的示例是在從一個頁面傳輸資料到另一個頁面時儲存資料值。為了使示例簡單明瞭，讓我們考慮一個我們需要顯示特定部件狀態的場景。
繼續我們最後一個示例，讓我們考慮一下我們想要顯示影像顯示了多少次。
以下是我們將如何操作：
我們將建立一個變數來將計數初始化為 0。
單擊“顯示影像”按鈕時，我們將增加此變數的值。
在文字標籤中顯示值。
對於此示例，我們將在動態面板下方建立一個文字。文字將顯示為 – 影像顯示了 0 次。
關鍵 – 標籤必須分成三個。請按照表格中列出的標籤名稱和文字操作。
| 標籤名稱 | 標籤文字 |
|---|---|
| imageLabel | 影像顯示了 |
| countLabel | 0（數字 0） |
| timesLabel | 次 |
這是必需的，因為我們想要為每次“顯示影像”按鈕單擊控制 countLabel 值。
讓我們首先定義一個變數。
我們需要一個變數，該變數將在單擊按鈕時進行控制。Axure 中的這個變數是——全域性變數。要定義全域性變數，請單擊選單欄中的“專案”，然後單擊“全域性變數”。將開啟一個對話方塊，如下面的螢幕截圖所示。
單擊綠色加號 (+) 圖示以新增全域性變數。讓我們將我們的全域性變數稱為 varDynamicPanel。其預設值為 0。
使用“顯示影像”按鈕互動，雙擊“案例 1”。新增另一個操作。如以下螢幕截圖所示，操作為 將 countLabel 的文字設定為 [[varDynamicPanel + 1]]。
將文字標籤選擇為一個值非常簡單。讓我們看看如何從動態面板獲取值。
如上圖中的步驟 4 所示，單擊 fx 按鈕，將開啟以下對話方塊。
在第一個文字區域中，輸入以下字串。
[[varDynamicPanel + 1]]
單擊“確定”。
現在，我們需要確保每次單擊按鈕後都會更新變數。
在案例編輯器對話方塊中，在操作下，選擇“變數”→“設定變數值”。
選擇 varDynamicPanel 作為變數。
將變數設定為從部件上的文字中獲取值，作為可用選項中的 countLabel。
單擊“確定”關閉案例編輯器。然後，單擊“預覽”按鈕。
顯示/隱藏影像四次後，以下是預覽螢幕上的結果。
Axure RP - 元件庫
現在您已經熟練掌握了 Axure 中可能出現的不同互動和事件，您可能希望擴充套件您的工作以最大限度地減少將來的工作量。
例如，第一個使用經典選單 - 水平的示例曾經在 Axure 版本中作為不同可用部件的組合存在。這意味著，Axure 隨著時間的推移而發展，以單一部件庫的形式容納常用部件。
部件庫的概念在大型 UX 團隊中更突出。一些組織將經批准的部件保留在中央儲存庫中，供後續的 UX 工程師使用。
因此，簡而言之，Axure 部件庫是儲存在一個檔案中的一組自定義部件。Axure 部件庫的檔案型別為 RPLIB。
部件庫型別
Axure 內建庫
這些庫可從“庫”窗格訪問。這些庫無法更新/刪除。對於大多數複雜的原型設計需求，Axure 內建庫都能派上用場。
該庫包含17個獨特的流程部件，主要用於圖表建立。此外，線框庫中還有25個部件。
庫的簡要功能介紹見第3章——使用者介面。
Axure自定義庫
Axure社群日益壯大，擁有大量的使用者建立的庫。您可以訪問以下連結：https://www.axure.com/support/download-widget-libraries。
來自世界各地的UX專業人士致力於發展這個社群，他們將作品提交到上述連結。
您可以從網站下載庫，並使用庫下的“載入庫”選項將其新增到Axure。您也可以直接從應用程式介面本身下載庫。
如上圖所示，我們有一個上下文選單，您可以在其中下載https://www.axure.com/support/download-widget-libraries上提供的不同庫。您還可以建立自己的庫，這在為給定的原型建立重複控制元件時非常方便。
下載/載入庫的完整說明請訪問：https://www.axure.com/support/reference/widget-libraries。
當使用來自已載入庫的自定義部件時，將其拖放到設計區域，類似於內建部件。如果部件包含變數或自定義樣式，則匯入嚮導對話方塊會標記此類依賴項。
在這些依賴項中，您可能會注意到有一些與正在匯入的部件庫不相容的樣式。您可以選擇取消並僅匯入部件，或者單擊完成按鈕以匯入整個包。
將部件拖放到線框後，該特定例項將不再與其原始部件庫關聯。因此，即使您重新整理庫，對匯入的部件庫中部件所做的編輯和更改也不會應用於專案檔案中這些部件的任何例項。請放心，匯入後，您可以使用匯入庫中的部件，而無需擔心線上提供的同一部件庫中發生的更新。
使用RPLIB
使用Axure RP庫檔案非常簡單。下載庫時，庫檔案(.rplib)的圖示與Axure RP原型檔案(.rp)明顯不同。例如，如下面的螢幕截圖所示。
其工作機制 - 您可以在iOS線框演示中匯入iOS線框文件。
此庫可用於多個專案，並且一旦您從上下文選單重新整理庫，庫檔案中的更新就會可用。如前所述，這在團隊專案中以及以這種方式分發庫時非常方便。
Axure RP - 匯出原型
Axure RP 8支援具有“團隊專案”功能的協作。此功能不僅對分散式團隊有利，而且對單個使用者也有利。對單個使用者的益處是可以建立正在進行的工作的版本控制。
使用團隊專案
在團隊專案方案中，每個團隊成員在其計算機上都有一份專案的副本。此專案將與共享儲存庫同步。此共享儲存庫連線到團隊的其他成員。
一天的工作結束後，每個團隊成員都會建立新元素、簽出檔案以及通常編輯專案。簽出是常用術語，表示特定檔案的正在進行的工作。
在團隊成員簽入所有已簽出的元素之前，更改不會反映在共享儲存庫中。管理團隊專案控制檯為所有團隊成員提供系統管理的元素可用性狀態的即時檢視。
此檢視提供另一個團隊成員簽出的元素的詳細資訊。
啟動團隊專案
要使用或建立團隊專案，請轉到“團隊”選單。單擊“團隊”，然後選擇“從當前檔案建立團隊專案”。將彈出以下螢幕。
託管團隊專案的可用選項包括：使用AxShare和SVN。我們將在下一節討論AxShare。SVN是常用的版本控制系統，它提供伺服器來託管您的文件。
按照螢幕上的說明建立團隊專案，然後您就可以開始跨團隊協作處理單個Axure檔案/將其用於您自己的歷史儲存。
Axure Share
在展示您的原型時，根據您所處的環境，有多種選項可用。最常用的匯出原型的方法是使用Axure Share（又名AxShare）。
使用Axure Share，可以實現以下協作功能。
原型可以託管在Axure Share上並與相關的團隊成員/客戶共享。
使用討論/評論功能，您可以隨時獲得正在製作的原型的輸入。
準備好原型後，您可以使用“釋出”→“釋出到Axure Share”將原型上傳到AxShare。將顯示以下對話方塊。
您必須在AxShare.com上建立一個帳戶才能繼續操作。如果您已經有帳戶，可以使用“登入”選項登入並將您的作品上傳到AxShare。
上傳的資料採用HTML、CSS和JavaScript格式。上傳後，您將獲得一個連結，您可以將其提供給目標利益相關者/團隊。