从“产品需求文档”到“产品设计文档”

1、从“产品品需求文文档”（PRRD）到到“产品设设计文档档”（PDDD）传统上写写产品需需求文档档（PRRD）的的做法，就是把把用例、流程图图和网页页原型图图一股脑脑的放到到一个WWordd文档里里。一般般一个产产品都包包含乃几几十个乃乃至上百百用例，每个用用例都有有自己的的流程图图，每个个流程图图又包含含了少则则几个多多则几十十的网页页原型图图，结果果就是产产品需求求文档变变得庞大大无比，写的人人费事儿儿，读的的人更惨惨。自从我受受到了这这样文档档的折磨磨，我就就一直都都在琢磨磨怎么才才能把文文档写得得更简单单一点，让阅读读的人通常是是设计师师和程序序员能能够在最最短的时时间内领领会产品品的设

2、计计。原来做UUI设计计师的时时候，我我创造了了一种用用流程图图来表示示产品交交互的办办法，这这个方法法受到了了很多人人的欢迎迎，这篇篇文章也也引起了了一定的的反响。其实当当时在实实际使用用的时候候，我不不仅产出出这样一一份流程程图，还还利用网网页热区区，把流流程图中中的界面面元素（蓝色的的元素）和原型型网页（HTMML文件件）给结结合起来来了，这这样设计计师和程程序员在在看流程程图的时时候，只只要用鼠鼠标点一一下界面面元素，就可以以连接到到原型网网页，非非常方便便！这个个办法我我一直都都在用，只是当当时没有有写在文文章里罢罢了。后来随着着工作性性质的变变化，我我需要越越来越多多地考虑虑产品的

3、的整体和和功能、而不是是像原来来一样只只在特定定需求内内围绕界界面做文文章，我我就开始始寻找把把用例整整合进前前述方法法的可能能。在经经过了一一段时间间的摸索索和实践践后，我我逐渐形形成了自自己特有有的一套套产品需需求文档档的写法法，为了了表示区区别，我我称之为为“产品设设计文档档”，简称称PDDD。本文就是是对PDDD的介介绍。PDD的的组成部部分PDD有有三个组组成部分分，它们们分别是是用例、流程图图和原型型图。用例 用例从从整体脉脉络上定定义了产产品所具具有的功功能。比比如对于于一个邮邮件系统统来说，“写邮件件”、“发邮件件”和“删除邮邮件”等功能能都是用用例。 用例例比较流流行的写写法

4、，是是在每一一个用例例中标明明它的前前后置条条件和异异常情况况等属性性。不过过在PDDD中，我完全全放弃了了上述属属性，只只保留用用例的名名称和简简要描述述。因为为“用例”的出发发点就是是“用户”，如果果你站在在一个用用户的角角度来思思考产品品的功能能，你会会发现那那些属性性你根本本就不会会考虑。并且，各种前前后置条条件和异异常情况况，完全全可以放放在流程程图中，这样更更清楚。 流程图 流程程图是对对用例的的细化，它可以以清晰地地表现一一个用例例所有相相关的前前置、后后置和分分支条件件。流程程图的画画法我在在“画Weeb流程程图的一一点心得得”一文中中已经说说得非常常清楚了了，在此此不再赘赘述

5、。唯唯一值得得注意的的是，我我以前并并没有意意识到流流程图本本身也是是有ISSO标准准的，因因此“画”中使用用的流程程图元素素并不符符合ISSO标准准，也和和一些已已经成型型的系统统（比如如这篇“描述信信息结构构和交互互设计的的图示词词汇表”）有出出入，因因此元素素在使用用上还存存在一些些问题。在日常常工作当当中我已已经对元元素使用用做了修修改，以以后有时时间我会会更新“画”一文的的内容，也有可可能直接接把模板板放出来来。原型图 原型型图是对对流程图图中“界面元元素”的展现现。这个个东西没没什么可可说的。PDD的的表现方方式 用例例、流程程图和原原型图一一般都是是产片需需求文档档（PRRD）中

6、中已有的的东西，PDDD在这点点上和PPRD没没什么区区别。而而下面要要说的表表现方式式，则是是PDDD的精髓髓。我比比较孤陋陋寡闻，还没看看到过有有人像我我这样组组织这三三块内容容，所以以姑且认认为这是是我的首首创吧。用例和流流程图首先把用用例和流流程图整整合起来来。方法法很简单单，利用用网页的的fraame标标签，新新建几个个帧：indeex.hhtmll另外外两个帧帧的容器器，不用用解释吧吧naviigattionn.httml导航帧帧，用于于存放用用例列表表mainn.httml默认情情况下的的主帧，用于存存放文档档简介、作者、版本和和更新日日志一类类的东西西然后新建建一大堆堆网页，把

7、所有有的流程程图都放放在这些些网页里里，每个个流程图图（即每每个用例例）放在在一个网网页里，最后修修改naaviggatiion.htmml，把把用例名名称和其其对应的的网页链链接起来来。完工工以后，页面应应该是下下面这个个样子： PDD文文档首页页左侧为用用例，右右侧为流流程图好了，左左侧为用用例，右右侧为流流程图，这样就就把用例例和流程程图整合合了起来来，并且且结构清清晰，查查看方便便。流程图和和原型图图 整合合流程图图和原型型图的重重点在于于，提供供一种方方便的方方式，以以让读者者能够在在看流程程图时方方便的看看到其中中包含的的原型图图。为了了达到这这个目的的，我的的做法是是：在用OmmniGGraffflee画流程程图时，选择界界面元素素（蓝色色的那个个），然然后在“检查器器”“属性：动作”中选择择“打开文文件”，然后后按“选择文文件”，找到到你的原原型图文文件并按按“确定”，这样样你这个个元素就就和原型型图链接接起来了了。如下下图所示示：在OmnniGrrafffle中中输出这这个流程程图文档档时，不不是选择择图片，而是选选择“HTMML图像像映射”，这样样在生成成出来的的网页上上，蓝色色的界面面元素都都是可以以点击的的，点了了以后就就链接到到原型图图。很方方便对吧吧？但这这还不