[计算机软件及应用]Axure基本使用指南.doc

上传人:sccc 文档编号:4561487 上传时间:2023-04-27 格式:DOC 页数:30 大小:888KB
返回 下载 相关 举报
[计算机软件及应用]Axure基本使用指南.doc_第1页
第1页 / 共30页
[计算机软件及应用]Axure基本使用指南.doc_第2页
第2页 / 共30页
[计算机软件及应用]Axure基本使用指南.doc_第3页
第3页 / 共30页
[计算机软件及应用]Axure基本使用指南.doc_第4页
第4页 / 共30页
[计算机软件及应用]Axure基本使用指南.doc_第5页
第5页 / 共30页
点击查看更多>>
资源描述

《[计算机软件及应用]Axure基本使用指南.doc》由会员分享,可在线阅读,更多相关《[计算机软件及应用]Axure基本使用指南.doc(30页珍藏版)》请在三一办公上搜索。

1、Axure基本使用指南目录原型工具的选择1axure文件的使用2axure文件的制作与生成4文档管理(Document)6模板复用(Templates)10Widget工具14注释annotations19交互interactions26Axure RP Pro 5.5 中文翻译教程30原型工具的选择纸笔:简单易得,上手难度为零。有力于瞬间创意的产生与记录,有力于对文档即时的讨论与修改。但是保真度不高,难以表述页面流程,更难以表述交互信息与程序需求细节。Word:上手难度普通。可以画wireframe,能够画页面流程,能够使用批注与文字说明。但是对交互表达不好,也不利于演示。Excel:上手难

2、度普通。易于画表单类的页面,易于做批注,但演示效果一般。PPT:上手难度普通。易于画框架图,易于做批注,也可以表达交互流程,也擅长演示。但是不利于大篇幅的文档表达。Visio:功能相对比较复杂。善于画流程图,框架图。不利于批注与大篇幅的文字说明。同样不利于交互的表达与演示。Photshop/fireworks:操作难度相对较大,易于画框架图、流程图。不利于表达交互设计,不擅长文字说明与批注。Dreamweave:操作难度大,需要基础的html知识。易于画框架图、流程图、表达交互设计。不擅长文字说明与批注。以上这些工具,都是产品经理经常会使用到的,但是从根本上来说,这些工具都不是做prototy

3、pe design的专门利器,需要根据产品开发不同的目的,不同的开发阶段,选择不同的工具搭配使用,才能达到表达、沟通的目的。比如使用纸笔,更适合在产品创意阶段使用,可以快速记录闪电般的思路和灵感;也可以在即时讨论沟通时使用,通过图形快速表达自己的产品思路,及时的画出来,是再好不过的方法。而word则适合在用文字详细表达产品,对产品进行细节说明时使用,图片结合文字的排版,是word最擅长的工作。而excel在处理表单类和包含计算公式类的报表页面时,较其它工具方便。而ppt自然是演示时更好。visio则可以适用于各种流程图、关系图的表达,更可通过画use case 获取用户需求。PS/FW是图片处

4、理的工具,DW则是所见即所得的网页开发软件,这些是设计师的看家本领,对于普通的产品经理来说,需要耗费太多的精力去掌握。axure文件的使用一个最简单的axure原型可能会产生如图中所示的几个文件点击红框中的两个文件都会打开同一个页面。如下图。由三个区域组成,1、文档结构区。显示所有你设计的页面。点击close frames可以关闭。2、主操作区。所有的设计只能在在这个区域显示。3、page notes。对当前区域的解释说明,可以由用户自行添加文字,默认显示当前页面的名称。一个设计实例点击close frame之后的效果。当然,close frame起到了个导航的作用,帮助你进行页面切换。实际上

5、,当你点击close frame是跳转到了另外一个页面,一个非index.html,和当前页面_start.html之外的页面,即当前页面.html。axure文件的制作与生成你需要到axure的官网上下载一个最新的axure文件()目前最高版本5.6。但是如果没有注册码,使用的版本只可以使用15天。所以你还需要在网上搜索一个注册码,这个很多,而且一个注册码可以适用于多个版本。安装过程很简单,下一步就行,有安装不上的朋友请联系我。打开axure,你看到的界面上的区域可以如图从左到右,从上到下的被划分为:1、工具栏2、文档结构区:以树形结构来表达层级关系3、组件面板:最常用的区域之一,所以的控件

6、全部都摆放在这儿了。你可以通过这个面板把组件拖拽到主操作区中。4、模板面板:模板可以说是自定义的组件区域。你可以通过组件之间的排列组合得到你自己的常用的设计,把它保存到模板区域,就可以多次复用了。5、主操作区。摆放你设计的地方。6、面板注释及动作区:不是特别常用的一个区域,基础操作完全可以收起。事实上,我们也不经常在这个区域添加注释。但是可能会需要直接在页面上而不是组件上添加动作。7、交互动作面板:也是最重要最常用的区域。这个面板的所有的动作都需要加载到组件上。也就是这个面板必须与组件(条目3)配合使用。8、注释说明面板:也不是特别常用。除非你需要在组件上添加说明文字,但是没办法收起它。除非关

7、闭动作面板。9、动态图层面板:最重要面板之三。但是你需要先了解axure比较复杂的一个组件dynamic panel才能使用这个面板。ctrl+s保存axure文件,选择一个目录,就可以生成一个.rp文件。但是真正的原型文件是前文介绍过的html文件。.rp文件只不过是生成那个html文件的源文件。下面介绍如何生产html文件。如图所示,你必须单击F5或者单击图中所示的图标,之后弹出下面的这个页面 选择你本机的任何一个文件,之后点击generate,出现如图的页面,生成完毕后,浏览器会自动打开这个html文件,然后你可以检查自己的设计。 恭喜你,完成这步,你就可以开始你的axure原型之旅了。

8、文档管理(Document)开章要说的是文档管理。文档管理看似简单,但是这是从操作功能上来说的,而我在说功能上的时候,想把我对文档管理的理解也一并说一下。文档管理的目的,其实是为了有一个清晰的产品思路。刚开始工作的时候,我发现很多刚从学校出来的朋友对文档的命名与放置都是随心所欲的,我也不例外。没有好的整理习惯,这直接导致每次寻找先前的文档都要花费相当长的时间,甚至不小心误删,如果恰好有事请假,别的同事也无法接手工作。所以,做一个prototype需要首先构建一个清晰的文档关系,这样一方面能够让自己清楚文件关系与位置,更主要的是让开发者与接受者能清晰理解你的思路,生成更合理的产品说明word文档

9、。Axure RP的sitemap,与windows的树形目录相似,是以父子关系构建页面关系的,每个页面既可以是一个页面page,也可以是一个流程图flow。一、工具功能条1、增加一个子页面:为所选择的页面创建一个子页面。2、页面上移:同等级的页面中,将所选页面的上下排列次序,上移一个位置。3、页面下移:同等级的页面中,将所选页面的上下排列次序,下移一个位置。4、页面降序:将所选页面等级降序,作为原等级中,排列在所选页面上方之页面的子页面。5、页面升序:将所选页面等级升序,将所选页面的页面等级,升序为父页面的同等级页面。6、删除页面:将所选页面删除,同时删除其子页面。7、编辑页面:在工作区打开

10、所选择页面,进行编辑。二、右键增加为鼠标右击文件所显示命令,下同。1、增加一个子页面:同 一,1。(表示和第一大点,第1小点功能相同,以下同此)2、在所选页面之上增加一个同等级页面。3、在所选页面之下增加一个同等级页面。三、右键移动1、页面上移:同一,2。2、页面下移:同一,3。3、页面降序:同一,4。4、页面升序:同一,5。四、右键复制1、复制页面:复制所选页面,作为同级页面显示在所选页面下方。不包含所选页面子页面。2、复制分支:复制所选页面以及子页面,作为同级分支显示在所选页面分支下方。五、右键页面类型1、wireframe:页面类型定为线框图,文件图标显示页面图标。2、flow:页面类型

11、定位流程图,文件图标显示流程图标。六、右键其他1、删除页面:同一、6。2、重命名页面:为所选页面重命名。3、编辑页面:同一、7。4、生成流程表:将所选页面以及其子页面关系,生成流程图。生产图有两种页面布局方式可选。标准模式,页面按照父子关系从上自下排列;阶梯模式,页面按照父子关系从左上至右下,以阶梯方式进行排列。5、复制页面链接到剪切板。以上就是sitemap所有命令,其实这些命令都很简单,也很容易理解,关键在于怎么去使用。由于页面有两种类型,wireframe与flow,所以要善于用这两种标记页面,从而让人理解你的意图。我总结大致这两种标记可以如下利用。flow图为父页面,wireframe

12、图为子页面:先画流程图,然后根据流程图构建页面关系。这样在流程图的指引下结构页面关系,可以更清晰的理解页面框架。wireframe为父页面,flow为子页面:为页面线框图中的特殊部分做流程解释。可以对页面的细节部分进行详尽的解释。当然,这两种结构方式要活学活用,在复杂的产品页面结构中,他们完全是你中有我,我中有你的。模板复用(Templates)masters和sitemap面板很相似,文档操作也一样,它们的本质区别是,sitemap里的文件是最终展示页面,masters里的文件却只是一个模块,是页面的一个部分。masters的英文直译是主人或雇主,但是我认为这里可以叫做模板,或者复用模块。m

13、asters的文件,是页面中重复的模块,由于在不同页面中这些模块是一样的,所以拿出来作为一个模块编辑,然后在不同页面中进行调用。这个功能类似于网页程序开发中的程序复用,不同页面中调用同一段程序,一般把这段程序单独做成一段页面程序,然后用include命令进行调用。master的文件就相当于这段被调用的页面程序。dreamweaver也有类似的功能,就是template,可以参照理解。一、功能条master的功能条功能基本和sitemap一模一样,功能也基本一样。唯一不同的是master可以创建文件夹,可以通过文件夹收纳不同的文件,因此唯一不同的就是第一个功能按钮,功能作用是增加一个文件夹。二、

14、右键单击文档增加增加功能的功能模块功能除了增加文件夹其他和sitemap相同,大家可以参考教程三中的二大条。而masters的文档组织结构主要依靠文件夹完成,页面文件之间不存在父子关系。这是文档操作与组织中与sitemap的最大不同。三、右键单击文档移动文件移动功能基本上也和sitemap完全相同,但是父子关系的文档移动是文件相对于文件夹完成,而不是相对于文件进行。功能,基本上也可以参考教程三的第三点。四、右键单击文件文件身份“行为”behavior是行为的意思,这个功能是axure升级到4版本后加入的,是针对master的不同使用情况而添加的一个功能,也是要重点介绍的功能。1、normal:

15、普通文件。就是一般的复用文件。是默认创建的复用文件。2、place in background:定位的复用模板,这类模板的特点是定位于页面的底层,并且锁定模板中的widgets在他原来创建的位置。这类复用模块主要用于创建head、foot、侧边栏等明确定位的复用模块。3、custom widgets behavior:自定义模块。这类模块就类似于自创了一个widgets。这类模块与其他类型的复用模块的不同在于,其他模块与复用到页面的模块是完全相同的,模块的功能设置是什么,功能说明是什么,页面中的模块设置和功能说明就是什么。而自定义模块与页面中被复用的模块是母子关系。自定义模块只决定了模块的功能

16、和位置,但是进入到特定的页面中,模块中的各自部分的说明和功能可以重新定义。充分理解三种不同类型的复用模块的区别,根据不同环境有效的选择,也是非常重要的。五、右键单击文件其他1、2、3功能都是文档文档操作功能,和sitemap一样,分别是删除、重命名和编辑master。4、5功能是对应的。前者是将所选模板文件批量运用于页面,后者是将所选模板文件,批量从页面中去除。通过选择此功能,会弹出sitemap文件的树形目录,你可以通过选择需要添加模板的页面,从而完成模板使用或移除。check all:选择所有页面uncheck all:所有页面都不选择check all children:选择所选页面以及

17、其所有子页面uncheck all children:不选择所选页面以及其所有字页面在4中有特殊的position设置和options命令,position中有两个命令place in blackground:将文件至于页面背景specify location:是特殊定位,可以通过设置距离左侧和上边的距离,来将模板文件放入特定的位置。options里的多选框的意思是“只有页面中没有此模板时才置入”,默认是选择的。如果不选择而置入页面,就会出现如果页面中已经有模板,模板被再次置入的情况。当然如果有特殊需要的模块,就可以这么使用了。6、usage report:使用报告,点击后弹出面板,显示所有使

18、用了此复用模板的列表,显示的是文件名称,通过双击文件名,可以在工作区打开,直接编辑。Widget工具Axure RP的widgets工具栏,就是我们用来画线框图wireframe、流程图flow的工具,也可以说是组成我们最终输出图表的零件。好比我们小时候玩的组装积木,这些工具就是组装积木里的一个个小部件,组成什么?组合得怎样?完全依靠个人的经验和智慧。因此,熟悉每一个工具的用法和用途,才能随心所欲的画出脑海中的图形。Widgets工具栏,下分两类工具:wireframe线框图工具:基本上对应着web页面中的各种图形。针对页面中交互行为的表达,Axure RP专门增加了image map reg

19、ion 图像映射区、dynamic panel动态面版、menu(vertical/horizontal)水平/垂直菜单等几个特殊的工具。Flow工具:流程图所需的基本图形框架。我们先谈wireframe线框图工具。学习这部分工具,如果事先有html基础,或者对web页面元素有比较充分的理解,就很容易入手。以下我根据图片中的编码,依次讲解。1、image图片:给wireframe中插入一个图片站位,也可以直接置入真实的图片。2、text panel文本:插入文本。相当于插入了一个标签。是不带链接的文本。但是其实也可以带链接,在interactions中我们会提到。3、hyperlink超链接:

20、插入带链接的文本。相当于插入了一段带标签的文字。但其实在Axure中它与普通文本除了外型不同,没有本质区别。之所以将两类文字区分开来,目的还是为了在视觉表达中让人直观的理解链接文本和普通文本,而这对于设计人员理解也非常重要,因此建议画图时尽量标准的区分链接文本和普通文本。4、rectangle矩形:插入一个矩形。可以对其进行图形样式编辑。此图形通畅被用来表达板块的边界。5、placeholder占位符:插入一个占位符。占位符通常用来表达在页面中某些特殊区域,比如情况复杂,或者在系统升级中不需要修改,又或者无关紧要的区域等等。作者需要结合说明文字,进行对应的详细表达。6、button按钮:插入一

21、个按钮,相当于标签。按钮一般结合表单使用,当然也可以作为强化的提示链接使用。7、teble表格:插入一个表格。Axure的表格使用起来不是很方便,增加行、列,修改行、列宽度都不方便,算是一个败笔。期待在下一个版本的时候能够有更好的进步。与标准化制作网页一样,表格的使用在画wireframe的时候就应该明确其作用,是用来作为数据列表展示使用,而不是作为网页布局的控件。8、text field文本输入框:结合表单使用。一般用作表单中提交数据。比如搜索框、用户登录框、注册信息填写框等。用作字段提交或单行数据提交。9、text area文本区:结合表单使用。一般用作大段文字编辑、提交。比如文章编辑、留

22、言等板块。10、droplist下拉列表框:结合表单使用。一般用作下拉菜单或者下拉列表选项,比如在搜索中,可以通过下拉列表框来定位搜索分类的范围。也有人用它来做友情链接,可以通过下拉选择直接进行页面跳转。11、listbox列表选择框:结合表单使用。通过文本框列表选项,通常使用在多项列表选择,比如在填写简历表的时候,选择你所感兴趣的行业,会提供列表选择框。不过列表选择框都会结合按钮使用。12、checkbox多项选择:多项选择通常使用在表单中,以提供多项选择。比如在有些有些注册要求用户选择兴趣爱好,会提供十多个选项,因为选项可以并列进行,因此使用的是多项选择。13、raido button单项

23、选择:在一组选择中选择适合选项,选项关系非此即彼。比如在填写性别的时候提供男女选择,用户非男即女,只取一项。当然,不排除再多提供一个双性选择,这样就是三选一,但是同样是非此即彼的单一选择。14、15、horizontal line水平线、vertical line垂直线:用以分割页面中的不同板块区域。由于web页面中只能存在垂直与水平线,为了系统生成用于演示的html文件,特将两种线条分开使用。16、button shape形状按钮:相当于图形按钮,多用于导航,或者多帧切换的版面切换按钮。可进行边角编辑。17、image map region图像映射区:它用于在web页面中制造一片不可见的区域

24、,一般是图片的部分区域,相当于图片的热区,从而添加说明与互动。在现实的网页中经常会有一张大图中有某个区域是触发按钮,而图像映射区就可以用来说明这个区域的的功能和互动内容。18、inline frame框架:类似于html中的对象。用于在页面中制造页面框架,每个框架中嵌入不同的页面。我们经常看到后台系统分左右两栏,一般都是使用了框架,左侧载入的是导航页面,右侧是载入的管理页面。Axure的缺点是,暂时不支持百分比,因此iframe都是按像素度量的,和实际页面效果还是有差距。19、dynamic panel动态面版:是Axure为了表现多帧区域内容而制造的一个工具。它的图标很形象的说明了它的结构。

25、它是不同的state叠加的一个动态区域,默认显示其中一个state,当用户触发按钮、图片或者下拉列表等时,可以设置相应动态面版切换到不同的state。不同state的关系,类似于photoshop的层,也类似于html中的css属性layer。我们可以通过右击dynamic panel进行state编辑,然后通过打开对应state进行编辑,编辑方式和编辑页面相同。20、21、menu(vertical/horizontal)水平/垂直菜单:用于制作水平或者垂直的菜单,可以添加漂浮的的子菜单,添加方法很简单,就是选择所要添加的菜单项,添加submenu。Axure RP pro 的widgets

26、工具栏,另一个重要的工具组就是flow,流程工具。对于画流程图,是我们经常会遇到的问题。我们和程序工程师沟通,用再多的口水,也无法挑明的事情,画一张简明的流程图,就能很直白的说明关键问题。有时候你可能会懊恼,因为程序员的思维犹如计算机,你告诉他为什么没有用,你就告诉他该怎么做,是左是右,是0是1就好了。这个时候,产品经理需要的是理性思维,清晰的思路,如果你不清晰,工程师大多数会跟着你的思路乱做一团。所以多画几个流程,多根据页面需求画清晰的流程,就能解决实际的问题。话不多说,本章主要介绍flow里面的工具,因为图形其实很好介绍,简单的英文翻译就好了,所以也顺带说说这些图形在流程里的作用。方式还和

27、以前一样,编号,对号入座,咱们来一个萝卜,一个坑:1、rectangle:矩形作用:一般用作要执行的处理(process),在程序流程图中做执行框。在axure中如果是画页面框架图,那么也可以指代一个页面。有时候我会把页面和执行命令放在同一个流程中做说明,这个时候将两类不同的矩形做色彩区别,然后做说明就好了。2、rounded rectangle:圆角矩形或者扁圆作用:表示程序的开始或者结束,在程序流程图中用作为起始框或者结束框。3、beveled rectangle:斜角矩形 作用:斜角矩形我几乎不使用,可以视情况自行定义。或者在其他的流程图中,有特殊含义,暂不知晓,也希望有识之士指点一二。

28、4、diamond:菱形 作用:表示决策或判断(例如:If.Then.Else),在程序流程图中,用作判别框。5、file:文件 作用:表达为一个文件,可以是生成的文件,或者是调用的文件。如何定义,需要自己根据实际情况做解释。6、bracket:括弧 作用:注释或者说明,也可以做条件叙述。一般流程到一个位置,做一段执行说明,或者特殊行为时,我会用到它。7、semicircle:半圆形 作用:半圆在使用中常作为流程页面跳转、流程跳转的标记。8、triangle:三角形 作用:控制传递,一般和线条结合使用,画数据传递。9、trapezoid:梯形 作用:一般用作手动操作。10、ellipse:椭圆

29、形或圆形 作用:如果画小圆,一般是用来表示按顺序数据的流程。 如果是画椭圆形,很多人用作流程的结束。如果是在use case用例图中,椭圆就是一个用例了。11、hexagon:六边形 作用:表示准备之意,大多数人用作流程的起始,类似起始框。12、parallelogram:平行四边形 作用:一般表示数据,或确定的数据处理。或者表示资料输入(Input)。13、actor:角色 作用:来自于use case 用例,模拟流程中执行操作的角色是谁。需要注意的时,角色并非一定是人,有时候是机器自动执行,有时候也可是是模拟一个系统管理。14、database:数据 作用:就是指保存我们网站数据的数据库。

30、15、image:图片 作用:表示一张图片,或者置入一个已经画好的图片、流程或者一个环境。基本上,axure讲基本流程图、页面框架图、use case 用例图涉及到的一些关键图形都囊括在flow流程工具中,模糊了流程图的区别,而尽量贴近交互设计时的工作内容。流程图无疑只是一个表达的工具,我们在使用的时候应该根据自己的实际情况使用,而不应该死钻牛角尖,非要知道某个图形的通用标准。理解和沟通是第一位的。而对于某些具有标准性含义的图形,大家人所共知,则我们应该遵循共同的准则,这样就能达到表达的目的。其实axure里面由于不涉及到具体的程序流程,所以有些标准的图形并没有提供,如不规则图形、侧面双矩形等

31、,大家可以自己google一下或者baidu一下很容易就知道。大多数情况下,还是自己自定义一下自己的符号标准,就跟prd文档加上名词解释一样,才是解决方法。注释annotationsAxure rp将interaction交互与annotations注释说明功能放在了一个面版上,同时又针对整个页面有一个交互与注释说明。交互功能设置的是用户通过不同方式触发页面中元素或者载入页面时,发生的交互动作。而注释说明则用文字详细说明对应元素的细节或页面的说明。由于针对整个页面的说明和交互,与针对页面中某个元素的说明与交互在文档表现和生成的不同,而被分开,但是他们的实际功能是一致的,可以一起来说。针对页面和

32、针对页面元素的功能,分别默认处于软件界面的右侧和底侧。如下面两张图片所示:底部右侧对于交互与注释说明,有必要分开讲述。这一节主要讲述annotations,即注释说明。首先,我定义一下对交互与注释说明的解释。Interaction:交互功能,用以设置页面中的交互事件,如页面跳转、面版跳转。从而实现框架图中不同对象的实际功能。在生成html框架页面时,产生相应的对象功能,用以演示操作。Annotations:注释说明,用以对页面或页面中的特定对象进行说明注释。可以根据实际情况分类编写说明内容。比如优先级、功能类型、交互效果、说明等。让程序在开发的时清楚了解该对象或该页面的程序实现详情与细节。那么

33、,现在重点来说注释。1、自定义注释与说明你也许看到e文会头大,你也许第一次看到annotations面版中specification、status、benefit、effect等一连串的英文单词脑袋发晕,那么我告诉你,你完全不用在意这些单词和选项的意义,因为也许它们根本就不适合你,而你可以自定义一套自己的说明选项。我之所以说你不必去理解,出于两个理由,一是因为这些定义,是axure根据一些欧美公司文档中常见的字段归纳出来的,他不适合我们的国情和我们自己公司的实际情况,二则是一个文档中该向你的程序员、设计师表达什么,并没有一个完全的框架。你尽可以根据你要说明的事情,以及你们往常的沟通方式来定义。

34、那么现在看看,我们怎么来定义吧。如果是定义右侧的对象注释,选择 annotations & interactions customize fields and viwe如果是定义底部的页面注释,选择 page notes default manage notes就弹出了自定义窗口,由于功能类似,所以我只选择复杂的右侧的对象注释来说明如图所示,我们看到了两个区域:区域一:Fields:这是管理系统所有的说明字段的,这里定义了针对对象你要说明它的哪些属性,这些属性,用什么类型type的文字进行表述。A)新增字段先在前面的下拉选择框中定义该字段的type类型,有四种类型:Text:文本文字。说明字段

35、中用大段的文字进行说明。Number:数字。说明字段中只包含数字说明。Date:日期。说明字段只有日期Selectlist:选择列表。通过设置特定的选择条件,以供选择。然后在后面的填空框中输入字段的名称,比如我想设置一个对页面中对象的开发优先级的说明字段,那么我就可以给这个字段命名为“优先级”。然后点击add按钮,你所设置的说明字段就被添加到下面的字段列表了。B)管理字段管理字段,首选必须选中你要管理的字段。然后可以通过选择右侧的功能按钮,对字段进行管理:bRemove:/b删除此字段。Rename:对字段重命名。Move up:将字段排列顺序上移一格。Move down:将字段排列顺序下移一

36、格。Edit selectlist:编辑选择列表中的项目,该功能只有当你所选择的说明字段的type类型是selectlist时,你才能选择。选择后会弹出编辑窗口,你可以根据自己的需求,填写不同的选择项,Axure定义,每一行为一个选择项。点ok之后,你就完成了对所选项的管理。区域二Custom views:这里是定义了我们自定义文件的版本。我们可以选择几个常用的说明字段,归纳起来生成一个自定义版本。A)新增用户自定义说明新增说明很简单,只要在输入框中输入一个名称,点选add,就会弹出一个选择框你可以通过add field下拉列表选择你的自定义说明中要包含的说明字段项目,然后点add添加到你的自

37、定义说明中。当你都选择完成后,点done,就创建了一个你自己的自定义说明。B)管理自定义说明管理自定说明,和管理说明字段一样,在管理前,你必须选中你要管理的自定义说明。Rename:对字段重命名。Edit:重新定义此自定义说明中所包含的fields说明字段。弹出选择框,供你重新选择。Remove:删除此自定义说明。最后,当你即完成了对字段的处理,又完成了自定义说明的生成后,点done,你就定义完成了你自己的注释与说明。这个时候,你再选择annotations & interactions,你将会看到你自己的自定义说明:选择后,右侧的注释与说明的字段就都是你自己的了:2、自定义注释与说明的现实意

38、义那么这些自定义说明到底对于我们有什么现实的意义呢?有的,下面我来说明一下。这涉及到axure rp的两个文档生成功能生成演示文档:我们利用axure完成文档的编写后,需要给程序演示,那么我们怎么演示呢?请按下f5键,会弹出提示框,按照默认设置确定后,就会生成html演示文件。你就可以拿这些html文件,给程序员、设计师们演示你的文件了。而我们自定义的这些说明,在编写好的时候会出现在如图中的位置:就是说明面版的激活按钮,点击弹出你的说明文字。这样,用户就可以在不明白的时候在页面中调出说明文字,一一查看了。生成word文档:我们也可以生成word的文档的说明文件,这样的文件甚至可以当作PRD文档

39、使用,而说明则会根据label的标签以及编号,对应生成table说明文档。生成word的快捷键是F6,生成specification说明书。综上所述,运用好了annotations,就可以解决好prd文档中最重要的工作,即功能说明。至于设置怎样的注释,完全就靠你自己来掌控了。Ps:页面notes更加简单,因为针对页面的说明只能有一段文本,不存在特殊说明字段的编辑。交互interactionsAxure RP Pro5终于发布了,直观操作上,最明显的变化之一就是在命令行多了“share.分享”,其次所有窗口可以以浮动形式编辑了。为了与时俱进,以后的教程将以Axure RP Pro5为基础来继续写

40、。话说上次功能说到注释annotations,这次就来说它的“亲兄弟”交互interactions。之所以说他们是亲兄弟,除了因为他们长在同一个面版上,更因为他们需要结合起来使用,这样才能清楚的表明功能详情。打个不恰当的比方,如果要说明的功能对象是人,那么注释annotations标注的是这个人的基本属性,比如“性别、年龄、学历”,交互interactions则是说明人根据外部条件,做出的回应。比如你父母做好饭菜给你,你就吃饭;给你10块钱,一个瓶子,嘱托你买酱油,你就会一溜烟小跑去打酱油(这个比喻有点过时,现在都不这么买了)。当然,我们说的是绝对条件下的绝对反应,这就是机器语言。我们以一条简

41、单的文字链接为例:“hawking 的 axure rp 5 文章列表”。我们来对它添加交互行为。我把交互分为三个部分的:交互触发、交互条件、交互行为。这样的区分,其实是参考程序编程的结构而做的,这就把程序构成人性化、语义化了。这章我着重讲解交互触发与交互行为中的快速链接,详情的交互行为与交互条件留待后面两章进行详解。还是照例先给三个名词做出名词解释。交互触发:是发生交互的导火索,说明引起交互的触发动作是什么。以此文字链为例,交互的触发原因,是“点击文字链”。交互条件:是达成我们目标行为的前提条件。如果目标行为只有一个,对触发没有任何条件限制,交互条件则可以被忽略。再以此文字链接为例,如果对查

42、看文章列表没有任何限制,则不设置交互条件,用户点击文字链,直接发生交互行为。如果对查看文章列表有权限限制,只允许作者查看,则触发交互行为的条件就是“以文章作者hawking的身份登录”。PS:有条件本身,就必然会有条件的反面。或者有多个条件,就会有多个条件之外的例外情况。在写文档的时候,必须考虑进去,说明清楚,这一点最容易疏漏,而造成程序员在开发的时候想当然,或者再回来问你。针对这个例子,条件的反面就是“登录者不是hawking,或没有登录”。交互行为:是机器依据触发事件与条件,做出的反应动作或行动。此文字链接的的交互行为,就是“页面跳转到hawking 的 axure rp 5 文章列表页面

43、”。一、交互触发触发主要有两种,一种是页面载入触发,一种是鼠标行为触发。1、页面载入触发,针对的对象就是我们所编辑的页面,axure将其放在了page notes&page interactions面版中。如下图所示,就是page interactions。Axure暂时仅支持一种页面触发条件,就是OnPageLoad当页面载入时。如图所示,针对我们设置的case事件,axure提供了三个功能。Add case:给所选对象增加事件。Edit case:编辑所选事件。(功能前提,选择你索要编辑的事件,比如鼠标选择case 1)。Delete case:删除所选事件。(功能前提,选择你索要编辑的事

44、件,比如鼠标选择case 1)。2、鼠标行为触发是当用户使用鼠标操作界面时,引发交互。Axure支持的鼠标触发行为根据你所选择的对象不同而不同,选择图形、文字、链接会出现三种触发行为:Onclick:当鼠标点击目标时,触发交互行为。OnMouseEnter:当鼠标移入目标热区时,触发交互行为。OnMouseOut:当鼠标从目标热区移出时,触发交互行为。如果选择的是输入框、多选框等则会出现对应功能的触发行为:OnKeyUp:Fires when the user releases a key.当释放键盘时触发交互行为。OnFocus:当鼠标选择、聚焦到对象时,触发交互行为。OnLostFocus

45、:当鼠标失去对目标对象的选择、聚焦时,触发交互行为。特别的,选择下拉框、列表框会出现:Onchange:当所选项被更改时,触发交互行为。而选择我们所编辑的对象后,如果对象之前没有编辑过交互事件,则有两个选项Add case:给所选对象增加事件。Quick link:快速添加链接。如果曾经编辑过交互事件,则有三个功能,和页面载入触发是一样的,这里也就不再累述。二、交互行为快速链接选择好交互触发后,在对交互没有特定条件设置的前提下,我们可以直接设置此次触发引起的交互行为。由于链接跳转是网页中最常用的交互行为,因此axure特意提供了一个快速链接的功能。选择对象后,点击快速链接则会弹出如下link properties 链接属性面版:如图所示,此面版中有四条可选命令:1、link to a page in this design:链接到这个项目中的某一特定页面。你可以通过鼠标点击,选择你想要跳转的,树型目录中的相应页面。2、link to an external url or f

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 教育教学 > 成人教育


备案号:宁ICP备20000045号-2

经营许可证:宁B2-20210002

宁公网安备 64010402000987号