原型設計工具Axure RP新手教程（十一）：導航菜單

---

Axure RP是一套專門為網站或應用程序所設計的快速原型設計工具， 可以讓應用網站策劃人員或網站功能界面設計師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規格。

免費下載Axure RP 優惠購買Axure RP

---

在本教程中，您將學習如何制作一個導航菜單，您可以將其添加到許多頁面中，并可以從單個中央位置作為主菜單進行管理。（此處）

小部件和頁面設置

創建四頁

• 打開一個新的RP文件。

• 在Pages（頁面）窗格中，緩慢雙擊Page1（頁面1）將其重命名，命名為Home。

• 單擊Pages（頁面）窗格右上角的Add Page（添加頁面）圖標，以向項目中再添加三個頁面。將頁面命名為About，Contact和Help。

為每個頁面創建一個按鈕小部件

• 雙擊Home（主頁）以在畫布上將其打開。

• 將四個按鈕小部件拖動到畫布上，然后將它們水平對齊。

注意：您可以通過選擇小部件并使用界面頂部的Align and Distribute（對齊和分配）選項來自動對齊和分配小部件。

• 將按鈕上的文本更改為Home，About，Contact，和Help以匹配頁面名稱。

配置按鈕鏈接

• 選擇Home（主頁）按鈕，然后在Interactions（交互）窗格中單擊Click（單擊）Tap（點擊）→Open Link（打開鏈接）。

• 在出現的列表中，選擇Home（主頁）。然后，單擊確定以保存操作。

• 對其他三個按鈕重復這些步驟，為每個按鈕選擇相應的頁面。

注意：您也可以使用參考頁面功能將導航按鈕鏈接到頁面。

創建母版并將其添加到其他頁面

• 選擇所有四個按鈕，然后右鍵單擊所選內容。 在上下文菜單中，選擇Create Master（創建母版）。

• 在出現的對話框中，命名主導航標題，然后單擊Continue（繼續）。

• 現在，新的母版應該在Masters（母版）窗格中列出。右鍵單擊它，然后選擇添加到頁面。

• 在出現的對話框中，檢查About，Contact，和Help頁面，因為這些頁面上還沒有主頁。

• 在Position（位置）下，指定要放置母版的頁面坐標。然后，單擊確定。

注意：您對母版中的小部件所做的任何更改都會反映在母版上顯示的所有頁面上。

預覽

預覽頁面，然后單擊導航按鈕在原型頁面之間移動。

指示當前頁面

給按鈕選擇樣式效果

• 雙擊導航標題母版以在畫布上將其打開。

• 選擇所有四個按鈕，然后在Interactions （交互）窗格中單擊New Interaction（新建交互）。

• 單擊：selected樣式效果，然后在出現的塊中選擇橙色填充顏色。

匹配頁面加載時，將每個按鈕設置為選定狀態

• 選擇主頁按鈕，然后再次單擊New Interaction（新建交互）。

• 選擇Loaded事件，然后選擇Set Selected / Checked操作。

• 在Target（目標）下拉列表中選擇This Widget（此小部件），并保持其他值不變。

• 單擊OK（確定）保存交互。

• 將鼠標懸停在Loaded（已加載）事件標題上，然后單擊右側的Enable Cases（啟用案例）。在出現的Condition Builder（條件構建器）對話框中，單擊Add Logic（添加邏輯）。

• 在出現的條件行中，在第一個下拉列表中選擇值，然后在其旁邊的字段中輸入[[PageName]]。 保留其他字段不變。

• 對話框底部的摘要應顯示為： if "[[PageName]]" equals "Home"。 如果主頁是Web瀏覽器中加載的頁面，則將滿足此條件。

• 單擊OK（確定）關閉Condition Builder（條件生成器）。

• 對其余三個按鈕重復這些步驟。

預覽

預覽頁面，然后單擊導航按鈕在原型頁面之間移動。 加載每個頁面時，其相應的導航按鈕應變為橙色。

附加信息和提示

粘性導航

如果您希望將導航菜單固定在某個位置或卡住，以使其在滾動頁面時不會移動，請將其放在動態面板中。然后，將動態面板固定到瀏覽器。此技術對于制作粘性頁眉，頁腳和側邊欄非常方便。

關注慧聚IT微信公眾號???，了解產品的最新動態及最新資訊。