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

1、從“產(chǎn)品品需求文文檔”（PRRD）到到“產(chǎn)品設(shè)設(shè)計(jì)文檔檔”（PDDD）傳統(tǒng)上寫(xiě)寫(xiě)產(chǎn)品需需求文檔檔（PRRD）的的做法，就是把把用例、流程圖圖和網(wǎng)頁(yè)頁(yè)原型圖圖一股腦腦的放到到一個(gè)WWordd文檔里里。一般般一個(gè)產(chǎn)產(chǎn)品都包包含乃幾幾十個(gè)乃乃至上百百用例，每個(gè)用用例都有有自己的的流程圖圖，每個(gè)個(gè)流程圖圖又包含含了少則則幾個(gè)多多則幾十十的網(wǎng)頁(yè)頁(yè)原型圖圖，結(jié)果果就是產(chǎn)產(chǎn)品需求求文檔變變得龐大大無(wú)比，寫(xiě)的人人費(fèi)事兒兒，讀的的人更慘慘。自從我受受到了這這樣文檔檔的折磨磨，我就就一直都都在琢磨磨怎么才才能把文文檔寫(xiě)得得更簡(jiǎn)單單一點(diǎn)，讓閱讀讀的人通常是是設(shè)計(jì)師師和程序序員能能夠在最最短的時(shí)時(shí)間內(nèi)領(lǐng)領(lǐng)會(huì)產(chǎn)品品的設(shè)

2、計(jì)計(jì)。原來(lái)做UUI設(shè)計(jì)計(jì)師的時(shí)時(shí)候，我我創(chuàng)造了了一種用用流程圖圖來(lái)表示示產(chǎn)品交交互的辦辦法，這這個(gè)方法法受到了了很多人人的歡迎迎，這篇篇文章也也引起了了一定的的反響。其實(shí)當(dāng)當(dāng)時(shí)在實(shí)實(shí)際使用用的時(shí)候候，我不不僅產(chǎn)出出這樣一一份流程程圖，還還利用網(wǎng)網(wǎng)頁(yè)熱區(qū)區(qū)，把流流程圖中中的界面面元素（藍(lán)色的的元素）和原型型網(wǎng)頁(yè)（HTMML文件件）給結(jié)結(jié)合起來(lái)來(lái)了，這這樣設(shè)計(jì)計(jì)師和程程序員在在看流程程圖的時(shí)時(shí)候，只只要用鼠鼠標(biāo)點(diǎn)一一下界面面元素，就可以以連接到到原型網(wǎng)網(wǎng)頁(yè)，非非常方便便！這個(gè)個(gè)辦法我我一直都都在用，只是當(dāng)當(dāng)時(shí)沒(méi)有有寫(xiě)在文文章里罷罷了。后來(lái)隨著著工作性性質(zhì)的變變化，我我需要越越來(lái)越多多地考慮慮產(chǎn)品的

3、的整體和和功能、而不是是像原來(lái)來(lái)一樣只只在特定定需求內(nèi)內(nèi)圍繞界界面做文文章，我我就開(kāi)始始尋找把把用例整整合進(jìn)前前述方法法的可能能。在經(jīng)經(jīng)過(guò)了一一段時(shí)間間的摸索索和實(shí)踐踐后，我我逐漸形形成了自自己特有有的一套套產(chǎn)品需需求文檔檔的寫(xiě)法法，為了了表示區(qū)區(qū)別，我我稱之為為“產(chǎn)品設(shè)設(shè)計(jì)文檔檔”，簡(jiǎn)稱稱PDDD。本文就是是對(duì)PDDD的介介紹。PDD的的組成部部分PDD有有三個(gè)組組成部分分，它們們分別是是用例、流程圖圖和原型型圖。用例 用例從從整體脈脈絡(luò)上定定義了產(chǎn)產(chǎn)品所具具有的功功能。比比如對(duì)于于一個(gè)郵郵件系統(tǒng)統(tǒng)來(lái)說(shuō)，“寫(xiě)郵件件”、“發(fā)郵件件”和“刪除郵郵件”等功能能都是用用例。 用例例比較流流行的寫(xiě)寫(xiě)法

4、，是是在每一一個(gè)用例例中標(biāo)明明它的前前后置條條件和異異常情況況等屬性性。不過(guò)過(guò)在PDDD中，我完全全放棄了了上述屬屬性，只只保留用用例的名名稱和簡(jiǎn)簡(jiǎn)要描述述。因?yàn)闉椤坝美钡某霭l(fā)發(fā)點(diǎn)就是是“用戶”，如果果你站在在一個(gè)用用戶的角角度來(lái)思思考產(chǎn)品品的功能能，你會(huì)會(huì)發(fā)現(xiàn)那那些屬性性你根本本就不會(huì)會(huì)考慮。并且，各種前前后置條條件和異異常情況況，完全全可以放放在流程程圖中，這樣更更清楚。 流程圖 流程程圖是對(duì)對(duì)用例的的細(xì)化，它可以以清晰地地表現(xiàn)一一個(gè)用例例所有相相關(guān)的前前置、后后置和分分支條件件。流程程圖的畫(huà)畫(huà)法我在在“畫(huà)Weeb流程程圖的一一點(diǎn)心得得”一文中中已經(jīng)說(shuō)說(shuō)得非常常清楚了了，在此此不再贅贅述

5、。唯唯一值得得注意的的是，我我以前并并沒(méi)有意意識(shí)到流流程圖本本身也是是有ISSO標(biāo)準(zhǔn)準(zhǔn)的，因因此“畫(huà)”中使用用的流程程圖元素素并不符符合ISSO標(biāo)準(zhǔn)準(zhǔn)，也和和一些已已經(jīng)成型型的系統(tǒng)統(tǒng)（比如如這篇“描述信信息結(jié)構(gòu)構(gòu)和交互互設(shè)計(jì)的的圖示詞詞匯表”）有出出入，因因此元素素在使用用上還存存在一些些問(wèn)題。在日常常工作當(dāng)當(dāng)中我已已經(jīng)對(duì)元元素使用用做了修修改，以以后有時(shí)時(shí)間我會(huì)會(huì)更新“畫(huà)”一文的的內(nèi)容，也有可可能直接接把模板板放出來(lái)來(lái)。原型圖 原型型圖是對(duì)對(duì)流程圖圖中“界面元元素”的展現(xiàn)現(xiàn)。這個(gè)個(gè)東西沒(méi)沒(méi)什么可可說(shuō)的。PDD的的表現(xiàn)方方式 用例例、流程程圖和原原型圖一一般都是是產(chǎn)片需需求文檔檔（PRRD）中

6、中已有的的東西，PDDD在這點(diǎn)點(diǎn)上和PPRD沒(méi)沒(méi)什么區(qū)區(qū)別。而而下面要要說(shuō)的表表現(xiàn)方式式，則是是PDDD的精髓髓。我比比較孤陋陋寡聞，還沒(méi)看看到過(guò)有有人像我我這樣組組織這三三塊內(nèi)容容，所以以姑且認(rèn)認(rèn)為這是是我的首首創(chuàng)吧。用例和流流程圖首先把用用例和流流程圖整整合起來(lái)來(lái)。方法法很簡(jiǎn)單單，利用用網(wǎng)頁(yè)的的fraame標(biāo)標(biāo)簽，新新建幾個(gè)個(gè)幀：indeex.hhtmll另外外兩個(gè)幀幀的容器器，不用用解釋吧吧naviigattionn.httml導(dǎo)航幀幀，用于于存放用用例列表表mainn.httml默認(rèn)情情況下的的主幀，用于存存放文檔檔簡(jiǎn)介、作者、版本和和更新日日志一類類的東西西然后新建建一大堆堆網(wǎng)頁(yè)，把

7、所有有的流程程圖都放放在這些些網(wǎng)頁(yè)里里，每個(gè)個(gè)流程圖圖（即每每個(gè)用例例）放在在一個(gè)網(wǎng)網(wǎng)頁(yè)里，最后修修改naaviggatiion.htmml，把把用例名名稱和其其對(duì)應(yīng)的的網(wǎng)頁(yè)鏈鏈接起來(lái)來(lái)。完工工以后，頁(yè)面應(yīng)應(yīng)該是下下面這個(gè)個(gè)樣子： PDD文文檔首頁(yè)頁(yè)左側(cè)為用用例，右右側(cè)為流流程圖好了，左左側(cè)為用用例，右右側(cè)為流流程圖，這樣就就把用例例和流程程圖整合合了起來(lái)來(lái)，并且且結(jié)構(gòu)清清晰，查查看方便便。流程圖和和原型圖圖 整合合流程圖圖和原型型圖的重重點(diǎn)在于于，提供供一種方方便的方方式，以以讓讀者者能夠在在看流程程圖時(shí)方方便的看看到其中中包含的的原型圖圖。為了了達(dá)到這這個(gè)目的的，我的的做法是是：在用OmmniGGraffflee畫(huà)流程程圖時(shí)，選擇界界面元素素（藍(lán)色色的那個(gè)個(gè)），然然后在“檢查器器”“屬性：動(dòng)作”中選擇擇“打開(kāi)文文件”，然后后按“選擇文文件”，找到到你的原原型圖文文件并按按“確定”，這樣樣你這個(gè)個(gè)元素就就和原型型圖鏈接接起來(lái)了了。如下下圖所示示：在OmnniGrrafffle中中輸出這這個(gè)流程程圖文檔檔時(shí)，不不是選擇擇圖片，而是選選擇“HTMML圖像像映射”，這樣樣在生成成出來(lái)的的網(wǎng)頁(yè)上上，藍(lán)色色的界面面元素都都是可以以點(diǎn)擊的的，點(diǎn)了了以后就就鏈接到到原型圖圖。很方方便對(duì)吧吧？但這這還不