Axure新手技能训练手册.docx
《Axure新手技能训练手册.docx》由会员分享，可在线阅读，更多相关《Axure新手技能训练手册.docx（48页珍藏版）》请在冰豆网上搜索。
Axure新手技能训练手册
Axure新手技能
Axure布局
1、MainMenu&Toolbar:
主菜单和工具栏区
2、WireframePane:
线框面板，页面设计区域。
3、SitemapPane：
地图面板，用于显示页面的隶属关系。
4、WidgetsPane：
控件面板，用于可用的控件资源。
5、MastersPane:
公用模块管理器。
6、PagesPropertiesPane：
页面属性面板，管理页面属性的各类参数。
7、WidgetPropertiesPane：
控件属性面板，管理控件的各类属性参数。
三类：
（1）Annotations:
注释。
（2）Interactions:
交互；
（3）Formatting：
格式化。
8、DynamicPanelManagerPane:
动态面板控制面板。
隐藏和显示动态面板，以及增加、删除、及管理动态面板状态。
线框的注释
网站地图：
Sitemap
Sitemap用于增加、删除和组织你所设计的页面。
页面数量是没有极限的。
可通过鼠标功能来增加、删除、组织页面，也可以通过鼠标拖拽方式来组织页面级次。
双击Sitemap中的页面，可进入线框设计界面。
控件：
Widgets
控件是设计线框的交互对象。
控件面板中包括了丰富的控件可供使用。
1、从Widgets控件库中选择和搜索合适的控件。
2、增加、移去和改变控件的尺寸。
3、编辑控件的风格和属性。
4、多控件的分组和解除分组。
Group。
5、控件风格编辑器（WidgetStyleEditor）：
允许你编辑缺省的控件格式及创建定制的控件风格。
如果编辑了控件的缺省格式，则可能影响到全部该控件。
6、格式画笔（FormatPainter）：
FormatPainter允许你拷贝一个控件的格式属性到其他多个控件。
类似于格式属性的剪切板一样。
7、改变选择模式。
有两个选择模式，分别为"SelectIntersectedMode"和"SelectContainedMode".大致叫做：
分割模式和容器模式。
缺省为分割模式。
分割模式意味着只要鼠标框定的范围所碰到的控件都会包括在所选范围内。
而容器模式一定要将控件完全用鼠标完全框定后才能处于选定状态。
注释Annotations
注释用于对控件增加说明文字。
增加注释后，控件会在右下角显示一个黄色的数字脚注。
如果想隐藏这个脚注，可以在主菜单的线框区域中点击反选“ShowFootnotes”。
这是全局设置项。
允许用户自定义注释项。
也允许用户自主修改注释项的脚注。
页面属性：
PageProperties
PageNote:
页面备注
页面备注允许你收集你所设计的页面级次信息。
你可以组织页面备注到独立域。
如果你需要将备注分别向不同的角色，如客户、开发者、测试人员进行展示时，这个功能就很有用。
你可以添加备注的独立域，如下图：
最终所显示的独立域的备注样式为：
也可以通过EditorToolbarorthestandardtextformattingshortcuts（i.e.,Ctrl/Cmd+B,Ctrl/Cmd+I,Ctrl/Cmd+U,etc.），来对页面备注进行格式化。
PageFormatting:
页面格式化
页面格式化的范围包括如下：
1、PageStyle:
页面风格。
定义页面风格，编辑页面的缺省风格或定义一个定制的页面风格。
2、PageAlign：
页面的排列方式。
3、BackColor:
页面的背景颜色。
4、BackImage：
页面的背景图。
5、HorizAlignandVertAlign：
水平对齐和垂直对齐模式设置。
6、Repeat：
重复背景图的水平、垂直和两者。
SketchEffects:
草图效果
使当前的页面获得手绘风格的草图效果。
Sketchiness参数的值越大，空间的手绘草图风格就越明显。
LineWidth用于指定控件的边框宽度在手绘时的效果。
通常设置为+1.
GlobalandPageGuides:
全局和页面向导
通过鼠标拖拽标尺获得，尚未明白确切作用。
基础交互：
BasicInteractions
交互概述
Axure中的交互包括三个主要部分：
事件（events）、案例（case）和动作（action）。
一、事件Event
事件是交互的触发器。
控件的事件包括如下：
OnClick:
当一个控件被鼠标点击时触发；
OnMouseEnter:
当鼠标光标移入一个控件上时触发。
OnMouseOut:
当鼠标光标从一个空间上移出时触发。
OnKeyUp:
当在一个控件内部按键释放时触发。
如文本框的录入字段或者文字区的录入字段发生。
OnFocus:
当一个控件通过鼠标点击或Tab切换获得焦点时触发。
OnLostFocus:
当一个控件失去焦点时触发。
OnChange:
当一个下拉式列表框或列表框选项发生改变时触发。
二、案例Case
Case是响应事件发生时的可能路径。
如按下登录按钮时，可能因为输入错误的用户名或密码导致登录失败，也可能登录成功，这是两个不同的路径。
你也可以通过变量控制条件的自动转向。
三、动作Action
Action是一个事件被出发后根据case的路径所得到的响应。
如下是Action的列表：
1、Linkactions:
链接动作
OpenLinkinCurrentWindow:
在当前窗口打开一个外部链接。
OpenLinkinNewWindow/Tab:
在新窗口或Tab打开一个外部链接。
OpenLinkinPopupWindow:
在一个弹出式窗口中打开一个页面或者外部URL.你可以指定这个窗口的尺寸和属性。
OpenLinkinParentWindow:
用以从一个弹出式窗口，改变父窗口中的页面装载并打开它。
CloseCurrentWindow:
关闭当前窗口。
OpenLink（s）inFrame（s）:
在inlineFrame中用以打开inlineframe控件以改变页面装载。
OpenLinkinParentFrame:
在父frame中打开一个页面。
DynamicPanel的关联动作。
Usedfromapageloadedinaninlineframe.DynamicPanelrelatedactions:
2、Dynamicpanel的动作:
SetPanelstate（s）toState（s）:
设置当前的一个或者多个动态面板的可视状态
ShowPanel（s）:
使一个或者多个的动态面变为可视状态。
HidePanel（s）:
隐藏一个或者多个动态面板的内容。
ToggleVisibility:
Showsorhidesdynamicpanelsbasedontheircurrentvisibility.
MovePanel（s）:
Movesadynamicpaneltoaspecificlocationorbyaspecifieddistance.
BringPanel（s）toFront:
Bringsadynamicpaneltothetoplayerofthepage.
3、WidgetsandVariablesactions:
SetVariable/Widgetvalue（s）:
Setsthevalueofoneormorevariablesand/orwidgetvalues（i.e.,thetextvalueonawidget）.
ScrolltoImageMapRegion:
Scrollsapagetothelocationofanimagemapregionwidget.Similartoananchororjumplink.
EnableWidget（s）:
Enablesformwidgetslikeadroplistortextfield.
DisableWidget（s）:
Disablesformwidgets.
SetWidget（s）toSelectedState:
Setsthestyleofawidgettoitsselectedstyleorbacktoitsdefaultstyle.
SetFocusonWidget:
Setsthefocusofthecursoronaformwidget（i.e.,atextfield）.
ExpandTreeNode（s）:
展开Expandsthenodesofatreewidget.
CollapseTreeNode（s）:
折叠Collapsesthenodesofatreewidget.
Miscellaneousactions:
WaitTime（ms）:
Delaysactionsbyaspecifiedtime.
Other:
Showsaspecifiedtextdescriptionofanactionsuchas“Sendemailtouser”.
交互案例编辑器：
InteractionsCaseEditor
一、增加交互
选择一个控件可以显示其可用的事件。
1、要增加一个Case，选择一个事件并点击“AddCase”，或者双击这个事件并打开Case编辑对话框。
可以编辑该Case的描述，
2、添加动作，Action，可以选择不同的Action。
3、组织这些动作。
多case的情况下。
4、对Action动作的详细配置，比如具体要打开哪个窗口。
二、定义多案例MultipleCases
动态面板基础：
DynamicPanels（Basic）
动态面板是一个容纳了不同控件的多层状况或图表的容器。
这个面板可以被隐藏、显示、移动。
而且当前的可视图表可以被动态设置。
允许你在原型系统中展示诸如customtooltips,lightboxes,tabcontrols,anddraganddrop。
因此当你需要在原型中显示、隐藏、改变或移动对象时，可使用动态面板控件。
你会发现这是在你原型工具箱中最常使用的工具。
动态面板状态
动态面板包括多个状态，而且每个状态是一个能够容纳其他控件的图表。
动态面板的在一个时刻只能有一个状态是可视的。
可以将现有的控件集合转化为动态面板。
增加和设计动态面板状态
缺省情况下，动态面板是空的，所以需要你去在其状态上添加控件。
双击动态面板打开动态面板状态管理对话框。
在这个对话框中，你可以增加、移除、排序及打开状态进行编辑。
动态面板的第一个状态是面板的缺省状态。
你可以在动态面板的状态看到轮廓蓝线，这是动态面板的尺寸，和你所能看到面板状态内的分界线。
你可以将所需的控件拖拽到动态面板中进行设计。
动态面板的滚动条：
EditDynamicPanel->ShowScrollbarsasNeeded。
缺省情况下隐藏内容的设置：
动态面板在缺省情况下可以设定隐藏。
right-clickonthepanelinthewireframeandchooseEditDynamicPanel->SetHiddenfromthecontextmenu.。
设置隐藏后该动态面板将显示为黄色。
动态面板管理器：
DynamicPanelManager
动态面板管理器用于管理页面上的多个动态面版。
动态面板的隐藏功能。
动态面板的交互：
InteractingwithDynamicPanels
动态面板的Action包括如下：
SetPanelstate（s）toState（s）：
将面板的状态更改为另一个状态；
ToggleVisibilityforPanel（s）：
ShowPanel（s）：
显示动态面板
MovePanel（s）,：
移动动态面板到坐标（XY）,相对坐标By，绝对坐标To。
HidePanel（s）：
隐藏动态面板
BringPanel（s）toFront：
将动态面板前置；
SendPanel（s）toBack：
将动态面板后置。
你可以在一个动作内控制多个面板的状态。
这点功能非常强大。
Usethe“ToggleVisibilityforPanel（s）”actiontotogglebetweenshowingandhidingapanel.
动画和转场效果
在动态面板的移动过程中，可提供动画效果而非乏味的效果。
但这个动画效果在原型系统中易于实现而在代码开发时很难实现。
这个问题一定要注意。
动态面板的几个最重要的应用：
1、弹出错误信息。
2、Tab标签
3、定制的Tip显示
4、弹出式菜单。
母版：
Masters
Master是文件中可重用的控件集合。
Master可以在多个页面重用，并可达到一次设计，多次重用；一次修改，全体更新的作用。
组织和设计Master
MasterPane，让你在文件中增加和组织所有的Master。
AddMaster用于创建一个Master。
慢速双击一个Master可以修改Master的名称。
可以通过鼠标拖拽来改变Master的排列和组织顺序。
双击一个Master用于打开框架设计页面，并对Master进行编辑。
通过鼠标拖拽将控件拖拽至Master，支持Master的嵌套，意即在Master之上形成新的Master。
可以通过eConvert->ConverttoMaster功能将控件集转化为Master。
MasterBehaviors
Master可以被设置为3个不同的行为：
1、正常
2、放置在背景
3、定制在某一个控件的下面。
为了改变Master的行为，右键点击Master控件并在弹出式菜单中选择Behavior子菜单。
通过鼠标拖拽可以很方便的将Master放入原型页面中。
流程图：
FlowDiagrames
人们通常使用这个功能在最高视野观察页面的业务流向。
创建一个FlowDiagrame
在线框图的类型中，将WireFrame改为Flow即能使其转成流程图。
线框图转化为流程图后其图标会改变。
通过连线将Flow控件连接起来，缺省情况下，连接会自动避开其他控件，如果要改变这个状态，通过EditorConnector->DoNotAutoReflow功能来手工连线。
增加参考页面ReferencePages
参考页面是流程图中形状（控件）的页面影射，即该控件对应于原型系统中的哪个页面。
如果该页面在线框图中被修改了名称，那么这个修改过程会被自动同步。
通过EditFlowShape->EditReferencePage功能，为流程图中的控件关联参考页面。
生成流程图
略。
原型交互：
InteractivePrototypes
概述
原型交互的过程有助于简化文档，获得客户的反馈、得到确认及阐述我们的需求。
在原型系统完成设计、注释和交互制作后，可以生成基于浏览器的Web系统，这个系统没有任何代码开发工作。
Axure的原型系统，基于HTML、js、和CSS，你可以在主流的Web浏览器如火狐、IE、Safari和Chrome中查看。
无需安装Axure的阅读器，因此更便于多方分享。
如果需要对原型系统进行编辑的话，仅需要安装RP的客户端就可以了。
配置和生成原型
按F5或者在主菜单中选择Generate->Prototype以生成原型系统。
在生成原型系统的选项中：
1、General:
选择生成原型系统的目标文件夹位置，以及要打开原型系统的浏览器。
可以选择其他存储原型系统的位置，或使用UseDefault功能重置原始缺省位置。
2、Pages:
选择生成原型系统要包括的页面。
缺省情况下包括全部页面。
3、Notes:
选择是否要在原型系统中生成页面备注。
4、Annotations:
注释域是否在原型系统中生成。
5、Interactions:
常用来在多case中显示选择case的注释或仅显示case的注释。
6、Logo:
设置原型系统的Logo。
7、Mobile/Device:
选择是否插入一个移动设备的视觉标签。
这个标签会告知原型系统在设备上浏览原型系统的尺寸、缩放等选项。
8、Distribution（forPConly）:
生成一个CHM的单文件原型系统发布版本。
9、Advanced:
3个高级选项。
完成选项配置后，即可生成原型系统。
使用原型
原型系统有两个部分：
1、Sitemap,PageNotes,andDiscuss（Left），即左侧的地图、页面备注和讨论。
这个面板中有3个Tabs。
Sitemap允许你在页面框架中打开一个具体页面。
PageNote标签中查看页面的备注，而使用Discuss标签来添加标题备注。
2、MainFrame（Right）:
右侧的主框架。
基于线框图和流程图进行交互。
共享和分发原型
有如下几个方法分享和分发原型：
1、以Zip文件包形式发送。
2、发行到一个分享服务或Web服务器。
3、出版到AxShare。
4、生成一个CHM文件（仅PC）。
功能规格：
FunctionalSpecifications
概述
规格是对设计的有效的文档化、通信和达成一致。
AxureRP生成的规格文件为MSOffice格式，生成时不要求安装Word，但是在阅览和修改时要求客户端安装Word。
配置和生成规格
有一系列的方法使你能够定制包括选择那些页面、采用导入模板、以及定制的页头和页脚的规格。
通过生成规格的对话框定制参数，然后点击Generate按钮生成Word文档。
GenerateSpecificationdialog中包括如下选项：
1、General:
输入目标文件的存储位置。
2、Pages:
选择要生成规格文档的页面。
3、Masters:
选择规格文档中所包括的Master。
4、PageProperties:
选择和排序页面的备注。
5、Screenshots:
显示或不显示对线框图进行截屏的选项。
6、WidgetProperties:
控件属性。
选择和排序注释，你可以将注释分解到多个表中。
7、Layout:
选择排列和排序内容的是单列或双列布局。
8、WordTemplate：
选择和编辑文档模板。
中级技能
WidgetStyles:
控件风格
概述
作为缺省风格的追加，你可以在图片、按钮、矩形、菜单等控件上编辑附加的风格，如rollover（翻滚）、选定。
在原型系统中，rollover风格应用于自动、而选定则用于菜单或者导航的高亮交互。
应用控件风格
为了增加和编辑控件风格，在控件中右键并选择“Edit[widgettype]”子菜单，这个可用的风格包括：
Rollover:
当光标移动过这个控件时。
MouseDown:
当在这个控件上鼠标点击时。
Selected:
当控件被设置为它的选中状态时。
Disabled:
当控件被设置为禁用状态时。
上述功能并非对所有控件有效。
可以通过Preview功能来校验控件的风格效果。
交互及控件风格
控件风格可以和交互事件结合起来使用。
当你的鼠标经过或在控件上点击时，rollover和MouseDown事件会被自动应用，你需要使用“SetWidget（s）toSelectedState”Action用于应用控件的这个状态。
这个功能非常棒。
SelectionGroups:
Menu&TreeWidgets
使用Menu控件
Meun控件便于你容易的创建Web和桌面应用的导航菜单。
在线框的控件库中，分别有垂直和水平的菜单控件可供使用。
一、编辑菜单控件
缺省情况下，每个菜单附带有3个菜单项，可以按需进行编辑，扩展或删减菜单项。
通过pading选项改变菜单外围的宽度。
二、添加和删除菜单项
很简单，略。
三、编辑附加的风格。
设置菜单控件的鼠标rollover和MouseDown风格的详细参数。
使用Tree控件
Tree控件用于构造一个可以伸缩/展开的基于浏览器的Web导航。
如果你的设计需要一个定制的树控件，你可以使用动态面板和MovePanelAction进行控制。
一、编辑树控件
很简单，略。
二、增减和删除树节点
很简单，略。
三、树控件和交互
你可以使用“ExpandTreeNode（s”and“CollapseTreeNode（s）’动作来动态展开或收缩一个树节点。
如果你需要的话，你可以通过点击一个按钮展开或收缩一个树节点。
条件逻辑：
ConditionalLogic
概述
比如说，我们希望从一个下拉式列表中选择一个水果，并将其图片显示出来。
你会创建一个动态面板，其状态包括了这个水果的图片。
当下拉列表的值发生变化（OnChange），你则可以定义事件的条件逻辑，去评估这个下拉列表中的值（如果这个水果下列列表的值为“苹果”）并设置这个动态面板的状态发生相应的变化。
交互和条件逻辑
一、条件创建对话框：
TheConditionBuilderDialog
为了向Case中创建条件，首先需要在控件属性的交互Tab为一个事件创建Case。
在步骤1的CaseEditordialog中，有一个选项是“AddCondition”。
打开这个选项，可看到ConditionBuilderDialog。
ConditionBuilder让你建立条件表达式，如“IfselectedoptionofFruitDroplistequals‘apple’”.使用下拉菜单和输入域，你可以创建你所需要求值的条件。
一个简单的方法是，将这个表达式拆分为三个部分:
你所要比较的两个子项，和它们比较的类型。
即：
[Onevalue]+[Howitcompares]+[Toanothervalue]
你可以基于如下的值类型创建条件：
1、Ischeckedof:
thecheckstateofacheckboxorradiobutton/一个Checkbox和Radio的check状态。
2、Selectedoptionof:
theselectedoptionofadroplistorlistbox/一个下拉列表和列表框中被选择项。
3、Valueofvariable:
thecurrentvaluestoredinavariable：
变量当前所存储的值
4、Lengthofvariablevalue:
thenumberofcharactersinavariablevalue：
变量值的字符数。
5、Textonwidge
升级会员 