首先這里要感謝一下@臻龍?老師，當年看的他的一篇《Word產品需求文檔，已經過時了》文章，那時候我也剛剛入產品1年左右，頓時被這種PRD文檔框架風格深深吸引了，不需要word，而是直接呈現在Axure里面，非常新穎。遂今天打算做一個小小的設計教程給大家，我會把所有步驟，事件等寫下來，新手可以看看覺得有用的就學習一下，少走一些彎路，老人請多多指教，如果有不對的地方或者有更好的地方請指出來，共同學習嘛。

PS:關于PRD是什么這里我就不說了，說多了也沒意思，直接進入正題吧。

我用的是axure8，有些東西的位置可能和7不一樣，大家自己找找就可以了，蠻方便的。這里我就直接沿用臻龍老師的布局樣式來說了（我還是改了一點的….）。

這不是prd教程！而是Axure做PRD框架的一個教程！源文件的預覽網址是?http://qdvf6p.axshare.com/?大家可以先預覽一下，決定是否要看這份教程。

因為這是一份axure編寫的PRD文檔，所以你要考慮它的適用性，這里推薦一些小型的web端，APP端，可以使用這種方法，但是大型的系統以及web端頁面顯得就不是那么好用了?？傊痪湓?，刀刃要用到對的地方。

首先我們把這個頁面拆成三個部分：

1. 全局設置
2. 一級菜單欄
3. 二級菜單欄
4. 內容頁

這也是我們今天要全部弄的東西了，畢竟這種框架就相當于一個目錄，把其他內容綜合起來。內容填充什么，這個由你自己來決定。

1.全局設置

顧名思義，就是一些設置一次就不需要再改動的東西了。（為了照顧新人，所以我會詳細的寫，會的大神可以忽略。。）

頁面居中

就是讓頁面的東西居中顯示，如圖所示設置即可。

菜單欄背景顏色

之前我也是做了兩個大矩形，當點擊預覽的時候就傻了。因為長度不夠后面留了很大的白色，想想拉長的話換個電腦可能也會出現各種各樣的問題，本著能少設置一下，多兼容一些電腦，做了這樣的設置

第一步，打開你的axure，然后放兩個矩形上去，一個是一級標題欄的底色，一個是二級標題欄的底色。選好他們的高度就可以了。如下圖，很糙很糙。

第二步，打開你萬能的QQ，Ctrl+Alt+A開啟截圖功能，截下來一條，保存為圖片，名字隨便起。

第三步，依然在樣式里，選擇導入，選取你剛才截取并保存的圖片，點擊確定即可，這個時候背景就變成你剛剛截圖的塊塊了

接著你就可以愉快的看到你的頁面呈現了不一樣的效果。如下圖。

和說好的完全不一樣啊，但是不用著急，這里面我們只需要回到樣式里，將背景圖片選項改為水平重復即可，如下圖

選擇完以后，就可以了，無論你屏幕有多大，放心吧，他都會延伸出去的。一勞永逸了。效果就不截圖了。

2.一級菜單欄

菜單欄

在做一級菜單欄的時候，我有試過幾種方案，比如說每個頁面都有一個菜單欄，相互之間是獨立的，但是這種菜單欄發死，不靈性，不動感，況且我是個喜歡偷懶的人，一頁一頁復制對于我來說，實在是累。然而母版有時候限制有太多了，于是想到了一個相對比較好的辦法吧，雖然不算完美，但最起碼看起來舒服

第一步，拉出來幾個矩形，矩形大小相等，在矩形內部直接填寫文字，并且給矩形名稱起和矩形內文字相同的文字，這步很重要，例如：需求池那個矩形，矩形內文字是需求池，矩形名稱也是需求池，（為什么這么做，稍后再說）排好位置。

第二步，把所有一級菜單欄的矩形設置為一個組合，就叫首頁組合好了。

第三步，點擊組合，設置鼠標懸停效果以及選中效果，即當你鼠標選中該項或懸停于該項時，表現出來的效果，并且設置選項組名稱（名稱隨便起就行，你記得住就好），將第一個即首頁設置為選中狀態。如圖所示

這樣設置后就稍微有一些簡單的效果了，且每個菜單都有自己的效果（你可以慢慢設置。。我只是設置了背景色而已，你可以設置好多），當你選中一項時會自動取消其他選中的效果，這就是選項組的作用。

這時候一級菜單基本就有個樣子了（前面那個產品需求文檔的文字和后面的版本號就隨便弄吧。。并不是重點）

3.二級菜單欄

從本文章圖可以看出來，一級菜單可以擁有好多的二級菜單，且每一個一級菜單對應的二級菜單內容都不相同，如何做到快速預覽，又不用看到標題欄來回閃動呢，這里就要用到動態面板了！

第一步，我們建立一個動態面板，動態面板命名為 “首頁二級標題欄”，當然了，名字都是隨意的，自己能記得住就好了。

第二步，添加動態面板狀態，這里要注意一下，你有幾個一級菜單的選項，這里的動態面板狀態最好就設置幾個，且務必注意，動態面板狀態的命名要和一級菜單的名稱完全一樣，在動態面板的狀態內填寫各個一級菜單對應二級菜單的菜單選項

例如：一級菜單有一個首頁，那么創立二級菜單動態面板的狀態的時候名稱也必須是首頁，在首頁這個狀態內寫上二級菜單的菜單選項，如圖

第三步，這一步就精髓了，為什么我讓你把所有的選項卡的名稱都統一了，就在這一點了，我們拿首頁這一欄為例子，首先選擇一級菜單的首頁的矩形框，我們給他添加交互事件： 鼠標移入時–設置 動態面板狀態–選擇狀態 Value–函數加入局部變量，隨便起個名字就好，然后插入變量，為this name，具體看圖。

第四步，再給一級菜單矩形框添加一個交互事件，當鼠標單擊時，狀態和上一個是一樣的，再添加該二級選項一個選中狀態就可以了，將二級菜單設置一個選項組，設置一下選中狀態，這里我就不重復截圖了。有人就想問為什么要這么麻煩。接下來你就知道了，你現在可以復制這些狀態，到一級菜單的任意菜單上，交互事件都不需要更改了。當鼠標移入和點擊時候，會自動切換至他們對應的狀態，只需要一個復制粘貼就行了。以后如果你要新加幾個菜單，只需要如此更改一下就可以了。

最后，給二級菜單添加三個交互事件，我以首頁的二級菜單‘產品介紹’為例子，

第一個交互事件，鼠標單擊時–在框架中打開鏈接–內聯框架–選擇產品介紹的頁面；

第二個交互事件，鼠標單擊時–設置選中–產品介紹–值為ture；

第三個交互事件，鼠標單擊時–設置選中–首頁–值為ture，就可以了，如下圖

這樣以后你就可以基本實現一個可點擊，可預覽的一級菜單加二級菜單了。

美化的小三角

小三角這個東西仁者見仁智者見智了，就是一個起到美化作用的東西，讓你知道你現在看得是哪一頁菜單的自選項的，這里我提供兩個小三角的方法，一個是用動態面板做，一個是用普通的矩形圖來做，要達到的效果就和預覽圖一樣，可以隨著鼠標移動而移動。鼠標移動的比較簡單，這里就不闡述了，只說動態面板的方法。

動態面板法：

這個方法比較笨，而且我現在也暫時沒有想好有什么簡單點的辦法。先放出來，后期大家一起討論一下，可以優化的地方。

第一步，創建一個動態面板，起個名字，我的就叫小三角了，有幾個菜單欄，就設計幾個動態面板狀態，這里注意下，動態面板狀態的名稱一定要和你一級菜單欄上的名稱一樣。如圖

第二步，拉出一個矩形，制作一個小三角，顏色你自己看著辦，一般都和二級菜單的那個底色是一樣的，在每一個動態面板內粘貼，調整小三角的位置，保證位置在相應的狀態下面就可以了。

第三步，這一步設置和二級菜單是一樣的，只需要添加兩個交互事件，一個是點擊的，一個是移入的，條件和二級菜單一樣，這里面直接截圖就好了，大家看一下就明白了

這樣設置后，三角就會跟隨你鼠標的移動而移動，產生菜單切換的效果。

4.內容頁

內容頁其實就簡單了，因為要照顧標題欄，防止由于頁面切換導致重新加載，所以這里面我選擇了使用內聯框架，有極個別過大的頁面則開啟新的頁面，有一個返回按鈕就可以了，在一二級菜單添加鼠標單擊事件，打開相對的那個頁面即可，內聯框架按照你其他最大頁面那樣拉出來就行了，效果看起來就不錯了。

教程寫到這里就結束了，第一次寫教程，可能有點亂，大家有不太理解的，也可以在下面評論留言，我只要不忙的時候一定會回復你們的。新手看到覺得有用的就學學，老人覺得我哪里不對的務必給點指點，新人也可以看看，正好一起學習了

最后想說幾句話，其實也不是多高深，都是老生常談了。

我之所以做這個教程，就是想給新人一點想法，讓一些不會的人可以自己動手，把這個東西做出來，畢竟產品這東西，要多實踐，做出來的才是你自己的，c+v永遠是別人的，在做的過程中，你才會思考為什么這樣做，還有沒有改良的地方，這也正是我希望看到的，大家需要的是一個交流和學習的地方，我并不是什么圣人，也是一步一步過來的，也是一點一滴積累起來的，想要通過這個事情告訴大家：

今天才周三，離周六還有兩天，以后苦的日子還多著呢。。。

純公益，勿噴。千萬不要噴。我挺脆弱的。教程簡單5分鐘左右就可以做出框架，比你下載快多了，所以自己動手試試，可以的。

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