一、需求文档的作用

之前提到过『结构流程图』是产物的骨架，非常主要，但团队中许多成员对其实无感的，由于产物自己就是一个故事，仅仅有故事的构想是远远不够的，要想把故事讲好，还需要赋予故事更多的细节与血肉，这就是需求文档的作用！

二、好故事的组成要素

童话书里最吸引眼球的是插图，而非文字。甚至只看插图，就能把情节完整的串联起来。而原型图就是需求文档中的插图，是产物方案最直接的体现，故事书中除了插图，另有对应的形貌，以便读者能够更好地明晰细节。

需求文档也是云云，只是需求文档的读者可以明确划分为：开发、设计与测试。差别读者想从中获取的信息也有所差别，开发想领会产物的功效逻���；设计想确定交互与结构，而测试则想知道详细的测试点。

以是需要针对以上三类人群，需求文档要举行三种差别的形貌，分别为：开发注意事项、设计注意事项、测试注意事项。

而现实的操作中，测试注意事项多数会被开发与设计注意事项所涵盖，以是测试注意事项多数可以不写。

另外，方案背后的理由注释也很主要，这样能够让开发、设计、测试对产物方案的明晰加倍深刻，与产物司理在方案明晰上杀青��大的公约数。同时在陈述产物注释的历程中，也是产物司理二次磨练与自我质疑，对于方案的严谨性与完善性有很大的益处。

三、需求文档的编写

3.1 原型图

原型图是需求文档中最焦点的部门，所有的注释说明，都以原型图为基础而睁开，及格的原型图应该知足清晰的表达出以下信息

（1）页面包罗的组件与结构；

这一点是最基础，同时也相对简朴，由于只要产物骨架确定下来，通过参考大量的竞品，确定页面内相关的组件与结构，往往是水到渠成的事情。

（2）组件的展示优先级；

原型图中的各个组件一样平常会通过巨细，结构，颜色深浅的形式来转达响应的优先级。一样平常来说，颜色越深，优先级越高；组件越大，优先级越高；组件越靠近页面的视觉中央，优先级越高。

（3）展示出组件的差别状态；

许多组件会因场景的差别，而展示差别的状态，下面的页面是某个音频播放器的主页，主页下方是音频列表，列表中每个音频通过颜色深浅的方式，区分了『选中』与『未选中』两种状态。

（4）展示组件在页面内的响应效果；

若是组件的响应效果就在本页展示，则需要将响应效果也展示在原型图中，若是响应效果是另外一个页面，则需要通过文字的形式说清晰跳转关系。

下面的案例中，点击『最先睡觉』的按钮之后，会判断起床时间距离当前是否跨越90分钟，若是没跨越，则弹出『睡前确认弹窗1』否则弹出『睡前提醒弹窗2』

3.2 开发注意事项

对于开发的同砚来说，『开发注意事项』的职位和和原型图同样主要，由于原型图只展示静态的效果，但背后的触发条件、触发时机、动态效果等要害信息无法体现，需要大量的形貌将上述信息说清晰。以是『开发注意事项』需要将以下信息说明晰：

（1）组件状态转变的触发条件与时机；

由于多数的触发条件与时机都是抽象不能见的，以是仅参考原型图，开发无法完成预期的营业逻辑，需要通过文字将背后的逻辑说清晰，以插屏广告请求与展示为例：

原型图只表明晰广告展示的流程，并没有涉及广告请求与展示逻辑，以是需要在『开发注意事项』中添加如下形貌：

点击上锁的音频，进入广告加载页面，同时请求广告，若在8秒内请求到广告，则举行展示，广告展示后，『广告加载提醒页面』消逝，用户可以手动关闭广告；若是8秒内没有请求到广告，则不再请求广告，『广告加载提醒页面』消逝。

（2）组件的交互效果

虽然多数组件的交互效果都能通过原型图显示出来，但也有一些场景需要文字形貌的形式才气注释清晰。

下面的原型图展示的是某音频播放器的首页，点击『右上角』的随机播放按钮，会随机播放4首免费的音频。但随机二字显然很难通过原型图表达，以是需要在『开发注意事项』中详细说明

（3）页面间的跳转逻辑；

在一张Axure画板中，通常只展示一个页面的逻辑，若是该页面中某些组件的交互效果是跳转到其他页面，建议使用文字将涉及的跳转逻辑表达清晰。

（4）组件与页面的动态历程；

找到4个关键点，写出一篇让客户非你不买的朋友圈文案

虽然Axure也能实现一些动态效果，但制作成本较高，动态表达也很单一，通过文字形貌的形式，很容易将逻辑说明晰。

下图案例中，点击自定义按钮，底部会泛起自定义计时器面板，仅靠原型图，开发同砚无法得知『计时器面板』的泛起效果，直接展示？照样淡入淡出？以是需要在『开发注意事项』中添加如下形貌

点击『自定义』按钮，『计时器面板』自下向上弹出

（5）需要的流程图

所谓一图胜千言，上面提到的4个开发注意事项若是能用流程图表达，则建议只管使用流程图，这样不仅逻辑清晰，而且精练明快，如下图展示的是某个睡眠闹钟首页：

若用文字形貌上面的逻辑，会吧啦吧啦写出下面一段：

点击首页的『最先睡眠按钮』，判断右上角的『起床提醒开关』的状态，若为关闭，直接弹出『睡前状态弹窗』，若为开启，则判断提醒时间距当前时间是否大于90分钟，若大于90分钟，则弹出『睡眠状态弹窗』，否则弹出『睡前确认弹窗』。

上述文字不仅表达烦琐，而且很容易将人弄糊涂，若用流程图，则会变的清晰许多：

3.3 设计注意事项

对于设计同砚，主要的信息包罗『页面结构』『组件展示优先级』『组件的差别状态』与『交互/展示动画』，这些信息绝大多数都可以通过原型图直接显示，以是相较于『开发注意事项』，『设计注意事项』要简朴许多，仅仅起到辅助说明的作用。

（1）组件优先级

在原型图中，虽然会通过巨细与颜色等差别因素区分差别组件的优先级，但这些因素组合起来，依然会令人疑心，颜色深、形状小的组件与颜色浅但形状大的组件，哪个优先级更高？以是仍需要文字说明。在下面的原型图中，需要在『设计注意事项』中添加如下形貌：

页面组件展示优先级：最先睡觉按钮 > 起床提醒卡片 = 睡眠提醒卡片

（2）组件的差别状态

若是组件存在差别状态，除了要在原型图中举行展示，也要在『设计注意事项』中再次强调，例如之前提到的音频图标分为选中状态与未选中状态。

（3）展示/交互动画

如前面所说，原型图很难展示动态效果，以是若是牵扯到一些庞大的动画效果，也需要分外说明，这里不再详述。

3.4 产物注释

产物注释主要说明方案背后的缘故原由，通过论述产物方案的内因，能够让开发与设计更好地明晰产物，使得产物、开发与设计能在方案认知上取得最大的公约数。从而削减相同成本，提高整个团队的运作效率。

这里继续以插屏广告的请求与展示为例。

若是对于不熟悉营业的开发与设计，可能会对『广告加载提醒』页面充满疑惑，点击上锁的音频icon之后，直接弹出一个toast提醒岂不是更简朴有用？为何要画蛇添足？

以是这里需要使用产物注释：

由于在插屏广告政策中，不允许插屏广告泛起前后是同一个页面，以是需要分外添加一个『广告加载提醒』页面，使得广告展示前用户看到的是『广告加载提醒页面』，广告关闭后，用户看到的是『首页』

有了上述文字注释，开发与设计在执行的时刻，会削减疑心，避免了不需要的相同或撕逼。

四、完整示例

这是某睡眠闹钟软件的首页需求文档，包罗了『原型图』『流程图』『开发注意事项』『设计注意事项』『产物注释』仅供人人参考，也迎接人人吐槽

五、其他

最后给人人推荐一些设计组件的说明与工具，原型图作为需求文档中最主要的组成部门，是对设计师最直观的产物表达，在正式最先着手原型图，强烈建议熟悉并使用尺度的组件原型，详细链接如下：

• 谷歌设计组件说明
• 苹果设计组件说明
• 阿里设计组件说明
• 谷歌设计组件下载（Axure9版本）
• 阿里设计组件下载（Axure版本）

同时也强烈推荐将原型图/需求文档上传至统一的协作平台中，例如：

• 蓝湖
• 蓝湖Axure插件