AXURE_RP从入门到提高教程PPT

AXURERP从入门到提高,交互设计师、产品经理产品原型利器,1,2,快速原型的介绍,根据功能，为了指导开发而画的草图快速原型也叫做交互式原型一种有效且高效的以用户为中心（User-CenteredDesign）的技术实现了功能页面流程跳转做到用户的响应都会有反馈和最后开发出来的产品基本吻合,2,2020/5/1,快速原型的对产品的意义,团队了解需求的最佳方式程序员开发的最好参考项目开发和维护中所需标准的最好表现形式验收的依据,3,2020/5/1,快速原型的制作工具,纸和笔，白板和油性笔AxureUIDesignerPPT,4,2020/5/1,为何选择Axure？,你会发现上述工具：制作缓慢、效果粗犷、不易理解、无交互体现、修改困难,如果你还在使用以下工具表达想法：,5,2020/5/1,什么是Axure？,AxureRP(akshr)快速原型制作软件，由美国AxureSoftwareSolutions,Inc.公司开发。RP是RapidPrototyping(快速原型缩写)。,3,4,5,2,6,1,网站架构图,示意图,流程图,交互设计,原型设计,规格文档,软件界面及功能特性：,6,2020/5/1,入门与提高篇,第一章介绍以工具栏工具(widgets)绘制示意图(Wireframe)第二章流程图（FlowDiagrams）撰写网页说明(PageNotes)第三章高级交互设计（RichInteraction）,7,2020/5/1,第一章介绍,第0节微件的概念第1节AxureRP整体界面第2节线框图及其注释第3节基本交互设计第4节使用模块（Master）第5节HTML原型第6节输出规格说明,8,2020/5/1,第0节微件的概念,英文名：widgets,包括framework,flow原型图中的所有的设计元素，都是由微件组合而成，是最小原型设计单元类比：面向对象中的“类”、“对象”微件有属性、状态和行为例子：文本输入框,9,2020/5/1,Axure的工作环境可进行可视化拖拉操作，可轻松快速的创建带有注释的线框图。无需编程就可以在线框图中定义简单链接和高级交互。Axure可一体化生成线框图、HTML交互原型、规格说明Word文档。以下是对AxureRP工作环境的简要说明：,第1节：Axure的整体工作界面,10,2020/5/1,11,2020/5/1,12,2020/5/1,第2节线框图及其注释,页面导航面板（Sitemap）在绘制线框图(Wireframe)或流程图（Flow）之前，应该先思考界面框架，决定信息内容与层级。明确界面框架后，接下来就可以利用页面导航面板来定义所要设计的页面。页面导航面板是用于管理所设计的页面，可以添加、删除及对页面层次进行重新组织。页面的添加、删除和重命名点击面板工具栏上的“AddChildPage”按钮可以添加一个页面，点击“DeletePage”按钮可以删除一个页面。右键单击选择“RenamePage”菜单项可对页面进行重命名。,13,2020/5/1,页面组织排序在页面导航面板中，通过拖拉页面或点击工具栏上的排序按钮，可以上下移动页面的位置和重新组织页面的层次。打开页面进行设计在页面导航面板中，鼠标双击页面将会在线框面板中打开页面以进行线框图设计。,14,2020/5/1,2.微件（Widgets）微件是用于设计线框图的用户界面元素。在微件面板中包含有常用的微件，如按钮、图片、文本框等。,15,2020/5/1,添加微件从微件面板中拖动一个微件到线框图面板中，就可以添加一个微件。微件可以从一个线框图中被拷贝(Ctrl+C)，然后粘贴(Ctrl+V)到另外一个线框图中。操作微件添加微件后，在线框图中点选该微件，然后可以拖拉移动微件和改变微件的大小，还可以一次同时对多个微件进行选择、移动、改变尺寸。另外，还可以组合、排序、对齐、分配和锁定微件。这些操作可通过微件右键菜单中进行，也可在Object工具栏上的按钮进行。编辑微件风格和属性有多种方法可以编辑微件的风格和属性：鼠标双击：鼠标双击某个微件，可以对微件的最常用属性进行编辑。例如，双击一个图片微件可以导入一张图片；双击一个下拉列表或列表框微件可以编辑列表项。工具栏：点击工具栏上的按钮可编辑微件的文本字体、背景色、边框等。右键菜单：微件右键菜单上可编辑微件的一些特定属性，不同微件这些属性也不同。,16,2020/5/1,3.注释（Annotations）可以为微件添加注释，以说明微件的功能。添加注释在线框图中选择微件，然后在微件注释和交互（AnnotationsandInteractions）面板中编辑字段中的值，即可为微件添加注释。面板顶部的Label字段是为微件添加一个标识符。,17,2020/5/1,4.页面备注（PageNotes）页面备注可是对页面进行描述和说明。添加页面备注在线框图下面的Pagenotes面板中可以添加页面备注内容。,管理页面备注另外，可以自定义页面备注，为不同的人提供不同的备注，以满足不同需要。比如可以新增“测试用例”“操作说明”等不同类别的页面备注。,18,2020/5/1,第3节基本交互设计,微件的交互微件交互面板用于定义线框图中微件的行为，包含定义简单的链接和复杂的RIA行为，所定义的交互都可以在将来生成的原型中进行操作执行。,在微件交互面板中可以定义微件的交互，交互事件（Events）、场景（Cases）和动作（Actions）组成：用户操作界面时就会触发事件，如鼠标的OnClick、OnMouseEnter和OnMouseOut；每个事件可以包含多个场景，场景也就是事件触发后要满足的条件；每个场景可执行多个动作，例如：打开链接、显示面板、隐藏面板、移动面板。,19,2020/5/1,以下是AxureRP支持的事件如下：OnClick：鼠标点击OnMouseEnter：鼠标的指针移动到对象上OnMouseOut：鼠标的指针移动出对象外OnFocus：鼠标的指针进入文字输入状态（获得焦点）OnLostFocus：鼠标的指针离开文字输入状态（失去焦点）OnPageLoad：页面或模块载入大多对象只具备常见的三种触发事件：OnClick、OnMouseEnter与OnMouseOut，一些特殊的微件可触发的事件有些不同：按钮微件只有OnClick单选框和复选框则具有OnFocus、OnLostFocus文本框、文本域、下拉框、列表框则具有OnKeyUp、OnFocus、OnLostFocus页面加载或模块被载入时则发生OnPageLoad,事件、场景和动作的关系,20,2020/5/1,2、定义链接下列步骤说明如何在按钮微件上定义一个链接：1.首先，拖拉一个按钮微件到线框图中，并选择这个按钮；2.然后，微件交互面板中鼠标双击“OnClick”这个事件，这时会出现“InteractionCaseProperties”对话窗，在这个对话框中可以选择要执行的动作；3.在“Step2”中，勾选“OpenLinkinCurrentWindow”动作。4.在“Step3”中，点击“Link”，在弹出的LinkProperties对话框中可以选择要链接的页面或其它网页地址。,21,2020/5/1,除了上面的步骤，加入一个链接的最快的方法是单击微件交互面板顶部的“QuickLink”，在弹出的LinkProperties对话框中选择要链接的页面。,22,2020/5/1,3.设置动作,除了简单的链接之外，Axure还提供了许多丰富的动作，这些动作可以在任何触发事件的场景中执行。,23,2020/5/1,以下是Axure所支持的动作：OpenLinkinCurrentWindow：在当前窗口打开一个页面OpenLinkinPopupWindow：在弹出的窗口中打开一个页面OpenLinkinParentWindow：在父窗口中打开一个页面CloseCurrentWindow：关闭当前窗口OpenLinkinFrame：在框架中打开一个页面SetPanelstate(s)toState(s)：为动态面板设定要显示的状态ShowPanel(s)：显示动态面板HidePanel(s)：隐藏动态面板ToggleVisibilityforPanel(s)：切换动态面板的显示状态（显示/隐藏）MovePanel(s)：根据绝对坐标或相对坐标来移动动态面板SetVariableandWidgetvalue(s)equaltoValue(s)：设定变量值或微件值OpenLinkinParentFrame：在父页面的嵌框架中打开一个页面ScrolltoImageMapRegion：滚动页面到ImageMap所在位置EnableWidget(s)：把对象状态变成可用状态DisableWidget(s)：把对象状态变成不可用状态WaitTime(s)：等待多少毫秒(ms)后再进行这个动作Other：显示动作的文字说明,24,2020/5/1,4.多个场景（条件）,一个触发事件可以包含有多个场景，根据条件执行流程或互动。,25,2020/5/1,5.页面上的事件:OnPageLoad,Axure支持一个页面层级的触发事件：OnPageLoad，这个事件在原型载入页面时触发。,页面OnPageLoad事件在页面备注面板中的Interactions子面板中定义，OnPageLoad为事件添加场景的方式与微件事件相同,26,2020/5/1,第4节使用模块（Master）,认识共享区块(Master)共享区块(Master)是一组在设计过程中可以重复使用的Widget，一些常用的Master包括了页首(Header)、页尾(Footer)与导览(Navigation)，Master可以被放置在网页或是其它的Master中，只要Master做了修改，其它使用到这个Master的地方也会跟着修改。2.新增、组织与设计Master3.套用Master到网页中想要在网页或其它Master的Wireframe中套用Master，只要将Master窗格中的Master拖拉到Wireframe中即可。,27,2020/5/1,第5节HTML原型,1.什么是网站/应用程序原型(HTMLPrototype)?Html原型是指在Axure中设计了带注释的线框图并定义了交互之后，就可以产生的一个可以基于浏览器的、可互动的原型。2.输出网站原型/格式设定,28,2020/5/1,第6节输出规格说明,在AxureRP中设计完Wireframe之后，我们可以输出MicrosoftWord格式的需求书或功能性规格文件(Specification)。,29,2020/5/1,第二章架构图/流程图,第1节为什么需要流程图第2节自动绘制架构图第3节绘制流程图,30,2020/5/1,第1节为什么需要流程图,流程图常被用来提供一个高阶视角(highlevelview)来看网页设计可以达成的工作；流程图有利于梳理业务流程；流程图可以用来表达各式各样的流程，包括：UseCase、商业流程与网页流程,31,2020/5/1,第2节自动绘制架构图,每一个网站的规划，少不了要绘制树状的网站架构(sitemapdiagram)，架构图能够以视觉化的方式呈现网页阶层。您在AxureRP的sitemap窗格定义好的网站架构，只要one-click就可以转成树状架构图。建议您先开啟一个空白页面，命名为”Sitemap”或者其他您觉得有意义的名称。,32,2020/5/1,33,2020/5/1,第3节绘制流程图,34,2020/5/1,第4节关联网页并输出流程图,FlowWidget可以关联到任意指定的一个参考网页，在Prototype中，这个FlowWidget与网页间会自动建立Hyperlink连结。,35,2020/5/1,第三章高级交互,第1节动态面板第2节中继器,36,2020/5/1,动态面板包含有多个状态（states），每个状态可包含一系列微件（你可以把一个状态理解成一个独立的页面）；任何时候都只有一个状态（页面）是可见的，或整个动态面板可以被隐藏；结合交互动作，可以让动态面板的状态进行隐藏、显示和改变。像添加其它微件一样，可以在微件面板中拖放动态面板微件到线框图中。,第1节动态面板,37,2020/5/1,动态面板的结构,第三层内容,第二层内容,第一层内容（最上层）,我们可以把动态面板看成一个很多层叠在一起而每一层都能设定不同内容默认看到最上层显示的,38,2020/5/1,动态面板的交互原理,当我们进行一些操作(譬如点击按钮、点击超链接等)使动态面板层的顺序改变，譬如第二层显示在最上层（如右图）这时候我们