Axure实战18:创建一个PRD产品需求文档生成器

·  阅读 3042
Axure实战18:创建一个PRD产品需求文档生成器

在本章中,你将学会使用全局变量和中继器创建一个需求文档生成器网站。

项目背景

在产品日常工作当中,少不了的一项核心工作是编写产品需求文档,而产品需求文档的编写往往耗费产品经理很长的工作时间。在产品需求文档格式固定的情况下,我们能够将编写文档的工作简化,比如只提供核心的产品信息,由某种工具按照固定的文档格式,自动补充文档呢?

1.png

有了这个想法之后,我们拿一个表单的搜索条件为例,产品需求文档想要描述清楚这一部分的需求,常常格式为:

搜索条件名称,是否必填,控件名称,控件提示文字,数据来源…

按照这个逻辑,我们希望填写一些必要的信息,而其他文字由系统自动生成。

说干就干!

项目搭建

首先,创建一个新项目,命名为DocumentGenerator。

2.png

页面样式-基础框架

为了让页面更加美观,我们先构建基础的框架背景。

首先填充页面颜色为#F0F2F5,然后拖入两个“矩形1”组件,将线段线宽设置为0,圆角半径设置为8,再调整它们的相对位置,就构建了一个背景框架。

3.png

左边的矩形我们作为编辑区,右边的矩形我们作为输出内容的展示区。

基础样式-编辑区

我们分析下下面一段需求文档文字的内容:

业务地区:必填/必选,下拉多选,placeholder为请选择,可选项为该用户数据权限下可访问的业务地区名称;

我们需要几个组件来获得这些内容:

输入框:输入标题

单选按钮:是否必填/必选

下拉选择框:控件类型、提示文字

多行文本框:其他说明文字

确定好思路后,我们开始构建基础的组件。

首先,是输入框。

4.png

拖入一个“文本标签”组件,修改内容为“标题”。

再拖入一个文本框组件,命名为“title”,设置文字字号为14,边框线段颜色为#E6E6E6,边框圆角半径为4,内部文字左侧边距为10。

在交互工具栏中中,设置“鼠标悬停时的样式”,设置线段颜色为#1890FF,设置提示文字为“请输入”,隐藏提示为“获得焦点”。

5.png

接下来,是单选按钮。

单选按钮我们使用的一个圆形组件和文本标签组件,组合而成的单选按钮的样式。

基础样式和交互这里就不多赘述了,在前面基础组件的使用的章节中有详细的说明,简要的几个逻辑,一个是点击时的选中状态为真,单选的选项都需要设置为同一个选项组中,默认有一个选项载入时为真,以及圆形、文字选中时的颜色设置为#1890FF。

6.png

接下来,是组件类型。

组件类型为获得使用的组件是输入框还是下拉选择框,它是一个自定义实现的下拉单选的组件。

组件类型的交互会稍微复杂一点,这里使用动态面板将所有内容包裹在里面。

内部组件有一个矩形(输入框)作为本文接收方,然后在这个文本下有一个表格,展示可选的选项。

交互动作也会稍微复杂一点,基础的逻辑是:点击下拉选择框,展示(显示,向下展开)可选项,点击选项后收起(隐藏,向下展开)可选项,并将输入的内容回写到文本框中。

7.png

接下来,是多行文本框。

拖入一个“文本域”组件,和文本框设置的样式一致,只是他的高度会更高一些。

8.png

最后,是主要按钮。

拖入一个“主要按钮”组件,调整它的位置和样式、尺寸,作为触发按钮使用。

9.png

在这里我们可以看到一个核心的设计原则:统一性原则。

我们使用组件的高度,无论是输入框、下拉选择框、按钮,它们的组件的高度都是40,这样能让我们的页面看起来具有整体性。

页面样式-展示区

对于展示区域,我们这里很简单,每当我们确定好内容后,展示区域就增加一行文字。

这里我们使用到了“中继器”组件,它可以通过“添加行”和赋值的交互,展示我们最终结果的数据。

拖入一个“中继器”组件,命名为“output”。

10.png

进入到中继器内页,调整示例的矩形的尺寸为1080*40,并将线宽设置为0。

在中继器数据栏,删掉所有示例数据。

以上,我们就完成了基本页面样式的绘制。

交互动作-全局变量

按照Axure的赋值逻辑,输入框我们可以直接获得里面的文字,但其他不行。

其他的组件是我们自己完成的交互,像单选按钮、下拉单选,那这些内容,我们可以采用全局变量获得它们的值。

首先,定义3个全局变量,分别为required是否必填,默认值为“必填/必选”,然后是组件类型type,默认值为“输入框”,还有placeholder提示文字,默认值为“请输入”。

11.png

下面,我们来更新全局变量的值。

首先是单选按钮,但在交互工具栏中,点击单选按钮的选项时,我们更新全局变量的值。

12.png

然后是下拉框。

在点击下拉框每一个选项时,设置全局变量的值为对应的内容。示例:点击“输入框”选项,设置变量值type类型为“输入框”,设置placeholder提示文字为“请输入”。

13.png

全局变量赋值完成后,我们来完成将编辑区内容赋值到展示区的交互。

交互动作-添加行

选中“确定”按钮,在“交互”工具栏中新增交互,选择“单击时”,选择“添加行”,设置目标为“output”中继器,点击“添加行”,在“添加行到中继器”弹窗中点击fx,打开“编辑值”弹窗。

14.png

然后就是添加行赋值的过程。

我们定义了5个局部变量,来获得我们想要的值。

LVAR1:文本文字-title-标题名称

LVAR2:全局变量-required-是否必填

LVAR3:全局变量-type-组件类型

LVAR4:全局变量-placeholder-提示文字

LVAR4:文本文字-explain-多行文本文字

我们在组装数据的时候,我们按照需要的格式使用标点符号隔开。

这样,我们就完成了编辑区内容赋值到展示区的交互动作。

交互动作-清空内容

为了方便我们连续输入,我们点击“确定”按钮时除了添加行之外,还增加了2个交互动作,用来清空标题内容和其他说明内容。

15.png

项目预览

完成并保存后,我们在浏览器中预览下效果:

16.png

哈哈哈,效果不错!

为了让这个项目能够公开访问,我们可以生成html文件,然后发布到gitHub或者gitee中,这样就可以将网站分享给朋友们了。

网址地址

PRD产品需求文档生成器: ricardowesley.gitee.io/prd

快来动手试试吧!

如果本专栏对你有帮助,不妨点赞、评论、关注~

分类:
开发工具
收藏成功!
已添加到「」, 点击更改