從產(chǎn)品需求文檔到產(chǎn)品設(shè)計(jì)文檔

1、從“產(chǎn)品需求文檔”（PRD到“產(chǎn)品設(shè)計(jì)文檔”（PDD傳統(tǒng)上寫產(chǎn)品需求文檔（PRD的做法，就是把用例、流程圖和網(wǎng)頁(yè)原型圖一股腦的放到一個(gè)Word文檔里。一般一個(gè)產(chǎn)品都包含乃幾十個(gè)乃至上百用例，每個(gè)用例都有自己的流程圖，每個(gè)流程圖又包含了少則幾個(gè)多則幾十的網(wǎng)頁(yè)原型圖，結(jié)果就是產(chǎn)品需求文檔變得龐大無(wú)比，寫的人費(fèi)事兒，讀的人更慘。自從我受到了這樣文檔的折磨，我就一直都在琢磨怎么才能把文檔寫得更簡(jiǎn)單一點(diǎn)，讓閱讀的人一通常是設(shè)計(jì)師和程序員一能夠在最短的時(shí)間內(nèi)領(lǐng)會(huì)產(chǎn)品的設(shè)計(jì)。原來(lái)做UI設(shè)計(jì)師的時(shí)候，我創(chuàng)造了一種用流程圖來(lái)表示產(chǎn)品交互的辦法，這個(gè)方法受到了很多人的歡迎，這篇文章也引起了一定的反響。其實(shí)當(dāng)時(shí)在實(shí)

2、際使用的時(shí)候，我不僅產(chǎn)出這樣一份流程圖，還利用網(wǎng)頁(yè)熱區(qū)，把流程圖中的界面元素（藍(lán)色的元素）和原型網(wǎng)頁(yè)（HTM及件）給結(jié)合起來(lái)了，這樣設(shè)計(jì)師和程序員在看流程圖的時(shí)候，只要用鼠標(biāo)點(diǎn)一下界面元素，就可以連接到原型網(wǎng)頁(yè)，非常方便！這個(gè)辦法我一直都在用，只是當(dāng)時(shí)沒有寫在文章里罷了。后來(lái)隨著工作性質(zhì)的變化，我需要越來(lái)越多地考慮產(chǎn)品的整體和功能、而不是像原來(lái)一樣只在特定需求內(nèi)圍繞界面做文章，我就開始尋找把用例整合進(jìn)前述方法的可能。在經(jīng)過(guò)了一段時(shí)間的摸索和實(shí)踐后，我逐漸形成了自己特有的一套產(chǎn)品需求文檔的寫法，為了表示區(qū)別，我稱之為“產(chǎn)品設(shè)計(jì)文檔”，簡(jiǎn)稱PDD本文就是對(duì)PDD的介紹。PDD勺組成部分PDDt三個(gè)

3、組成部分，它們分別是用例、流程圖和原型圖。用例用例從整體脈絡(luò)上定義了產(chǎn)品所具有的功能。比如對(duì)于一個(gè)郵件系統(tǒng)來(lái)說(shuō)，“寫郵件”、“發(fā)郵件”和“刪除郵件”等功能都是用例。用例比較流行的寫法，是在每一個(gè)用例中標(biāo)明它的前后置條件和異常情況等屬性。不過(guò)在PDD,我完全放棄了上述屬性，只保留用例的名稱和簡(jiǎn)要描述。因?yàn)椤坝美钡某霭l(fā)點(diǎn)就是“用戶”，如果你站在一個(gè)用戶的角度來(lái)思考產(chǎn)品的功能，你會(huì)發(fā)現(xiàn)那些屬性你根本就不會(huì)考慮。并且，各種前后置條件和異常情況，完全可以放在流程圖中，這樣更清楚。藺介及更新日志L軟件啟動(dòng)及退出L何時(shí)啟動(dòng)2,過(guò)程3.軟件退出2.界面總體布局X1 IMMOII*ft*t»HE0i

4、1 *o b*o.MB M0流程圖流程圖是對(duì)用例的細(xì)化，它可以清晰地表現(xiàn)一個(gè)用例所有相關(guān)的前置、后置和分支條件。流程圖的畫法我在“畫Weba程圖的一點(diǎn)心得”一文中已經(jīng)說(shuō)得非常清楚了，在此不再贅述。唯一值得注意的是，我以前并沒有意識(shí)到流程圖本身也是有ISO標(biāo)準(zhǔn)的，因此“畫”中使用的流程圖元素并不符合ISO標(biāo)準(zhǔn)，也和一些已經(jīng)成型的系統(tǒng)（比如這篇“描述信息結(jié)構(gòu)和交互設(shè)計(jì)的圖示詞匯表”）有出入,因此元素在使用上還存在一些問題。在日常工作當(dāng)中我已經(jīng)對(duì)元素使用做了修改，以后有時(shí)間我會(huì)更新“畫”一文的內(nèi)容，也有可能直接把模板放出來(lái)。一原型圖原型圖是對(duì)流程圖中“界面元素”的展現(xiàn)。這個(gè)東西沒什么可說(shuō)的PDD勺表

5、現(xiàn)方式用例、流程圖和原型圖一般都是產(chǎn)片需求文檔（PRD中已有白東西，PDDft這點(diǎn)上和PR皿什么區(qū)別。而下面要說(shuō)的表現(xiàn)方式，則是PDD勺精髓。我比較孤陋寡聞，還沒看到過(guò)有人像我這樣組織這三塊內(nèi)容，所以姑且認(rèn)為這是我的首創(chuàng)吧。用例和流程圖首先把用例和流程圖整合起來(lái)。方法很簡(jiǎn)單，利用網(wǎng)頁(yè)的frame標(biāo)簽，新建幾個(gè)幀：1. index.html另外兩個(gè)幀的容器，不用解釋吧2. navigation.html一導(dǎo)航幀，用于存放用例列表3. main.html默認(rèn)情況下的主幀，用于存放文檔簡(jiǎn)介、作者、版本和更新日志一類的東西然后新建一大堆網(wǎng)頁(yè)，把所有的流程圖都放在這些網(wǎng)頁(yè)里，每個(gè)流程圖（即每個(gè)用例）放在

6、一個(gè)網(wǎng)頁(yè)里，最后修改navigation.html,把用例名稱和其對(duì)應(yīng)的網(wǎng)頁(yè)鏈接起來(lái)。完工以后，頁(yè)面應(yīng)該是下面這個(gè)樣子：1. AeW省L13£*何/2,耳* AD.7.JOO»1D28本文檔說(shuō)昵更善日志0.7.20041428pdDc檔首頁(yè) L4小*TMFC仲京&工肝 1”.4fiiip*m-riiiirr>區(qū)11第里即（UC左側(cè)為用例，右側(cè)為流程圖好了，左側(cè)為用例，右側(cè)為流程圖，這樣就把用例和流程圖整合了起來(lái)，并且結(jié)構(gòu)清晰，查看方便。流程圖和原型圖整合流程圖和原型圖的重點(diǎn)在于，提供一種方便的方式，以讓讀者能夠在看流程圖時(shí)方便的看到其中包含的原型圖。為了達(dá)到這個(gè)目的，我的做法是：1 .在用OmniGraffle畫流程圖時(shí),選擇界面元素（藍(lán)色的那個(gè)），然后在“檢查器”-“屬性：動(dòng)作”中選擇“打開文件”，然后按“選擇文件”，找到你的原型圖文件并按“確定”，這樣你這個(gè)元素就和原型圖鏈接起來(lái)了。如下圖所示：2 .在OmniGraffle中輸出這個(gè)流程圖文檔時(shí)，不是選擇圖片，而是選擇“HTMI3像映射”，這樣在生成出來(lái)的網(wǎng)頁(yè)上，藍(lán)色的界面元素都是可以點(diǎn)擊的，點(diǎn)了以后就鏈接到原型圖。很方