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

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

既然已經(jīng)將需翻譯的總篇數(shù)標(biāo)示出來，我想無論如何都要堅持，況且數(shù)量也不多是吧。

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

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

這五篇分別是：

第4篇：導(dǎo)航菜單

第5篇：標(biāo)簽控制

第6篇：燈箱效果

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

第8篇：手風(fēng)琴菜單樣式

第4篇：導(dǎo)航菜單

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

STEP 0：下載培訓(xùn)文檔

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

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

STEP 1：開始

• 打開培訓(xùn)文檔中的“Navigation menu”頁面。
• 這個頁面包含幾個已經(jīng)設(shè)定好鼠標(biāo)懸停和選中交互樣式的菜單組件（可以查看第一篇譯文“交互式按鈕”來學(xué)習(xí)如何配置交互樣式。）

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

STEP 2：配置導(dǎo)航鏈接

• 點(diǎn)擊“Home”組件，雙擊右側(cè)的屬性標(biāo)簽欄中的“OnClick”添加一個OnClick實(shí)例。
• 在對話框左邊欄，點(diǎn)擊“打開鏈接”行為。
• 在對話框右邊欄，點(diǎn)擊單選框按鈕“鏈接到當(dāng)前設(shè)計的一個頁面”，然后選擇“Navigation menu”。
• 點(diǎn)擊“確定”關(guān)閉對話框。
• 重復(fù)以上步驟對導(dǎo)航菜單中的其他三個按鈕進(jìn)行設(shè)置跳轉(zhuǎn)對應(yīng)的頁面，分別是“Manage”，“Profile”，“Help”。

STEP 3：設(shè)置每個頁面對應(yīng)的菜單項(xiàng)

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

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

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

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

• 到母版欄雙擊“Header”進(jìn)行編輯。
• 選擇當(dāng)前頁面的所有東西，點(diǎn)擊鼠標(biāo)右鍵，選擇“轉(zhuǎn)化成動態(tài)面板”。
• 在右側(cè)屬性面板中，點(diǎn)擊“固定到瀏覽器”。
• 在打開的對話窗口“固定到瀏覽器”，勾選復(fù)選框“固定到瀏覽器窗口”。然后在水平固定部分選擇“居中”以及在垂直固定部分選擇“頂部”。
• 點(diǎn)擊“確認(rèn)”關(guān)閉對話框。

STEP 5：預(yù)覽

點(diǎn)擊預(yù)覽。

使用導(dǎo)航菜單來切換頁面，嘗試滾動一下屏幕，你會發(fā)現(xiàn)導(dǎo)航菜單會固定在原處，不會跟隨頁面滾動。

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

第5篇：標(biāo)簽控制

本篇教程講解制作一個交互結(jié)構(gòu)以達(dá)到當(dāng)我們點(diǎn)擊一個標(biāo)簽時可以顯示那個標(biāo)簽里內(nèi)容的目的，實(shí)現(xiàn)的效果如下：

STEP 0：下載培訓(xùn)文檔

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

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

STEP 1：開始

• 打開培訓(xùn)文檔中的“Tab control”頁面。
• 頁面中包含了兩個標(biāo)簽組件，“Tab 1”和“Tab 2”，這兩個都已經(jīng)設(shè)置好了選中后的交互效果（點(diǎn)擊后呈現(xiàn)的顏色為f2f2f2）。
• 頁面還包含了兩個組，“Body 1”和“Body 2”.“Body 1”包含了“Tab 1”的內(nèi)容，“Body 2”包含了“Tab 2”的內(nèi)容。

STEP 2：創(chuàng)建動態(tài)面板

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

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

• 選擇“Tab 1”，雙擊右側(cè)屬性標(biāo)簽欄下的“OnClick”來添加一個“OnClick”實(shí)例。
• 在左邊欄，點(diǎn)擊行為“設(shè)置面板狀態(tài)”。
• 在右邊的“配置行為”欄，選擇你剛剛創(chuàng)建的動態(tài)面板。
• 在底部欄“選擇狀態(tài)”，使用下拉選項(xiàng)選擇“State1”（通常它是默認(rèn)選擇好的）。
• 回到左邊欄點(diǎn)擊行為“設(shè)置選中／勾選”。
• 在右邊欄，點(diǎn)擊復(fù)選框“這個組件”。
• 點(diǎn)擊“確定”關(guān)閉對話框。

STEP 4：為“Tab 2”重復(fù)上面的步驟

為“Tab 2”重復(fù)上面的操作。當(dāng)你添加“設(shè)置面板狀態(tài)時”，確認(rèn)這次要選擇“State 2”。

STEP 5：創(chuàng)建一個選擇組

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

STEP 6：預(yù)覽

點(diǎn)擊預(yù)覽。

嘗試點(diǎn)擊這兩個標(biāo)簽來切換他們。被選中的標(biāo)簽會改變成選中時的狀態(tài)（f2f2f2），并且動態(tài)面板會改變成對應(yīng)的狀態(tài)。

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

第6篇：燈箱效果

我們知道當(dāng)一個包含信息、圖片或者是視頻的燈箱顯示時，燈箱以外的界面就會變得昏暗。當(dāng)點(diǎn)擊昏暗的部分就可以關(guān)閉燈箱恢復(fù)到之前的頁面狀態(tài)。本篇教程實(shí)現(xiàn)的效果如下：

STEP 0：下載培訓(xùn)文檔

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

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

STEP 1：開始

打開培訓(xùn)文檔中的“Lightbox”頁面

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

通過選擇動態(tài)面板，點(diǎn)擊樣式標(biāo)簽下的復(fù)選框“隱藏”來隱藏動態(tài)面板。

STEP 2：創(chuàng)建燈箱交互

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

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

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

• 選擇動態(tài)面板，在右側(cè)面板的屬性標(biāo)簽下，點(diǎn)擊“固定到瀏覽器”。
• 在對話框“固定到瀏覽器”里，勾選復(fù)選框“固定到瀏覽器窗口”。
• 在“水平固定”部分選擇“中央”，在“垂直固定”部分選擇“居中”。
• 點(diǎn)擊“確定”關(guān)閉對話框。

STEP 4：預(yù)覽

點(diǎn)擊預(yù)覽。

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

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

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

彈出菜單是菜單的一種類別，當(dāng)鼠標(biāo)指針移開菜單時它可以自動隱藏。

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

實(shí)現(xiàn)的效果如下：

STEP 0：下載培訓(xùn)文檔

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

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

STEP 1：設(shè)置

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

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

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

STEP 3：預(yù)覽

點(diǎn)擊預(yù)覽。

在這個原型里，彈出菜單在鼠標(biāo)指針進(jìn)入“Help”按鈕后會顯示，當(dāng)指針離開按鈕區(qū)域則會隱藏。

STEP 4：自主工具提示

將你在上面所學(xué)到的知識來完成培訓(xùn)文檔下一個叫做“Custom Tooltip”的頁面。使用圖片的“鼠標(biāo)懸停”事件來設(shè)置當(dāng)鼠標(biāo)懸停在圖片上顯示對話氣泡框組件。這次嘗試添加一個動畫——150毫秒的淡入。

祝你好運(yùn)！如果你被困住，可以查看“Finished”文件夾已經(jīng)完成的文件進(jìn)行參考。

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

?第8篇：手風(fēng)琴樣式菜單

手風(fēng)琴控制器即當(dāng)每個頭部被點(diǎn)擊時會出現(xiàn)一部分內(nèi)容，來顯示更多的信息。一些會被設(shè)計成這樣——當(dāng)打開手風(fēng)琴控制器的一部分，那其余的部分就會被自動折疊。本篇實(shí)現(xiàn)效果如下：

STEP 0：下載培訓(xùn)文檔

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

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

STEP 1：設(shè)置

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

STEP 2：手風(fēng)琴交互行為

• 輕輕雙擊“Accordion 1”組進(jìn)入編輯模式，然后選擇“Header 1”。
• 在屬性標(biāo)簽下，雙擊“點(diǎn)擊”添加一個點(diǎn)擊實(shí)例。
• 在彈窗左邊欄，點(diǎn)擊“切換可見”行為。
• 在彈窗右邊欄，勾選“Body 1”動態(tài)面板。
• 在右邊欄的底部，確認(rèn)勾選了“切換”，然后勾選復(fù)選框“推／拉組件”并且選擇方面為“下面”。
• 點(diǎn)擊確定關(guān)閉實(shí)例編輯器。
• 重復(fù)上面的步驟設(shè)置“Header 2”切換可見的動態(tài)面板為“Body 2”，以及“Header 3”對應(yīng)的可見動態(tài)面板為“Body 3”。

你可能想要預(yù)覽一下這個頁面來確認(rèn)你的按鈕是否能如你預(yù)期那樣展開和折疊它們的相關(guān)部分內(nèi)容。

STEP 3：當(dāng)一個部分打開時折疊其他部分

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

STEP 4：預(yù)覽

點(diǎn)擊預(yù)覽。

嘗試打開和關(guān)閉不同的手風(fēng)琴部分。注意它是如何展開一個類目折疊其他類目的。

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

相關(guān)閱讀

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

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

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

譯者：Eugene

本文由 @Eugene 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。