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

---

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

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

---

在本教程中，您將學(xué)習(xí)如何制作一個(gè)導(dǎo)航菜單，您可以將其添加到許多頁面中，并可以從單個(gè)中央位置作為主菜單進(jìn)行管理。（此處）

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

創(chuàng)建四頁

• 打開一個(gè)新的RP文件。

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

• 單擊Pages（頁面）窗格右上角的Add Page（添加頁面）圖標(biāo)，以向項(xiàng)目中再添加三個(gè)頁面。將頁面命名為About，Contact和Help。

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

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

• 將四個(gè)按鈕小部件拖動(dòng)到畫布上，然后將它們水平對(duì)齊。

注意：您可以通過選擇小部件并使用界面頂部的Align and Distribute（對(duì)齊和分配）選項(xiàng)來自動(dòng)對(duì)齊和分配小部件。

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

配置按鈕鏈接

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

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

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

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

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

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

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

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

• 在出現(xiàn)的對(duì)話框中，檢查About，Contact，和Help頁面，因?yàn)檫@些頁面上還沒有主頁。

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

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

預(yù)覽

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

指示當(dāng)前頁面

給按鈕選擇樣式效果

• 雙擊導(dǎo)航標(biāo)題母版以在畫布上將其打開。

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

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

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

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

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

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

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

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

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

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

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

• 對(duì)其余三個(gè)按鈕重復(fù)這些步驟。

預(yù)覽

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

附加信息和提示

粘性導(dǎo)航

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

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