首先這里要感謝一下@臻龍?老師，當(dāng)年看的他的一篇《Word產(chǎn)品需求文檔，已經(jīng)過(guò)時(shí)了》文章，那時(shí)候我也剛剛?cè)氘a(chǎn)品1年左右，頓時(shí)被這種PRD文檔框架風(fēng)格深深吸引了，不需要word，而是直接呈現(xiàn)在Axure里面，非常新穎。遂今天打算做一個(gè)小小的設(shè)計(jì)教程給大家，我會(huì)把所有步驟，事件等寫下來(lái)，新手可以看看覺得有用的就學(xué)習(xí)一下，少走一些彎路，老人請(qǐng)多多指教，如果有不對(duì)的地方或者有更好的地方請(qǐng)指出來(lái)，共同學(xué)習(xí)嘛。

PS:關(guān)于PRD是什么這里我就不說(shuō)了，說(shuō)多了也沒(méi)意思，直接進(jìn)入正題吧。

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

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

因?yàn)檫@是一份axure編寫的PRD文檔，所以你要考慮它的適用性，這里推薦一些小型的web端，APP端，可以使用這種方法，但是大型的系統(tǒng)以及web端頁(yè)面顯得就不是那么好用了?？傊痪湓挘度幸玫綄?duì)的地方。

首先我們把這個(gè)頁(yè)面拆成三個(gè)部分：

1. 全局設(shè)置
2. 一級(jí)菜單欄
3. 二級(jí)菜單欄
4. 內(nèi)容頁(yè)

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

1.全局設(shè)置

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

頁(yè)面居中

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

菜單欄背景顏色

之前我也是做了兩個(gè)大矩形，當(dāng)點(diǎn)擊預(yù)覽的時(shí)候就傻了。因?yàn)殚L(zhǎng)度不夠后面留了很大的白色，想想拉長(zhǎng)的話換個(gè)電腦可能也會(huì)出現(xiàn)各種各樣的問(wèn)題，本著能少設(shè)置一下，多兼容一些電腦，做了這樣的設(shè)置

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

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

第三步，依然在樣式里，選擇導(dǎo)入，選取你剛才截取并保存的圖片，點(diǎn)擊確定即可，這個(gè)時(shí)候背景就變成你剛剛截圖的塊塊了

接著你就可以愉快的看到你的頁(yè)面呈現(xiàn)了不一樣的效果。如下圖。

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

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

2.一級(jí)菜單欄

菜單欄

在做一級(jí)菜單欄的時(shí)候，我有試過(guò)幾種方案，比如說(shuō)每個(gè)頁(yè)面都有一個(gè)菜單欄，相互之間是獨(dú)立的，但是這種菜單欄發(fā)死，不靈性，不動(dòng)感，況且我是個(gè)喜歡偷懶的人，一頁(yè)一頁(yè)復(fù)制對(duì)于我來(lái)說(shuō)，實(shí)在是累。然而母版有時(shí)候限制有太多了，于是想到了一個(gè)相對(duì)比較好的辦法吧，雖然不算完美，但最起碼看起來(lái)舒服

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

第二步，把所有一級(jí)菜單欄的矩形設(shè)置為一個(gè)組合，就叫首頁(yè)組合好了。

第三步，點(diǎn)擊組合，設(shè)置鼠標(biāo)懸停效果以及選中效果，即當(dāng)你鼠標(biāo)選中該項(xiàng)或懸停于該項(xiàng)時(shí)，表現(xiàn)出來(lái)的效果，并且設(shè)置選項(xiàng)組名稱（名稱隨便起就行，你記得住就好），將第一個(gè)即首頁(yè)設(shè)置為選中狀態(tài)。如圖所示

這樣設(shè)置后就稍微有一些簡(jiǎn)單的效果了，且每個(gè)菜單都有自己的效果（你可以慢慢設(shè)置。。我只是設(shè)置了背景色而已，你可以設(shè)置好多），當(dāng)你選中一項(xiàng)時(shí)會(huì)自動(dòng)取消其他選中的效果，這就是選項(xiàng)組的作用。

這時(shí)候一級(jí)菜單基本就有個(gè)樣子了（前面那個(gè)產(chǎn)品需求文檔的文字和后面的版本號(hào)就隨便弄吧。。并不是重點(diǎn)）

3.二級(jí)菜單欄

從本文章圖可以看出來(lái)，一級(jí)菜單可以擁有好多的二級(jí)菜單，且每一個(gè)一級(jí)菜單對(duì)應(yīng)的二級(jí)菜單內(nèi)容都不相同，如何做到快速預(yù)覽，又不用看到標(biāo)題欄來(lái)回閃動(dòng)呢，這里就要用到動(dòng)態(tài)面板了！

第一步，我們建立一個(gè)動(dòng)態(tài)面板，動(dòng)態(tài)面板命名為 “首頁(yè)二級(jí)標(biāo)題欄”，當(dāng)然了，名字都是隨意的，自己能記得住就好了。

第二步，添加動(dòng)態(tài)面板狀態(tài)，這里要注意一下，你有幾個(gè)一級(jí)菜單的選項(xiàng)，這里的動(dòng)態(tài)面板狀態(tài)最好就設(shè)置幾個(gè)，且務(wù)必注意，動(dòng)態(tài)面板狀態(tài)的命名要和一級(jí)菜單的名稱完全一樣，在動(dòng)態(tài)面板的狀態(tài)內(nèi)填寫各個(gè)一級(jí)菜單對(duì)應(yīng)二級(jí)菜單的菜單選項(xiàng)

例如：一級(jí)菜單有一個(gè)首頁(yè)，那么創(chuàng)立二級(jí)菜單動(dòng)態(tài)面板的狀態(tài)的時(shí)候名稱也必須是首頁(yè)，在首頁(yè)這個(gè)狀態(tài)內(nèi)寫上二級(jí)菜單的菜單選項(xiàng)，如圖

第三步，這一步就精髓了，為什么我讓你把所有的選項(xiàng)卡的名稱都統(tǒng)一了，就在這一點(diǎn)了，我們拿首頁(yè)這一欄為例子，首先選擇一級(jí)菜單的首頁(yè)的矩形框，我們給他添加交互事件： 鼠標(biāo)移入時(shí)–設(shè)置 動(dòng)態(tài)面板狀態(tài)–選擇狀態(tài) Value–函數(shù)加入局部變量，隨便起個(gè)名字就好，然后插入變量，為this name，具體看圖。

第四步，再給一級(jí)菜單矩形框添加一個(gè)交互事件，當(dāng)鼠標(biāo)單擊時(shí)，狀態(tài)和上一個(gè)是一樣的，再添加該二級(jí)選項(xiàng)一個(gè)選中狀態(tài)就可以了，將二級(jí)菜單設(shè)置一個(gè)選項(xiàng)組，設(shè)置一下選中狀態(tài)，這里我就不重復(fù)截圖了。有人就想問(wèn)為什么要這么麻煩。接下來(lái)你就知道了，你現(xiàn)在可以復(fù)制這些狀態(tài)，到一級(jí)菜單的任意菜單上，交互事件都不需要更改了。當(dāng)鼠標(biāo)移入和點(diǎn)擊時(shí)候，會(huì)自動(dòng)切換至他們對(duì)應(yīng)的狀態(tài)，只需要一個(gè)復(fù)制粘貼就行了。以后如果你要新加幾個(gè)菜單，只需要如此更改一下就可以了。

最后，給二級(jí)菜單添加三個(gè)交互事件，我以首頁(yè)的二級(jí)菜單‘產(chǎn)品介紹’為例子，

第一個(gè)交互事件，鼠標(biāo)單擊時(shí)–在框架中打開鏈接–內(nèi)聯(lián)框架–選擇產(chǎn)品介紹的頁(yè)面；

第二個(gè)交互事件，鼠標(biāo)單擊時(shí)–設(shè)置選中–產(chǎn)品介紹–值為ture；

第三個(gè)交互事件，鼠標(biāo)單擊時(shí)–設(shè)置選中–首頁(yè)–值為ture，就可以了，如下圖

這樣以后你就可以基本實(shí)現(xiàn)一個(gè)可點(diǎn)擊，可預(yù)覽的一級(jí)菜單加二級(jí)菜單了。

美化的小三角

小三角這個(gè)東西仁者見仁智者見智了，就是一個(gè)起到美化作用的東西，讓你知道你現(xiàn)在看得是哪一頁(yè)菜單的自選項(xiàng)的，這里我提供兩個(gè)小三角的方法，一個(gè)是用動(dòng)態(tài)面板做，一個(gè)是用普通的矩形圖來(lái)做，要達(dá)到的效果就和預(yù)覽圖一樣，可以隨著鼠標(biāo)移動(dòng)而移動(dòng)。鼠標(biāo)移動(dòng)的比較簡(jiǎn)單，這里就不闡述了，只說(shuō)動(dòng)態(tài)面板的方法。

動(dòng)態(tài)面板法：

這個(gè)方法比較笨，而且我現(xiàn)在也暫時(shí)沒(méi)有想好有什么簡(jiǎn)單點(diǎn)的辦法。先放出來(lái)，后期大家一起討論一下，可以優(yōu)化的地方。

第一步，創(chuàng)建一個(gè)動(dòng)態(tài)面板，起個(gè)名字，我的就叫小三角了，有幾個(gè)菜單欄，就設(shè)計(jì)幾個(gè)動(dòng)態(tài)面板狀態(tài)，這里注意下，動(dòng)態(tài)面板狀態(tài)的名稱一定要和你一級(jí)菜單欄上的名稱一樣。如圖

第二步，拉出一個(gè)矩形，制作一個(gè)小三角，顏色你自己看著辦，一般都和二級(jí)菜單的那個(gè)底色是一樣的，在每一個(gè)動(dòng)態(tài)面板內(nèi)粘貼，調(diào)整小三角的位置，保證位置在相應(yīng)的狀態(tài)下面就可以了。

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

這樣設(shè)置后，三角就會(huì)跟隨你鼠標(biāo)的移動(dòng)而移動(dòng)，產(chǎn)生菜單切換的效果。

4.內(nèi)容頁(yè)

內(nèi)容頁(yè)其實(shí)就簡(jiǎn)單了，因?yàn)橐疹櫂?biāo)題欄，防止由于頁(yè)面切換導(dǎo)致重新加載，所以這里面我選擇了使用內(nèi)聯(lián)框架，有極個(gè)別過(guò)大的頁(yè)面則開啟新的頁(yè)面，有一個(gè)返回按鈕就可以了，在一二級(jí)菜單添加鼠標(biāo)單擊事件，打開相對(duì)的那個(gè)頁(yè)面即可，內(nèi)聯(lián)框架按照你其他最大頁(yè)面那樣拉出來(lái)就行了，效果看起來(lái)就不錯(cuò)了。

教程寫到這里就結(jié)束了，第一次寫教程，可能有點(diǎn)亂，大家有不太理解的，也可以在下面評(píng)論留言，我只要不忙的時(shí)候一定會(huì)回復(fù)你們的。新手看到覺得有用的就學(xué)學(xué)，老人覺得我哪里不對(duì)的務(wù)必給點(diǎn)指點(diǎn)，新人也可以看看，正好一起學(xué)習(xí)了

最后想說(shuō)幾句話，其實(shí)也不是多高深，都是老生常談了。

我之所以做這個(gè)教程，就是想給新人一點(diǎn)想法，讓一些不會(huì)的人可以自己動(dòng)手，把這個(gè)東西做出來(lái)，畢竟產(chǎn)品這東西，要多實(shí)踐，做出來(lái)的才是你自己的，c+v永遠(yuǎn)是別人的，在做的過(guò)程中，你才會(huì)思考為什么這樣做，還有沒(méi)有改良的地方，這也正是我希望看到的，大家需要的是一個(gè)交流和學(xué)習(xí)的地方，我并不是什么圣人，也是一步一步過(guò)來(lái)的，也是一點(diǎn)一滴積累起來(lái)的，想要通過(guò)這個(gè)事情告訴大家：

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

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

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