Axure RP:页面原型制作工具
2013-02-08 17:06
507 查看
Axure RP 能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示意图、操作流程图、以及交互设计,并可自动生成用于演示的网页文件和规格文件,以提供演示与开发。
2.Axure RP在不写任何一条html与javascript语句的情况下,通过创建的文档以及相关条件和注释,一键生成html
prototype演示。
3.Axure RP根据设计稿,一键生成一致而专业的word版本的原型设计文档。
Axure RP软件画面
二.示意图(Wireframe) Axure RP内建了许多会经常使用到的widget元件,例如:按钮(Button)、图片(Image)、文字面板(Text
Panel)、选择钮(Radio Button)、下拉式菜单(Droplist)。
三.流程图(Flowchart)AxureRPFlowDiagram快速建立流程图就像建立wireframe一样容易,Flow
Widget中有设计流程图时会经常用到的形状,您可以轻松在流程之间加入连接线并设定连接的格式。
四.交互设计(InteractionDesign) 大多数的widget可以对一个或多个事件产生动作,包括OnClick、OnMouseOver和OnMouseLeave等
五.自动输出网站原型(HTML Prototype): Axure RP可以将wireframe,输出成符合Internet Explorer或Firefox等不同浏览器的HTML prototype。
六.自动输出word格式规格文件(Specification) Axure RP可以输出Word的格式的文件,规格文件包含了目录、网页清单、网页和附有注解的Master、Annotation、Interaction和Widget特定的资讯,以及结尾文件(例如:附录),规格的内容与格式也可以依据不同的阅读对象来变更。
2.用户能切实的感受得到,你也可以同样得到有价值的用户反馈。
3.开发团队可以知道你到底是想要什么样的原型。
4.用户能够第一时间知道产品的效果功能,不必再等待冗长的项目周期后进行大量更改。
5.开发团队可以更加分工明确,并且可以及时了解产品的进程和改变。
6.不用再通过Visio工具进行大量的复制、粘贴。
7.提前感知整个产品的效果,避免给用户带来不良的用户体验。
8.完美的兼容了Windows和Mac系统。
9.节约产品经理的时间,能够更好处理的需求改变。
10.使项目需求更容易被阅读、理解。
2.Axure RP Pro于2011年3月17日发布6.0.0.2863版,Axure RP Pro允许程序设计者为程序或者网站制作动态的线框图、流程图、以及其他所需的图表。
规范的图标文档让您在交流、记录,设计上更容易被接受,使用Axure RP 建立更简单、更专业的数据表、图。
3.Axure RP Pro于2011年5月13日发布6.0.0.2894正式版,Axure RP Pro允许程序设计者为程序或者网站制作动态的线框图、流程图、以及其他所需的图表。
规范的图标文档让您在交流、记录,设计上更容易被接受,使用Axure RP 建立更简单、更专业的数据表、图。
4.2012-1-18,Axure公司发布了Axure RP 6.5 测试版。
5.2012-4-19,Axure公司发布了Axure RP 6.5.0.3003 正式版。
2. 因为上面的变动,在组件样式编辑器里增加了两项(Text Links Mouse Over 和 Text Links Mouse Down)超链接鼠标悬停和鼠标按下时的样式。默认的设置就是在某段文本中增加了超链接以后,当演示时鼠标悬停在链接上时会自动增加下划线。
3. 在组件的样式编辑区里,可以设置组件或图形一个旋转角度,这样在Axure划斜线就容易多了
4. 可以给输入表单指定直接回车就响应的默认执行按钮。在输入框等表单组件上右键,选择Assign
Submit Button,然后选中你指定的链接既可。(按钮需要提前在标签上命名)
5. 可以设置动态面板相对于浏览器窗口位置固定,在动态面板上右键,选择Pin to Browser...。然后设置要固定的位置。之前要想实现该功能,可以用前端代码来修改。
6. 滚动到图片热区(锚点)时,增加了动画滚动效果。
7.内置的日期等变量可以直接用在函数公式里了,比如计算今年+5=?
8. 移动动态面板时,移动的位置可以是某个函数计算后的结果。
9. 新增加了拖拽时的几个内置变量,DragX, DragY, TotalDragX, TotalDragY, DragTime。
TotalDragX:每次拖动面板时,面板在X轴方向移动的像素距离。
TotalDragY:每次拖动面板时,面板在Y轴方向移动的像素距离。
DragTime:每次拖动面板时,面板被拖起的时间,是毫秒为单位。
DragX和DragY似乎是瞬间被拖动的距离,似乎可以用来判断拖动速度的快慢。
10. 条件判断里增加了一项value,可以用于函数与函数的对比。
11. 输入框和文本域可以设置背景色透明了,再配合右键关闭输入框的边框使用更好。
12. 增加了几个样式的箭头。(目前测试版竖线时选择箭头样式有Bug)
13. 可以读取文本块或矩形里的内容了,但是还不能用于条件判断时直接对矩形内容进行判断。
Axure 6.5默认隐藏了栅格,许多人对此很不适应,顿时不知该如何对齐控件了。要打开辅助线,只需点击菜单栏的“Wirefram-Grid and Guides”,把“Hide Grids”前面的勾去掉就行。另外在“Grid Settings”里,还可以调整栅格的间距,样式(点或线)以及DPI。
另外插一句,Axure是可以拉辅助线的,这点我是最近才知道。。。
2 创建多个Page Notes
Axure里的每个页面都有一块“Page Notes”区域用来写页面注释。你可以创建多个Page Notes,方法就是点击“Wireframe – Manage Page Notes”,在弹出的面板中增加Notes,这样所有页面都会多出来这个新的Notes。这个技巧可以用来写页面的调整历史(每个Notes代表一个版本),或者在多人协作编辑时区分不同人编写的notes。
3 手绘风格
听一个朋友说,他们的产品团队因为追求手绘风格而放弃了Axure,改用Mockups。真是可笑至极,其实Axure从6.0开始就加入了手绘风格。在Page Formatting里有个Sketchiness的选项,可以设置手绘风格的“扭曲度”。默认是0,横平竖直,数字越大越“扭曲”越“手绘”。
Page Formatting里还有其他一些有用的功能,例如设置页面背景色、背景图(支持图片repeat哟~)、整个页面的对齐方式(默认是横竖都居中)、甚至一键把页面变成黑白模式(Color里的第二项)。
4 自动生成站点地图
有时我们需要把整个站点的结构用树形图呈现出来,Axure为此提供了一个快捷的方法:在Sitemap区域对准你希望生成树形图的主干点右键,选择“Generate Flow Diagram”,就能自动生成图表形式的站点地图。点击图表上的每个控件,就会去到对应的页面。
另外,你还可以自定义流程图(Flow)控件的链接页面,方法是双击控件,再选择需要链接到的页面。
5 左右滑动与拖拽
Axure 6.5里,动态面板(Dymatic Panel)新增了针对手机应用的OnSwipeLeft和OnSwipeRight两个Case,同时强 化了拖拽(Drag Drop)相关操作的交互。现在,你可以实现让动态面板只能横向/纵向拖动、拖动结束后返回/不返回原位等丰富的动作了。
6 给动态面板添加滚动条
有些时候你想做一个长宽都有限制的容器,让用户拖动滚动条来查看容器中的元素。Inline Frame在这方面很局限,你需要利用动态面板的Scrollbar属性。
右键点击动态面板-Edit Dymanic Panel,你会看到4个带“Scrollbar”字样的属性,根据需要进行选择,然后你的这个动态面板就能承载并通过滚动条来显示超过自身大小的内容了。
7 在浏览器中悬浮
有时候你需要做一个相对浏览器位置固定的元素,这时候你还是要用动态面板。右键点击-Pin to Browser,然后设定悬浮位置,搞定!
8 “Move”动作
在Case Editor中有一个action叫“Move Panels”,可以让动态面板移动到指定的位置,并可配合Animate效果(直线移动、摆动、旋转移动等)。这非常适合用来做菜单的展开/折叠,滑动,图片传送带等效果。(别鄙视我,这个真的也是我最近才知道的功能,以前做展开/折叠效果可纠结了。。。)
9 地图拖拽效果
想制作一个可以用鼠标拖来拖去的地图效果,这在Axure里也并非是不可能,只是实现起来略微麻烦。
你需要创建一对嵌套的动态面版,每个动态面板都只有1个state。外部的动态面板是地图容器,内部的面板用来放置地图图片。当设置好2个面板后,给“地图容器”添加一个OnDrag的Case,并指定动作为“Move Panels”,而需要移动的面板正是“地图内容”,再把Move设为“With Drag”,大功告成。
10 三种类型的Master
Master是一种类似“印章”的操作。对于需要重复使用的控件组,你可以把它们做成一个Master,然后只需拖拽便可重复创建,很方便。不过这只是Master的三种类型之一,叫Normal。
第二种类型叫“Place in Ground”,这种Master拖入页面后的位置是固定的(与),并且放在最底层。这种Master适合做页面模板,例如在制作手机应用的原型时,可以拿来做手机外形的效果。
第三种叫“Custom Widget”,这种Master一旦拖进页面,便与母板失去了关联,但是其中的控件变得可以编辑了。
要改变Master的类型,只需对着一个Master点右键-Behavior,再选择需要的类型。
11 给Master创建Event(事件)
Event是Master的强化剂,通过定义Event,一个Master可以在不同页面实现不一样的交互效果。
在Master的Case Editor中,action列表的Misscellaneous中会多出来一个Raise Event,你可以创建多个Event。当再把这个Master拖进页面时,在它的Widget Properties面板中,先前创建的Event就会作为Case显示出来。
12 使用变量
变量可以帮助你在多个页面间传递数值,它需要与Case Editor中的“Set Variable/Widget values”结合使用。
例如我们做一个根据登录者用户名显示不同的欢迎语句的交互,就可以先创建一个叫“UserName”的变量,当用户点击登录按钮后,将“用户名”一栏的值存储到UserName中(使用Set Variable/Widget values);再给显示欢迎语的页面添加一个OnPageLoad的action(依然是Set Variable/Widget values),将UserName的值设置给欢迎语中显示用户名的地方。
13 创建chm格式的原型
默认状态下,Axure每次生成原型时都会产出一大堆html和图片文件,对管理、发布来说都是个麻烦事。其实Axure是支持把原型做成一个chm文件的,方法是在生成原型时,勾选“Distribution”中的“Create HTML Help File(.chm)”选项。不过你的电脑里需要安装chm的生成工具,如果没装的话,可以点界面上的“Download Microsoft HTML Help Workshop”下载。
14 在原型里加入Logo
创建原型时,在“Logo”里可以为你的原型添加Logo和标题语,这样在导出的原型中,左上角就会显示刚才添加的Logo和标题语。
15 多人协作
有时候,我们需要多人合作完成一个Axure原型。传统的方法是每个人编辑自己的部分,再粘贴到一起。其实Axure内置了一套基于版本管理思路的协作编辑功能。要使用这个功能,首先你需要一个SVN服务器,然后在菜单栏的”Share-Create Share Project from Current File“对项目进行配置。这用起来很像SVN,你最好有一些SVN的基础[1]
特点
1.Axure RP快速创建带注释的wireframe文件,并可根据所设置的时间周期,软件自动保存文档,确保文件安全。2.Axure RP在不写任何一条html与javascript语句的情况下,通过创建的文档以及相关条件和注释,一键生成html
prototype演示。
3.Axure RP根据设计稿,一键生成一致而专业的word版本的原型设计文档。
六合一
一.网站构架图(Site Structure) AxureRP可以快速绘制树状的网站构架图,而且可以让构架图中的每一个页面节点,直接连接到对应网页。Axure RP软件画面
二.示意图(Wireframe) Axure RP内建了许多会经常使用到的widget元件,例如:按钮(Button)、图片(Image)、文字面板(Text
Panel)、选择钮(Radio Button)、下拉式菜单(Droplist)。
三.流程图(Flowchart)AxureRPFlowDiagram快速建立流程图就像建立wireframe一样容易,Flow
Widget中有设计流程图时会经常用到的形状,您可以轻松在流程之间加入连接线并设定连接的格式。
四.交互设计(InteractionDesign) 大多数的widget可以对一个或多个事件产生动作,包括OnClick、OnMouseOver和OnMouseLeave等
五.自动输出网站原型(HTML Prototype): Axure RP可以将wireframe,输出成符合Internet Explorer或Firefox等不同浏览器的HTML prototype。
六.自动输出word格式规格文件(Specification) Axure RP可以输出Word的格式的文件,规格文件包含了目录、网页清单、网页和附有注解的Master、Annotation、Interaction和Widget特定的资讯,以及结尾文件(例如:附录),规格的内容与格式也可以依据不同的阅读对象来变更。
十大优势
1.一个好的Axure可以提升产品总体形象,使用户更真切的感受到具体功能。2.用户能切实的感受得到,你也可以同样得到有价值的用户反馈。
3.开发团队可以知道你到底是想要什么样的原型。
4.用户能够第一时间知道产品的效果功能,不必再等待冗长的项目周期后进行大量更改。
5.开发团队可以更加分工明确,并且可以及时了解产品的进程和改变。
6.不用再通过Visio工具进行大量的复制、粘贴。
7.提前感知整个产品的效果,避免给用户带来不良的用户体验。
8.完美的兼容了Windows和Mac系统。
9.节约产品经理的时间,能够更好处理的需求改变。
10.使项目需求更容易被阅读、理解。
现状
1.Axure RP最新版本是Axure RP Pro 6.5.0.3010正式版,于2012年5月9日发布。2.Axure RP Pro于2011年3月17日发布6.0.0.2863版,Axure RP Pro允许程序设计者为程序或者网站制作动态的线框图、流程图、以及其他所需的图表。
规范的图标文档让您在交流、记录,设计上更容易被接受,使用Axure RP 建立更简单、更专业的数据表、图。
3.Axure RP Pro于2011年5月13日发布6.0.0.2894正式版,Axure RP Pro允许程序设计者为程序或者网站制作动态的线框图、流程图、以及其他所需的图表。
规范的图标文档让您在交流、记录,设计上更容易被接受,使用Axure RP 建立更简单、更专业的数据表、图。
4.2012-1-18,Axure公司发布了Axure RP 6.5 测试版。
5.2012-4-19,Axure公司发布了Axure RP 6.5.0.3003 正式版。
正式版
1. 去除了原来的超链接组件,而是在文本块组件里选中某些文字,然后通过工具栏上的超链接按钮来添加链接。2. 因为上面的变动,在组件样式编辑器里增加了两项(Text Links Mouse Over 和 Text Links Mouse Down)超链接鼠标悬停和鼠标按下时的样式。默认的设置就是在某段文本中增加了超链接以后,当演示时鼠标悬停在链接上时会自动增加下划线。
3. 在组件的样式编辑区里,可以设置组件或图形一个旋转角度,这样在Axure划斜线就容易多了
4. 可以给输入表单指定直接回车就响应的默认执行按钮。在输入框等表单组件上右键,选择Assign
Submit Button,然后选中你指定的链接既可。(按钮需要提前在标签上命名)
5. 可以设置动态面板相对于浏览器窗口位置固定,在动态面板上右键,选择Pin to Browser...。然后设置要固定的位置。之前要想实现该功能,可以用前端代码来修改。
6. 滚动到图片热区(锚点)时,增加了动画滚动效果。
7.内置的日期等变量可以直接用在函数公式里了,比如计算今年+5=?
8. 移动动态面板时,移动的位置可以是某个函数计算后的结果。
9. 新增加了拖拽时的几个内置变量,DragX, DragY, TotalDragX, TotalDragY, DragTime。
TotalDragX:每次拖动面板时,面板在X轴方向移动的像素距离。
TotalDragY:每次拖动面板时,面板在Y轴方向移动的像素距离。
DragTime:每次拖动面板时,面板被拖起的时间,是毫秒为单位。
DragX和DragY似乎是瞬间被拖动的距离,似乎可以用来判断拖动速度的快慢。
10. 条件判断里增加了一项value,可以用于函数与函数的对比。
11. 输入框和文本域可以设置背景色透明了,再配合右键关闭输入框的边框使用更好。
12. 增加了几个样式的箭头。(目前测试版竖线时选择箭头样式有Bug)
13. 可以读取文本块或矩形里的内容了,但是还不能用于条件判断时直接对矩形内容进行判断。
使用技巧
1 栅格设置Axure 6.5默认隐藏了栅格,许多人对此很不适应,顿时不知该如何对齐控件了。要打开辅助线,只需点击菜单栏的“Wirefram-Grid and Guides”,把“Hide Grids”前面的勾去掉就行。另外在“Grid Settings”里,还可以调整栅格的间距,样式(点或线)以及DPI。
另外插一句,Axure是可以拉辅助线的,这点我是最近才知道。。。
2 创建多个Page Notes
Axure里的每个页面都有一块“Page Notes”区域用来写页面注释。你可以创建多个Page Notes,方法就是点击“Wireframe – Manage Page Notes”,在弹出的面板中增加Notes,这样所有页面都会多出来这个新的Notes。这个技巧可以用来写页面的调整历史(每个Notes代表一个版本),或者在多人协作编辑时区分不同人编写的notes。
3 手绘风格
听一个朋友说,他们的产品团队因为追求手绘风格而放弃了Axure,改用Mockups。真是可笑至极,其实Axure从6.0开始就加入了手绘风格。在Page Formatting里有个Sketchiness的选项,可以设置手绘风格的“扭曲度”。默认是0,横平竖直,数字越大越“扭曲”越“手绘”。
Page Formatting里还有其他一些有用的功能,例如设置页面背景色、背景图(支持图片repeat哟~)、整个页面的对齐方式(默认是横竖都居中)、甚至一键把页面变成黑白模式(Color里的第二项)。
4 自动生成站点地图
有时我们需要把整个站点的结构用树形图呈现出来,Axure为此提供了一个快捷的方法:在Sitemap区域对准你希望生成树形图的主干点右键,选择“Generate Flow Diagram”,就能自动生成图表形式的站点地图。点击图表上的每个控件,就会去到对应的页面。
另外,你还可以自定义流程图(Flow)控件的链接页面,方法是双击控件,再选择需要链接到的页面。
5 左右滑动与拖拽
Axure 6.5里,动态面板(Dymatic Panel)新增了针对手机应用的OnSwipeLeft和OnSwipeRight两个Case,同时强 化了拖拽(Drag Drop)相关操作的交互。现在,你可以实现让动态面板只能横向/纵向拖动、拖动结束后返回/不返回原位等丰富的动作了。
6 给动态面板添加滚动条
有些时候你想做一个长宽都有限制的容器,让用户拖动滚动条来查看容器中的元素。Inline Frame在这方面很局限,你需要利用动态面板的Scrollbar属性。
右键点击动态面板-Edit Dymanic Panel,你会看到4个带“Scrollbar”字样的属性,根据需要进行选择,然后你的这个动态面板就能承载并通过滚动条来显示超过自身大小的内容了。
7 在浏览器中悬浮
有时候你需要做一个相对浏览器位置固定的元素,这时候你还是要用动态面板。右键点击-Pin to Browser,然后设定悬浮位置,搞定!
8 “Move”动作
在Case Editor中有一个action叫“Move Panels”,可以让动态面板移动到指定的位置,并可配合Animate效果(直线移动、摆动、旋转移动等)。这非常适合用来做菜单的展开/折叠,滑动,图片传送带等效果。(别鄙视我,这个真的也是我最近才知道的功能,以前做展开/折叠效果可纠结了。。。)
9 地图拖拽效果
想制作一个可以用鼠标拖来拖去的地图效果,这在Axure里也并非是不可能,只是实现起来略微麻烦。
你需要创建一对嵌套的动态面版,每个动态面板都只有1个state。外部的动态面板是地图容器,内部的面板用来放置地图图片。当设置好2个面板后,给“地图容器”添加一个OnDrag的Case,并指定动作为“Move Panels”,而需要移动的面板正是“地图内容”,再把Move设为“With Drag”,大功告成。
10 三种类型的Master
Master是一种类似“印章”的操作。对于需要重复使用的控件组,你可以把它们做成一个Master,然后只需拖拽便可重复创建,很方便。不过这只是Master的三种类型之一,叫Normal。
第二种类型叫“Place in Ground”,这种Master拖入页面后的位置是固定的(与),并且放在最底层。这种Master适合做页面模板,例如在制作手机应用的原型时,可以拿来做手机外形的效果。
第三种叫“Custom Widget”,这种Master一旦拖进页面,便与母板失去了关联,但是其中的控件变得可以编辑了。
要改变Master的类型,只需对着一个Master点右键-Behavior,再选择需要的类型。
11 给Master创建Event(事件)
Event是Master的强化剂,通过定义Event,一个Master可以在不同页面实现不一样的交互效果。
在Master的Case Editor中,action列表的Misscellaneous中会多出来一个Raise Event,你可以创建多个Event。当再把这个Master拖进页面时,在它的Widget Properties面板中,先前创建的Event就会作为Case显示出来。
12 使用变量
变量可以帮助你在多个页面间传递数值,它需要与Case Editor中的“Set Variable/Widget values”结合使用。
例如我们做一个根据登录者用户名显示不同的欢迎语句的交互,就可以先创建一个叫“UserName”的变量,当用户点击登录按钮后,将“用户名”一栏的值存储到UserName中(使用Set Variable/Widget values);再给显示欢迎语的页面添加一个OnPageLoad的action(依然是Set Variable/Widget values),将UserName的值设置给欢迎语中显示用户名的地方。
13 创建chm格式的原型
默认状态下,Axure每次生成原型时都会产出一大堆html和图片文件,对管理、发布来说都是个麻烦事。其实Axure是支持把原型做成一个chm文件的,方法是在生成原型时,勾选“Distribution”中的“Create HTML Help File(.chm)”选项。不过你的电脑里需要安装chm的生成工具,如果没装的话,可以点界面上的“Download Microsoft HTML Help Workshop”下载。
14 在原型里加入Logo
创建原型时,在“Logo”里可以为你的原型添加Logo和标题语,这样在导出的原型中,左上角就会显示刚才添加的Logo和标题语。
15 多人协作
有时候,我们需要多人合作完成一个Axure原型。传统的方法是每个人编辑自己的部分,再粘贴到一起。其实Axure内置了一套基于版本管理思路的协作编辑功能。要使用这个功能,首先你需要一个SVN服务器,然后在菜单栏的”Share-Create Share Project from Current File“对项目进行配置。这用起来很像SVN,你最好有一些SVN的基础[1]
相关文章推荐
- 产品设计 页面原型制作工具 - Axure RP
- H5页面免费制作工具大集合
- Axure RP是一个专业的快速原型设计工具
- H5页面、微页、轻应用、轻app、场景应用制作工具:
- 比Visio更实用的网页原型设计工具Axure RP Pro 5
- 比Visio更实用的网页原型设计工具Axure RP Pro 5
- 8个最好用的H5页面制作工具
- 什么是原型?原型工具axure rp使用教程
- 软件界面原型设计工具(Web):Axure RP
- 快速原型设计工具--Axure RP
- 免费的网页原型制作工具
- Axure RP-->如何使生成的原型页面左侧不带框架(转)
- 快速原型设计工具 Axure RP 8安装记录
- 8个最好用的H5页面制作工具
- 国内H5页面制作工具评测,iH5排第一
- h5页面制作工具是什么?如何零代码开始微信h5页面制作!
- 常用原型图设计工具 Axure RP 等等
- H5页面制作简单上手工具对比
- H5页面在线制作工具搜集
- 原型设计工具:Axure RP Pro 4