Axure RP操作手册Word文件下载.docx
- 文档编号:20940607
- 上传时间:2023-01-26
- 格式:DOCX
- 页数:26
- 大小:571.03KB
Axure RP操作手册Word文件下载.docx
《Axure RP操作手册Word文件下载.docx》由会员分享,可在线阅读,更多相关《Axure RP操作手册Word文件下载.docx(26页珍藏版)》请在冰豆网上搜索。
1.定义Sitemap
企划一个网站或WebAP,在动手开始绘制网站页面的示意图(Wireframe)或流程图之前,您应该事先思考网站架构,并决定信息内容与层级。
当您心中已经有了明确的网站架构,接下来就可以利用Sitemap窗格来定义您所设计的网站页面。
Sitemap窗格是用来管理设计中网页的工具,您可以在Sitemap窗格中可以新增、删除和调整网页层级。
新增/删除网页:
想要新增网页的话,请点选Sitemap工具列上的【AddChildPage】钮。
在网页上按鼠标右键,然后选择「RenamePage」或慢慢的在网页上连续按鼠标左键两下可编辑网页名称。
想要删除网页的话,请点选想要删除的网页,然后按下Sitemap工具列上的【DeletePage】钮,或是在网页上按下鼠标右键,然后选择「DeletePage」。
调整网页层级:
您可以将网页从Sitemap中拖曳到目标母网页中来移动网页位置,您也可以使用Sitemap工具列上的箭头按钮来上下移动网页,或改变网页的阶层。
开启网页:
在Sitemap中的任一网页上连续按鼠标左键两下,网页会在Wireframe窗格中开启。
2.以介面物件(Widgets)绘制示意图(Wireframe)
介面物件(Widget)是用来设计Wireframe的使用者介面元素,您可以在Widgets窗格中找到一些常用的WireframeWidget,例如:
Button、Image和TextPanel。
AxureRP各种Widgets呈现效果,请参考Widgets效果总览
在Wireframe中新增介面物件(Widget):
想在Wireframe中新增物件的话,只要从Widgets窗格中将想要新增的物件拖曳(drag&
drop)到Wireframe窗格上就可以了。
您也可以在Wireframe中利用复制(Ctrl+C)与贴上(Ctrl+V)的方式来新增物件。
提醒:
熟悉PowerPoint操作方式的使用者刚开始可能不太习惯,因为AxureRP的操作方式类似Visio选择图形的作法,是利用拖放(Drag&
Drop)的方式,跟PowerPoint是不一样的。
移动物件(Widget)
在Wireframe中新增物件之后,您可以拖放Widget来移动的位置,拖曳Widget四周的控制点来改变Widget的大小。
您也可以一次选取多个物件,一次改变所有被选取的物件的位置和大小。
除此之外,您还可以在选取的Widget上按下鼠标右键,使用快捷菜单(contextmenu)来设定Widgets的群组(Grouping)、顺序(Order)、对齐(Align)、分散(Distribute)与锁定(Lock);
您也可以利用Object工具列来做这些设定,请先利用菜单「View->
Toolbars->
Object」将Object工具列叫出。
编辑物件(Widget)的样式与属性
编辑Widget的样式与属性有下列3种方式:
a.连续按鼠标左键两下:
在Widget上连续按鼠标左键两下可以让您变更一些基本的Widget属性,例如:
在ImageWidget上连续按鼠标左键两下可以让您汇入影像;
在Droplist或ListBoxWidget上连续按鼠标左键两下可以让您编辑选单项目。
b.工具列:
使用工具列可编辑Widget的样式,例如:
外框色彩、填满色彩、字型和字体大小。
c.快捷菜单(ContextMenu):
在Widget上按下鼠标右键会出现快捷菜单,您可以透过菜单中的选项来设定Widget的特殊属性,这些选项也会因Widget的类型而有所不同。
3.撰写物件批注(Annotation)
您可以在Wireframe中为任何物件(Widget)加上批注。
新增批注
想要帮物件加上批注的话,请先选择Wireframe中的物件,如图箭头1所示,被选取的物件呈现绿色框线状态,然后在物件批注窗格(Annotations&
InteractionsPane)的Specification字段(箭头2),输入对这个物件的解释内容,您也可以在窗格最上方的「Label」字段(箭头3)输入名称来帮物件命名。
自定字段
您可以透过菜单「Wireframe->
CustomizeAnnotationFieldsandViews」,或是按一下Annotations&
Interactions的标头来自订批注字段。
脚注(Footnote)
一旦在Widget上加上后,Widget右上方会多一个黄色小方块,里面有一个脚注号码(Footnotenumber),您可以在Widget上按下鼠标右键,使用Footnotes次菜单来增加或减少这个编号数字。
4.网页说明(PageNotes)
网页说明可以用来收集网页层级的描述或需求。
撰写网页说明(PageNotes)
网页说明会被保留在Wireframe下方的窗格内。
管理网页说明类别
AxureRP本身预设的网页说明类别是default,您可以透过新增额外的说明类别,轻易的区分出您自己的说明与要输出到Prototype与规格中的说明。
比如您可以新增TestCase,操作说明,SD等不同类别的网页说明。
而当您要输出规格文件时,可以个别指定哪些种类的网页说明要输出到文件,如此一来,您就可以输出专属于TestCase,操作说明或SD文件了。
想要新增/编辑网页说明类别的话,请点选菜单「Wireframe->
ManagePageNotes」,或按一下「PageNotes–Default」右方的向下箭头并选择「ManagePageNotes」,此时会出现PageNotes对话框,利用这个对话框,您可以新增、移除、更名或重新排列说明字段。
想要切换说明类别的话,请按一下「PageNotes–Default」右方的向下箭头,来选择说明类别。
5.秘技(QuickTips)
秘技一.超快速挪动画面:
当您设计的网页画面变大时,为了选取不同位置的物件,您必须经常使用垂直与水平的滚动条,这会使得选取物件的动作变慢。
请试试这招,鼠标光标focus在Wireframe,按住键盘的空格键,这么一来就会切换成Handtool,此时鼠标光标会切换成手状,您可以用来抓着画面任意滑动,而且不会打乱任何物件的位置,轻松愉快。
秘技二.穿透物件(Widget)选取下层的物件:
以鼠标左键稍慢速度按一下物件,当您放开鼠标左键时,可以穿透上层物件,选取到位于下层的物件。
操作速度如下图所示:
秘技三.引用MicrosoftOffice或其它软件的物件:
您可以利用复制/贴上(Coyp/Paste)的功能,将其软件中的物件,例如:
PowerPoint,Excel,Visio,Photoshop与Illustrator贴到AxureRP中。
一般来说,这些贴上的物件会变成Wireframe中的图像物件。
反之亦然,您也可以复制AxureRP中的物件或画面,贴到其它软件。
秘技四.单选群组(收音机按钮群组RadioButtonGroup):
您可以一次选取多个RadioButton,按下鼠标右键,并选择「EditRadioButton->
AssignRadioGroup」来设定RadioButton的群组关系。
如此一来,当这些RadioButton输出到Prototype时,就会形成真正的单选使用者介面。
∙一.认识AxureRP
∙二.下载/安装
o安装授权序号
∙三.AxureRP基本操作
o示意图及批注
o初级交互设计
o使用共享区块(Master)
o输出网站/应用程序原型
o输出规格文件(Word)
∙四.架构图&
流程图
o1-click绘制架构图
o流程图&
连接线
∙五.中级交互设计
o控制DynamicPanel
o鼠标移入移出及图像变换的交互设计
o设计多层选单
∙首页
∙>
∙在线教程
∙初级交互设计
初级交互设计
1.交互(Interaction)
2.定义基本连结
3.动作型态(Action)及实际动作(ActionDescription)
4.多重条件(MultipleCases)
5.网页层级的交互:
OnPageLoad
6.秘技(QuickTips)
Interactions窗格是用来定义Widget在Wireframe中的交互表现方式,交互表现的方式包含简单的连结到RichInternetApplication(RIA)的复杂行为,而且这些交互表现都可以在Prototype中执行。
触发事件(Event)、假设条件(Case)、动作型态(Action)
在AxureRP中的交互设计是由触发事件(Event)、假设条件(Case)与动作型态(Action)所组成。
当使用者对网页进行某些人机介面的操作时,就会对网页触发一个事件(Event)。
每一个触发事件都可以有一或多个假设条件(Case),例如,一个按钮的OnClick触发事件可以有两个假设条件:
其中一个导引至某个网页,另一个则导引至另一个网页。
而每一个假设条件(Case)又可以执行一或多个动作型态(Action),举例来说:
「OpenLinkinCurrentWindow」的动作就是一个基本连结。
触发事件(Event)
目前AxureRP5支持的人机介面触发事件,及相对应的触发事件(Event)名称如下:
∙以鼠标点击–OnClick
∙鼠标的指针移动到对象之上–OnMouseEnter
∙鼠标的指针移动出对象之外–OnMouseOut
∙鼠标的指针进入文字输入状态–OnFocus
∙鼠标的指针离开文字输入状态–OnLostFocus
∙敲键盘–OnKeyUp
∙浏览器加载网页–OnPageLoad
大多数的对象,只具备最常见的三种触发事件(Event)–OnClick、OnMouseEnter与OnMouseOut。
某些特定的Widget的可触发事件有些不同:
∙Button对象只有OnClick。
∙RadioButton,CheckBox这2种对象则具有OnFocus/OnLostFocus触发事件。
∙TextField,TextArea这2种对象则具备OnKeyUp/OnFocus/OnLostFocus触发事件。
∙Droplist,ListBox这2种对象则具备OnChange/OnFocus/OnLostFocus触发事件。
∙网页加载浏览器时,则有OnPageLoad触发事件。
(请参考5.网页层级的交互:
OnPageLoad)
您不需要硬背上述的对象及对应的Event,在AxureRP的操作介面上,您只要点选对象,就可以查看Interaction窗格所显示的对应Event。
1.认识共享区块(Master)
共享区块(Master)是一组在设计过程中可以重复使用的Widget,一些常用的Master包括了页首(Header)、页尾(Footer)与导览(Navigation),Master可以被放置在网页或是其它的Master中,只要Master做了修改,其它使用到这个Master的地方也会跟着修改。
我们也可以从其它的软件/程序技术经验来认识AxureRP的Master。
如果您熟悉PowerPoint的母片功能,那么AxureRP的Master功能,在”重复使用”的这一点特性上,有一点点类似PowerPoint的母片,但不完全是。
如果您熟悉ASP或PHP程序语言的”Include”语法,或DreamWeaver的Template(DWT),那么AxureRP的Master就是同样的概念,您只要使用Master,其它页面把Master放进来,就可以产生共享的特性。
若想要提升企划的速度跟效率,让AxureRP在Web/AP规画项目的效益展现出来,那么Master肯定是您必须要学会并熟练运用的功能。
新增、组织与设计Master
Master要在Masters窗格中管理。
想要新增Master的话,请按一下Masters窗格工具列上的【AddMaster】钮,或在窗格中按鼠标右键并选择「AddMaster」。
Masters窗格利用数据夹(Folder)来组织Master,然后透过工具列、快捷菜单或是拖拉的方式重新排列Master。
在Master上连续按鼠标左键两下可以开启Master来进行设计,您可以像网页一样,将Widget拖拉到Wireframe中来设计Master。
2.套用Master到网页中
想要在网页或其它Master的Wireframe中套用Master,只要将Master窗格中的Master拖拉到Wireframe中即可。
根据Master的特性,Master对象会有淡红或灰色的屏蔽,想要移除屏蔽的话,可以使用主选单中的「Wireframe->
MaskMasters」功能。
Master预设的行为是Normal,您可以在Master上按鼠标右键,然后利用「Behavior」子选单将它变更为「PlaceInBackground」或「CustomWidget」。
Masters的行为说明如下:
Normal:
可以被移动与放置在Wireframe上的任何地方,对Master的变更会立即反映出来。
PlaceinBackground:
Master被锁定在Wireframe的最底层,所包含的Widget与Master位在相同的位置,通常在制作样板(Template)时会用到这个功能。
CustomWidget:
当CustomWidget放到Wireframe上时,Widget就会失去与Master的关联,可以像一般Widget一样被编辑,这个功能适合将经常使用到的Widget,连同预设定义好的属性、注释和交互建立一个样式库(UIDesignPatternLibrary),例如:
白色文字的蓝色按钮。
3.应用实例
AxureRP能够快速提高网站策划的效率,除了个人在单一网站项目上应用Master的功能,来大量减低重复编辑的工作之外,还可以利用Master的CustomWidget自订对象的功能,来建立网站介面元素的介面库(UIDesignPatternLibrary)。
这里有一篇AxureRP应用于网站界面库的实际案例–利用Axure封装视觉标准,非常值得学习。
4.密技(QuickTips)
秘技一.在建立项目的初期就开始定义Master
项目一开始启动,如果可以稍微掌握哪些介面区块未来将是共享区块,那么就开始建立Master,比如网站的Header/Footer/导览选单(Navigation),或者广告版位等等。
越早使用,越可以节省其它页面设计的重复工作。
至于如何判断什么样的介面区块适合放在Master?
您可以观察自己会经常把哪些区块Copy/Paste到其它页面去使用,那些经常会被Copy/Paste的区块,往往就是网站共享的区块,就适合被设计到Master中。
秘技二.将所有页面都套用Master(或移除Master)
在您想要套用(或移除)的Master名称上按鼠标右键,找到选单”AddtoPages..”及”RemoveFromPages..”,就可以一次把想要套用Master的许多页面,一次加完。
反之,可以一口气把不要的共享区块,从许多页面中快速移除。
秘技三.使用数据夹(Folder)
资料夹(Folder)可以帮助您分门别类整理Master,尤其是如果您想要建立Masterlibrary的话,这个功能绝对让您事半功倍。
您可以在AxureRP的Masters窗格第一个Icon(AddFolder)找到这个功能。
秘技四.建立影像Master
在Master中建立常用的影像(例如:
icon图标)有助于重复使用这些影像,您就不需要反复的复制贴上,或不断的汇入影像文件,而且,如果您想要更换掉这个影像的话,也只需要在一个地方变更就好了。
编注:
AxureRP的”Master”功能想要以中文精准表达有些困难。
在PowerPoint中,Master被翻译成”母片”,但是AxureRP如果把Master翻译成”母片”,会失去AxureRP的Master多种功能的涵义。
AxureRP的Master,可以是整页的母片,这是一种型态。
AxureRP的Master,也可以是Header区块或Footer区块,使用在很多页面一起共享的时候,这是第二种型态。
AxureRP的Master还可以当作独立的Widget来使用,用来建立样式库Library。
1.什么是网站/应用程序原型(HTMLPrototype)?
在Axure中完成有批注的Wireframe和Interaction之后,您可以产生可交互且支持多种浏览器的Web/AP原型(HTMLPrototype)。
(注:
AP是Application的缩写,通常指的是应用程序)
AxureRP网站原型是由HTML和Javascript组成,可以在IE6(或以上的版本)、Mozilla或Firefox中浏览。
换句话说,观看网站原型的人仅需要一般浏览器,不需要安装AxureRP。
如下图范例所示。
解除IE中的ActiveX警告讯息:
使用IE开启在自己计算机里头的HTMLPrototype档案时,浏览器中可能会出现ActiveX警告讯息,想要暂时解除IE中的警告讯息,请点选IE浏览器出现的ActiveX警示讯息,接着选择』允许被封锁的内容』,这样子就可以在IE浏览器上看到自己计算机里头的HTMLPrototype了。
想要永久解除ActiveX警告讯息,请参考秘技一。
2.输出网站原型/格式设定
想要输出原型或设定(ConfigureHMTLPrototype)输出格式的话,请按下AxureRP软件上方主功能选单「Generate」菜单,选择「Prototype(F5)」。
或是按下工具列中的「Prototype」钮,系统会开启「ConfigureHTMLPrototype」对话框,并显示预设的原型输出格式设定,您可透过这个对话框来设定输出原型的格式。
格式设定中的选项可分成下面几区:
General:
在「DestinationFolder」处输入网站原型的HTML档案的存放位置,因为AxureRP的网站原型包含许多档案,最好指定一个windows档案系统内的档案夹来存放。
Notes(网页说明):
选择和排序想要显示在网站原型中的网页层级说明。
Annotations(物件批注):
选择和排序想要显示在网站原型中的批注字段。
Interactions(交互):
指定交互的行为,例如:
指定是否需要预设显示条件描述(case),或是只在多个条件存在的情形才显示。
Distribution:
选择是否产生CHM檔。
Advanced:
选择是否将TextPanel转成影像,这是一个旧版本的功能,现在很少有需要这样处理。
初次输出原型,您可以直接使用预设的设定值,除了指定输出的档案夹之外,不用费心去调整。
或者当您完成网站原型输出格式的设定,只要按一下【Generate】钮就可将这个Prototype输出了。
如果您越来越熟练,您可以两个动作就完成网站原型的输出了,第一个动作是按下【F5】,接着再按下【Generate】。
3.展示与操作网站原型
AxureRP输出的网站原型(HTMLPrototype)总共可区分成三个框架。
左侧:
Sitemap框架
您可以按Sitemap中的网页列表,循序展示网站原型中的任何一个网页。
如果您不需要显示左侧的Sitemap,那么就应该
底部:
网页说明(PageNotes)框架
这个框架显示该网页的文字说明,这些文字说明来自于您写在网页批注(PageNotes)的文字。
中间:
主框架
主框架包含了Wireframe和流程图,Wireframe是可以交互的,举例来说,按一下设定有网页连结的按钮,那么就会连结到所设定的网页。
您也可以按一下加有附注的Widget旁边的黄色便利贴小Icon图示来检视批注。
4.分享原型档案给其它人
因为AxureRP的Prototype是标准的HTML、Javascript和影像文件,所以您的同事和客户不需要安装AxureRP或任何播放器就可以直接检视Prototype。
发布Prototype的方式有很多种,以下是三种不同的分享方式的介绍。
a.放到网站服务器
第一种方式是发布网站原型的HTMLPrototype到WebServer上,您只要将网址给客户或工作伙伴其它人,他们在他们的浏览器上浏览Prototype。
b.压缩成Zip檔
第二种方式是将包含Prototype档案的档案夹压缩成Zip档,然后将Zip档寄给相关的人。
收到档案的人,将Zip档解压缩后,便可以直接在自己的计算机浏览HTMLPrototype,通常是开启index.html或从XXX_Start.html档开始浏览(XXX指的是该RPProject的名称)。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Axure RP操作手册 RP 操作手册
![提示](https://static.bdocx.com/images/bang_tan.gif)