什么是Axure RP?
Axure RP是一款绘制线框图、原型图、流程图,以及编制文档的工具,用它可以创建和设计图稿,为图稿页面和其中的元素添加交互和说明,并且可以把设计完的图稿发布成HTML文件,以便可以通过web浏览器来查看。
什么是页面?
Axure RP 文件是由页面组成,根据项目范围不同,页面的数量也不相同,可能是一个、两个或者成千上百个。页面管理窗口在Axure RP界面左侧工具面板的顶部,用于查看和管理您项目中的页面。
每个页面包含一个图稿——通常是一个静态的线框图、可交互的原型图或者由元件组成的流程图。
什么是元件?
Axure RP中的图稿都是由元件构成的,最常用的元件是“形状”,在Default元件库下的基本元件中有很多这类元件,包括矩形、文本标签、文本段落,还有使用钢笔工具自行绘制的形状(想要了解更多有关钢笔工具的内容,请查看我们的矢量图章节),另外icons元件库中的图标也属于形状元件。
另外一个常用的元件是图片,它有两个功能,一是可以作为图片占位符来使用,二是可以用来导入外部图片,图片导入后还可以对其进行切片、裁剪、调整大小、拉伸、旋转操作等等。
表单元件也非常有用,像文本框和下拉列表,它们还可以和更高级的元件搭配使用,比如内联框架、动态面板和中继器,这些元件我们将在后面的章节中学习。
你还可以通过使用连线工具把形状元件连接在一起来创建流程图,关于Axure RP流程图的绘制,我们将在下个章节详细介绍。
排列元件
在你的图稿内添加一个元件后,你可以对它进行移动、调整大小或旋转,如果有多个元件,你可以对它们进行对齐、分布、锁定、编组以及调整它们的上下层关系。
在元件上单击鼠标可以选中它,之后你可以按住鼠标在页面内随意的拖动它。
当一个元件被选中时,在它的周围会显示绿色的边框,同时还会出现可以拖拽的锚点,你可以通过拖拽元件边缘的锚点来调整大小,如果想要等比例调整的话,则需要按住SHIFT键进行拖拽。
你还可以利用顶部工具栏或检视窗口中的“w”和“h”,通过为其设置特定的像素值来调整元件的大小。如果按像素调整的时候想限定宽高比例,需要点击“w”和“h”中间的“保持宽高比例”图标。
当你按住[CTRL]/[CMD](译者补充:如果你的电脑是Windows系列,则按住[CTRL],如果你的电脑是Mac系列,则按住[CMD])的同时点击元件上的锚点,就可以通过移动鼠标来旋转元件,如果你想旋转特定的角度,就需要在元件的样式页签下输入特定的旋转度数。
通过顶部工具栏中的锁定图标,你可以将元件锁定在设计区域中,被锁定的元件不能通过拖动来改变它的位置和大小,但是可以在检视窗口中调整它的位置和大小。
多个元件可以进行编组,这样就可以对它们进行统一操作。选中需要编组的元件,然后通过键盘上的快捷键[CTRL]/[CMD]+[G]来进行编组。在元件组上单击可以将其选中,缓慢的双击可以编辑组内的元件,当你编辑元件组中的元件时,页面的其余部分会变成灰色。
编辑文本
在元件上双击,就可以编辑它上面的文本内容(对于大部分元件,双击它,就可以激活其文本编辑功能),你也可以单击形状元件选中后,直接在上面输入文本。
设置元件样式
在Axure RP的界面中,有两个地方可以设置元件样式:一是在右边检视窗口中的样式页签下,二是上面的样式工具栏。可以设置的样式属性包括形状的位置和尺寸、旋转、填充色和阴影,边框的线段颜色、线段样式和线宽,文本的字体、颜色、对齐、行间距和填充。一些样式属性,像旋转和圆角半径,也可以直接在工作区中通过选中元件,拖动其周围出现的锚点来设置。
当你设置了一个元件的样式后,可以使用“元件样式”功能(类似于Microsoft Word的样式或CSS的类)将该元件的样式应用到其他元件,元件样式功能在样式工具栏的最左边,还有在检视窗口中的样式页签下也能找到它,使用元件样式的时候需要先选中一个元件。当你对一个元件更改样式时,在当前的样式名称后面会显示一个星号(*),同时在样式下拉选择框后面显示“更新”和“创建”功能。
交互
交互是指元件或页面的动态行为,交互包含三个部分:事件、用例和动作。事件(比如鼠标单击时、页面加载时)是一个触发器,用例是被事件触发时所发生的场景,动作就是场景发生时需要执行的指令。
举个例子:一个超链接点击后打开页面的交互行为,包含的事件就是鼠标单击时,事件会触发一个用例,用例执行的动作就是打开链接。
创建交互行为是在检视窗口中的属性页签下,当你学完这套教程,你就会知道该如何为元件或页面设计交互。
同样存在于属性页签下的还有交互样式设置功能,在某些场景中,你可以使用该功能设置元件在鼠标悬停、鼠标按下、选中或禁用时的显示样式。另外你也可以通过元件的右键菜单进行样式设置。
元件和页面的说明
元件和页面的说明通常用于解释元件或页面的功能或需求,有时也用来记录变更,跟踪状态或是管理你或你团队的任务。
添加说明功能在检视窗口下的说明页签中,点击“自定义字段”可以为元件和页面说明添加或删除自定义字段。
在浏览器中查看
任何时候你都可以通过浏览器来查看你的图稿。
选择“发布>预览”就可以直接在浏览器中查看当前页面并进行交互操作。
如果你想把项目分享给其他人查看,有两种方法可以选择。你可以使用“发布>生成HTML文件…”来生成项目的HTML、JavaScript和图片文件到你的本地磁盘、网盘或服务器上。
你也可以使用“发布>发布到Axure Share…”把你的项目文件发布到云端,托管在Axure服务器上的Axure Share具有密码保护、讨论和通知的功能。
打印
虽然Axure RP主要是用来创建图稿,然后在web浏览器中查看,但是你也可以将它们打印出来,如果想要在画布上显示打印辅助线,你可以通过顶部菜单“布局>栅格和辅助线>显示打印辅助线”来设置,这些辅助线的位置取决于你的纸张大小的设置,你可以在“打印>纸张尺寸与设置”下调整纸张大小。(译者补充:该功能在顶部菜单“文件”下)
如果你需要打印图稿,可以在“文件>打印”下操作,你可以选择指定的页面进行打印,以及设置打印比例。