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

---

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

免費下載Axure RP 優(yōu)惠購買Axure RP

---

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

小部件和頁面設(shè)置

創(chuàng)建四頁

• 打開一個新的RP文件。

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

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

為每個頁面創(chuàng)建一個按鈕小部件

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

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

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

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

配置按鈕鏈接

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

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

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

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

創(chuàng)建母版并將其添加到其他頁面

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

• 在出現(xiàn)的對話框中，命名主導航標題，然后單擊Continue（繼續(xù)）。

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

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

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

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

預(yù)覽

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

指示當前頁面

給按鈕選擇樣式效果

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

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

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

匹配頁面加載時，將每個按鈕設(shè)置為選定狀態(tài)

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

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

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

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

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

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

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

• 單擊OK（確定）關(guān)閉Condition Builder（條件生成器）。

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

預(yù)覽

預(yù)覽頁面，然后單擊導航按鈕在原型頁面之間移動。 加載每個頁面時，其相應(yīng)的導航按鈕應(yīng)變?yōu)槌壬?/span>

附加信息和提示

粘性導航

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

關(guān)注慧聚IT微信公眾號???，了解產(chǎn)品的最新動態(tài)及最新資訊。