Axure RP - 使用母版和動態面板

許多軟體開發方法，在使用者介面開發方面，都採用了一種常見的技術——建立母版。

母版是一個可重用的線框圖，它將被建立一次，並在隨後的頁面上廣泛使用。使用 Axure RP，當我們建立一個母版頁面時，對該頁面所做的更改將應用於使用它的頁面。因此，它在很大程度上減少了所有頁面共有的元件所需的時間。

要開始使用母版，您可以關注母版部分（標記為 5），如下面的螢幕截圖中突出顯示的那樣。

使用此母版部分來 -

• 透過新增、刪除或編輯母版頁面/資料夾來組織原型的母版。

• 選擇一個特定的母版進行編輯。

動態面板

在 Axure RP 中，正如我們在上一章中所看到的，與給定元件關聯的不同狀態。為了整合/組織特定元件或一組元件的狀態，我們需要一個容器/佔位符。動態面板充當元件狀態的容器/佔位符。

讓我們使用一個示例更好地理解動態面板。我們將從我們的選單欄示例繼續。

此示例中的新增將是一個影像區域和選單欄下方的按鈕。使用常用元件下的元件佔位符作為影像區域和按鈕。將佔位符命名為 ImageAreaPlaceholder，按鈕命名為 showImageButton。

此外，讓我們將選單欄新增到母版中。右鍵單擊選單欄，然後單擊“轉換為母版”。將出現一個對話方塊，提示母版名稱。新增名稱為 menuBarMaster。

如上圖所示，選單欄變為粉紅色，並且已添加了母版的條目。

現在，讓我們建立一個動態面板。動態面板的上下文是，您希望根據“顯示影像”按鈕的點選來控制影像區域的可見性。擁有一個動態面板將允許影像區域具有靈活性。

讓我們看看如何建立動態面板。右鍵單擊影像區域，將出現上下文選單，選擇“轉換為動態面板”。

動態面板將在“大綱：頁面”下。此外，在“檢查器”中，它顯示了動態面板。將動態面板命名為 showImageDynamicPanel。此動態面板的名稱將在“大綱：頁面”部分下更新。

在設計區域中，右鍵單擊“顯示影像”動態面板以檢視上下文選單。選擇“設定隱藏”，動態面板將從螢幕上消失。

可以透過雙擊“大綱：頁面”下的動態面板來訪問它。

現在，讓我們為按鈕提供一個點選事件。單擊“顯示影像”按鈕，在“檢查器”→“屬性”下，雙擊“OnClick”互動。

如上圖所示，單擊“元件”下的“顯示/隱藏”。它將自動顯示可用於配置操作的元件。選中“選擇 showImageDynamicPanel”。單擊“確定”。

現在，單擊“預覽”。在預覽螢幕上，單擊“顯示影像”。最終建立了按鈕的另一個互動。