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

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

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

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

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

這五篇分別是：

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

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

第6篇：燈箱效果

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

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

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

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

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

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

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

STEP 1：開始

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

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

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

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

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

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

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

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

SETP 4：將菜單固定在頁(yè)面頂部

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

STEP 5：預(yù)覽

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

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

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

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

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

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

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

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

STEP 1：開始

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

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

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

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

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

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

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

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

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

STEP 6：預(yù)覽

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

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

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

第6篇：燈箱效果

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

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

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

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

STEP 1：開始

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

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

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

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

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

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

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

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

STEP 4：預(yù)覽

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

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

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

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

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

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

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

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

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

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

STEP 1：設(shè)置

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

STEP 2：添加一個(gè)交互行為來(lái)顯示彈出菜單

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

STEP 3：預(yù)覽

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

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

STEP 4：自主工具提示

將你在上面所學(xué)到的知識(shí)來(lái)完成培訓(xùn)文檔下一個(gè)叫做“Custom Tooltip”的頁(yè)面。使用圖片的“鼠標(biāo)懸停”事件來(lái)設(shè)置當(dāng)鼠標(biāo)懸停在圖片上顯示對(duì)話氣泡框組件。這次嘗試添加一個(gè)動(dòng)畫——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)每個(gè)頭部被點(diǎn)擊時(shí)會(huì)出現(xiàn)一部分內(nèi)容，來(lái)顯示更多的信息。一些會(huì)被設(shè)計(jì)成這樣——當(dāng)打開手風(fēng)琴控制器的一部分，那其余的部分就會(huì)被自動(dòng)折疊。本篇實(shí)現(xiàn)效果如下：

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

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

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

STEP 1：設(shè)置

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

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

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

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

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

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

STEP 4：預(yù)覽

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

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

第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)載。