AxcureRP使用指南
- 格式:doc
- 大小:633.50 KB
- 文档页数:14
Axure RP Pro 使用手册Axure RP Pro 使用手册 (1)第一章介绍 (3)第一节认识Axure RP (3)1、什么是Axure? (3)2、Axure工作环境介绍 (3)第2节线框图及注释 (5)1. 站点地图面板 (5)2.元件面板(控件面板) (6)3. 控件注释 (9)4. 页面注释(Page Notes) (10)第3节基本交互设计 (12)1、控件的交互 (12)2、定义一个链接 (13)3、定义行为 (14)4、定义多个场景(场景说明) (15)5、页面事件: OnPageLoad (页面载入时) (16)第4节母版 (17)1、什么是母版 (17)2、添加、设计和组织母版 (17)3、页面中添加模块 (17)第5节HTML原型 (19)1、什么HTML原型 (19)2、配置和生成原型 (19)3、重新生成页面 (20)4、使用HTML原型 (20)5、发布原型 (21)第二章流程图 (22)第1节流程图和连接线 (22)1、什么是流程图 (22)2、流程控件 (23)3、流程连接线 (26)4、创建流程图 (27)5、流程图中引用页面 (27)第2节自动生成流程图 (28)第三章高级交互设计 (29)第1节动态面板 (29)1、动态面板控件 (29)2、编辑动态面板的状态 (29)3、隐藏动态面板 (30)4、动态面板的管理 (30)5、动态面板的交互行为 (31)6、动态面板的应用举例 (31)第2节翻转效果和鼠标移动事件 (33)1、OnMouseEnter(鼠标移入时)和OnMouseOut(鼠标移出时)事件 (33)2、图片翻转和按钮样式翻转 (33)第3节按下、选中、停用的效果 (34)第4节菜单 (35)1、菜单控件 (35)2、编辑菜单控件 (35)3、菜单样式翻转 (35)第四章高级功能 (36)第1节逻辑条件 (36)1、什么是逻辑条件 (36)2、创建逻辑条件 (36)第2节OnChange(选项改变时)事件 (38)1、什么是OnChange(选项改变时)事件 (38)2、在OnChange(选项改变时)事件上使用逻辑条件 (38)第3节OnKeyUp(键盘输入时)事件 (39)1、什么OnKeyUp(键盘输入时)事件 (39)2、OnKeyUp(键盘输入时)实时表单验证 (39)第4节OnFocus(获取焦点时)和OnLostFocus(失去焦点时)事件 (39)1、什么是OnFocus(获取焦点时)和OnLostFocus(失去焦点时)事件 (39)2、使用场合举例 (39)第5节变量 (40)1、什么是变量 (40)2、管理变量 (40)3、设置变量的值 (40)4、在条件中使用变量 (41)5、设置文本时使用变量 (41)第6节OnPageLoad(页面载入时)事件 (42)1、什么是OnPageLoad(页面载入时)事件 (42)2、OnPageLoad(页面载入时)事件和变量 (42)案例:登陆界面 (43)案例描述 (43)实现步骤 (43)步骤一、绘制线框图 (43)步骤二、设计控件交互 (44)步骤三、生成原型 (46)技巧和提示 (46)第一章介绍让你初步认识Axure。
AxureRP交互设计软件使用教程Axure RP交互设计软件使用教程交互原型设计软件Axure中文教程——界面与功能界面与功能(Interface & Function)不论学习什么,打基础是很重要的。
关于基础练习,我印象最深的故事是王羲之练习书法的故事,将一池水染黑,需要怎样的毅力?再有就是达芬奇与鸡蛋的故事,一个简单的鸡蛋,达芬奇画了无数次。
我相信正是他们的一步一个脚印,才让他们有了后来伟大的成就。
故事老套,道理浅显,可是我认为很重要。
学习软件,应该先熟悉每个面板,每个基础功能,才能够真正谈到运用。
所以我的学习方法是了解软件的基础功能开始。
一、欢迎界面与功能运行Axure RP后,首先弹出的是欢迎界面,它拥有的功能和其他软件的欢迎界面没有什么特别的不同。
功能区1:文档区,这个区域显示用户最近打开的Axure RP文件,用户可以快捷的打开之前编辑的文件。
同时也提供快捷按钮,可以创建新文档与打开Axure RP默认文件夹。
功能区2:认证区,这个区域显示注册信息。
已经注册的用户,显示注册者名称,与已经获得认证的图标。
未注册用户,显示注册链接,引导用户完成注册注册。
功能区3:Axure RP学习中心。
主要包括在线学习、帮助文档、问题反馈三个环节。
a、在线学习提供了三个链接:video tutorial:点击后进入视频学习中心,可以通过观看相关的flash教程学习Axure RP,不过都是e文解说。
online community:进入Axure RP的官方讨论组,在线讨论学习。
Axure blog:进入Axure的官方论坛,了解最新资讯。
b、帮助文档也提供了两个链接,但是其实起到的是一样的效果,都是打开帮助文档,只是跳往不同的章节罢了。
c、问题反馈,通过点击链接可以发邮件到support[at],以寻求获得帮助。
在欢迎界面中,Axure还提醒用户,用4.6高版本的软件创建保存的Axure文件,无法用以前的低版本查看。
三。
Axure RP基本操作(1) 认识Axure RP操作介面下图是Axure RP 环境与介面中各区块的简单描述.主选单/工具列: 在主选单与工具列中,可以执行常用的动作指令,例如:开启与储存档案、输出Prototype或Spec文件.Sitemap 窗格: Sitemap窗格将您所设计的网页以树状结构的方式呈现,您可以在这里新增、移除、重新命名和组织设计的网页。
Widgets窗格:包含一系列常用的使用者介面对象,例如:按钮、影像、Text Panel与矩形,您可以直接透过拖拉的方式来设计网页。
Masters窗格:在这里您可以新增、移除、重新命名和组织设计好的Master。
Master是一种可以容纳多项界面元素的集合样板(Temlate),您可以将常用的共享区块设计成Master,未来在设计Wireframe时重复使用Master,来提高规划的效率。
Wireframe窗格:您可以在这个窗格中设计网页信息元素,编排内容,设计介面,设计交互特性等等.未来可以将这些设计好的页面,输出成Prototype或Spec 文件.交互设计(Interaction) 窗格:交互的范围很广,从最基本的超级链接、pop—ups,一直到动态显示和隐藏widget.您可以在这个窗格中定义Widget 的交互。
物件批注(Annotation) 窗格: 您可以为Widget加上批注来指定功能,您可以在这个窗格中增加和自订Widget的批注。
网页说明及交互(Pages Notes &Interactions)窗格:您可以在这个窗格中加入网页层级的说明与交互效果到设计中。
1。
定义Sitemap企划一个网站或Web AP,在动手开始绘制网站页面的示意图(Wireframe)或流程图之前,您应该事先思考网站架构,并决定信息内容与层级。
当您心中已经有了明确的网站架构,接下来就可以利用Sitemap窗格来定义您所设计的网站页面。
Sitemap窗格是用来管理设计中网页的工具,您可以在Sitemap 窗格中可以新增、删除和调整网页层级。
AXURE_RP入门教程Axure RP是一款功能强大的原型设计工具,用于创建高保真的交互原型和线框图。
本文将为您提供一个简单而实用的Axure RP入门教程,帮助您快速上手并了解该工具的常用功能。
二、界面介绍Axure RP的界面分为三个主要区域:工具箱、主界面和交互区域。
1.工具箱:位于左侧,包含常用的元素和工具,如按钮、文本框、图片等。
2.主界面:位于中央,是您进行设计的主要区域。
3.交互区域:位于右侧,包含页面、交互和属性等选项,用于设置页面属性和添加交互效果。
三、创建一个简单的原型1.创建页面:在交互区域点击“页面”选项卡,然后单击“新建页面”按钮。
设置页面名称、尺寸和背景颜色,并单击“确定”按钮,即可创建一个空白页面。
2.添加元素:在工具箱中选择适当的元素,如按钮、文本框或图片,并将其拖动到主界面中。
您可以调整元素的大小和位置,以适应设计需求。
4.设置交互效果:在交互区域中点击“交互”选项卡,并选择适当的交互动作。
例如,您可以选择“点击”交互动作,将一个按钮与另一个页面链接起来。
还可以在交互区域中设置其他交互效果,如弹出框、滚动条等。
四、预览和分享原型1.预览原型:在工具栏中点击“预览”按钮,即可预览整个原型的交互效果。
您可以在预览模式下测试按钮、链接和其他交互效果的可用性和一致性。
五、其他常用功能和技巧1.组合和对齐:您可以选择多个元素并使用工具箱中的对齐工具对其进行组合和对齐。
2.动态面板:动态面板是一种可以滚动和切换内容的容器,可以在交互区域中找到并添加到主界面中。
3. 主题和样式:Axure RP提供了各种预设的主题和样式,可以通过右键单击元素并选择“样式”选项来应用它们。
4.注释和讨论:在工具栏中点击“注释”按钮,在主界面中添加注释和讨论内容,可以方便与团队成员进行沟通和交流。
六、学习资源和进阶技巧除了本教程的基础内容外,您还可以参考Axure RP官方网站提供的详细文档和视频教程,深入了解该工具的高级功能和技巧。
axure使用手册Axure RP是一款专业的原型设计工具,它可以帮助设计师和开发者创建高质量的原型,用于产品展示、测试和开发。
以下是Axure RP的使用手册,包括基本操作、常用功能和高级技巧等方面。
一、基本操作1.打开Axure RP软件,选择“新建项目”,然后选择一个适合你项目大小和方向的模板。
2.在画布上,你可以通过拖拽和调整节点来创建各种形状和元素。
3.在画布上选中一个元素,可以通过右侧的“样式”面板来调整其颜色、大小、字体等属性。
4.你可以通过“布局”面板来调整元素的排列和对齐方式。
5.在画布上选中多个元素,可以通过“组合”功能来将它们组合成一个整体,方便移动和调整。
二、常用功能1.动态面板:Axure RP的动态面板可以让你创建各种交互效果,如按钮点击、滑动页面等。
你可以通过拖拽和调整动态面板中的元素来创建各种交互效果。
2.变量和数据绑定:Axure RP支持变量和数据绑定,可以让你创建更加灵活和可复用的原型。
你可以通过在画布上设置变量和数据绑定,来实现各种交互效果。
3.自定义事件:Axure RP支持自定义事件,可以让你创建更加复杂的交互效果。
你可以通过在画布上设置事件触发器和事件处理程序,来实现各种交互效果。
4.页面跳转:Axure RP支持页面跳转,可以让你创建多页面的原型。
你可以通过在画布上设置页面跳转链接,来实现不同页面之间的跳转。
5.插件和库:Axure RP支持插件和库,可以让你扩展原型设计的功能。
你可以通过下载插件和库,来添加新的功能和元素。
三、高级技巧1.使用Axure RP的快捷键可以提高你的工作效率。
例如,Ctrl+C可以复制选中的元素,Ctrl+V可以粘贴到其他位置。
2.在设计原型时,要注意页面的布局和元素的排列。
可以使用网格和辅助线来帮助你进行对齐和定位。
3.在设计交互效果时,要注意交互的顺序和逻辑。
可以使用流程图来帮助你进行设计。
4.在设计动态面板时,要注意动态面板的状态管理和交互效果。
Axuer RP常用功能使用步骤Axuer RP 软件在产品规划中以静态界面切换为主要手段来展示设计的产品原型,在规划中常用的功能有动态面板、单击事件以及部件变量,一个成型的DEMO原型都是以这三种功能的组合来完成,规划时先在脑海中有一个自己所做产品的大概模型,然后以“框架搭建、局部细化”的模式去慢慢完善原型图。
下面以一个简单的原型图组合介绍操作步骤个人操作是可参考提供的内部演示DEMO源文件以及DEMO原型设计需求:1.实现WEB登录2.登录后显示用户信息3.可新增、修改、删除用户4.用户新增时根据不同的角色有不同的输入字段注意:大家用的软件有6.0版本和7.0版本,两个版本的使用方式差别不大,有区别的稍微找一下可用的部件组里的功能原型。
设计步骤:1.拖一个矩形框,点击鼠标右键并转换成动态面板2.双击动态面板,在弹出的属性框中给动态面板取一个名称“主页”3.在属性窗口下新建两个动态子面板4.双击“登录”子面板,进入子面板界面5.在子面板界面上,使用“文本面板”写入简单的标题文字,跳转字体大小6.使用文本面板+文本框+按钮组合实现登录界面的用户名和密码输入功能7.实现登录后跳转到“登录成功”子动态面板1)选中“登录”按钮,在右边的部件属性窗口中,双击“onclick(单击时)”打开用例编辑器2)在用例编辑器中选中“设置动态面板状态为指定状态”,勾选“主页”,在右下选择指向“登录成功“,点击确定保存8.双击“主页“动态面板,选择”登录成功“子面板,双击后进入子面板界面9.选拖出一个矩形把当前的虚线空白区域填充满,考虑到我们做的是一个WEB界面,在实际的WEB界面中会出现头尾部分为公共部分,在界面切换中不会改变,所以这个地方我们要做出四个区域,头、菜单区域、内容显示区域、尾。
注意:这个地方的实现是用矩形图人工去区别出来的,这个地方的四个区域,就是用矩形图拖了4个区域,每个区域自己来定义要显示的内容,其中头、尾两部分是全局的不变化的,菜单栏是自行添加,内容显示区域是每个菜单点击后需要显示的内容,这个地方内容显示区域,因为会涉及到多个菜单的内容显示,所以这个区域又做成了一个动态面板,然后用2个菜单按钮来关联,具体的菜单切换关联和“登录“按钮的设置模式一致。
AxureRP8实战手册AxureRP8实战手册新手必须掌握得基础操作:本篇包含56种常见得基础操作,初学者应在掌握本篇内容后再进行实战案例篇得学习,以免产生学习障碍。
同时,建议具备一定基础得读者学习本篇中相对生疏得内容,并加以掌握。
一 Axure8.0基础教程(1-10)***********************************本文目录*********************************** 第1章使用元件基础1。
添加元件到画布基础2。
添加元件名称基础3. 设置元件位置/尺寸基础4. 设置元件默认角度基础5。
设置元件颜色与透明基础6、设置形状或图片圆角基础7. 设置矩形仅显示部分边框基础8. 设置线段/箭头/边框样式基础9、设置元件文字边距/行距基础10。
设置元件默认隐藏************************************正文************************************ 第1章使用元件基础1. 添加元件到画布在左侧元件库中选择要使用得元件,按住鼠标左键不放,拖动到画布适合得位置上松开。
(图1-1)基础2、添加元件名称在检视面板得元件名称文本框中输入元件得自定义名称,建议采用英文命名、建议格式:PasswordInput01或Password01名称含义:序号01得密码输入框格式说明:“Password”表示主要用途;“Input”表示元件类型,一般情况下可省略,当有不同类型得同名元件需要区分或名称不能明确表达用途得时候使用;“01”表示出现多个同名元件时得编号;单词首字母大写得书写格式便于阅读、(图1-2)基础3、设置元件位置/尺寸元件得位置与尺寸可以通过鼠标拖拽调整,也可以在快捷功能或元件样式中进行输入调整。
(图1—3)x:指元件在画布中得x轴坐标值。
y:指元件在画布中得y轴坐标值。
w:指元件得宽度值、h:指元件得高度值。
1AxcureRP简介
Axure RP是一个专业的快速原型设计工具。
Axure(发音:Ack-sure),代表美国Axure 公司;RP则是Rapid Prototyping(快速原型)的缩写。
Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。
作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。
Axure RP已被一些大公司采用。
Axure RP的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等,另外,架构师、程序开发工程师也在使用Axure。
2元件库
元件是Axcure原型制作的最基本元素,一个原型就是由若干个元件构成的。
Axcure工具自带一个元件库,称之为标准元件库,用户也可以自定义元件库。
标准元件库:
大部分元件按照字面意思就可以知道它的用途了,如:Common下的Image、一级标题、二级标题、文本标签、文本段落、水平线、垂直线,所有Forms下的元件文本框、多行文本框、下拉列表框、列表框、复选框、单选按钮、提交按钮,Menus And Table下的树状菜单、表格、水平菜单、垂直菜单。
下面就Common下的元件,矩形、占位符、按钮形状、热区、动态面板、内联框架、中继器的用途进行描述。
2.1矩形组件和占位符
矩形组件和占位符基本是一样的组件,两者是可以互换的,矩形组件是一个矩形,它可以用来做很多的工作,比如页面上需要一块蓝色的背景,就可以用一个填充为蓝色的矩形组件,我们还可以用它来做页面布局,是最常用的部件之一。
页面布局:
指定区域宽、高,开始x、y的坐标位。
✧编辑成其它形状:
编辑成指定的其它形状,三角形、椭圆形、方括号等。
(选定矩形—>选择形
状)
✧颜色填充:
用于背景和层次
✧输入文字
✧矩形的事件交互
如鼠标单击、移入、移出等。
2.2内联框架
内联框架是一个内嵌的元件,相对比较简单,实际效果类似增加滚动条,内嵌的
可以是本地Axcure页面,表格、图片、网页、纯文本等。
✧内嵌本地Axcure页面
✧内嵌表格
✧内嵌图片
✧内嵌网页
✧内嵌纯文本
2.3热区
热区,顾名思义就是热点区域,可以设置整个区域的:
✧交互事件
✧跳转到层或者区域
热区可以粘贴为图片、表格、纯文字等。
2.4动态面板
动态面板可以实现高级的交互功能,一个动态面板有多个状态,在页面不跳转的情况下实现交互。
动态面板最常用的场景用来做:
✧Tab式页签的切换效果:一般跟矩形元件搭配使用
例如两个Tab的切换
上面是一个动态面板和两个矩形元件(淘宝会员与支付宝会员)
✧用动态面板做弹出层(弹出窗口,如果用页面page,将操作不了载
体页面的元件,达不到动态效果,做一个空的state状态的面板达
到隐藏的效果)
动态面板控件的操作:
✧拖动态到设计区域
✧右击 -》管理动态面板的状态
✧编辑每个状态的页面
✧制作矩形组件(或者文本组件)点击后设置动态面板的状态
2.5中继器
中继器(Repeater)是7.0版本新推出的功能,是目前为止Axure最为复杂的功能(没有之一)。
是动态存储数据的元件,最常见的用途是用来对表格动态的增删改操作。
举个例子:
下面是一个动态增加“潜在投融资”场景
操作如下:
Step1:先添加一个表头及中继器
Step2:编辑中继器,加入表格控件,在中继器的数据集中编辑列数据,用于动态显示数据
Step3:设置中继器加载项动作
✧设置表格的一行,每个单元格对应的中继器的列
✧设置中继器每页项目数(即条数)
✧设置当前页
到这里,中继器数据集里的数据已经可以在中继器表格里展现了。
Step4:设置动态添加
“保存”按钮的事件:
✧将对应的元件值设置到全局变量
✧增加“中继器”添加行的事件,同时设置添加行的对应列的信息(上述变量)
Step5:动态删除
3母板使用
母版可以把项目中重复使用的部件集合起来,使用时直接拖拽便可,页面哪些元素用到母版,例如:页头、页脚、导航条、一二级菜单、固定的模板等等。
母版的生成方式:
✧直接在母版功能区新建一个母版,然后在编辑模板
✧选中页面要素,右键—》转换为母版
母版的应用:
建立page,拖拽母版到设计区域即可。
4元件交互事件与注释
元件交互:
每一个元件都有可以添加的交互事件,比如鼠标单击、鼠标移入等,有一些公共的交互事件,即每个元件都具备,比如鼠标单击等,还有一些是特殊元件才具有的特殊交互事件,比如“选项改变时”事件是下拉列表、列表等元件才有的。
操作方式:选中元件,在“元件交互与说明”功能面板区域中选中交互事件添加用例(Case)。
事件用例(Case):一个事件可以添加多个用例,用于界面原型展示,
如下图:点击客户中心文本框,有两个用例,效果如下:
选中某一用例后,执行用例的交互。
元件的注释:
在此功能区还可以给元件添加注释,例如给“客户管理”Label添加说明后:
5元件的属性与样式
在“元件属性与样式”的功能区面板中设置元件的属性与样式:
5.1元件的属性:
这里设置选中元件的标签、注释、形状,以及交互样式(鼠标悬停、鼠标按下、
选中、禁用等)
例如:给Label标签“提醒”鼠标悬停的时候加下划线
5.2元件的样式:
元件的样式包括元件的大小(宽、高),位置(x、y轴)、字体、边框,填充等。
如下述Label的样式:
6页面属性样式与交互
页面属性功能区,可以设置页面的说明,页面的交互与页面样式。
✧页面说明:可以给页面添加一些注释说明,生成原型文档后在文档中有体现。
✧页面交互:可以添加页面总体交互事件,比如页面加载、页面窗口滚动、窗口尺寸调整、
页面鼠标单击、双击等。
常用的是页面加载事件,如显示进度条等。
✧页面样式:可以设置页面背景颜色、背景图片、页面字体等。
7自定义元件库
用户可以自定义元件库,在以后的页面设计中使用,比如将常用的元件组合定义成一个自定义元件,以后可以自己拖拽使用。
自定义元件库的步骤:
✧创建元件库:
在元件库功能区,创建一个元件库
✧编辑元件库:
在元件库功能区,选择某个元件库后,选择编辑元件库,在设计区设计元件。
✧使用自定义元件库:
在元件库功能区,载入元件库,元件库存放在\Axure\Libraries下
8原型发布
在“发布”菜单中可以对原型工程进行预览、生成HTML文件和生成WORD文档。
✧预览:用浏览器打开页面原型预览效果
✧生成HTML文件:指定一个路径,按照原型结构生成HTML文件,直接用浏览器打开
演示。
一般原型制作完毕,将原型发给别人看,就是将这个文件夹发布出来,用浏
览器打开其中的index或者start页面,即可看到原型的页面结构图,看哪一个页
面点击即可。
(Chrome浏览器需要装一个插件才可以打开index或者start页面)
如下是用IE打开理财服务平台原型工程的start页面:
✧生成WORD文档:指定一个路径,按照原型结构生成WORD文档,即原型规格说明书,
文档描述页面结构、元件说明及交互事件等,在国内用的比较少。
默认生成的是如
下的文档结构:
9Axcure使用好习惯
1、命名习惯:
在页面设计时,养成为每一个使用的元件命名的习惯,元件设计到交互都必须要有命名的。
10Axcure使用小技巧
10.1表格一行变色:
a)把一行的单元格,都设置选中事件填充某一颜色
b)点击某一单元格,添加一个case,将一行指定的所有单元格都设置成选中,达到
点击一个单元格,达到整行变色的效果。
10.2交互改变元件样式
一般在交互事件中,比如点击,无法直接设置元件的属性和样式(在属性和样式
功能区设置),一种变相的做法是,在交互事件中,将某一元件设置成选中,然
后在属性和样式功能区设置元件选中状态下的想要的属性和样式。
10.3日期文本的显示
用普通文本框,文本框的类型改成日期型。
备注:IE浏览器暂时不支持Axure自带的日期格式展现,Google Chrome可以。
10.4内联框架父级窗口打开链接报错
在内联框架上不能添加事件“在父级窗口打开链接”,浏览器会报脚本错误,如下:
10.5获取下拉列表选项的值
下拉列表的值在被选项里,不是在元件里
10.6Case动作的执行顺序
在Case案例中,执行的操作是从上到下按顺序执行的。