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

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

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

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

創(chuàng)建四頁(yè)

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

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

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

• 雙擊Home（主頁(yè)）以在畫(huà)布上將其打開(kāi)。

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

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

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

配置按鈕鏈接

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

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

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

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

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

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

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

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

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

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

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

預(yù)覽

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

指示當(dāng)前頁(yè)面

給按鈕選擇樣式效果

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

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

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

• 選擇主頁(yè)按鈕，然后再次單擊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"。 如果主頁(yè)是Web瀏覽器中加載的頁(yè)面，則將滿足此條件。

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

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

預(yù)覽

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

附加信息和提示

粘性導(dǎo)航

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

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