第5章 Axure RP软件主要功能 5．1快捷功能区 打开Axure RP软件看到整个软件布局与Office软件比较相似，软件的顶部是快捷功能区，它把一些常用功能的快捷按钮全部集成在这里(如图5．1所示)。其中包括常规功能、编辑功能、发布功能、团队项目功能等快捷按钮。如常规功能快捷按钮(如图5．2所示)是比较常用的按钮，从左到右分别是： 新建、打开、保存、剪切、复制、粘贴、撤销等快捷按钮。发布功能快捷按钮(如图5．3所示)是比较特殊的按钮，在完成原型设计，展示其跳转逻辑和架构时需要用到，从左到右分别是： 预览、发布到AxShare、发布等快捷按钮。单击“预览”按钮，可以在浏览器中对当前的设计页面进行预览，默认情况下会在系统默认的浏览器中打开。单击“发布到AxShare”按钮，可以将原型作品发布到Axure网站提供的服务器上面，并且Axure会自动生成一个项目的URL，将这个地址发送给其他人，收到地址的人就可以访问到所设计的原型作品。 图5．1快捷功能区 图5．2常规功能快捷按钮 图5．3发布功能快捷按钮 5．2站 点 地 图 站点地图位于软件的左上位置(如图5．4所示)，其作用为增加、删除和组织管理整个原型中的页面。站点地图是树状的，以首页(index)为根节点。如果需要对某个页面进行编辑，则需要在站点地图上找到这个页面，然后双击，这个页面就会在页面区域中打开。如图5．5所示即为打开对应页面显示的状态。新建页面里面是空白的，其中的内容需要用户来编辑处理。站点地图表示整个原型中页面的逻辑层级结构，显然一个优秀原型产品设计，其站点地图应该是逻辑清晰、内容充实的。因而，尽管可在站点地图中添加页面的数量是没有上限的，但是出于整体规划与高效管理的考虑，建议在原型设计开始前就做好整体结构规划，再分别对页面进行编辑处理。 图5．4站点地图 图5．5站点地图上的页面预览图 5．3元件区 原型设计中涉及的文本、图形、图像等，在Axure RP中被称为元件。在软件左侧(如图5．6所示)为元件区。单击“选择元件库”，可以看到有默认元件库和流程图元件库，两个元件库可供选择使用。使用默认元件库就可以实现线框图原型设计。同时，该软件也可以通过载入和卸载元件库等方式，实现创建、编辑自定义元件库等功能。 如图5．7所示，页面内容由多个元件组建而成，而元件主要有3组，它们分别是： 基本元件、表单元件、菜单和表格元件。基本元件(如图5．8所示)是组成各类原型的基本元素，其涵盖图片、文本标签、形状、线段、占位符、按钮等。其中热区就是图片热区，在某处实现超链接功能； 动态面板相当于一个容器元件，里面能够包含其他元件，它具备一些其他元件没有的特性，在制作动态效果时，动态面板具有重要功效； 内联框架能够用来在页面中嵌入声音、视频、动画等媒体文件以及网页。中继器通常用来实现重复的列表模块。 图5．6元件区 图5．7元件构成页面 图5．8基本元件 表单元件(如图5．9所示)在编程开发中用于向页面中输入数据形成表单并提交到服务器，其主要包含文本框、多行文本框、下拉列表框、列表框、复选框、单选按钮、提交按钮等。 图5．9表单元件 菜单和表单元件(如图5．10所示)不是很常用。其中包括树状菜单、表格、水平菜单、垂直菜单等。树状菜单常用于一些网站后台的功能列表。水平菜单、垂直菜单则主要用于网站导航栏或者分类标签等。表格是在页面呈现数据表时用到的元件，同时由于Axure RP软件的表格功能并不强大，有些功能还要模拟实现。 图5．10菜单和表单元件 5．4元件属性与样式 元件在原型设计时的操作比较方便，只要把元件库中的元件用鼠标左键选中，然后拖放到编辑区的指定位置就可以。如图5．11所示为添加图片元件后对应显示的元件属性与样式，可以看到有“属性”和“样式”两个标签，单击这两个标签会出现不同的设置界面。添加不同的元件，其显示的元件属性与样式显然是不同的。在此可以将图5．11图片的元件属性与样式与图5．12一级标题的元件属性与样式进行对比。在属性方面，两者共有的是针对元件进行的鼠标悬停、鼠标按下、选中等交互样式设置。在样式方面，两者都可以对所选择的元件进行位置、尺寸、基本样式、边框、线型、对齐等设置，其中如有显示灰色的状态，则表示不可设置。 图5．11图片的元件属性与样式 图5．12一级标题的元件属性与样式 动态面板作为元件其应用是广泛的，比较复杂的动态效果、交互设计基本都可以用动态面板来实现。动态面板是一个装载多个层(或状态)的容器。这个容器里可以放入其他元件，同时赋予元件的动作、状态，使得这个容器可以实现灯箱等多种动态效果。如图5．13所示为动态面板的元件属性与样式。当创建第一个动态面板时，会在元件管理中看到新生成的动态面板以及它的第一个状态。可以看到动态面板上有一个虚线轮廓，这个轮廓决定了真实显示的状态区域，也就是说超出这个动态面板状态轮廓部分是不会被显示的。为了使得动态面板尺寸与其中元件尺寸相适应，可以单击元件属性“自动调整为内容尺寸”。如图5．14所示为动态面板的一个状态的属性。因而，动态面板要从三个层面来考虑设计，分别是动态面板有几层，动态面板中层与层之间的顺序以及各个层中所放置的元件及其属性。另外，双击编辑区中的动态面板时，会出现动态面板状态管理界面。其中可以进行添加、删除、重命名、复制等编辑操作。 图5．13动态面板的元件属性与样式 图5．14动态面板状态的属性 5．5生成与预览 原型设计的效果展示用生成与预览来实现。单击软件菜单中的“发布”，再单击其中的“预览选项”，出现如图5．15所示的预览设置，单击其中的“配置”按钮，进入如图5．16所示的生成设置界面。在图5．15和图5．16中都可以设置查看效果所使用的浏览器，可以设置是否在生成后显示站点地图。在选择查看效果所使用的浏览器方面，可以看到大多数主流浏览器都可以显示并被选择，例如在计算机上安装了谷歌、IE、360三个浏览器，可以看到谷歌浏览器(之前的浏览器插件就是针对谷歌浏览器的)、IE浏览器都显示可以被选择，只有360浏览器没有显示。一般地，只要设置默认浏览器打开即可。在设置是否在生成后显示站点地图方面，有“生成并显示”“生成并隐藏”“无站点地图”三种选择，通常选择“生成并显示”。 软件中的生成功能是指将原型设计实现、保存在硬盘上并予以展示的完整过程，其中三个环节——设计实现、硬盘保存、效果展示缺一不可。从效果展示的情况看，预览和生成似乎作用差不多，但从如图5．16中可以看到生成HTML是保存到指定的文件夹地址的，而预览并不将文件保存到指定的文件夹中，在浏览器上的地址显示为127．0．0．1，也就是把文件上传到网站服务器，再打开展示效果的。也就是说同样一个原型在预览和生成时，表现在浏览器地址栏中的地址是完全不一样的。 图5．15预览设置 图5．16生成设置 5．6元件交互与说明 软件界面的右上角，是元件交互与说明功能面板。这是一个非常重要的区域，原型里面的动态效果绝大多数是在这里实现的。而且当一些效果不能实现或者实现起来浪费精力与时间、没有价值的时候，也可以通过元件说明进行文字备注。另外，元件说明也能体现在软件生成的文档中，规范全面的元件说明能够让生成的文档更容易修改成可用的产品需求文档。 元件交互与说明模块中的第一项是元件名称的编辑框，为元件添加名称主要是为了让我们能够准确方便地选取元件，特别是一些需要添加交互或者在编辑中经常要用到的元件，所以，给元件命名是进行原型设计要养成的一个好习惯。 在交互面板中首先是“添加用例”和“创建链接”两项。“创建链接”能方便地设置元件被鼠标单击时跳转到当前项目的其他页面。“添加用例”则可以在单击下方的任意一个触发事件后添加打开用例编辑界面。在Axure RP软件的交互中，触发事件就是面板中的“鼠标单击时”“鼠标移入时”等事件。情形就是在触发事件中添加的用例。情形的判断和执行的动作，则需要在用例编辑界面中进行编辑。通过这些步骤可以完成一次对交互行为的编辑。 用例编辑界面包含的术语如表5．1所示。 表5．1用例编辑界面术语 名称 作用 用例名称 修改用例名称，便于识别或者组织文档 添加条件 为之后的动作添加限制条件，仅在满足条件时执行 添加动作 选择在符合条件时执行的动作 配置动作 选择动作的目标对象，并进行相应的设置 组织动作 为添加的动作调整先后顺序 图5．17右击弹出的快捷菜单 在具体操作过程中，Axure RP用例中的动作是由上到下执行的，顺序很重要。其中有一个元件是比较特殊并且重要的，它就是动态面板。在后面的内容里会专门针对动态面板做讲解。在此以一个例子讲述动态面板在制作动态效果时的用法，请注意比较图片与动态面板两种元件在元件属性与样式上的异同。在此制作一个单击可以弹跳的爱心。 应用场景： 弹跳的爱心。 制作过程： 步骤1： 首先我们添加图片元件到编辑区，双击该元件并选择要添加的图片，根据提示选择是否优化图像，是否调整图像尺寸，完成图片加载。然后选中该元件并右击，会弹出如图5．17所示的快捷菜单。可见对图片元件可以进行分割图片、裁剪图片等编辑处理。由于要制作动态效果，因而单击“转换为动态面板”选项，将图片元件转换为动态面板。此时元件属性与样式变为如图5．13所示。 步骤2： 在元件交互与说明区，双击“鼠标单击时”，打开用例编辑界面，为其添加用例。首先在“添加动作”中单击“元件”下的“移动”，为其添加动作。然后在“配置动作”中单击“动态面板”，并设置移动“相对位置”到x:190 y:90，动画效果为“弹性”，时间为500ms。如图5．18为用例编辑对话框。这样就可以在预览中看到单击爱心图，出现有弹性的跳动，其方向是指向右下方的。 图5．18用例编辑对话框 可以思考一下，如何使得这个爱心像弹球一样向上弹跳后又落回到原处呢？可以调整一下用例中的参数(如图5．19所示)，使得爱心先往上弹，再落下来，在x和y坐标上做一个调整。如在此添加两个“移动”，第一个将其动态面板的移动参数设置为x:0 y:-80，动画效果为“弹性”，时间为100ms，第二个将该动态面板的移动参数设置为x:0 y:80，动画效果为“弹性”，时间为500ms。 图5．19调整用例参数 5．7页 面 设 置 通过页面样式可以对页面进行页面设置与编辑处理。如图5．20所示为页面样式。单击默认样式右侧的图标进入页面样式编辑区域，对“页面排列”“背景颜色”“背景图片”“水平对齐”“垂直对齐”“草图/页面效果”等进行设置，可以创建新的自定义样式或对原有样式做进一步编辑调整。“页面排列”可以设置原型在页面居中或居左。“背景颜色”是为页面添加背景颜色。“背景图片”则可以导入图片当作背景图。“水平对齐”和“垂直对齐”每种选择中又有三种对齐方式。“草图/页面效果”可以将原型设置转换为手绘线框图效果，其中有颜色、字体、线宽等设置。注意，草图滑杆中数值越大，元件线条越弯曲，一般建议设置数值为50。 图5．20页面样式 页面设置面板中最左侧一项是“页面说明”(如图5．21所示)。页面说明功能如同元件说明，可以为当前页面添加说明，为他人了解页面内容提供方便。页面说明可以直接在页面说明的文本框中输入内容。如有不同需求的，需要添加多个说明的，则单击“自定义说明字段”，完成添加后在文本框中选择不同的字段名称，即可添加不同的说明内容。页面说明并不是最重要的部分，但在设计较为复杂的原型时会体现出功能。 图5．21页面说明 页面设置面板的中间一项是“页面交互”。页面交互中包含页面的各种触发事件，可以为页面的触发事件添加用例，来执行指定的动作。 应用场景： 向左滑动的动态效果。 制作过程: 步骤1： 在Axure RP软件下方的页面交互中添加“页面载入时”用例，添加页面交互设置如图5．22。 图5．22页面交互 步骤2： 测试该动态效果，并微调其中的参数。该效果实现的是在页面一打开时，动态面板实现向左滑动图片的动态效果。如图5．23为预览效果，矩形框区域的广告图片呈现向左滑动的效果，循环时间间隔为1000ms。 图5．23预览效果 5．8母 版 管 理 母版的创建、修改等编辑操作与其他页面的相关操作基本类似，主要涉及新建、编辑、删除等三大块的工作。如表5．2为母版管理操作步骤的说明。 表5．2母版管理操作步骤的说明 操作名称 具 体 步 骤 新建 单击面板中的“新建”按钮或者单击面板空白处快捷键Ctrl+Enter完成母版的创建，创建后可以对母版名称进行编辑，双击母版名称则进入母版的编辑界面 编辑 编辑区中可以像组织页面内容一样，拖入元件、添加交互等组成模板的内容 删除 如果需要删除一个母版，需要先将母版从所有关联的页面中移除，才可以删除； 如果被删除的母版有下级母版，则该母版被删除时，下级母版也被同时删除 母版用来实现内容的重用、同步管理，来提高制作原型的效率。但是有时母版中的有些内容，可能需要在不同的页面中有不同的交互效果。 设置有如下两个步骤。 （1） 创建一个自定义的触发事件。创建一个自定义的触发事件需要在导航菜单“布置”列表最后一项“管理母版触发事件”中进行设置，单击“+”添加一个事件名称，并命名。 （2） 将母版中的某个事件与自定义触发事件绑定。 完成以上两步，在添加了母版的页面中点击母版，则会在交互的功能界面中出现这个母版中所有自定义触发事件。 5.9设 计 作 业 在第4章设计作业的基础上，要求学生自行选择素材，实现部件创建、属性调整、部件库的创建等操作。