整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

基于AxureRP原型的PRD文档编写方法

基于AxureRP原型的PRD文档编写方法

于AxureRP的快速原型设计法确实能提高原型设计的效率和提升用户演示的效果,产品设计、交互设计或者是产品经理在做完原型设计,确认好需求之后,都不可避免的要写PRD文档或者是交互设计稿。大公司才会有交互设计师这个岗位,也就才会有交互设计稿这种文档产出,一般的公司都是只有产品设计师、需求分析师、商务分析师或者产品经理这样的岗位,这个岗位基本会包办了从需求收集,需求分析,需求设计,原型设计,编写PRD这样的一个过程,所以说小公司比较锻炼人,会练就全能的本事。

编写PRD文档是个较为苦命的工作项,具体的编写要求参见《如何书写好的产品需求文档PRD》,这份文档将会作为产品的指导性文档,告诉开发、测试产品的需求点,实现的要求,验证的逻辑,运营人员也需要参考,以获知当前产品所能达到的功能层次。写文档的时候事无巨细吧,人家会嫌你写的太繁琐了;写的太简单吧,人家又会嫌你没说清楚该说的;开始使用敏捷模式要求文档弱化了,但其实只是在过需求的时候不需要提前先把PRD写好,事后还是得补的;写文档耗掉的时间多了,人家会说能否除掉一半,功能需求都确认好了,你只是将它描述出来为什么要用掉那么多的时间?凡此种种,都让做产品的我们感觉命怎么这么苦,因此开拓一种写PRD的新思路新方法是相当有必要的。

现在都讲究用工具来辅助,工具用的好,确实能事半功倍,那要是工具用的不好呢?那就只能自求多福了。原型设计软件的主要功能还是用来做原型,那是否原型演示完了之后就没有用了呢?这个我想有点工作经验的人都不会这么认为,当然我们还是可以发挥一下原型的剩余价值的。大家都知道,如果一份文档里面可以图文结合,所描述的东西更能吸引到人去阅读,也更能帮助别人理解。AxureRP所设计的原型支持HTML格式的浏览,相较于其他原型设计软件直接产出图片,AxureRP的原型即可以直接导出成图片格式,也可以通过在浏览过程当中用截图软件来截图的方式使用,当然后一种方式更为繁琐,后面说明为什么直接生成图片反而不方便。

使用AxureRP自带的文档生成功能去生成PRD文档

这点我在之前写AxureRP使用教程的时候有提到过,AxureRP是支持通过即定的word模板格式来导出生成文档的,可以参考《AxureRP教程–生成规格说明书》。不过使用这个功能对自身的要求是比较高的:

1、要对AxureRP所提供的注释功能非常熟悉,其默认提供的注释字段是国际通用的,并不适合中国国情,要根据产品和项目的需求进行修改和自定义。要了解组件注释和页面注释的使用方式,以及这些注释会出现在文档的什么位置等;

2、要在做原型设计的时候就做好注释的录入,每个组件的交互,前置触发条件,后置反馈事件,以及每个页面的功能说明等,这是一项细致活,挺耗时间的,和快速原型设计的要求不大相符;且万一在确认需求的过程当中需要修改的,这个维护量也比较大;

3、要熟悉word的格式排版设置,用AxureRP默认提供的word模板生成出来的PRD文档,估计不符合大多数公司的文档编写要求,如果没有要求的则可以直接使用,否则就得自己倒腾一个word模板出来,这个对word的功底要求较高,再就是还得熟悉AxureRP里面模板导入的机制和模板使用机制;

4、综上所述,这个功能虽然很强大但实际应用的较少,其实比较鸡肋,个人是已经放弃了,有兴趣的朋友可以深入研究一下,到时分享一下;

基于AxureRP原型的PRD文档编写

这个方式其实就是截图,然后用截图+文字的形式来书写PRD文档,有人就说了,图片制作软件那么多,为什么非得用AxureRP来做原型,还得截图呀,这里有个已经使用AxureRP的前提:

1、AxureRP提倡快速原型设计法,可以大大减少原型设计的时间,这是选择使用AxureRP的一个原因;

2、AxureRP支持HTML格式的浏览,极大的方便了原型的演示效果,可以很清楚地告诉演示对象每个页面的跳转,每个按钮的操作效果,每个连接点击结果等,这是选择使用AxureRP第二个原因;

当然AxureRP的优点不止于此,原因可能很多,但主要的是这两个方面,这两个前提决定了我们当前都是使用AxureRP来做原型设计的,然后再讨论如果在已经使用AxureRP的情况再来优化截图写PRD的方法,否则就没法进行下去了。

1、为什么是HTML格式页面的截图而不是直接导出图片?这个从操作层面上来讲,导出图片的模式操作流程如下:

导出为图片>>>打开word>>>选择插入菜单>>>选择插入图片>>>搜寻图片所在文件夹>>>选择图片>>>点击按钮完成插入图片操作;

或者是下面这种方式:

导出为图片>>>打开图片所在文件夹>>>选择插入图片并打开>>>复制图片>>>打开word>>>粘贴图片完成插入图片操作;这个比上面的省一个步骤;

从HTML页面截图的模式操作流程如下:

打开对象所在HTML页面>>>用截图工具截图>>>复制所截图片>>>打开word>>>粘贴图片完成插入图片操作;

对比一下就知道,用截图的方式所需的操作步骤是最少的,也就是最能节省时间的,这里推荐一个截图工具:Snagit(下载地址),可以对所截的图进行一些简单的编辑,比如画个圈圈提示一下,画点箭头什么的。

2、基于AxureRP原型截图这种方式更能适应需求变化。大家都知道AxureRP是支持单个页面的修改单个页面重新生成原型的,不需要整体原型重新生成一遍,这样某个地方修改了,只要重新生成一下原型,然后再截图修改即可,而导出图片的方式AxureRP只支持导出主页和导出全部页面两种方式;

3、截图工具的辅助功能,上面也提到了,可以对图片做一些必要的处理;

这是截图+文字的模式,有了截图之后,编写描述文字应该就方便很多了,避免出现大段的文字。另外PRD编写一般都是有格式要求的,有些内容不能用工具来解决,一般一份PRD文档要包含以下这些内容:

1、概述部分:简单介绍一下产品的背景,产品的价值或者愿景,产品的简单介绍,一些预估的风险点,干系人,名词解释等等;

2、业务需求描述部分:定义好目标用户群体,业务流程图,业务架构图,脑图等等的介绍;

3、功能需求描述部分:这部分才是用到上面所述方法的点,每个功能点都可以用那样的方式描述;

4、非功能需求描述部分:与产品相关的一些辅助功能,性能要求、易用性要求等等;

5、接口描述部分:与外部有相关接口的需要在这个部分描述;

6、附录部分:培训信息、参考资料等,还可以有运营计划等等;

完整的PRD文档中,最多的部分就是对功能需求的分解描述,AxureRP可以很好的支撑这个部分的全部内容,另外其实AxureRP也有流程图、UML图的功能,业务流程图、业务架构图等都可以在AxureRP里面实现出来。

基本上我自己目前就采用的是如上的方式来编写PRD文档,在原型已经设计好并演示确认了的情况下,编写PRD文档一般都比较快速,30页到50页之间的文档,如果时间利用充分的话,可以在1天到1天半之内搞定。产品经理都是很忙的,时间挤挤总会有的,要在有限的时间内做更多的事,一是要充分利用工具,二是要发掘一些新的方法,双管齐下,应该就可以找到适合自己的Style!

PM完成Axure原型评审后,一定不能忘记备份这些原型html,后续可能需要查询以及技术撕逼。

希望通过Axure原型的几种使用场景,让初级PM对它的来龙去脉有个清晰的了解。而不是停留在“我知道”“大概会用”的水平。

版本

PM会经常修改AxureRP源文件,然后生成不同的原型。

但是对外评审的原型应该是唯一的。

并且该版本的产品需求文档PRD就是这个原型。

请注意两者不能混为一谈。

打开

一般来说我们是在Axure生成原型Html的时候,自动在浏览器中打开了原型并查看。

但是如何打开已备份在电脑中的原型呢,很多初级PM摸不着头脑了。其实也不复杂,如果你学会一点html网页的知识。

请进入该原型对应的目录,比如APP名称V2.0版,我们会发现存在data、file、images、plugins、resources等文件夹,以及很多html网页。请找到start.html,然后双击打开就是你熟悉的原型啦。

展示

当原型评审后,PM需要将原型放到网上供所有团队成员进行设计和编程。

不管是放到内网展示,还是外网展示。其本质都是将Axure原型的所有文件都上传到服务器,包括所有的html文件,图片文件,js文件,css文件。不能缺少任何文件,否则就无法正常显示。

如果你只是修改了某个页面,也切记生成并将所有文件上传一遍,而不仅仅是该页面对应的html文件。因为其对应的js,css文件,图片文件也可能被修改

上传之后然后把对应的原型网址发给其他团队成员即可查看。

备份

由于Axure原型是由html+js+cs组成的文件,我们在生成的时候将他们放置在指定目录。

嘉定我们将该产品的所有原型存放于D://PM/APP名称,那么建议以“APP名称V1.0版”的格式命名,并生成原型。

当然你也可以继续压缩之后存起来,不过就不太方便后续的查询。

回退

有时候我们需要回退版本的时候,需要把旧版本的原型也拿出来。那么请用旧版本的原型html去替换当下的原型目录。

不过不太建议这样,还不如新增一个版本来处理。

查询

由于Axure生成的原型,是以Html文件进行索引内容的。而Html是以你在Axure中新建的页面来作为基础的。如果你画Axure原型的时候是以你产品中的页面来进行命名和创建的。那么我们可以通过搜索“页面名称”关键词去查询你想要查询的页面

如果你使用的搜索工具支持搜索文件内内容,比如Windows下面的everthing,Mac自带的spotlight。那么可以通过搜索“页面内文字”关键词去查询你想要查询的相关页面

不过我更建议你进入到具体版本的原型html文件夹里面进行搜索,而不是进行全局搜索。

总结

以上就是Axure原型的使用场景。请一定要理解Axure原型的本质是html+js+css,每次生成原型的时候会在本地生成目录并写入这些文件。

#专栏作家#

浪子,业务型PM,浪子PRD系列51prd.com,公众号langzisay,个人微信nuanai88。

本文由 @浪子 原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自 unsplash,基于 CC0 协议

多PM使用Axure画原型,然后通过口述、word、visio、标签、原型旁边文字标注等方法来表达产品逻辑。很少有PM使用Axure官方推荐的notes,而事实上这才是正统高效的产品逻辑表达法。

可能是因为Axure官方没出过相关的中文教程,网上很少有人总结过类似的经验。今天我来完整的讲解一下notes表达法,希望对大家有所启发。

notes 的作用

曾经写过一篇文章介绍各种产品逻辑表达法,可以辅助阅读。

notes逻辑表达法相比于其他方法,具有以下优势,其中易读性特别重要。

  • 不漏。一个控件一个控件的写逻辑,不容易遗漏。
  • 完整性。定义好注释字段后,从功能、视觉、交互、业务、技术等多个角度来描述。
  • 易读性。生成原型后可以方便每一个控件的逻辑。页面逻辑可以单独查看。
  • 结构化。导入rp源文件的时候,可以选择导入指定notes字段,或者不导入。
  • 批量化。可以将一个控件的全部逻辑批量复制到另外一个相似控件上。

notes是什么

Axure官方对notes的定义是,与控件或者页面相关联的文本元数据。可用于记录规格,将控件和页面与需求本身相关联,记录更改,并与队友进行沟通。

通常控件和页面自带一个名为“note”并且类型为文本的注释字段。

部分汉化包将notes命名为“元件说明”或者“备注”,请知悉。

如何用 notes 写逻辑

我主要讲一下如何写控件的notes,页面的逻辑写法相似的,会一带而过。

选中控件

进入你要修改的页面,在画布中选择需要的控件。此时右方检查器那边,点击中间的选项卡。

如果是设置页面注释,直接进入画布不要选中任何控件或者单击空白区域,此时右方检查器自动切换成页面检查器。

添加注释

填写你对这个控件定义的逻辑。比如这样子:

具有笔记或互动的小部件在画布上显示时,会在小工具的右上角显示一个蓝色的脚注图标。

修改注释名称

然后,如果你觉得这个注释命名note不合理,想修改。请点击上方的Customize Fileds,进入弹窗。然后双击名称,即可修改。

新增注释类型

用着用着,你会发现一个注释字段无法写清楚多方面的逻辑。此时可以新增几个注释字段。

点击Add,新增注释字段,选择类型:文本、选择列表,数字、日期。注意页面注释只有文本类型。

比如,我们新建一个“视觉逻辑”,成功之后,回到任何一个页面的画布中,再次选择控件即可看到该新增字段。注意如果类型是选择列表的时候,需要在右边填充列表项。

如何查看产品逻辑

在查看HTML输出时,Axure RP界面和浏览器都可以看到注释,但只能在RP源文件中进行编辑。

如何查看控件逻辑

生成原型之后,进入到对应的页面。点击该控件旁边的蓝色小图标,即可展示该控件的全部逻辑。

如何查看页面逻辑

另外你可以在左方的Tab中选择notes,查看该页面所有的控件逻辑,其中页面逻辑显示在做上面。

高亮选中逻辑

点击逻辑,此时右方会蓝色高亮选中控件的边缘。表示这个控件对应的注释是哪些。这种体验比拖拉一个便签好用太多。

查看完整APP案例

我用此方法完整撰写的APP案例-闪电约,也可以下载原型学习。

总结

事实上三四年前我就开始使用notes逻辑表达法了,当Axure RP升级到版本8的时候,notes功能才真正的算是很实用。推荐大家都可以试试notes逻辑表达法。

另外有英文基础的朋友建议看一下官方对该功能的定义和讲解,WIDGET AND PAGE NOTES。