中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文分享運用Axure Pro 8制作產品需求文檔的制作過程。希望對大家有所啟發。

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

需求文檔的目錄結構

• 修改歷史
• 版本說明
• 原型圖
  • 結構圖
  • 流程圖
  • 原型圖
• 產品介紹
• 產品簡介
• 開發周期
• 版本歷史

產品文檔步驟

• Web首頁菜單以及背景制作
• 菜單動作設置
• 二級菜單制作
• 內容頁的制作（包含內聯框架嵌套多頁面的方法）
• 總結

Web首頁菜單及背景制作

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

設置頁面自動居中

頁面居中是網頁布局的一般要求，在Axure中可以通設置“頁面樣式”居中對齊來達到這一效果：

設置背景色

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

菜單動作設置

通過上面的步驟可以獲取到一個可以平鋪的布局頁面。現在就開始制作一級導航菜單。

1、繪制一級菜單

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

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

2、實現菜單選項鼠標滑過動作的選中效果

選中一級菜單組，然后設置MouseOver（鼠標經過）時的狀態效果（這里只是加深了效果以增加體驗）。設置如下圖所示：

然后設置菜單選項被選中的效果，設置如下圖所示：

以上設置完之后就可以在預覽時實現鼠標滑過時的動態效果。這里需要優化的一點是在“修改歷史”，即菜單的第一項，選中它，然后屬性頁面選中selected，即用戶一進出此頁面時，該菜單選項默認是被選中的。如下圖：

二級菜單制作

由于一個一級菜單項中存在一個對應的二級菜單，所以需要加入一個動態面板進行對應二級菜單的展示。如圖所示，動態面板的每個狀態都與一級菜單項一一對應。

關聯一級菜單與二級菜單

現在要關聯一級菜單和二級菜單，就是當鼠標移動到一級菜單的時候，動態面板就會切換到對應的二級菜單狀態。這里的操作是設置一級菜單項的OnMouseEnter事件，即當鼠標進入對應一級菜單項時，二級菜單的動態面板就會切換到對應的二級菜單。這里使用的是變量的方法，方法如下圖：

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

提示：

假設一級菜單項中的文本為產品介紹，然后把該文本作為變量，然后去打開對應面板中與該變量值對應的狀態頁。

設置菜單的單選設置

完成以上的工作之后，就可以在鼠標在一級菜單中移動時來切換對應的二級菜單了?，F在就來處理一下，原理和上面設置OnMouseEnter事件是一樣的，只不過現在是設置OnClick事件。當設置完OnClick事件之后，發現點擊一級菜單時并沒有切換到對應的一級菜單，這里是有兩個操作需要注意的。

1.需要對一級菜單組進行selection group的設置，如下圖：

2.需要設置一級菜單項的selected的狀態，如下圖：

內容頁制作

使用內聯框架（Inline Frame）

在Home頁面的中心添加內聯框架，尺寸可以根據實際情況進行調整。如下圖：

然后把二級菜單項或一級菜單項（沒有二級菜單項）和內聯框架進行綁定，即設置他們的單擊事件。如把原型圖中的結構圖菜單通過內聯框架綁定到Pages模板中的結構圖頁面。操作如下圖：

這樣就可以在點擊二級菜單的時候切換到對應的頁面了。

注意

關于內聯框架的優化顯示

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

內聯框架嵌套多頁面的方法

上面的做法只適合做二級菜單只有一個頁面的交互，如果二級菜單中還要跳轉到別的操作頁面時，情況就復雜了。我這里的解決方法是為二級菜單對應的頁面設置一個動態面板，然后頁面操作造成的頁面切換都是通過動態面板來實現的。下面就來看看具體的操作步驟（以彈出窗口為例）。

1.頁面中設置一個按鈕或其他的觸發控件，用于觸發顯示動態面板，比如一個按鈕。如下圖：

2.然后再在動態面板的window面板中繪制彈窗的原型圖，如下：

3.接著把window_pandel動態面板右擊設置為隱藏，然后給彈出窗口按鈕設置onclick事件。

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

總結

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

參考

1. 《全面剖析｜一體化產品需求文檔》
2. 《Axure制作PRD（產品需求文檔）設計教程》

本文由 @ Kimson 原創發布于人人都是產品經理。未經許可，禁止轉載。