会员注册 | 登录|微信快捷登录 QQ登录 微博登录 |帮助中心 文库屋 专业精品文档分享网站

Axure教程

收 藏 此文档一共:35页 本文档一共被下载: 本文档被收藏:

显示该文档阅读器需要flash player的版本为10.0.124或更高!

关 键 词:
Axure  
  文库屋所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
文档介绍
下面,用几个实例来介绍用 Axure RP Pro 制作交互文档。 在制作过程中,经常会有一些 Tips,是一些使用软件的技巧和相关提示。这些 多半都是我个人的总结,有些可能是我的“错觉”,希望在这方面能够得到指导, 也希望一些有用的技巧真的能在实际操作中帮到大家。 根据 Facebook 的未登录首面来设计一个 SNS 社 区首页的原型 Facebook 的未登录首页 第一部分:制作页面头部(Header)。 作为介绍软件的开始,这一部分将分步骤讲解得比较详细。 1. 第一步:头部底色 打开 Axure RP Pro,从 Widgets 面板中选中“Rectangle(矩形)”工具, 从面板中拖到工作区当中。 在软件界面的信息栏我们中可以看到工作区中组件的位置(left、right) 和宽(width)、高(hight)的数值,单位都是像素(px)。把这个头部矩形 放在左上角(left:0 right:0 )的位置,并拉长宽高到 850 和 80。也可以通 过右击矩形在菜单中选择“Edit Location and Size(编辑位置和大小)”,快 捷键是 Ctrl+L(记住快捷键可以提高工作速度) 通过这个编辑框,可以精确地调整组件内容的位置、大小信息,非常适合 多少有点“像素强迫症”的朋友们使用~:D 在公共栏,可以设置组件内容的一些相关信息。 我们将矩形的边框设为无色,背景设为深蓝,作为 Header 的底部颜色。 2. 第二步:Logo 从 Widgets 面板中选中“I****ge(图像)”工具,从面板中拖到工作区来。 拉到合适的宽度,双击图像,插入我们的 Logo 图片。如果网站还没有定 好 Logo 图案,或是为了省事,也可以只插入默认的 i****ge 图案就可以 了。 在插入图片时,如果你在工作区预设的图像大小与图像原尺寸不一致, 会有一个信息提示。 如果我们想保留原尺寸(保持图像的真实比例并保证图像的显示质量) 则选“是”; 如果插入的图片想按我们预设的大小来安放,选择“否”。 Tips:我们可以在右边的 Anotations & Interactions 面板的“Label (标签)”栏中为图像加上命名:“Logo”。 在下面添加的组件内容中,你都可以为它们标签命名,规范的命名是个 好习惯。当然,一个简单的原型设计,为每个标签进行命名并不是必须的 3. 第三步:登录框 从 Widgets 面板中拖出一个“Text Field(文本输入框)” 可以在公共栏设好文本框的字体大小、颜色等信息,并在文本输入框中输 入文字显示:“电子邮件”。 按住 Ctrl 键手动电子邮件文本框,****出一个文本框,把框中文字显示 内容改为“****”。 Tips:在 RP Pro 5.0 及较早的版本中,这些表单组件的中文输入时常 会出问题,这时候我通常是在其他地方把内容输好****过来=。= 从 Widgets 面板中拖出一个“Button(按钮)” 放在两个文本框右边,按钮文字中输入“登录” Tips:这时候如果你觉得三个内容不怎么整齐,可以按 Ctrl 键选择它 们(或者是你习惯用的其他选择方式,如鼠标拖选——但要保证附近其 他内容是被锁定 的状态,像 PS 中的那样),并在公共栏中找到对齐 方式,将内容进行向上或向下对齐。 Tips:选择对齐时,是以第一个被选中的组件内容为基准,其他的内 容都向基准进行对齐。如上面的登录框,先选中了“登录”按钮,再按 Ctrl 继续选择“****”和“电子邮件”文本输入框,再进行向下对齐时,三个组件 内容都会以“登录”按钮的下边线为基准进行对齐。 4. 第四步:登录相关信息 同样的方法,拖出“Checkbox(复选框)”和“Text Panel(文本)” 为登录信息加上“记住我”和“忘记****?”两个操作信息。 Tips:RP 会自动将组件内容向边线对齐,所以将复选框和文本拉长后 边线自动对齐到下面的文本框,选择它们的文字内容向右对齐 。这样 就不需要另外再选择上下两个框进行内容的对齐了。 第二部分:网站介绍、快速注册及底部信息 1. 第一步:垫底色 为了省事(不用重设宽度),我们按住 Ctrl 键直接从上面的 Header 底 色矩形处****出另一个矩形。 将这个矩形的位置调整好,拉长,修改好背景色后,并将这个矩形的层 次设为最底层。 这样就不会把 Header 部分有意无意地挡住了。 2. 第二步:网站介绍 用“Text Panel”和“I****ge”组件工具为网站添上深动的介绍。 Tips:注意哦,”Text Panel”组件中,我们可以选中其中的一部分文字 进行特殊上色。 当然,有些时候一张图片不足以表达网站的丰富内容,还需要加上一些 介绍或宣传的文字。我们可以把文本组件建于图片之上。 也可以直接在 Annotations(注释栏)里添加你需要的一些文字内容。 在原型拍板(定案)之后,这才是给 UI 看的,但在内容未确定之前,这 个需要得到头儿们的审批。在这个时候,注释栏就显得很有意义了,它直 接反应了你们公司的内容审核步骤。 到了原型设计阶段再来确定这些宣传标语/口****并不是件容易的事情。社 区做什么、以什么为目的不是在战略层 or 范围层就已经确定了的事情吗 当然不然,但这些具体内容总是可能会随着工作进程不段被发现和改善 的。(具体可参见《用户体验要求》第 2 章)呃,偏题了…… Tips:可以在 Cusomize(自定义)操作中,对注释项进行修改。可以 根据自己公司的实际流程或审核步骤来进行自定义。 3. 第三步:快速注册 这里这里不详说了,按上面的方法把表单组件一个个拖出来或是之后再 进行****就好了。 下拉菜单的选择制作方法,简单说明一下。先拖出 Droplist(下拉菜单) 工具。 然后双击菜单,在 Edit Options(编辑选项)中进行菜单选项的添加、删 除和****。 选项前面的复选框被勾选的话,表示默认选择“selected”。 4. 第四步:底部信息及链接 用两条 Text Panel 分别作为左边的网站信息和右边的链接。在这里背景 色是白色,我们就用默认的透明色,不加底色框了。 注意:我们假设在这版原型设计中不需要为链接添加各个链接页面的情 况下,才可以所有链接文字放在一个 Text Panel 中。 第三部分:发布 用 Axure RP Pro 设计出来的文件是以.rp 为扩展名的,需要有专门的这类软件 才可以打开。同时,它提供了至少 6 种发布/导出方式。 File(文件)菜单栏中的 Print(打印)和 I****ge(图像) 以及 Generate(发布)栏中的 HTML、Word(2000 / 2007)、CSV(Com**** Separated Value) 从 Generator Configurations(发布配置)中看操作框看来,发布方式还可以增 加更多种类。 今天我们的首页我将它导出了 HTML,点击这里可以查看。 下面侧是导出的图片(点击图片可查看大图): 下面,用几个实例来介绍用 Axure RP Pro 制作交互文档。 在制作过程中,经常会有一些 Tips,是一些使用软件的技巧和相关提示。这些多半都是我个 人的总结,有些可能是我的“错觉”,希望在这方面能够得到指导,也希望一些有用的技巧 真的能在实际操作中帮到大家。 根据 Facebook 的未登录首面来设计一个 SNS 社区首页的原型 Facebook 的未登录首页 第一部分:制作页面头部(Header)。 作为介绍软件的开始,这一部分将分步骤讲解得比较详细。 第一步:头部底色 打开 Axure RP Pro,从 Widgets 面板中选中“Rectangle(矩形)”工具,从面板中拖到工作区 当中。 在软件界面的信息栏我们中可以看到工作区中组件的位置( left、right)和宽(width)、高 (hight)的数值,单位都是像素(px)。把这个头部矩形放在左上角(left:0 right:0 )的位置 并拉长宽高到 850 和 80。也可以通过右击矩形在菜单中选择“Edit Location and Size(编辑位置 和大小)”,快捷键是 Ctrl+L(记住快捷键可以提高工作速度) 通过这个编辑框,可以精确地调整组件内容的位置、大小信息,非常适合多少有点“像素强 迫症”的朋友们使用~:D 在公共栏,可以设置组件内容的一些相关信息。 我们将矩形的边框设为无色,背景设为深蓝,作为 Header 的底部颜色。 第二步:Logo 从 Widgets 面板中选中“I****ge(图像)”工具,从面板中拖到工作区来。 拉到合适的宽度,双击图像,插入我们的 Logo 图片。如果网站还没有定好 Logo 图案,或是 为了省事,也可以只插入默认的 i****ge 图案就可以了。 在插入图片时,如果你在工作区预设的图像大小与图像原尺寸不一致,会有一个信息提示。 如果我们想保留原尺寸(保持图像的真实比例并保证图像的显示质量)则选“是”; 如果插入的图片想按我们预设的大小来安放,选择“否”。 Tips:我们可以在右边的 Anotations & Interactions 面板的“Label(标签)”栏中为图像加上命 名:“Logo”。 在下面添加的组件内容中,你都可以为它们标签命名,规范的命名是个好习惯。当然,一个 简单的原型设计,为每个标签进行命名并不是必须的。 第三步:登录框 从 Widgets 面板中拖出一个“Text Field(文本输入框)” 可以在公共栏设好文本框的字体大小、颜色等信息,并在文本输入框中输入文字显示:“电 子邮件”。 按住 Ctrl 键手动电子邮件文本框,****出一个文本框,把框中文字显示内容改为“****”。 Tips:在 RP Pro 5.0 及较早的版本中,这些表单组件的中文输入时常会出问题,这时候我通 常是在其他地方把内容输好****过来=。= 从 Widgets 面板中拖出一个“Button(按钮)” 放在两个文本框右边,按钮文字中输入“登录” Tips:这时候如果你觉得三个内容不怎么整齐,可以按 Ctrl 键选择它们(或者是你习惯用 的其他选择方式,如鼠标拖选——但要保证附近其他内容是被锁定 的状态,像 PS 中的那 样),并在公共栏中找到对齐方式,将内容进行向上或向下对齐。 Tips:选择对齐时,是以第一个被选中的组件内容为基准,其他的内容都向基准进行对齐。 如上面的登录框,先选中了“登录”按钮,再按 Ctrl 继续选择“****”和“电子邮件”文本输入框, 再进行向下对齐时,三个组件内容都会以“登录”按钮的下边线为基准进行对齐。 第四步:登录相关信息 同样的方法,拖出“Checkbox(复选框)”和“Text Panel(文本)” 为登录信息加上“记住我”和“忘记****?”两个操作信息。 Tips:RP 会自动将组件内容向边线对齐,所以将复选框和文本拉长后边线自动对齐到下面 的文本框,选择它们的文字内容向右对齐 。这样就不需要另外再选择上下两个框进行内容 的对齐了。 第二部分:网站介绍、快速注册及底部信息 第一步:垫底色 为了省事(不用重设宽度),我们按住 Ctrl 键直接从上面的 Header 底色矩形处****出另一 个矩形。 将这个矩形的位置调整好,拉长,修改好背景色后,并将这个矩形的层次设为最底层。 这样就不会把 Header 部分有意无意地挡住了。 第二步:网站介绍 用“Text Panel”和“I****ge”组件工具为网站添上深动的介绍。 Tips:注意哦,”Text Panel”组件中,我们可以选中其中的一部分文字进行特殊上色。 当然,有些时候一张图片不足以表达网站的丰富内容,还需要加上一些介绍或宣传的文字。 我们可以把文本组件建于图片之上。 也可以直接在 Annotations(注释栏)里添加你需要的一些文字内容。在原型拍板(定案)之 后,这才是给 UI 看的,但在内容未确定之前,这个需要得到头儿们的审批。在这个时候, 注释栏就显得很有意义了,它直接反应了你们公司的内容审核步骤。 到了原型设计阶段再来确定这些宣传标语/口****并不是件容易的事情。社区做什么、以什么为 目的不是在战略层 or 范围层就已经确定了的事情吗?当然不然,但这些具体内容总是可能 会随着工作进程不段被发现和改善的。(具体可参见《用户体验要求》第 2 章)呃,偏题了… … Tips:可以在 Cusomize(自定义)操作中,对注释项进行修改。可以根据自己公司的实际流 程或审核步骤来进行自定义。 第三步:快速注册 这里这里不详说了,按上面的方法把表单组件一个个拖出来或是之后再进行****就好了。 下拉菜单的选择制作方法,简单说明一下。先拖出 Droplist(下拉菜单)工具。 然后双击菜单,在 Edit Options(编辑选项)中进行菜单选项的添加、删除和****。 选项前面的复选框被勾选的话,表示默认选择“selected”。 第四步:底部信息及链接 用两条 Text Panel 分别作为左边的网站信息和右边的链接。在这里背景色是白色,我们就用 默认的透明色,不加底色框了。 注意:我们假设在这版原型设计中不需要为链接添加各个链接页面的情况下,才可以所有 链接文字放在一个 Text Panel 中。 第三部分:发布 用 Axure RP Pro 设计出来的文件是以.rp 为扩展名的,需要有专门的这类软件才可以打开。 同时,它提供了至少 6 种发布/导出方式。 File(文件)菜单栏中的 Print(打印)和 I****ge(图像) 以及 Generate(发布)栏中的 HTML、Word(2000 / 2007)、CSV(Com**** Separated Value) 从 Generator Configurations(发布配置)中看操作框看来,发布方式还可以增加更多种类。 今天我们的首页我将它导出了 HTML,点击这里可以查看。 下面侧是导出的图片(点击图片可查看大图): 1. Masters(通用模块) 上篇的未登录首页中的底部,在网站中是通用的内容,因此我们可以利 用到 Masters(通用模块)。在通用模块中新增一个取名为“footer”的 Masters。 双击“footer”模块名进行编辑,将 Home 页中 footer 的内容剪贴到模块中。 为了在页面中的准确定位,我给 footer 也加了一个底色框。 然后别忘了把“footer”拖到 Home 页中相应的位置哦。 2. Menu(菜单)和 Quick Link(快捷链接) RP 中制作多级菜单非常方便,只需要用到组件工具中的: 一个 Menu(Vertical):垂直菜单,一个 Menu(Horizontal):水平菜单。 菜单默认的一级 Menu Item(菜单选项)有 3 个,我们可以通过右击某 个选项来插入同级菜单(Menu Item)和增减下一级菜单(Submenu)。还可 以编辑菜单 Tips:按键盘 Tab 键只会让当前聚焦点在菜单选项间浮动,不能增加 新菜单选项。 新增加的菜单选项的宽度会跟之前****作的菜单的宽度相同; 另外,在菜单中修改任一菜单选项的宽度,整个菜单的宽度都会被修 改。也就是说,菜单宽度值是各个一级菜单选项的和,而不是自己事先定 好的宽度。 拉长或缩短整个菜单的宽度时,只有最后的一级菜单选项的宽度被改变。 可以通过拖动来选择多个菜单选项,在公共栏中对内容显示进行相关操 作。 Tips:要先选中上级菜单选项,下级菜单才会显示出来; 下级菜单显示的起始位置是上级菜单的左边线,并且无法超过左边线。 通过右击菜单中的“Edit Rollover Style(编辑翻转样式)”项,可以制定 鼠标****到菜单上时的菜单样式变化。 Apply to: This menu item only :只应用到对当前菜单选项; This menu only:只应用到同级菜单; This menu and all submenus:应用到所有同级菜单和下级菜单; Tips:为菜单添加了 Rollover Style 之后,菜单选项的左上角会出现一个 黑白小框,鼠标****到小框上,就可以看到 Rollover Style 的预览效果。 为菜单加上链接,我们选择菜单选项“首页”,再选择 Interactions(交互)事件中的“Quick Link” 在 Link Properties(链接属性)中选择网站页面地图中的“Home”页。一 个链接就添加好了。 当然,也可以添加外部链接(Link to an external url or file)、重新加载 当前页(Reload current page)、返回前一页(Back to previous page)。 3. 表单和交互事件-关键字匹配实例 在前一篇介绍了一些表单组件的使用(文本输入框 Text Field、下拉菜单 Droplist、复选框 Checkbox 等),下面我们通过“关键字匹配”实例中交互 事件,深入一点来认识表单的丰富交互效果。做一个类似 google 搜索的 “查询建议”的关键字匹配实例: 我们简单模拟这个效果,寻找好友中姓“李”的朋友和叫“李查……”的朋友。 实际上这个功能肯定不能像我们这样一个字一个字地匹配的啦=。= 点这里先看看我做好的效果,下面的图片效果: 过程讲解: 用 Text Panel、Text Field 和 Button 先做好搜索内容。然后拖出一个 Dynamic Panel(动态面板): 在 Text Field 下面拉伸出一个“查询建议”的区域来: 在 Label 标签栏分别为工作区中的 Text Field 和 Dynamic Panel 命名为 “keyword”和“****tching”双击“****tching”,为它加上 3 个 State(状态): 第一个状态设为空内容,双击第二个状态(****tching1)进行编辑,用 List Box(选择框): 在 List Box 中添加多个姓“李”的好友名字选项。 注意:Allow multiple(允许多选)不要勾选。回到工作区,选择 “****tching” 动态面板,双击第三个状态(****tching2),继续制作“查询建 议”菜单,这次都叫“李查……”。 以下是“****tching1”和“****tching2”状态的菜单内容。我们分别为两个选择 框命名为“****tchingList1”和“****tchingList2”。 和 Tips:可以看到两个状态的边缘都有一条蓝色虚线,这就是我们在调 用动态面板的时候为它预设的区域大小。超过蓝色虚线的部分将在页面中 无法被显示出来。 下面开始添加 Interactions(交互事件)。为表单添加交互事件的方法,先 选中工作区中的表单组件,然后在 Interactions 面板选择“Add case..”添 加事件。 或是用一些预设的交互行为作为条件,为组件添加事件。 OnClick:点击 OnKeyUp:键入 OnFocus:聚焦 OnLostFocus:失去聚焦 为“keyword” 文本输入框 OnKeyUp(键入行为)添加事件。键入“李”时, 显示“****tching” 动态面板中的“****tching1” 状态。 勾选 Select Actions(选择动作)中的“Set Panel state(s) to State(s) (改变动态面板的状态)”,在“Step 3: Edit the Actions description(第 三步:编辑动作描述)”中选中蓝色的 Set Panel 链接,将动态面板 “****tching”的默认状态“none”改为“****tching1”,即前面设好的姓“李”的 “查询建议”状态。 点击右上角的“Edit Condition(编辑条件)”,为 Case 设键入时的 keyword 值。 可通过下拉菜单和输入框设置条件:“text on widget(文本组件)”,找 到“keyword”文本输入框,equals value “李”(变量值等于“李”)。 以下还需要添加几个 Case,这里不详说,大家试着自己做一下: OnKeyUp 行为下: Case 2:当键入“李查”时,“****tching”动态面板状态变为“****tching2” Case 3:当键入值不等于“李”时,“****tching”的状态变回为“none” OnFocus 行为下: Case 1:keyword 的值是“李”,“****tching”动态面板状态变为 “****tching1” Case 2:如果 keyword 的值是“李查”,则“****tching”动态面板状态变为 “****tching2” OnLostFocus 行为下: Case 1:“****tching”动态面板的状态为“none” 为“****tching”动态面板内的两个状态添加交互事件,效果是“当某个查询 建议被选中时,keyword 文本输入框的文本值变为选中的内容”。 “****tchin1”状态里的“****tchingList1”选择框,OnChange 行为的 Case 1: 这样的 Case 我们需要做 5 个,因为我们有 5 个姓李的好友。我们可以通 过 Copy Case 和 Paste Case,来****和粘贴。 但我们需要把 equals 的值“李安”分别改成其他的名字…… 再选择 OnChange,****所有的 Case: 到“****tchin2”状态里的“****tchingList2”选择框 将多余名字(不叫“李查”)的 Case 删除“Delete Case” 别忘记需要将选择框的名称修改为“****tchingList2” 总算好了,发布看看吧(捏汗 ing~~)~~点这里看效果;and 点这里下 载.rp 源文件,源文件包括了前篇中制作的 SNS 首页和今天讲解的所有 内容。 4. RP Pro5.5 多动作-倒计时跳转页面实例 RP 5.5 版本之后,支持多个 Action(动作)同步,这样我们可以制作出 更多的交互效果来了。比如说:倒计时跳转页面。 新建一个页面,添加一个 Text Panel 加上内容“将在  秒后跳到首 页!”。在文本空格处加上一个 Dynamic Panel(动态面板),在 Label 中为 它取名为“stopwatch”。 再为它加上“s5”到“s1” 5 个状态,分别编辑 5 个状态,在里面加上内容 “5、4、3、2、1”5 个倒计时秒数。 Tips:建议文本中输入空格时用全角输入,否则它将跟 Dreamweaver 一样在 HTML 不能显示全部的空格,这样会产生与设计时的错位。利用 工作区下面的 Page Interactions(页面交互栏)为页面添加事件。 双击“OnPageLoad”,这时我们看到 5.5 版本中有一个选项“Advanced Editor(高级编辑器)” 利用这个高级编辑器我们可以为页面同时添加多个动作。选择“Add Action”增加动作,可以不断为页面添加动作。 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”动作描述中的参数可以通过蓝色文字链接进行修改。 完成添加事件,多个动作一次完成。点这里看效果
关于本文

当前资源信息

高级会员

文档缔造共有文档877 篇

编号:WENKUWU385

类型: IT/计算机

格式: doc

大小: 1.60 MB

上传时间:2018-02-07

相关搜索

关于我们-联系我们-网站声明-文档下载-网站公告-版权申诉-网站客服

文库屋  www.wenkuwu.com (文库屋 专业精品文档分享网站)

本站部分文档来自互联网收集和整理和网友分享,如果有侵犯了您的版权,请及时联系我们.
© www.wenkuwu.com 2016-2012 文库屋 版权所有 并保留所有权  ICP备案号:  粤ICP备14083021号              

收起
展开