Axure RP工具简单使用

1、 AxureRP工具及使用摘要：随着软件需求的日益增大，软件工程师的工作量也越来越多，因此需要一些工具来帮助软件工程师，从而提高编程的效率。这时候，AxureRP这款工具可以发挥很大的作用。AxureRP是一个专业的原型设计工具，可以帮助工程师设计界面、流程图和规格说明文档，从而可以更好地创建应用软件和Web网站。本文通过设计一个注册用户页面的Web应用来对Axure这个工具进行入门级别的说明，包括工具的界面接收和每部分工具的简单用法。通过本文的实验，可以很好的了解到Axure这个原型设计工具的方便快捷，从而使得工程师的工作效率可以得到很大的提升。关键词：Axure，原型分析工具，入门用法，1

2、Axurp工具简介AxureRP是美国AxureSoftwareSolution公司旗舰产品，是一个专业的快速原型设计工具，Axure代表美国Axure公司，RP则是RapidPrototyping（快速原型）的缩写。该工具让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理AxureRP已被一些大公司采用。AxureRP的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等，另外，架构师、程

3、序开发工程师也在使用Axure。2Axure工具的界面说明首先是对Axure整个界面的简单说明，如图1所示。图lAxure界面说明图菜单栏。所有应用程序都有的内容。文件菜单主要包含新建、保存、另存为等内容。编辑菜单主要有撤销、重做、复制、粘帖等功能。视图菜单主要控制界面工具栏的出现和隐藏。项目菜单主要为全局性系统设置菜单。布局菜单主要负责页面中对象的对齐，分组，转换等功能。发布菜单则可以将文件发布成html文件。团队菜单主要是配置管理相关功能。帮组菜单则是在线帮助、查看版权信息等内容。工具按钮栏。在进行设计时会用到的工具，有部分功能在菜单栏上也能实现。页面地图栏。此栏显示你设计的页面及页面之间

4、的树状关系，页面的上下文菜单可以增加、删除页面，改名等。部件栏。构成页面的元素，各种所需的控件，通过拖动到页面上需要的位置便可实现添加控件的功能。母版栏。也可以称为模版栏。在整个系统界面的设计中，有一些内容可能会在多个页面中重复出现，这些内容可以被组织成一个Master,Master可以通过包组织管理。拖动Master到页面中，master中的控件一起作为一个整体出现在页面中。简单说Master就是为了重用。另外修改master内容后，使用了master的页面内容也被修改（从生成原型的效果上来看）。页面工作区。页面设计的区域，可以打开多个页面，点击页面标签，右键上下文菜单包括了打开关闭页面的操

5、作。双击页面地图栏的页面，工作区打开该页面。页面属性栏。输入页面注释，设置页面的交互事件，页面属性。部件交互和注释栏。输入部件的注释，设置各个部件的交互事件。部件属性和样式栏。设置各个部件的属性和样式。部件管理栏。主要管理动态面板。动态面板包括多个状态，每个状态里边可以放置不同的内容,通过事件切换状态，使页面表现不同状态的内容。之后会在下面的操作说明中展示。3Axure工具的操作说明(1)初始化以下内容是通过构建一个注册网址来简单说明Axure工具的使用方法。首先打开Axure工具，默认是新建一个项目，一开始的站点地图构成为一个Home主页外加三个页面。如图2。图2新建项目如图3所示。通过删除

6、和重命名将站点的页面图4Placeholder先将页面工作区下方的页面属性区隐藏。然后拖动两个Placeholder到页面工作区，最后设置为隐藏。如图5。隐藏后Placeholder会改变成如图6中的颜色。改成注册和注册结果两个页面。尹*!0&审Q-if曲A_LQb4lEMfQ-EHUR色轻就嗑一耳砂iiHtJidnPirasr*!汪册再次输入邮箱:图5放置Placeholder图3修改页面名字然后按Ctrl+S保存为web.rp文件。图6PlaceHolder隐藏后然后选择Heading1部件，拖动到页面工作区,(2)注册界面的显示设计选择Placeholder，如图4。并且改变其中的文字。

7、如图7、8和9。图7Heading1部件图13添加TextField部件图8拖动Heading1部件注册图11添加Label部件选择TextField部件，并且添加到页面工作区当中。如图12和13。然后按照以上的方法，再添加几个用户属性,最后如图14所示。图9改变部件文字选择Label部件，添加到页面工作区，并修改名字为“用尸名”如图10和11。图14然后选择RadioButton，添加三个单选按钮,如图15和16所示。图15RadioButton控件图12TextField部件图16添加单选按钮然后选择Button控件，并且添加两个Button控件的页面工作区，同时修改名称。如图17和18。

8、图17Button控件髦MM图18添加Button控件图21设置为动态面板(3)注册界面的交互设计首先，要对每个部件进行命名，以方便之后交互事件的执行。通过软件右上方的部件交互和注释注册一栏，可以对部件进行命名。如图23。Sjfl图23部件命名之后再前三个输入框后添加隐藏提示，如图19所示。图19添加隐藏提示然后通过右侧控件属性栏，通过样式修改，改变隐藏提示的字体颜色，如图20。图22隐藏文字至此，注册界面的外观设计大致完成了。注册界面外观设计完后，需要对各个部件进行交互的设计，主要是各个事件的实现。图24指定按钮组单选按钮要指定按钮组，如图24。Bi1A-：=斗=”严豐I:口鱼-IKXT誑h

9、然后为每个输入框和单选按钮设置提交按钮,如图25。图25设置提交按钮图20改变字体颜色再之后，将隐藏提示设置为动态面板，并将其隐藏起来。如图21和22。图26输入框提示设置然后开始为每个输入框设置事件。首先是输入框获取焦点时的事件。当输入框文字为提示文字图30配置动作“请输入用户名”时，会将输入框清空。先点击部件交互中的获取焦点（如图27），然后点击新增条同理，为输入框配置失去焦点时的事件，如图件（如图28），然后按照图29设置条件，最后配置31。动作（如图30）。图27获取焦点AO图31同理按照上述方式，可以为其他输入框设置相同类型的焦点获取和失去焦点的事件。接着就是设置重置按钮，最后结果如

10、图32。ISAMrlFMHiP图29设置条件图32重置按钮事件再接下来就是提交按钮的事件设置。当第一和第二个输入框与提示文字相同时，将该输入框后面的隐藏提示文字显示出来。因为一开始将隐藏的提示文字设置为动态面板，所以需要设置的是动态面板的状态。如图33所示。W-(5)页面交互事件设计首先，在注册页面的提交按钮中增加一些事件,主要是设置变量值，使得这些变量值可以跨页面传递。如图36。U-WB-PWflrvi图33显示隐藏文字最后，提交按钮的事件设置如图34所示。HTMLButlon鼬主紀湃flSUbmil：吋対于npit_LHemiJW齐倔馱同口屯打fsEBH.itoKfl&ilEts-iiH于

11、摘6?.岳肾i寥跑迥也灼1凤示RiEbeH左字于hpiLPJ&sw&nlZf立孚于!9型!WSEiKfl附上云lEi*HThj补f口栩F：!：却理卞善旳T?內透图36增添事件选择新增变量，如图37。RL*-r|.iM图34提交按钮事件(4)注册结果界面的外观设计匚亘二k斗如图35所示，注册结果界面主要为四组注册图37新增变量新增变量名称如图38所示。信息。注册成功后会跳转到这一页面，Labell-Label4是暂时替代信息的，接下来会定义页面交互事件，使得注册页面的信息能够传递到注li全皑娈HCresleriablelastore曲扫tha!persistsftarnpage1opaqeinl

12、liebserRewmmendlusinG25orless阳JlablHtfiiiinqprolcnpesInMktdsIE.琥:呂&E狞田想=-少于2刖存将.且不!牝老至悟册结果页面中。丙头il册信兒LatHdI士!？lrnp_usemamelmp_p3S5wrd1rrip_ernail1mp_sex图35注册结果界面设计图38新增变量名称如图39和图40所示，将一个变量设置为一个部件文字，具体部件按照变量名和部件名称一一对应。最终结果如图41所示。选中单选按钮，在部件交互栏中选择“选中状态改变时”，如图42。增加条件，当这个按钮选中为真时，如图43。然后设置变量的值。按照这种方眄M甘L|-

13、*图41最终变量值设置-图44设置变量之后回到注册结果页面，在下方的页面交互栏中，选择“页面加载时”的事件，如图45。进入到事件设置中后，选择文本设置，然后将Labell-Label4设置为各自对应的变量值，如图46和47所示。因为单选按钮不同于文本框输入，因此要选择另外的办法。可以在单选按钮选中的同时设置变量的值。图42选中状态改变时图45页面加载时事件B匚l-TTMLij-rnulT|DE曲耐S3web=piElillV.图46设置为变量值FT幵feWHKC.Ek皿泪1MiliNiariHtnviE*平tartr图47设置后的事件至此，这个简单的注册页面大致上完成。以下就是进行发布。(6)

14、发布为HTML文件却AS：jWETiAKiY14i揮IVthuJiJvnap图49发布成HTML注册l.le需曲，用n當羸條密&5i闖箱:JtE件也h图50注册页面a令虫4nxI13E1*=1整个页面设计好后便可将其发布，如图48和49。之后可以在浏览器中直接打开HTML文件。在浏览器打开的结果如图50、图51和图52所示。其中的红色提示功能正常执行。TOC o 1-5 h ziDafflG?flb/EUtcrsAangqy/DMLrnont/AiiJfflAITML/Awb1/rEMKimi=注册f1=崭*h卜密外br_111SI图51注册界面图48发布成HTMLQiX4-Cnift/CUficiVwngqy/DMLfnflntAiijfaAITML/Awb1/EsyFI1=注册信息Ernaii5JJ图51注册结果页面4总结和心得通过使用Axure来设计一个注册页面，总的来说还是挺方便的，对比单纯用html+css来设计界面，Axure在布局上有很大的优势，如果直接编辑css来控制页面的布局会很复杂，特别是程序量十分大的时候。而上文设计的注册页面，总的工程量并不是十分大，因此直接编辑html+css也不会有太大的差别。在进行部件或者页面交互的设计中，对于简单的交互来说，Axure是会比较方便的，但是对于比较复杂