鑒于有時候篇幅短小，所以這次一次性整合了5篇上來，原教程共有18篇，已經到第8篇了！

這里十分感謝已經給我打賞和將來要給我打賞（笑臉^_^）的朋友，這確實讓我有種意外的喜悅，之前也都是來學習的，借此機會來回饋一下社區，大家一起進步。

既然已經將需翻譯的總篇數標示出來，我想無論如何都要堅持，況且數量也不多是吧。

我知道這里面很多翻譯都不到位，為了更好地練習，我也是選擇英文版跟著官方教程來，這樣菜單選項等名字對應起來是比較直觀的，但翻譯起來就沒那么正確了，這里還望大家多多指出不足，謝謝。

還有，官方教程真的很不錯。有時候會不理解，但多操作幾次確實能弄懂。

這五篇分別是：

第4篇：導航菜單

第5篇：標簽控制

第6篇：燈箱效果

第7篇：彈出菜單和自主工具提示

第8篇：手風琴菜單樣式

第4篇：導航菜單

本篇教程講解如何利用導航菜單，在多個頁面自由跳轉，并固定住其位置不受頁面滾動影響，涉及到母版功能、添加OnPageLoad實例、動態面板，實現的效果如下：

STEP 0：下載培訓文檔

如果你還沒有培訓文檔，請點擊下載AxureTraining.rp文檔。這個文檔包含了Axure培訓網站上每個教程用到的相關頁面。我們建議你一直都用我們準備的這個文檔來完成教程，但是如果你不用，那也是可以的——即使你沒有使用我們的培訓文檔，我們也總是會告訴你為了完成每一個教程需要在新文件中創建什么。

AxureTraining.rp文檔打開后，選擇本次練習頁面后如下：

STEP 1：開始

• 打開培訓文檔中的“Navigation menu”頁面。
• 這個頁面包含幾個已經設定好鼠標懸停和選中交互樣式的菜單組件（可以查看第一篇譯文“交互式按鈕”來學習如何配置交互樣式。）

• 選中頂部所有菜單組件，點擊鼠標右鍵選擇“轉換成母版”。
• 將這個母版命名為“Header”并且選擇下拉行為（原文：drop behavior，還是你們告訴我怎么翻吧，謝謝）“鎖定母版的位置”。
• 點擊“繼續”完成創建母版。
• 雙擊母版的任何地方可以打開進行編輯。

STEP 2：配置導航鏈接

• 點擊“Home”組件，雙擊右側的屬性標簽欄中的“OnClick”添加一個OnClick實例。
• 在對話框左邊欄，點擊“打開鏈接”行為。
• 在對話框右邊欄，點擊單選框按鈕“鏈接到當前設計的一個頁面”，然后選擇“Navigation menu”。
• 點擊“確定”關閉對話框。
• 重復以上步驟對導航菜單中的其他三個按鈕進行設置跳轉對應的頁面，分別是“Manage”，“Profile”，“Help”。

STEP 3：設置每個頁面對應的菜單項

• 打開“Navigation menu”頁面（此時不要選擇任何層）。
• 在右側Page Inspector，雙擊“OnpageLoad”在實例編輯器中添加一個新的OnPageLoad實例。
• 點擊行為組“Set selected／Checked”來展開它，然后選擇“Selected”行為。
• 在右側“配置行為”欄，點擊處在“Header”母版中的“Home”組件。
• 點擊“確定”關閉對話框。

將母版“Header”（通過拖拽）分別添加到“Manage”，“Profile”，“Help”頁面中去。

然后在他們相關的頁面重復上面的操作來設置“Manage”，“Profile”，和“Help”這些菜單類目選中后的跳轉加載頁面。這樣做好后，你可能想立刻預覽一下你的導航菜單頁面以便確認所有的鏈接是否都起作用，并且選擇的狀態也能正確的觸發。

SETP 4：將菜單固定在頁面頂部

• 到母版欄雙擊“Header”進行編輯。
• 選擇當前頁面的所有東西，點擊鼠標右鍵，選擇“轉化成動態面板”。
• 在右側屬性面板中，點擊“固定到瀏覽器”。
• 在打開的對話窗口“固定到瀏覽器”，勾選復選框“固定到瀏覽器窗口”。然后在水平固定部分選擇“居中”以及在垂直固定部分選擇“頂部”。
• 點擊“確認”關閉對話框。

STEP 5：預覽

點擊預覽。

使用導航菜單來切換頁面，嘗試滾動一下屏幕，你會發現導航菜單會固定在原處，不會跟隨頁面滾動。

第四篇原文鏈接：https://www.axure.com/support/training/navigation-menu-tutorial

第5篇：標簽控制

本篇教程講解制作一個交互結構以達到當我們點擊一個標簽時可以顯示那個標簽里內容的目的，實現的效果如下：

STEP 0：下載培訓文檔

如果你還沒有培訓文檔，請點擊下載AxureTraining.rp文檔。這個文檔包含了Axure培訓網站上每個教程用到的相關頁面。我們建議你一直都用我們準備的這個文檔來完成教程，但是如果你不用，那也是可以的——即使你沒有使用我們的培訓文檔，我們也總是會告訴你為了完成每一個教程新文件里都創建了什么。

AxureTraining.rp文檔打開后，選擇本次練習頁面后如下：

STEP 1：開始

• 打開培訓文檔中的“Tab control”頁面。
• 頁面中包含了兩個標簽組件，“Tab 1”和“Tab 2”，這兩個都已經設置好了選中后的交互效果（點擊后呈現的顏色為f2f2f2）。
• 頁面還包含了兩個組，“Body 1”和“Body 2”.“Body 1”包含了“Tab 1”的內容，“Body 2”包含了“Tab 2”的內容。

STEP 2：創建動態面板

• 右鍵點擊“Body 1”組，選擇“轉化成動態面板”。
• 雙擊剛創建的動態面板打開動態面板管理器。
• 點擊綠色的“+”號添加一個狀態。
• 雙擊新狀態的名字State 2進行編輯。
• 返回到“Tab control”頁面。右鍵點擊“Body 2”選擇“剪切”。
• 返回到“State2”標簽欄并且粘貼“Body 2”（將其X，Y的數值都改為0）。

STEP 3：給“Tab 1”添加交互

• 選擇“Tab 1”，雙擊右側屬性標簽欄下的“OnClick”來添加一個“OnClick”實例。
• 在左邊欄，點擊行為“設置面板狀態”。
• 在右邊的“配置行為”欄，選擇你剛剛創建的動態面板。
• 在底部欄“選擇狀態”，使用下拉選項選擇“State1”（通常它是默認選擇好的）。
• 回到左邊欄點擊行為“設置選中／勾選”。
• 在右邊欄，點擊復選框“這個組件”。
• 點擊“確定”關閉對話框。

STEP 4：為“Tab 2”重復上面的步驟

為“Tab 2”重復上面的操作。當你添加“設置面板狀態時”，確認這次要選擇“State 2”。

STEP 5：創建一個選擇組

• 選中一個標簽就需要取消選擇另一個標簽，所以我們需要將兩個標簽組成一個選擇組。在選擇組中，一次只能有一個組件可以被選中。當一個組件被選中，組里的另一個組件將會自動取消選擇。
• 選擇“Tab 1”和“Tab 2”。
• 在右側屬性標簽欄下，定位到“選擇組”區域。在這個區域輸入“TabGroup”來可以創建一個選擇組并將這些組件放到組里。

STEP 6：預覽

點擊預覽。

嘗試點擊這兩個標簽來切換他們。被選中的標簽會改變成選中時的狀態（f2f2f2），并且動態面板會改變成對應的狀態。

第5篇原文鏈接：?https://www.axure.com/support/training/tab-control-tutorial

第6篇：燈箱效果

我們知道當一個包含信息、圖片或者是視頻的燈箱顯示時，燈箱以外的界面就會變得昏暗。當點擊昏暗的部分就可以關閉燈箱恢復到之前的頁面狀態。本篇教程實現的效果如下：

STEP 0：下載培訓文檔

如果你還沒有培訓文檔，請點擊下載AxureTraining.rp文檔。這個文檔包含了Axure培訓網站上每個教程用到的相關頁面。我們建議你一直都用我們準備的這個文檔來完成教程，但是如果你不用，那也是可以的——即使你沒有使用我們的培訓文檔，我們也總是會告訴你為了完成每一個教程新文件里都創建了什么。

AxureTraining.rp文檔打開后，選擇本次練習頁面后如下：

STEP 1：開始

打開培訓文檔中的“Lightbox”頁面

這個頁面包含了一個按鈕和一個帶有一張地圖的動態面板。

通過選擇動態面板，點擊樣式標簽下的復選框“隱藏”來隱藏動態面板。

STEP 2：創建燈箱交互

• 選擇按鈕“view on map”然后雙擊右側面板屬性標簽欄的“OnClick”來添加一個OnClick實例。
• 在彈窗的左邊欄，點擊行為“顯示”。
• 在右邊欄點擊Map lightbox動態面板。
• 在右邊欄的底部，使用“更多選項”的下拉框選擇“以燈箱對待”。
• 一個標記為“背景顏色”的取色器出現。這個取色器是用來設置當燈箱元素顯現時，在界面的其余部分上方覆蓋的一層顏色遮蓋層。它的默認顏色是 #2f4f4f（一個暗灰色），透明度為61%。
• 這里采用默認值，點擊確定關閉對話框。這時你可能想預覽一下確認燈箱它是否能工作。

STEP 3：將燈箱固定在窗口的中央

有時燈箱被固定在窗口的中央，這樣即使你滾動頁面它總是可以出現在同一個地方。繼續下面的步驟來學習如何創建這個效果。

• 選擇動態面板，在右側面板的屬性標簽下，點擊“固定到瀏覽器”。
• 在對話框“固定到瀏覽器”里，勾選復選框“固定到瀏覽器窗口”。
• 在“水平固定”部分選擇“中央”，在“垂直固定”部分選擇“居中”。
• 點擊“確定”關閉對話框。

STEP 4：預覽

點擊預覽。

點擊按鈕“view on map”查看燈箱效果。點擊燈箱外的任意地方來關閉它。我們在動態面板的右上角也做了一個關閉的按鈕來隱藏動態面板，點擊它也可以關閉燈箱。

第6篇原文鏈接：?https://www.axure.com/support/training/lightbox-tutorial

第7篇：彈出菜單和自主工具提示

彈出菜單是菜單的一種類別，當鼠標指針移開菜單時它可以自動隱藏。

同樣的技術可以使用在建立一個彈出菜單，這會在下面解釋到，也可以用來創建一個自主工具提示。（創建一個簡單的文本提示那就更簡單了，直接使用右側的屬性標簽欄下的“提示”區域。）

實現的效果如下：

STEP 0：下載培訓文檔

如果你還沒有培訓文檔，請點擊下載AxureTraining.rp文檔。這個文檔包含了Axure培訓網站上每個教程用到的相關頁面。我們建議你一直都用我們準備的這個文檔來完成教程，但是如果你不用，那也是可以的——即使你沒有使用我們的培訓文檔，我們也總是會告訴你為了完成每一個教程新文件里都創建了什么。

AxureTraining.rp文檔打開后，選擇本次練習頁面后如下：

STEP 1：設置

• 打開培訓文檔中的“Flyout menu”頁面。這個頁面包含了四個按鈕組成的菜單，以及其中一個主菜單包含兩個字菜單按鈕。
• 通過選擇兩個子菜單然后點擊工具欄的“組”給兩個子菜單添加一個組。
• 將組命名為“Flyout”。
• 點擊右側樣式標簽下的復選框“隱藏”來隱藏這個組。

STEP 2：添加一個交互行為來顯示彈出菜單

• 選擇“Help”組件（就是有兩個子菜單的那個）。
• 雙擊屬性標簽欄中的“鼠標進入”來創建一個新的鼠標進入實例。（對于自主工具提示，你也許會希望使用“鼠標懸?！笔录泶?。鼠標懸停事件只有鼠標指針停在組件上方兩秒才會生效。要找到鼠標懸停，在“更多事件”下拉框找。）
• 在對話框左邊欄，點擊行為“顯示”。
• 在對話框右邊欄，點擊組“Flyout”。
• 在右邊欄底部，使用“更多選項”下拉框選擇“作為彈出菜單”
• 點擊確定關閉對話框。

STEP 3：預覽

點擊預覽。

在這個原型里，彈出菜單在鼠標指針進入“Help”按鈕后會顯示，當指針離開按鈕區域則會隱藏。

STEP 4：自主工具提示

將你在上面所學到的知識來完成培訓文檔下一個叫做“Custom Tooltip”的頁面。使用圖片的“鼠標懸?！笔录碓O置當鼠標懸停在圖片上顯示對話氣泡框組件。這次嘗試添加一個動畫——150毫秒的淡入。

祝你好運！如果你被困住，可以查看“Finished”文件夾已經完成的文件進行參考。

第7篇原文鏈接：?https://www.axure.com/support/training/flyout-menu-custom-tooltip-tutorial

?第8篇：手風琴樣式菜單

手風琴控制器即當每個頭部被點擊時會出現一部分內容，來顯示更多的信息。一些會被設計成這樣——當打開手風琴控制器的一部分，那其余的部分就會被自動折疊。本篇實現效果如下：

STEP 0：下載培訓文檔

如果你還沒有培訓文檔，請點擊下載AxureTraining.rp文檔。這個文檔包含了Axure培訓網站上每個教程用到的相關頁面。我們建議你一直都用我們準備的這個文檔來完成教程，但是如果你不用，那也是可以的——即使你沒有使用我們的培訓文檔，我們也總是會告訴你為了完成每一個教程新文件里都創建了什么。

AxureTraining.rp文檔打開后，選擇本次練習頁面后如下：

STEP 1：設置

• 打開培訓文檔中的“Accordion control”頁面。
• 在畫布中有三個組件，每一個都包含一個“Header”組件和四個“Body”組件。這個“Body”組件會先隱藏，只有當點擊“Header”組件時才會顯示。
• 點擊選擇組“Accordion 1”，然后再次點擊進入組去編輯它。
• 選擇四個“Body 1 Item”組件，鼠標右鍵選擇“轉化為動態面板”在右鍵菜單中。
• 將動態面板命名為“Body 1”，然后通過勾選樣式標簽欄的“隱藏”的復選框來隱藏它。
• 對“Body 2 Item”和“Body 3 Item”重復執行上面的步驟，將新的動態面板分別命名為“Body 2”和“Body 3”。
• 對齊排列三個“Accordion”組以便“Header 2”恰好在“Header 1”的下面以及“Header 3”恰好在“Header 2”的下面。

STEP 2：手風琴交互行為

• 輕輕雙擊“Accordion 1”組進入編輯模式，然后選擇“Header 1”。
• 在屬性標簽下，雙擊“點擊”添加一個點擊實例。
• 在彈窗左邊欄，點擊“切換可見”行為。
• 在彈窗右邊欄，勾選“Body 1”動態面板。
• 在右邊欄的底部，確認勾選了“切換”，然后勾選復選框“推／拉組件”并且選擇方面為“下面”。
• 點擊確定關閉實例編輯器。
• 重復上面的步驟設置“Header 2”切換可見的動態面板為“Body 2”，以及“Header 3”對應的可見動態面板為“Body 3”。

你可能想要預覽一下這個頁面來確認你的按鈕是否能如你預期那樣展開和折疊它們的相關部分內容。

STEP 3：當一個部分打開時折疊其他部分

• 選擇“Header 1”。雙擊“實例1”來打開盡心編輯。
• 在彈窗左邊欄，點擊“隱藏”。
• 在彈窗右邊欄，勾選“Body 2”動態面板。
• 點擊復選框“收回組件”。確認方面選項設置成“下面”。
• 接下來，依然在右邊欄勾選“Body 3”動態面板。
• 點擊復選框“收回組件”。確認方向選項為“下面”。
• 點擊確認關閉實例編輯器。
• 重復上面的交互步驟依次對“Header 2”和“Header 3”進行操作，每個實例要隱藏其他兩個動態面板。

STEP 4：預覽

點擊預覽。

嘗試打開和關閉不同的手風琴部分。注意它是如何展開一個類目折疊其他類目的。

第8篇原文鏈接：https://www.axure.com/support/training/accordion-control-tutorial

相關閱讀

Axure RP官方教程翻譯（1）：交互式按鈕

Axure RP官方教程翻譯（2）：文本鏈接

Axure RP官方教程翻譯（3）：顯示隱藏的部件

譯者：Eugene

本文由 @Eugene 翻譯發布于人人都是產品經理。未經許可，禁止轉載。