本文分享運(yùn)用Axure Pro 8制作產(chǎn)品需求文檔的制作過程。希望對(duì)大家有所啟發(fā)。

第一次使用Axure Pro 8來編寫產(chǎn)品需求文檔，有點(diǎn)小雞凍。主要是參考人人都是產(chǎn)品經(jīng)理的相關(guān)文章《Axure制作PRD（產(chǎn)品需求文檔）設(shè)計(jì)教程》。然后自己也邊研究使用Axure Pro然后邊編寫產(chǎn)品文檔。

需求文檔的目錄結(jié)構(gòu)

• 修改歷史
• 版本說明
• 原型圖
  • 結(jié)構(gòu)圖
  • 流程圖
  • 原型圖
• 產(chǎn)品介紹
• 產(chǎn)品簡(jiǎn)介
• 開發(fā)周期
• 版本歷史

產(chǎn)品文檔步驟

• Web首頁(yè)菜單以及背景制作
• 菜單動(dòng)作設(shè)置
• 二級(jí)菜單制作
• 內(nèi)容頁(yè)的制作（包含內(nèi)聯(lián)框架嵌套多頁(yè)面的方法）
• 總結(jié)

Web首頁(yè)菜單及背景制作

使用Axure制作Web頁(yè)面類型的產(chǎn)品需求文檔，首先為了適配各種瀏覽器，要讓頁(yè)面內(nèi)容自適配居中，并且背景圖可以自動(dòng)填充。

設(shè)置頁(yè)面自動(dòng)居中

頁(yè)面居中是網(wǎng)頁(yè)布局的一般要求，在Axure中可以通設(shè)置“頁(yè)面樣式”居中對(duì)齊來達(dá)到這一效果：

設(shè)置背景色

網(wǎng)頁(yè)中較常見的只會(huì)使用一種背景顏色，直接在“頁(yè)面樣式”的背景色中設(shè)置相應(yīng)顏色即可。尚若要設(shè)置多種背景顏色布局，而且在不同的設(shè)備和瀏覽器上都呈現(xiàn)相同效果，就需要采用科學(xué)而不是乖戾的做法。這里的方案是：使用上中下兩色背景圖片來布局。然后用PS做了一張兩色的png圖片。然后在“頁(yè)面樣式”的背景圖中導(dǎo)入這張背景圖。

菜單動(dòng)作設(shè)置

通過上面的步驟可以獲取到一個(gè)可以平鋪的布局頁(yè)面。現(xiàn)在就開始制作一級(jí)導(dǎo)航菜單。

1、繪制一級(jí)菜單

這里首先要繪制一個(gè)矩形，然后直接在矩形中編寫對(duì)應(yīng)的菜單，然后把矩形的名字修改為菜單對(duì)應(yīng)的文本。如下圖所示：

然后把剩下的一級(jí)菜單都按照上面的方式創(chuàng)建起來，然后把他們打包成一個(gè)組，命名為一級(jí)菜單組。如下圖：

2、實(shí)現(xiàn)菜單選項(xiàng)鼠標(biāo)滑過動(dòng)作的選中效果

選中一級(jí)菜單組，然后設(shè)置MouseOver（鼠標(biāo)經(jīng)過）時(shí)的狀態(tài)效果（這里只是加深了效果以增加體驗(yàn)）。設(shè)置如下圖所示：

然后設(shè)置菜單選項(xiàng)被選中的效果，設(shè)置如下圖所示：

以上設(shè)置完之后就可以在預(yù)覽時(shí)實(shí)現(xiàn)鼠標(biāo)滑過時(shí)的動(dòng)態(tài)效果。這里需要優(yōu)化的一點(diǎn)是在“修改歷史”，即菜單的第一項(xiàng)，選中它，然后屬性頁(yè)面選中selected，即用戶一進(jìn)出此頁(yè)面時(shí)，該菜單選項(xiàng)默認(rèn)是被選中的。如下圖：

二級(jí)菜單制作

由于一個(gè)一級(jí)菜單項(xiàng)中存在一個(gè)對(duì)應(yīng)的二級(jí)菜單，所以需要加入一個(gè)動(dòng)態(tài)面板進(jìn)行對(duì)應(yīng)二級(jí)菜單的展示。如圖所示，動(dòng)態(tài)面板的每個(gè)狀態(tài)都與一級(jí)菜單項(xiàng)一一對(duì)應(yīng)。

關(guān)聯(lián)一級(jí)菜單與二級(jí)菜單

現(xiàn)在要關(guān)聯(lián)一級(jí)菜單和二級(jí)菜單，就是當(dāng)鼠標(biāo)移動(dòng)到一級(jí)菜單的時(shí)候，動(dòng)態(tài)面板就會(huì)切換到對(duì)應(yīng)的二級(jí)菜單狀態(tài)。這里的操作是設(shè)置一級(jí)菜單項(xiàng)的OnMouseEnter事件，即當(dāng)鼠標(biāo)進(jìn)入對(duì)應(yīng)一級(jí)菜單項(xiàng)時(shí)，二級(jí)菜單的動(dòng)態(tài)面板就會(huì)切換到對(duì)應(yīng)的二級(jí)菜單。這里使用的是變量的方法，方法如下圖：

1. 選擇一個(gè)一級(jí)菜單選項(xiàng)，然后懸著”Set Panel State”
2. 事件一欄中顯示對(duì)應(yīng)的操作
3. 選擇對(duì)應(yīng)的二級(jí)菜單，在下方的”Select state”一欄中，選擇Value值
4. 然后再下方的”Name or State”選項(xiàng)旁，點(diǎn)擊函數(shù)按鈕，然后進(jìn)入變量設(shè)置。
5. 在本地變量的一欄中，設(shè)置對(duì)應(yīng)值得變量，這里選擇空間中的文本值作為變量，設(shè)置為name。
6. 在上方中選擇”insert variable or function”，然后選中剛剛添加的name變量，點(diǎn)擊ok即可完成設(shè)置。

提示：

假設(shè)一級(jí)菜單項(xiàng)中的文本為產(chǎn)品介紹，然后把該文本作為變量，然后去打開對(duì)應(yīng)面板中與該變量值對(duì)應(yīng)的狀態(tài)頁(yè)。

設(shè)置菜單的單選設(shè)置

完成以上的工作之后，就可以在鼠標(biāo)在一級(jí)菜單中移動(dòng)時(shí)來切換對(duì)應(yīng)的二級(jí)菜單了?，F(xiàn)在就來處理一下，原理和上面設(shè)置OnMouseEnter事件是一樣的，只不過現(xiàn)在是設(shè)置OnClick事件。當(dāng)設(shè)置完OnClick事件之后，發(fā)現(xiàn)點(diǎn)擊一級(jí)菜單時(shí)并沒有切換到對(duì)應(yīng)的一級(jí)菜單，這里是有兩個(gè)操作需要注意的。

1.需要對(duì)一級(jí)菜單組進(jìn)行selection group的設(shè)置，如下圖：

2.需要設(shè)置一級(jí)菜單項(xiàng)的selected的狀態(tài)，如下圖：

內(nèi)容頁(yè)制作

使用內(nèi)聯(lián)框架（Inline Frame）

在Home頁(yè)面的中心添加內(nèi)聯(lián)框架，尺寸可以根據(jù)實(shí)際情況進(jìn)行調(diào)整。如下圖：

然后把二級(jí)菜單項(xiàng)或一級(jí)菜單項(xiàng)（沒有二級(jí)菜單項(xiàng)）和內(nèi)聯(lián)框架進(jìn)行綁定，即設(shè)置他們的單擊事件。如把原型圖中的結(jié)構(gòu)圖菜單通過內(nèi)聯(lián)框架綁定到Pages模板中的結(jié)構(gòu)圖頁(yè)面。操作如下圖：

這樣就可以在點(diǎn)擊二級(jí)菜單的時(shí)候切換到對(duì)應(yīng)的頁(yè)面了。

注意

關(guān)于內(nèi)聯(lián)框架的優(yōu)化顯示

• 右擊菜單選擇去除滾動(dòng)條
• 右擊選擇Toggle border去除邊框

內(nèi)聯(lián)框架嵌套多頁(yè)面的方法

上面的做法只適合做二級(jí)菜單只有一個(gè)頁(yè)面的交互，如果二級(jí)菜單中還要跳轉(zhuǎn)到別的操作頁(yè)面時(shí)，情況就復(fù)雜了。我這里的解決方法是為二級(jí)菜單對(duì)應(yīng)的頁(yè)面設(shè)置一個(gè)動(dòng)態(tài)面板，然后頁(yè)面操作造成的頁(yè)面切換都是通過動(dòng)態(tài)面板來實(shí)現(xiàn)的。下面就來看看具體的操作步驟（以彈出窗口為例）。

1.頁(yè)面中設(shè)置一個(gè)按鈕或其他的觸發(fā)控件，用于觸發(fā)顯示動(dòng)態(tài)面板，比如一個(gè)按鈕。如下圖：

2.然后再在動(dòng)態(tài)面板的window面板中繪制彈窗的原型圖，如下：

3.接著把window_pandel動(dòng)態(tài)面板右擊設(shè)置為隱藏，然后給彈出窗口按鈕設(shè)置onclick事件。

4.然后再窗口中的“是”、“否”按鈕設(shè)置點(diǎn)擊事件，設(shè)置為隱藏window_panel即可。

總結(jié)

以上是關(guān)于使用Axure來制作有交互的需求文檔，至于文檔的頁(yè)面的相關(guān)內(nèi)容模板，可以參考臻龍老師的文章：《全面剖析｜一體化產(chǎn)品需求文檔》

參考

1. 《全面剖析｜一體化產(chǎn)品需求文檔》
2. 《Axure制作PRD（產(chǎn)品需求文檔）設(shè)計(jì)教程》

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