簡介

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

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

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

產(chǎn)品文檔步驟

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

Web首頁菜單及背景制作

使用Axure制作Web頁面類型的產(chǎn)品需求文檔拴测，首先為了適配各種瀏覽器劫映，要讓頁面內(nèi)容自適配居中违孝，并且背景圖可以自動填充。
設(shè)置頁面自動居中
頁面居中是網(wǎng)頁布局的一般要求泳赋，在Axure中可以通設(shè)置“頁面樣式”居中對齊來達到這一效果：

設(shè)置頁面居中.png

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

設(shè)置背景圖.png

菜單動作設(shè)置

通過上面的步驟可以獲取到一個可以平鋪的布局頁面〈蟛常現(xiàn)在就開始制作一級導(dǎo)航菜單制妄。
1、繪制一級菜單
這里首先要繪制一個矩形泵三，然后直接在矩形中編寫對應(yīng)的菜單耕捞，然后把矩形的名字修改為菜單對應(yīng)的文本衔掸。如下圖所示

繪制一級菜單.png

一級菜單組.png

2、實現(xiàn)菜單選項鼠標滑過動作的選中效果
選中一級菜單組磷斧，然后設(shè)置MouseOver（鼠標經(jīng)過）時的狀態(tài)效果（這里只是加深了效果以增加體驗）振愿。設(shè)置如下圖所示：

實現(xiàn)菜單選項鼠標滑過動作的選中效果.png

實現(xiàn)菜單選項鼠標動作的選中效果.png

以上設(shè)置完之后就可以在預(yù)覽時實現(xiàn)鼠標滑過時的動態(tài)效果弛饭。這里需要優(yōu)化的一點是在“修改歷史”冕末，即菜單的第一項，選中它侣颂，然后屬性頁面選中selected档桃，即用戶一進出此頁面時，該菜單選項默認是被選中的憔晒。如下圖：

設(shè)置菜單初始狀態(tài).png

二級菜單制作

由于一個一級菜單項中存在一個對應(yīng)的二級菜單藻肄，所以需要加入一個動態(tài)面板進行對應(yīng)二級菜單的展示。如圖所示丛晌，動態(tài)面板的每個狀態(tài)都與一級菜單項一一對應(yīng)仅炊。

二級菜單.png

關(guān)聯(lián)一級菜單與二級菜單
現(xiàn)在要關(guān)聯(lián)一級菜單和二級菜單斗幼，就是當鼠標移動到一級菜單的時候澎蛛，動態(tài)面板就會切換到對應(yīng)的二級菜單狀態(tài)。這里的操作是設(shè)置一級菜單項的OnMouseEnter事件蜕窿，即當鼠標進入對應(yīng)一級菜單項時谋逻，二級菜單的動態(tài)面板就會切換到對應(yīng)的二級菜單。這里使用的是變量的方法桐经，方法如下圖：

關(guān)聯(lián)一級菜單與二級菜單.png

1. 選擇一個一級菜單選項毁兆，然后懸著"Set Panel State"
2. 事件一欄中顯示對應(yīng)的操作
3. 選擇對應(yīng)的二級菜單，在下方的"Select state"一欄中阴挣，選擇Value值
4. 然后再下方的"Name or State"選項旁气堕，點擊函數(shù)按鈕，然后進入變量設(shè)置畔咧。
5. 在本地變量的一欄中茎芭，設(shè)置對應(yīng)值得變量，這里選擇空間中的文本值作為變量誓沸，設(shè)置為name梅桩。
6. 在上方中選擇"insert variable or function"，然后選中剛剛添加的name變量拜隧，點擊ok即可完成設(shè)置宿百。

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

設(shè)置菜單的單選設(shè)置
完成以上的工作之后雀费，就可以在鼠標在一級菜單中移動時來切換對應(yīng)的二級菜單了。現(xiàn)在就來處理一下痊焊，原理和上面設(shè)置OnMouseEnter事件是一樣的坐儿，只不過現(xiàn)在是設(shè)置OnClick事件。當設(shè)置完OnClick事件之后宋光，發(fā)現(xiàn)點擊一級菜單時并沒有切換到對應(yīng)的一級菜單貌矿，這里是有兩個操作需要注意的。

1. 需要對一級菜單組進行selection group的設(shè)置罪佳，如下圖：
   
   設(shè)置單選事件.png
2. 需要設(shè)置一級菜單項的selected的狀態(tài)逛漫，如下圖
   
   一級菜單的Select狀態(tài).png

內(nèi)容頁制作

使用內(nèi)聯(lián)框架（Inline Frame）
在Home頁面的中心添加內(nèi)聯(lián)框架，尺寸可以根據(jù)實際情況進行調(diào)整赘艳。如下圖

嵌入內(nèi)聯(lián)框架.png

菜單與內(nèi)容框架綁定.png

這樣就可以在點擊二級菜單的時候切換到對應(yīng)的頁面了枷踏。
注意
關(guān)于內(nèi)聯(lián)框架的優(yōu)化顯示

• 右擊菜單選擇去除滾動條
• 右擊選擇Toggle border去除邊框

內(nèi)聯(lián)框架嵌套多頁面的方法
上面的做法只適合做二級菜單只有一個頁面的交互，如果二級菜單中還要跳轉(zhuǎn)到別的操作頁面時掰曾，情況就復(fù)雜了旭蠕。我這里的解決方法是為二級菜單對應(yīng)的頁面設(shè)置一個動態(tài)面板，然后頁面操作造成的頁面切換都是通過動態(tài)面板來實現(xiàn)的旷坦。下面就來看看具體的操作步驟掏熬。（以彈出窗口為例）

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

內(nèi)聯(lián)框架嵌套多頁面.png

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

動態(tài)彈窗.png

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

設(shè)置onclick事件.png

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

   
   
   設(shè)置onclick事件2.png

總結(jié)

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

參考

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