Axure RP 9萌新修炼手册-第四章-文档应用

AxureRP9教程 小楼一夜听春语 541℃ 0评论

第四章 文档应用

这一章,我们一起来了解如何将线框图与产品需求文档相结合。

我们知道线框图基本上已经完整的表达了产品的结构与功能。

如果在线框图的基础之上,增加业务流程与交互的描述,就基本上已经完成了产品文档中的大部分内容。

如果在RP文件中,再通过不同的页面添加上文档属性、修订记录、产品概况、用户角色、产品安全、时间进度等内容,最终形成的文件就是另外一种表现形式的产品需求文档。

第一节 页面流程

在提出产品需求时,我们需要能够直观清晰的看到页面之间的关系以及流转过程,此时可以通过AxureRP绘制直观清楚的页面流程图。(图4-1)


案例11:绘制页面流程图

这样的结构图不仅仅体现出页面间的关系,还能够直观的呈现出页面的布局与功能组成。

绘制这样的图表,我们只需要每个页面拖入一个快照元件,双击选择引用页面,然后使用连接线进行连接就能够完成。

关于快照元件的具体操作如下。

双击快照元件或者在样式功能面板中点击【添加引用页面】,在打开的引用页面窗口中选择快照指向的页面,点击【确定】按钮就完成了页面的引用。(图4-2)

快照元件引用页面之后,默认在页面缩略图四周与边框之间留有5个像素的填充,可以在样式功能面板中通过修改填充的数值进行调整。如果不需要填充,可以将数值全部修改为“0”。(图4-3)

在样式功能面板中的【适应比例】选项,默认为选中状态,能够让页面缩略图完整的在快照元件内呈现,并且缩略图尺寸可以跟随着快照元件的尺寸改变而改变。

如果想在不改变快照元件尺寸的情况下,按指定比例放大或缩小页面缩略图,需要取消【适应比例】的勾选,并设置缩放比例的数值。

另外,在样式中我们还可以通过添加【执行动作】让页面缩略图变为执行某一交互之后的状态。(图4-4)

完成后的图表不但可以复制粘贴到产品相关文档中,也可以在线共享或者生成HTML文件。

通过浏览器打开查看时,每一个页面的快照都可以点击进入相应的页面查看页面细节与交互。

第二节 功能描述

一、单页功能描述

线框草图因为只有少量交互或者没有交互,所以对页面中的功能需要进行文字描述。

对于这样的需求,我们可以单独建立描述页面,在描述页面中通过快照元件与连接线对引用的页面功能加以描述。(图4-5)

快照、形状以及图片元件都可以添加自定义连接点。

不同的是快照元件可以直接在上下文菜单中选择【编辑连接点】的选项(图4-6),而形状和图片元件需要在【变换形状】或【变换图片】的子菜单中选择这个选项。

点击【编辑连接点】的选项之后,即可在元件的任意位置上添加新的连接点,通过选择【连线工具】进行连线的操作。(图4-7)

另外,我们还可以通过快照元件单独放大页面中的局部区域,并结合形状边框与连接线,进行重点描述。(图4-8)

局部区域的边框,我们可以通过矩形改变边框线段的类型、颜色、线框,并取消矩形的填充颜色来完成。

在快照元件的样式中,我们可以通过设置局部放大的尺寸、缩放比例以及水平(X)与垂直(Y)方向的偏移量来完成局部放大呈现。(图4-8)

注:偏移量的设置中,X轴向左为负值,向右为正值;Y轴向下为正值,向上为负值。

另外,当取消【适应比例】的勾选时,我们也可以通过双击快照元件,然后拖动快照中的内容进行位置的调整。

二、多页功能描述

使用标记元件,我们也能够在同一页面中完成多个页面的功能描述,并且体现页面间的逻辑关系。(图4-9)

第三节 功能场景

在文档中我们通常通过流程图表达用户使用某一个功能的场景。

而通过AxureRP的快照元件,我们可以让用户的操作流程以另一种形式呈现。

例如,用户注册的场景。(图4-10)

通过快照元件,将用户在使用某个产品功能过程中的各个界面分别呈现,并加入连接线表达业务逻辑,从而形成清晰直观的功能场景描述。

第四节 说明功能

Axure RP带有说明功能,可以为元件和页面添加说明注释。

在Axure RP 9中说明功能被进一步优化,变得更加灵活易用。

一、页面说明

在使用页面说明之前,我们需要先编辑说明字段。

1、点击页面空白处,或者从概要中点击页面名称,切换到页面说明功能面板。

此时,只有一个默认的说明字段。(图4-11)

2、点击页面名称右侧的属性设置图标,打开说明字段设置界面。

在这个界面中,我们可以修改页面说明字段的名称,以及【+添加】更多的说明字段。(图4-12)

新添加的说明字段就会在说明功能面板中呈现出来,供我们写入说明内容。(图4-13)

二、元件说明

元件也可以添加说明注释,同样是在说明功能模块中添加。

在使用元件说明之前,我们也需要先进行字段的配置。(图4-14)

元件字段可以添加不同的类别,包括:文本、选项列表和数字。

文本和数字字段可以直接添加,选项列表字段添加时需要预置选项。(图4-15)

添加字段之后,我们就可以在说明功能面板中,添加元件的说明内容了。

例如,我们通过页面快照元件,为一个功能模块撰写用例说明。(图4-16)

不过有的时候,我们可能需要用到不同的字段。

例如,为某个元件添加交互说明,这个时候用例说明的字段就无法使用。

这个问题,我们可以通过定义字段集来解决。

首先,在自定义元件字段列表中新增所需的说明字段。(图4-17)

然后,在编辑元件字段集的界面中,将这些字段进行归类。

在左侧的编辑字段集区域添加字段集的名称,然后在右侧的字段集字段列表中添加该字段集包含的字段。(图4-17)

完成字段集的设置之后,我们在说明功能面板中就可以选择某个字段集进行说明内容的添加了。

(图4-18)


在说明功能面板中添加的说明内容,在我们查看原型时可以通过原型播放器右侧的说明面板查看。 如果是元件上添加的说明注释,也可以点击元件上的说明图标查看。(图4-19)

【提示】图书案例源文件及素材,请关注微信公众号“chanpinban”后,回复“萌新手册”获取。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师全新打造Axure RP 9精品课程,以独有的教学方法与技巧,帮助你以最短的时间高效的完成学习目标。

《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】


转载请注明:Axure原创教程网 » Axure RP 9萌新修炼手册-第四章-文档应用

喜欢 (4)or分享 (0)
头像
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址