2022年Axure教程[汇 .pdf

《2022年Axure教程[汇 .pdf》由会员分享，可在线阅读，更多相关《2022年Axure教程[汇 .pdf（27页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、下面，用几个实例来介绍用Axure RP Pro 制作交互文档。在制作过程中，经常会有一些Tips，是一些使用软件的技巧和相关提示。这些多半都是我个人的总结，有些可能是我的“错觉”，希望在这方面能够得到指导，也希望一些有用的技巧真的能在实际操作中帮到大家。根据 Facebook的未登录首面来设计一个SNS社区首页的原型Facebook的未登录首页第一部分：制作页面头部(Header)。作为介绍软件的开始，这一部分将分步骤讲解得比较详细。1.第一步：头部底色打开 Axure RP Pro，从 Widgets 面板中选中“Rectangle（矩形）”工具，从面板中拖到工作区当中。名师资料总结-精品

2、资料欢迎下载-名师精心整理-第 1 页，共 27 页 -在软件界面的 信息栏 我们中可以看到工作区中组件的位置（left、right）和宽（width）、高（hight）的数值，单位都是像素(px)。把这个头部矩形放在左上角（left:0 right:0）的位置，并拉长宽高到850和 80。也可以通过右击矩形在菜单中选择“Edit Location and Size(编辑位置和大小)”，快捷键是 Ctrl+L（记住快捷键可以提高工作速度）通过这个编辑框，可以精确地调整组件内容的位置、大小信息，非常适合多少有点“像素强迫症”的朋友们使用:D 在公共栏，可以设置组件内容的一些相关信息。名师资料总结

3、-精品资料欢迎下载-名师精心整理-第 2 页，共 27 页 -我们将矩形的边框设为无色，背景设为深蓝，作为Header 的底部颜色。2.第二步：Logo 从 Widgets 面板中选中“Image（图像）”工具，从面板中拖到工作区来。拉到合适的宽度，双击图像，插入我们的Logo 图片。如果网站还没有定好 Logo 图案，或是为了省事，也可以只插入默认的image图案就可以了。在插入图片时，如果你在工作区预设的图像大小与图像原尺寸不一致，会有一个信息提示。名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 27 页 -如果我们想保留原尺寸（保持图像的真实比例并保证图像的显示质量）则选“

4、是”；如果插入的图片想按我们预设的大小来安放，选择“否”。Tips：我们可以在右边的Anotations&Interactions面板的“Label（标签）”栏中为图像加上命名：“Logo”。在下面添加的组件内容中，你都可以为它们标签命名，规范的命名是个好习惯。当然，一个简单的原型设计，为每个标签进行命名并不是必须的。3.第三步：登录框从 Widgets 面板中拖出一个“Text Field（文本输入框）”可以在公共栏设好文本框的字体大小、颜色等信息，并在文本输入框中输入文字显示：“电子邮件”。按住 Ctrl键手动电子邮件文本框，复制出一个文本框，把框中文字显示内容改为“密码”。Tips：在

5、RP Pro 5.0 及较早的版本中，这些表单组件的中文输入时常会出问题，这时候我通常是在其他地方把内容输好复制过来=。=从 Widgets 面板中拖出一个“Button（按钮）”放在两个文本框右边，按钮文字中输入“登录”名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 27 页 -Tips：这时候如果你觉得三个内容不怎么整齐，可以按Ctrl键选择它们（或者是你习惯用的其他选择方式，如鼠标拖选但要保证附近其他内容是被锁定的状态，像 PS中的那样），并在公共栏中找到对齐方式，将内容进行向上或向下对齐。Tips：选择对齐时，是以第一个被选中的组件内容为基准，其他的内容都向基准进行对齐。

6、如上面的登录框，先选中了“登录”按钮，再按 Ctrl继续选择“密码”和“电子邮件”文本输入框，再进行向下对齐时，三个组件内容都会以“登录”按钮的下边线为基准进行对齐。4.第四步：登录相关信息同样的方法，拖出“Checkbox（复选框）”和“Text Panel（文本）”为登录信息加上“记住我”和“忘记密码？”两个操作信息。Tips：RP会自动将组件内容向边线对齐，所以将复选框和文本拉长后边线自动对齐到下面的文本框，选择它们的文字内容向右对齐。这样就不需要另外再选择上下两个框进行内容的对齐了。第二部分：网站介绍、快速注册及底部信息1.第一步：垫底色为了省事（不用重设宽度），我们按住 Ctrl键直

7、接从上面的 Header 底色矩形处复制出另一个矩形。将这个矩形的位置调整好，拉长，修改好背景色后，并将这个矩形的 层次设为最底层。名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 27 页 -这样就不会把 Header 部分有意无意地挡住了。2.第二步：网站介绍用“Text Panel”和“Image”组件工具为网站添上深动的 介绍。Tips：注意哦，”Text Panel”组件中，我们可以选中其中的一部分文字进行特殊上色。当然，有些时候一张图片不足以表达网站的丰富内容，还需要加上一些介绍或宣传的文字。我们可以把文本组件建于图片之上。也可以直接在 Annotations（注释栏）

8、里添加你需要的一些文字内容。在原型拍板（定案）之后，这才是给UI 看的，但在内容未确定之前，这个名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 27 页 -需要得到头儿们的审批。在这个时候，注释栏就显得很有意义了，它直接反应了你们公司的内容审核步骤。到了原型设计阶段再来确定这些宣传标语/口号并不是件容易的事情。社区做什么、以什么为目的不是在战略层 or 范围层 就已经确定了的事情吗？当然不然，但这些具体内容总是可能会随着工作进程不段被发现和改善的。（具体可参见用户体验要求第2 章）呃，偏题了,Tips：可以在 Cusomize（自定义）操作中，对注释项进行修改。可以根据自己公司的

9、实际流程或审核步骤来进行自定义。名师资料总结-精品资料欢迎下载-名师精心整理-第 7 页，共 27 页 -3.第三步：快速注册这里这里不详说了，按上面的方法把表单组件一个个拖出来或是之后再进行复制就好了。名师资料总结-精品资料欢迎下载-名师精心整理-第 8 页，共 27 页 -下拉菜单的选择制作方法，简单说明一下。先拖出Droplist（下拉菜单）工具。然后双击菜单，在Edit Options（编辑选项）中进行菜单选项的添加、删除和移动。选项前面的复选框被勾选的话，表示默认选择“selected”。4.第四步：底部信息及链接用两条 Text Panel分别作为左边的网站信息和右边的链接。在这里

10、背景色是白色，我们就用默认的透明色，不加底色框了。注意：我们假设在这版原型设计中不需要为链接添加各个链接页面的情况下，才可以所有链接文字放在一个Text Panel中。第三部分：发布用 Axure RP Pro 设计出来的文件是以.rp 为扩展名的，需要有专门的这类软件才可以打开。同时，它提供了至少6 种发布/导出方式。名师资料总结-精品资料欢迎下载-名师精心整理-第 9 页，共 27 页 -File（文件）菜单栏中的Print（打印）和 Image（图像）以及 Generate（发布）栏中的 HTML、Word（2000/2007）、CSV（Comma Separated Value）从 G

11、enerator Configurations（发布配置）中看操作框看来，发布方式还可以增加更多种类。今天我们的首页我将它导出了HTML，点击这里可以查看。下面侧是导出的图片（点击图片可查看大图）：下面，用几个实例来介绍用Axure RP Pro 制作交互文档。在制作过程中，经常会有一些Tips，是一些使用软件的技巧和相关提示。这些多半都是我个名师资料总结-精品资料欢迎下载-名师精心整理-第 10 页，共 27 页 -人的总结，有些可能是我的“错觉”，希望在这方面能够得到指导，也希望一些有用的技巧真的能在实际操作中帮到大家。根据 Facebook 的未登录首面来设计一个SNS 社区首页的原型F

12、acebook 的未登录首页第一部分：制作页面头部(Header)。作为介绍软件的开始，这一部分将分步骤讲解得比较详细。第一步：头部底色打开 Axure RP Pro，从 Widgets 面板中选中“Rectangle（矩形）”工具，从面板中拖到工作区当中。在软件界面的信息栏我们中可以看到工作区中组件的位置（left、right）和宽（width）、高（hight）的数值，单位都是像素(px)。把这个头部矩形放在左上角（left:0 right:0）的位置，并拉长宽高到850 和 80。也可以通过右击矩形在菜单中选择“Edit Location and Size(编辑位置和大小)”，快捷键是C

13、trl+L（记住快捷键可以提高工作速度）通过这个编辑框，可以精确地调整组件内容的位置、大小信息，非常适合多少有点“像素强迫症”的朋友们使用:D 在公共栏，可以设置组件内容的一些相关信息。我们将矩形的边框设为无色，背景设为深蓝，作为Header 的底部颜色。第二步：Logo 从 Widgets 面板中选中“Image（图像）”工具，从面板中拖到工作区来。拉到合适的宽度，双击图像，插入我们的Logo 图片。如果网站还没有定好Logo 图案，或是为了省事，也可以只插入默认的image 图案就可以了。在插入图片时，如果你在工作区预设的图像大小与图像原尺寸不一致，会有一个信息提示。如果我们想保留原尺寸（

14、保持图像的真实比例并保证图像的显示质量）则选“是”；如果插入的图片想按我们预设的大小来安放，选择“否”。Tips：我们可以在右边的Anotations&Interactions面板的“Label（标签）”栏中为图像加上命名：“Logo”。在下面添加的组件内容中，你都可以为它们标签命名，规范的命名是个好习惯。当然，一个简单的原型设计，为每个标签进行命名并不是必须的。名师资料总结-精品资料欢迎下载-名师精心整理-第 11 页，共 27 页 -第三步：登录框从 Widgets 面板中拖出一个“Text Field（文本输入框）”可以在公共栏设好文本框的字体大小、颜色等信息，并在文本输入框中输入文字显

15、示：“电子邮件”。按住 Ctrl 键手动电子邮件文本框，复制出一个文本框，把框中文字显示内容改为“密码”。Tips：在 RP Pro 5.0 及较早的版本中，这些表单组件的中文输入时常会出问题，这时候我通常是在其他地方把内容输好复制过来=。=从 Widgets 面板中拖出一个“Button（按钮）”放在两个文本框右边，按钮文字中输入“登录”Tips：这时候如果你觉得三个内容不怎么整齐，可以按Ctrl 键选择它们（或者是你习惯用的其他选择方式，如鼠标拖选但要保证附近其他内容是被锁定的状态，像 PS中的那样），并在公共栏中找到对齐方式，将内容进行向上或向下对齐。Tips：选择对齐时，是以第一个被选

16、中的组件内容为基准，其他的内容都向基准进行对齐。如上面的登录框，先选中了“登录”按钮，再按Ctrl 继续选择“密码”和“电子邮件”文本输入框，再进行向下对齐时，三个组件内容都会以“登录”按钮的下边线为基准进行对齐。第四步：登录相关信息同样的方法，拖出“Checkbox（复选框）”和“Text Panel（文本）”为登录信息加上“记住我”和“忘记密码？”两个操作信息。Tips：RP 会自动将组件内容向边线对齐，所以将复选框和文本拉长后边线自动对齐到下面的文本框，选择它们的文字内容向右对齐。这样就不需要另外再选择上下两个框进行内容的对齐了。第二部分：网站介绍、快速注册及底部信息第一步：垫底色为了省

17、事（不用重设宽度），我们按住 Ctrl 键直接从上面的Header 底色矩形处复制出另一个矩形。将这个矩形的位置调整好，拉长，修改好背景色后，并将这个矩形的层次设为最底层。名师资料总结-精品资料欢迎下载-名师精心整理-第 12 页，共 27 页 -这样就不会把Header 部分有意无意地挡住了。第二步：网站介绍用“Text Panel”和“Image”组件工具为网站添上深动的介绍。Tips：注意哦，”Text Panel”组件中，我们可以选中其中的一部分文字进行特殊上色。当然，有些时候一张图片不足以表达网站的丰富内容，还需要加上一些介绍或宣传的文字。我们可以把文本组件建于图片之上。也可以直接在

18、Annotations（注释栏）里添加你需要的一些文字内容。在原型拍板（定案）之后，这才是给 UI 看的，但在内容未确定之前，这个需要得到头儿们的审批。在这个时候，注释栏就显得很有意义了，它直接反应了你们公司的内容审核步骤。到了原型设计阶段再来确定这些宣传标语/口号并不是件容易的事情。社区做什么、以什么为目的不是在战略层or 范围层就已经确定了的事情吗？当然不然，但这些具体内容总是可能会随着工作进程不段被发现和改善的。（具体可参见用户体验要求第2 章）呃，偏题了,Tips：可以在 Cusomize（自定义）操作中，对注释项进行修改。可以根据自己公司的实际流程或审核步骤来进行自定义。第三步：快速

19、注册这里这里不详说了，按上面的方法把表单组件一个个拖出来或是之后再进行复制就好了。下拉菜单的选择制作方法，简单说明一下。先拖出Droplist（下拉菜单）工具。然后双击菜单，在Edit Options（编辑选项）中进行菜单选项的添加、删除和移动。选项前面的复选框被勾选的话，表示默认选择“selected”。第四步：底部信息及链接用两条 Text Panel 分别作为左边的网站信息和右边的链接。在这里背景色是白色，我们就用默认的透明色，不加底色框了。注意：我们假设在这版原型设计中不需要为链接添加各个链接页面的情况下，才可以所有链接文字放在一个Text Panel 中。第三部分：发布用 Axure

20、 RP Pro 设计出来的文件是以.rp 为扩展名的，需要有专门的这类软件才可以打开。名师资料总结-精品资料欢迎下载-名师精心整理-第 13 页，共 27 页 -同时，它提供了至少6 种发布/导出方式。File（文件）菜单栏中的Print（打印）和Image（图像）以及 Generate（发布）栏中的HTML、Word（2000/2007）、CSV（Comma Separated Value）从 Generator Configurations（发布配置）中看操作框看来，发布方式还可以增加更多种类。今天我们的首页我将它导出了HTML，点击这里可以查看。下面侧是导出的图片（点击图片可查看大图）：

21、1.Masters（通用模块）上篇的未登录首页中的底部，在网站中是通用的内容，因此我们可以利用到 Masters（通用模块）。在通用模块中新增一个取名为“footer”的Masters。双击“footer”模块名进行编辑，将 Home 页中 footer的内容剪贴到模块中。为了在页面中的准确定位，我给footer也加了一个底色框。然后别忘了把“footer”拖到 Home 页中相应的位置哦。2.Menu(菜单)和 Quick Link(快捷链接)RP中制作多级菜单非常方便，只需要用到组件工具中的：名师资料总结-精品资料欢迎下载-名师精心整理-第 14 页，共 27 页 -一个 Menu(Ver

22、tical)：垂直菜单，一个Menu(Horizontal)：水平菜单。菜单默认的一级 Menu Item（菜单选项）有 3 个，我们可以通过右击某个选项来插入同级菜单(Menu Item)和增减下一级菜单(Submenu)。还可以编辑菜单Tips：按键盘 Tab 键只会让当前聚焦点在菜单选项间浮动，不能增加新菜单选项。新增加的菜单选项的宽度会跟之前被操作的菜单的宽度相同；另外，在菜单中修改任一菜单选项的宽度，整个菜单的宽度都会被修改。也就是说，菜单宽度值是各个一级菜单选项的和，而不是自己事先定好的宽度。拉长或缩短整个菜单的宽度时，只有最后的一级菜单选项的宽度被改变。可以通过拖动来选择多个菜单

23、选项，在公共栏中对内容显示进行相关操作。Tips：要先选中上级菜单选项，下级菜单才会显示出来；下级菜单显示的起始位置是上级菜单的左边线，并且无法超过左边线。通过右击菜单中的“Edit Rollover Style（编辑翻转样式）”项，可以名师资料总结-精品资料欢迎下载-名师精心整理-第 15 页，共 27 页 -制定鼠标移动到菜单上时的菜单样式变化。Apply to：This menu item only：只应用到对当前菜单选项；This menu only：只应用到同级菜单；This menu and all submenus：应用到所有同级菜单和下级菜单；Tips：为菜单添加了 Rollo

24、ver Style之后，菜单选项的左上角会出现一个黑白小框，鼠标移动到小框上，就可以看到Rollover Style的预览效果。为菜单加上链接，我们选择菜单选项“首页”，再选择 Interactions（交互）事件中的“Quick Link”名师资料总结-精品资料欢迎下载-名师精心整理-第 16 页，共 27 页 -在 Link Properties（链接属性）中选择网站页面地图中的“Home”页。一个链接就添加好了。当然，也可以添加外部链接（Link to an external url or file）、重新加载当前页（Reload current page）、返回前一页（Back to

25、previous page）。3.表单和交互事件-关键字匹配实例在前一篇 介绍了一些表单组件的使用（文本输入框Text Field、下拉菜单 Droplist、复选框 Checkbox等），下面我们通过“关键字匹配”实例中交互事件，深入一点来认识表单的丰富交互效果。做一个类似google搜索的“查询建议”的关键字匹配实例：名师资料总结-精品资料欢迎下载-名师精心整理-第 17 页，共 27 页 -我们简单模拟这个效果，寻找好友中姓“李”的朋友和叫“李查,”的朋友。实际上这个功能肯定不能像我们这样一个字一个字地匹配的啦=。=点这里 先看看我做好的效果，下面的图片效果：过程讲解：用 Text Pa

26、nel、Text Field和 Button 先做好搜索内容。然后拖出一个Dynamic Panel（动态面板）：在 Text Field下面拉伸出一个“查询建议”的区域来：在 Label 标签栏分别为工作区中的Text Field和 Dynamic Panel 命名为“keyword”和“matching”双击“matching”，为它加上 3 个 State(状态)：名师资料总结-精品资料欢迎下载-名师精心整理-第 18 页，共 27 页 -第一个状态设为空内容，双击第二个状态(matching1)进行编辑，用 List Box(选择框)：在 List Box中添加多个姓“李”的好友名字选

27、项。注意：Allow multiple（允许多选）不要勾选。回到工作区，选择“matching”动态面板，双击第三个状态(matching2)，继续制作“查询建议”菜单，这次都叫“李查,”。名师资料总结-精品资料欢迎下载-名师精心整理-第 19 页，共 27 页 -以下是“matching1”和“matching2”状态的菜单内容。我们分别为两个选择框命名为“matchingList1”和“matchingList2”。和Tips：可以看到两个状态的边缘都有一条蓝色虚线，这就是我们在调用动态面板的时候为它预设的区域大小。超过蓝色虚线的部分将在页面中无法被显示出来。下面开始添加 Interact

28、ions(交互事件)。为表单添加交互事件的方法，先选中工作区中的表单组件，然后在Interactions面板选择“Add case.”添加事件。或是用一些预设的交互行为作为条件，为组件添加事件。OnClick：点击OnKeyUp：键入OnFocus：聚焦OnLostFocus：失去聚焦为“keyword”文本输入框 OnKeyUp（键入行为）添加事件。键入“李”时，显示“matching”动态面板中的“matching1”状态。名师资料总结-精品资料欢迎下载-名师精心整理-第 20 页，共 27 页 -勾选 Select Actions（选择动作）中的“Set Panel state(s)to

29、 State(s)（改变动态面板的状态）”，在“Step 3:Edit the Actions description（第三步：编辑动作描述）”中选中蓝色的Set Panel 链接，将动态面板“matching”的默认状态“none”改为“matching1”，即前面设好的姓名师资料总结-精品资料欢迎下载-名师精心整理-第 21 页，共 27 页 -“李”的“查询建议”状态。点击右上角的“Edit Condition（编辑条件）”，为Case设键入时的keyword 值。可通过下拉菜单和输入框设置条件：“text on widget（文本组件）”，找到“keyword”文本输入框，equals

30、 value“李”（变量值等于“李”）。以下还需要添加几个Case，这里不详说，大家试着自己做一下：OnKeyUp 行为下：Case 2：当键入“李查”时，“matching”动态面板状态变为名师资料总结-精品资料欢迎下载-名师精心整理-第 22 页，共 27 页 -“matching2”Case 3：当键入值不等于“李”时，“matching”的状态变回为“none”OnFocus行为下：Case 1：keyword 的值是“李”，“matching”动态面板状态变为“matching1”Case 2：如果 keyword 的值是“李查”，则“matching”动态面板状态变为“matchi

31、ng2”OnLostFocus 行为下：Case 1：“matching”动态面板的状态为“none”为“matching”动态面板内的两个状态添加交互事件，效果是“当某个查询建议被选中时，keyword 文本输入框的文本值变为选中的内容”。“matchin1”状态里的“matchingList1”选择框，OnChange 行为的 Case 1：这样的 Case我们需要做 5 个，因为我们有 5 个姓李的好友。我们可以通过 Copy Case和 Paste Case，来复制和粘贴。名师资料总结-精品资料欢迎下载-名师精心整理-第 23 页，共 27 页 -但我们需要把 equals 的值“李安

32、”分别改成其他的名字,再选择 OnChange，复制所有的 Case：到“matchin2”状态里的“matchingList2”选择框将多余名字（不叫“李查”）的Case删除“Delete Case”名师资料总结-精品资料欢迎下载-名师精心整理-第 24 页，共 27 页 -别忘记需要将选择框的名称修改为“matchingList2”总算好了，发布看看吧（捏汗 ing）点这里看效果；and 点这里下载.rp源文件，源文件包括了前篇中制作的SNS首页和今天讲解的所有内容。4.RP Pro5.5 多动作-倒计时跳转页面实例RP 5.5 版本之后，支持多个Action（动作）同步，这样我们可以制作

33、出更多的交互效果来了。比如说：倒计时跳转页面。新建一个页面，添加一个Text Panel加上内容“将在秒后跳到首页！”。在文本空格处加上一个Dynamic Panel(动态面板)，在 Label 中为它取名为“stopwatch”。再为它加上“s5”到“s1”5 个状态，分别编辑5 个状态，在里面加上名师资料总结-精品资料欢迎下载-名师精心整理-第 25 页，共 27 页 -内容“5、4、3、2、1”5 个倒计时秒数。Tips：建议文本中输入空格时用全角输入，否则它将跟 Dreamweaver一样在 HTML 不能显示全部的空格，这样会产生与设计时的错位。利用工作区下面的 Page Inter

34、actions（页面交互栏）为页面添加事件。双击“OnPageLoad”，这时我们看到5.5 版本中有一个选项“Advanced Editor(高级编辑器)”利用这个高级编辑器我们可以为页面同时添加多个动作。选择“Add Action”增加动作，可以不断为页面添加动作。名师资料总结-精品资料欢迎下载-名师精心整理-第 26 页，共 27 页 -Wait Time(ms)（等待时间）是我们等下要作为倒计时用的动作，单位是毫秒(ms)，1 秒=1000毫秒。我们按步骤为页面事件添加动作：“stopwatch”秒表跳在“s5”第 5 秒；等待 1 秒；“stopwatch”跳到 s4；等待 1 秒；“stopwatch”跳到 s3；等待 1 秒；“stopwatch”跳到 s2；等待 1 秒；“stopwatch”跳到 s1；等待 1 秒；跳到首页。“Step 2:Select Actions”区域中的动作可以通过右上角的三个小按钮进行“上移、下移、删除”操作。另外，跟前面讲的表单交互一样，“Step 3”动作描述中的参数可以通过蓝色文字链接进行修改。完成添加事件，多个动作一次完成。点这里看效果名师资料总结-精品资料欢迎下载-名师精心整理-第 27 页，共 27 页 -