AxureRPPro中高级交互实例教程
AXURERP案例教程其它技巧PPT制作技巧PPT专区
Axure RP还提供了丰富的组件和符号 库，方便用户快速搭建原型界面。
它支持快速创建各种交互效果，如点 击、滑动、拖拽等，以及生成HTML 格式的原型文件，方便在浏览器中预 览和分享。
Axure RP基础操作
创建页面
添加组件
在Axure RP中，可以创建多个页面，每个 页面可以包含不同的内容和布局。
02 PPT制作技巧
文字排版技巧
01
02
03
04
文字对齐方式
左对齐、居中对齐、右对齐， 两端对齐，根据需要选择合适
的对齐方式。
字体选择
微软雅黑、宋体、黑体等，根 据主题和风格选择合适的字体
。
字号大小
根据内容的重要性和展示效果 ，合理设置字号大小。
行间距和段间距
适当调整行间距和段间距，提 高可读性。
导航窗格
通过导航窗格，查看PPT的结构和层级关系，快速 定位到目标内容。
标记和注释
在PPT中添加标记、注释或批注，便于在查看时快 速找到重要信息或需注意的事项。
04 PPT专区
PPT模板专区
总结词
提供丰富多样的PPT模板，满足不同场合和需求。
详细描述
PPT模板专区提供了大量精美的PPT模板，涵盖商务、教育、科技、生活等多个 领域，用户可根据自身需求选择合适的模板，快速创建出专业、美观的演示文 稿。
Axure RP案例教程、其它技巧、 PPT制作技巧、PPT专区
目录
• Axure RP案例教程 • PPT制作技巧 • 其它技巧 • PPT专区
01 Axure RP案例教程
Axure RP简介
Axure RP是一款专业的原型设计工具， 用于创建高保真度的交互式原型，帮 助设计师和开发人员更好地协作和沟 通。
Axure高级互动设计
Axure高级互动设计1—设定逻辑条件设定逻辑条件1. 认识Condition (逻辑判断)2. 认识Condition Builder (逻辑判断编辑器)3. 用Condition Builder建立逻辑判断4. 秘技(Quick Tips)1. 认识Condition (逻辑判断)虽然可以用文字来描述Prototype操作的动线或互动方式，但有的时候，您还是会需要一个更逼真(High Fidelity)、更互动、更有亲和力的Prototype 。
比如，当您在操作Prototype，模拟会员登入帐号，如果能在按下登入按钮时，直接显示登入成功或失败的讯息。
是不是比您口头解说或文字描述，还要来得清楚明白呢？在Axure RP的互动设计中，「逻辑判断」是最有挑战性，但是也最有趣的一件事情。
因为当您在设计网站Prototype 时，可以不用寻求程序设计师或Flash设计师的协助，就可以独立完成您想要表达的互动效果。
清楚的逻辑观念胜过互动设计技巧学习Axure RP的条件逻辑设计之前，您必须先知道一个重要的观念：成为称职的网站企划人员，不一定要学会Axure RP的高级互动设计技巧，却一定要有清楚的逻辑观念。
否则，不只造成网站开发工作上的困扰，更严重的还会造成糟糕的网站使用者经验。
只有清楚的逻辑观念，才能带来准确合理的互动设计。
如果您不想学这些高级互动设计技巧，绝对无损于您利用Axure RP进行网站企划及Prototype 设计。
换言之，即使您学会Axure RP的高级互动设计，但是您的逻辑观念如果不清楚，仍然无法成为一位优秀的网站企划。
要是您希望将Prototype拿来进行Usability Test，或者在各种沟通讨论会议上，让大家更充分理解操作的互动效果，那么透过Axure RP提供的逻辑判断设定，可以让Prototype更进一步接近真实完成的网站接口与动线。
物件值(Value of Widget) / 变数值(Value of Variable)接下来，您要学习使用变数值/对象值，这两种类型的数值应用于逻辑判断：a. 对象值(Value of Widget) –使用Widget本身的值来进行逻辑判断，有4种不同的数值可供应用：* Checkbox或Radio Button的核取状态* Droplist 或Listbox的选取值* Text Field或Text Area中的文字* Text Field或Text Area的文字的长度b. 变数值(Value of Variable) –使用自定变数的值来进行逻辑判断，有2种：* value of variable –自定变数的值* length of variable value –自定变数值的长度附带补充，Axure RP本身存在一个全局预设变数(Global Default Variable) – OnLoadVariable，除此之外，变数名称可以自订，最多可以有25个自订变数。
如何制作高效的Axure交互动画效果
如何制作高效的Axure交互动画效果在当今互联网时代，用户体验已成为产品设计的重要组成部分。
为了提升用户体验，设计师们经常使用交互动画来增加产品的吸引力和可用性。
Axure是一款功能强大的原型设计工具，可以帮助设计师实现各种交互动画效果。
本文将介绍如何制作高效的Axure交互动画效果。
一、了解用户需求在设计交互动画之前，首先需要了解用户的需求和期望。
通过用户调研和用户测试，可以获取到用户对产品的期望和使用习惯。
根据这些信息，设计师可以确定要制作的交互动画效果，并为其设定明确的目标。
二、规划交互流程在开始制作交互动画之前，需要先规划好整个交互流程。
通过绘制流程图或制作原型，可以清晰地展示用户在产品中的操作路径。
这有助于设计师理解用户的行为和反馈，从而确定合适的交互动画效果。
三、选择合适的交互动画效果Axure提供了丰富的交互动画效果，设计师可以根据产品需求选择合适的效果。
例如，可以使用淡入淡出效果来展示页面的切换，使用滑动效果来显示隐藏的内容，使用旋转效果来引导用户的注意力等等。
选择合适的交互动画效果可以增加产品的可用性和吸引力。
四、制作交互动画在Axure中，制作交互动画可以通过添加动态面板、设置触发事件和过渡效果来实现。
首先，需要将需要添加交互动画的元素转换为动态面板。
然后，通过设置触发事件，如点击、滚动、鼠标悬停等，来触发交互动画的效果。
最后，通过设置过渡效果，如渐变、移动、旋转等，来实现交互动画的效果。
在制作交互动画时，需要注意动画的流畅性和自然性，避免过度设计和繁杂的动画效果。
五、测试和优化制作完交互动画后，需要进行测试和优化。
通过用户测试和反馈，可以发现潜在的问题和改进的空间。
根据用户的反馈，对交互动画进行优化和调整，以提升用户体验和产品的可用性。
六、文档和分享制作完高效的Axure交互动画效果后，需要将其文档化并分享给相关人员。
通过制作详细的文档和演示视频，可以帮助开发人员和其他设计师理解和实现交互动画效果。
Axure初中高级交互实例
初级交互设计1. 交互(Interaction)2. 定义基本连结3. 动作型态(Action)及实际动作(Action Description)4. 多重条件(Multiple Cases )5. 网页层级的交互: OnPageLoad6. 秘技(Quick Tips)1. 交互(Interaction)Interactions窗格是用来定义Widget在Wireframe中的交互表现方式，交互表现的方式包含简单的连结到Rich Internet Application (RIA)的复杂行为，而且这些交互表现都可以在Prototype中执行。
触发事件(Event)、假设条件(Case)、动作型态(Action)在Axure RP中的交互设计是由触发事件(Event)、假设条件(Case)与动作型态(Action)所组成。
当使用者对网页进行某些人机介面的操作时，就会对网页触发一个事件(Event)。
每一个触发事件都可以有一或多个假设条件(Case)，例如，一个按钮的OnClick 触发事件可以有两个假设条件：其中一个导引至某个网页，另一个则导引至另一个网页。
而每一个假设条件(Case)又可以执行一或多个动作型态(Action)，举例来说：「Open Link in Current Window」的动作就是一个基本连结。
触发事件(Event)目前Axure RP 5支持的人机介面触发事件，及相对应的触发事件(Event)名称如下：∙以鼠标点击- OnClick∙鼠标的指针移动到对象之上- OnMouseEnter∙鼠标的指针移动出对象之外- OnMouseOut∙鼠标的指针进入文字输入状态- OnFocus∙鼠标的指针离开文字输入状态- OnLostFocus∙敲键盘- OnKeyUp∙浏览器加载网页- OnPageLoad大多数的对象，只具备最常见的三种触发事件(Event) - OnClick、OnMouseEnter 与OnMouseOut。
AXURE_RP使用教程
AXURE RP 教程
脚注（Footnotes） 在控件上添加注释后，控件的右上角会显示一个黄色方块，称为
脚注。脚注号码可以增大和减小，可通过控件右键菜单或工具栏上的
进行修改。
AXURE RP 教程
4. 页面备注（Page Notes） 页面备注可是对页面进行描述和说明。 添加页面备注 在线框图下面的 Page notes 面板中可以添加页面备注内容。
向用户进行演示、 沟通交流以确认用户需求， 并能自动生成规格说明文档。 另外， Axure还
能让团队成员进行多人协同设计， 并对设计进行方案版本控制管理。 Axure使原型设计及和客户的交流方式发生了变革： 更加清晰的交流想法； 进行更加高效的设计； 让你体验动态的原型；
2 . 原型的作用和好处
制作 Prototype 是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需
AXURE RP 教程
自定义字段（Fields） 通过主菜单 Wireframe->Customize Annotation Fields and Views 或点击面板上 Annotations 头部的“Custommize Fields and Views” 然后在弹出的 Custommize Fields and ， Views 对话框中可以添加、删除、修改、排序注释字段。
管理页面备注 另外，可以自定义页面备注，为不同的人提供不同的备注，以满足不同需要。比如可以新 增“测试用例”“操作说明”等不同类别的页面备注。
AXURE RP 教程
第3节 基本交互设计
1. 控件的交互
控件交互面板用于定义线框图中控件的行为，包含定义简单的链接和复杂的 RIA 行 为，所定义的交互都可以在将来生成的原型中进行操作执行。
Axure原型设计简明图解案例教程 第8章 用Axure元件行为制作交互效果
进一步说明只能给图像部件设置图像行为，如图所示。
内 容
导 航
8.1 显示/隐藏 8.2 设置文本和设置图像 8.3 设置选择/选中 8.4 设置指定列表项 8.5 启用/禁用 8.6 移动和置于顶层/底层 8.7 移动和置于顶层/底层 8.8 小结
8.3.1 单选按钮选中行为
13
1、拖曳一个单选按钮部件，文本内容 命名为“我是单选按钮”，标签命
动画效果为线性，用时为500毫秒，
如图所示。
8.6 移动和置于顶层/底层
28
3、选中“导航三”菜单，给它添加鼠
标单击时触发事件。移动“菜单选
中背景”绝对位置（318,120）， 动画效果为线性，用时为500毫秒，
单击“置于顶层”，将菜单选中背
景置于顶层。 4、按F5键发布制作的原型。单击导航 二菜单，会发现菜单选中背景移动 到导航二菜单下面；单击导航三菜 单，会发现菜单选中背景移动到导 航三菜单位置，由于给它设置置于
内 容
导 航
8.1 显示/隐藏 8.2 设置文本和设置图像 8.3 设置选择/选中 8.4 设置指定列表项 8.5 启用/禁用 8.6 移动和置于顶层/底层 8.7 移动和置于顶层/底层 8.8 小结
8.5 启用/禁用
24
1、拖曳两个HTML按钮，重命名为“禁用”和 “启用”，分别拖曳一个复选框、单选按钮、 文本框（单行）、文本框（多行）、下拉列
第8章 用Axure部件行为制作交互效果
内 容
导 读
Axure除了可以使用链接行 为制作交互效果，也可以使用 部件行为来完成。Axure部件行 为包括部件的显示/隐藏、设置 文本和设置图像、设置选择/选
中、设置指定列表项、启用/禁
AXURE_RP教程带案例
AXURE_RP教程带案例比较好用的AXURE_RP 教程,可以参照案例一边学习一边实践AXURE RP 案例教程交互设计师、产品经理产品原型利器比较好用的AXURE_RP 教程,可以参照案例一边学习一边实践AXURE RP 教程入门篇第一章介绍以工具栏工具(widgets)绘制示意图(Wireframe) 第二章流程图(Flow Diagrams)撰写网页说明(Page Notes) 第三章高级交互设计(Rich Interaction) 第四章实例比较好用的AXURE_RP 教程,可以参照案例一边学习一边实践AXURE RP 教程第一章介绍第1节认识Axure RP 第2节线框图及其注释第3节基本交互设计第4节使用模块(Master)第5节HTML 原型第6节输出规格说明比较好用的AXURE_RP 教程,可以参照案例一边学习一边实践AXURE RP 教程入门篇第一章软件介绍第1节认识Axure RP1 . Axure RPAxure 的发音是“Ack-sure”, RP 则是“Rapid Prototyping” 的缩写。
Axure RP Pro 是美国Axure Software Solution公司的旗舰产品，是一个快速的原型工具，主要是针对负责定义需求、定义规格、设计功能、设计界面的与家，包括用户体验设计师、交互设计师、业务分析师、信息架构师、可用性与家和产品经理。
比较好用的AXURE_RP 教程,可以参照案例一边学习一边实践AXURE RP 教程Axure能让你快速的行线框图和原型的设计，让相关人员对你的设计行体验和验证，向用户行演示、沟通交流以确认用户需求，并能自劢生成规格说明文档。
另外，Axure还能让团队成员行多人协同设计，并对设计行方案版本控制管理。
Axure使原型设计及和客户的交流方式发生了变革：行更加高效的设计；让你体验劢态的原型；更加清晰的交流想法；2 . 原型的作用和好处制作Prototype 是个有效的简化文档编制、吸引使用者参不、早期辨认需求遗漏、将外在需求风险降到最低的方法。
Axure RP Pro 5 简易操作指南
Axure RP Pro 5 简易操作指南北京中电普华信息技术有限公司发布目录1. 编写目的 (2)2. AXURE RP PRO 5安装 (2)3. AXURERP-PRO操作 (4)3.1. 认识AxureRP-Pro操作界面 (5)3.2. AxureRP-Pro DEMO制作过程 (8)4. 生成演示文档 (13)5. Q&A (15)1.编写目的为了更好的支持“营销稽查监控平台业务需求设计”工作的开展，做好需求验证工作，顺利的进行UE（展现界面）实现验证，特对Axure RP Pro 5UE工具安装、操作进行简要的介绍。
2.Axure RP Pro 5安装●运行AxureRP-Pro-Setup5.6.exe安装文件。
●点击，进入AxureRP-Pro License Agreement页面。
●SelectDestination页面。
●Program Shortcuts页面。
●●AxureRP-Pro的安装。
3.AxureRP-Pro操作运行AxureRP，最好进行注册，下面是一个注册版启动示意图：3.1.认识AxureRP-Pro操作界面1下图是Axure RP 环境与介面中各区块的简单描述主选单/工具列：在主选单与工具列中，可以执行常用的动作指令，例如：开启与储存档案、输出Prototype或Spec文件。
Sitemap 窗格： Sitemap窗格将您所设计的网页以树状结构的方式呈现，您可以在这里新增、移除、重新命名和组织设计的网页。
1、增加一个子页面：为所选择的页面创建一个子页面。
2、页面上移：同等级的页面中，将所选页面的上下排列次序，上移一个位置。
3、页面下移：同等级的页面中，将所选页面的上下排列次序，下移一个位置。
4、页面降序：将所选页面等级降序，作为原等级中，排列在所选页面上方之页面的子页面。
5、页面升序：将所选页面等级升序，将所选页面的页面等级，升序为父页面的同等级页面。
AxureRPPro案例教程
强化用户体验 未来版本的Axure RP Pro可能会 更加注重用户体验，提供更加人 性化的操作流程和界面设计。
云服务集成 随着云服务的普及，Axure RP Pro可能会集成云服务功能，方词
商品详情页面的制作需要考虑到商品信息展示、评论和购买等操作流程，以及页面布局和美观度。
详细描述
首先，创建一个新的页面，并设置页面背景和布局。然后，添加商品图片、信息、评论和购买按钮等 元素，并设置相应的交互效果。最后，根据需求调整商品详情页面的样式和布局。
制作购物车页面
总结词
登录页面的制作需要考虑到用户输入、 验证和提交等操作流程，以及页面布 局和美观度。
详细描述
首先，创建一个新的页面，并设置页 面背景和布局。然后，添加输入框、 按钮等元素，并设置相应的交互效果。 最后，添加验证逻辑，确保用户输入 的信息符合要求。
制作注册页面
总结词
注册页面的制作需要考虑到用户输入、验证和提交等操作流程，以及页面布局 和美观度。
团队协作和版本控
制
Axure RP Pro支持多人协作和版 本控制，方便团队成员共同完成 大型项目，并确保每个版本之间 的数据一致性。
Axure RP Pro的适用人群
产品经理
Axure RP Pro可以帮助产品经理快速创建出 高保真度的原型，更好地展示产品功能和交 互流程。
设计师
Axure RP Pro提供了丰富的组件和符号库，让设计 师能够快速构建出高质量的原型。
Axure RP Pro案例教程
目 录
• 介绍 • 基础操作 • 案例教程 • 高级功能 • 总结与展望
Axure-RP-Pro-7.0-操作手册
AXURERP-PRO 7.0操作运行AxureRP1.1. 认识AxureRP-Pro7.0操作界面1下图是Axure RP 环境与介面中各区块的简单描述主选单/工具列：在主选单与工具列中，可以执行常用的动作指令，例如：开启与储存档案、输出Prototype或Spec文件。
Sitemap 窗格： Sitemap窗格将您所设计的网页以树状结构的方式呈现，您可以在这里新增、移除、重新命名和组织设计的网页。
1、增加一个子页面：为所选择的页面创建一个子页面。
2、页面上移：同等级的页面中，将所选页面的上下排列次序，上移一个位置。
3、页面下移：同等级的页面中，将所选页面的上下排列次序，下移一个位置。
4、页面降序：将所选页面等级降序，作为原等级中，排列在所选页面上方之页面的子页面。
5、页面升序：将所选页面等级升序，将所选页面的页面等级，升序为父页面的同等级页面。
6、删除页面：将所选页面删除，同时删除其子页面。
7、编辑页面：在工作区打开所选择页面，进行编辑。
选择部件库窗格：包含一系列常用的使用者介面对象，例如：按钮、影像、Text Panel与矩形，您可以直接透过拖拉的方式来设计网页。
在选择部件库窗格中可以显示其它类型的元素及装载系统外的元素。
母版窗格：在这里您可以新增、移除、重新命名和组织设计好的Master。
Master是一种可以容纳多项界面元素的集合样板(Temlate)，您可以将常用的共享区块设计成Master，未来在设计Wireframe时重复使用Master（通过拖放的方式可以直接放到设计的Wireframe页面），来提高规划的效率。
选择部件库窗格：您可以在这个窗格中设计网页信息元素，编排内容，设计介面，设计交互特性等等。
未来可以将这些设计好的页面，输出成Prototype 或Spec文件。
部件交互和注释 (Interaction) 窗格：交互的范围很广，从最基本的超级链接、pop-ups，一直到动态显示和隐藏widget。
Axure实现交互动效设计的技巧与经验分享
Axure实现交互动效设计的技巧与经验分享近年来，随着互联网和移动应用的快速发展，交互设计在用户体验中的重要性日益凸显。
而在交互设计中，动效设计是提升用户体验的重要手段之一。
Axure作为一款专业的原型设计工具，不仅可以帮助设计师快速搭建界面原型，还能实现丰富的交互动效。
本文将分享一些Axure实现交互动效设计的技巧与经验，希望能对设计师们有所帮助。
一、了解基本的动效设计原理在开始使用Axure进行交互动效设计之前，首先需要了解一些基本的动效设计原理。
比如，动效的目的是什么？如何通过动效来引导用户的注意力？如何利用动效来提升用户的操作体验？这些问题的答案将有助于我们更好地运用Axure进行交互动效设计。
二、掌握Axure的基本操作技巧在使用Axure进行交互动效设计之前，我们需要先熟悉一些基本的操作技巧。
比如，如何创建页面和组件？如何设置交互事件和状态？如何调整动效的时间和缓动效果？这些基本的操作技巧是我们实现交互动效设计的基础。
三、运用合适的动效效果在进行交互动效设计时，我们需要根据具体的设计需求选择合适的动效效果。
Axure提供了丰富的动效效果，比如淡入淡出、滑动、缩放等。
我们可以根据设计的目的来选择合适的动效效果，以达到更好的用户体验。
四、合理设置动效的时间和速度动效的时间和速度是影响用户体验的重要因素之一。
如果动效的时间过长，用户可能会感到无耐烦；如果动效的速度过快，用户可能无法完全理解动效的意图。
因此，在设置动效的时间和速度时，我们需要权衡用户的感受和设计的目的，以达到最佳的用户体验。
五、运用交互动效来引导用户操作交互动效不仅可以提升用户体验，还可以帮助用户更好地理解和使用产品。
通过合理运用交互动效，我们可以引导用户完成特定的操作，比如点击、滑动、拖拽等。
这样不仅可以提升用户的操作效率，还可以减少用户的操作错误。
六、利用动效设计来增强产品的情感共鸣除了提升用户体验，交互动效设计还可以通过增强产品的情感共鸣来吸引用户。
Axure高级互动设计1—设定逻辑条件
设定逻辑条件1. 认识Condition (逻辑判断)2. 认识Condition Builder (逻辑判断编辑器)3. 用Condition Builder建立逻辑判断4. 秘技(Quick Tips)1. 认识Condition (逻辑判断)虽然可以用文字来描述Prototype操作的动线或互动方式，但有的时候，您还是会需要一个更逼真(High Fidelity)、更互动、更有亲和力的Prototype 。
比如，当您在操作Prototype，模拟会员登入帐号，如果能在按下登入按钮时，直接显示登入成功或失败的讯息。
是不是比您口头解说或文字描述，还要来得清楚明白呢？在Axure RP的互动设计中，「逻辑判断」是最有挑战性，但是也最有趣的一件事情。
因为当您在设计网站Prototype时，可以不用寻求程式设计师或Flash设计师的协助，就可以独立完成您想要表达的互动效果。
清楚的逻辑观念胜过互动设计技巧学习Axure RP的条件逻辑设计之前，您必须先知道一个重要的观念：成为称职的网站企划人员，不一定要学会Axure RP的高级互动设计技巧，却一定要有清楚的逻辑观念。
否则，不只造成网站开发工作上的困扰，更严重的还会造成糟糕的网站使用者经验。
只有清楚的逻辑观念，才能带来准确合理的互动设计。
如果您不想学这些高级互动设计技巧，绝对无损于您利用Axure RP进行网站企划及Prototype 设计。
换言之，即使您学会Axure RP的高级互动设计，但是您的逻辑观念如果不清楚，仍然无法成为一位优秀的网站企划。
要是您希望将Prototype拿来进行Usability Test，或者在各种沟通讨论会议上，让大家更充分理解操作的互动效果，那么透过Axure RP提供的逻辑判断设定，可以让Prototype更进一步接近真实完成的网站介面与动线。
物件值(Value of Widget) / 变数值(Value of Variable)接下来，您要学习使用变数值/物件值，这两种类型的数值应用于逻辑判断：a. 物件值(Value of Widget) –使用Widget本身的值来进行逻辑判断，有4种不同的数值可供应用：* Checkbox或Radio Button的核取状态* Droplist 或Listbox的选取值* Text Field或Text Area中的文字* Text Field或Text Area的文字的长度b. 变数值(Value of Variable) –使用自定变数的值来进行逻辑判断，有2种：* value of variable –自定变数的值* length of variable value –自定变数值的长度附带补充，Axure RP本身存在一个全域预设变数(Global Default Variable) – OnLoadVariable，除此之外，变数名称可以自订，最多可以有25个自订变数。
Axure教程
下面，用几个实例来介绍用Axure RP Pro制作交互文档。
在制作过程中，经常会有一些Tips，是一些使用软件的技巧和相关提示。
这些多半都是我个人的总结，有些可能是我的“错觉”，希望在这方面能够得到指导，也希望一些有用的技巧真的能在实际操作中帮到大家。
根据Facebook的未登录首面来设计一个SNS社区首页的原型Facebook的未登录首页第一部分：制作页面头部(Header)。
作为介绍软件的开始，这一部分将分步骤讲解得比较详细。
1.第一步：头部底色打开Axure RP Pro，从Widgets面板中选中“Rectangle（矩形）”工具，从面板中拖到工作区当中。
在软件界面的信息栏我们中可以看到工作区中组件的位置（left、right）和宽（width）、高（hight）的数值，单位都是像素(px)。
把这个头部矩形放在左上角（left:0 right:0 ）的位置，并拉长宽高到850和80。
也可以通过右击矩形在菜单中选择“Edit Location and Size(编辑位置和大小)”，快捷键是Ctrl+L（记住快捷键可以提高工作速度）通过这个编辑框，可以精确地调整组件内容的位置、大小信息，非常适合多少有点“像素强迫症”的朋友们使用~:D在公共栏，可以设置组件内容的一些相关信息。
我们将矩形的边框设为无色，背景设为深蓝，作为Header的底部颜色。
2.第二步：Logo从Widgets面板中选中“Image（图像）”工具，从面板中拖到工作区来。
拉到合适的宽度，双击图像，插入我们的Logo图片。
如果网站还没有定好Logo图案，或是为了省事，也可以只插入默认的image图案就可以了。
在插入图片时，如果你在工作区预设的图像大小与图像原尺寸不一致，会有一个信息提示。
如果我们想保留原尺寸（保持图像的真实比例并保证图像的显示质量）则选“是”；如果插入的图片想按我们预设的大小来安放，选择“否”。
Tips：我们可以在右边的Anotations & Interactions面板的“Label （标签）”栏中为图像加上命名：“Logo”。
Axure常用交互效果
Axure常用交互效果Axure常用交互效果我们为大家收集整理了关于Axure常用交互效果，以方便大家参考。
1.带提示的文本框将提示信息放置于文本框内是一种常见的交互方式。
当文本框获得焦点时，提示文字消失。
当文本框失去焦点时，提示文字重新显示出来。
现在就让我们看下这种控件的制作方法。
第一步：从widget库中拖出text field控件。
双击控件在其中输入提示文字。
然后在widget properties面板里，为该text field写入标签：“find people”。
第二步：双击widget properties面板里的，然后在打开的case editor中，点击Set Variable/Widgets value(s)之后点击Open Set Value Editor。
设置如下图所示：点击“OK”保存设置退出Set Value Editor和Case Editor。
第三步：双击widget properties面板里的，然后在打开的case editor中，点击Add Condition，在Condition Builder里设置如下：(该步骤的目的是，当用户在text field里面输入值之后，text field失去焦点时显示用户输入的'值，而不再显示提示文字。
) 点击“OK”保存设置并退出Condition Editor，然后再Case Editor中，点击Set Variable/Widgets value(s)之后点击Open Set Value Editor。
设置如下图所示：点击”OK”保存设置退出Set Value Editor和Case Editor。
至此带提示的文本框的制作就结束了，按“F5”可在浏览器中查看效果~2.拖拽在设计中应用拖拽，可以直观有趣的替代移动、复制、添加、删除等操作。
在Axure中，拖拽效果的实现相对复杂。
具体如下：第一步：从widget 库中拖出一个矩形，双击添加文字“拖拽物”。
Axure 交互式设计实例
Axure 交互式设计实例前言什么是原型呢？产品原型简单的说就是产品设计成形之前的一个简单框架，对网站来讲，就是将页面模块、元素进行粗放式的排版和布局，深入一些，还会加入一些交互性的元素，使其更加具体、形象和生动。
就我个人而言，目前使用频率最多，最高效，交互效果最好的原型工具是Axure。
今天给大家介绍一些我在工作中使用axure的经验。
主要从交互设计中涉及的三个主要步骤进行说明：一、主要页面原型在进行主要页面原型设计之前，交互设计师需要：•一份主要的任务流程图（此处指的不是“业务逻辑流程图”，而是根据“业务逻辑”产生的“任务流程”。
任务流程可由产品或是交互出，根据各个公司或项目的具体情况而定。
）•一份主要功能列表（一般由产品经理提供）•网站信息架构（信息架构在一些公司是需要交互设计师来完成的）•对于前期调研结果的理解如何做“主要页面原型”1. 在建立项目的初期就开始定义Master项目一开始启动，如果可以稍微掌握哪些区块未来将是共享区块，那么就开始建立Master，比如网站的Header / Footer / 导览选单(Navigation)，或者广告版位等等。
越早使用，越可以节省其它页面设计的重复工作。
Master的定义2.可以应用一些Axure RP library网上有很多资源，如：/post/6285。
也可以自己制作适合产品的library。
网上的library资源3.根据“任务流程图”，“功能列表”将主要的页面原型制作出来。
这时可以包括一些必要的交互动作。
一些详细的，比如出错提示等交互可以不用考虑。
主要的页面列表用途：主要的页面原型可以用于产品初期的讨论会、测试以及产品介绍会。
应注意几点：1. 不要加入视觉设计的元素。
着眼于大局，不要纠结细枝末节在制作原型的初期请把所有精力都放在流程的优化和布局设计上面吧，不要把时间浪费在视觉设计上，那样绝对是得不偿失。
因为我们的原型方案还没有最终通过，肯定要通过多次迭代才能确定方案，太多的视觉设计就是浪费时间；再者，如果原型做的十分逼真，在产品讨论会上，视觉的元素会很快抓住大家的眼球，到时就会有领导来质疑你的界面是不是该换成蓝色，按钮是不是再精致一些这样的问题。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Axure 中级互动设计1——控制Dynamic Panal1. Axure RP实现更丰富的互动设计网站开发技术越来越丰富了，这是我们正在经历的过程，也是未来的趋势。
不管是AJAX或JavaScript，甚至是Flash、Silverlight、JavaFX，这些都被归类为RIA(Rich Internet Application)的技术，能够让网站介面更丰富，展现更优质的人机互动。
同时，这个趋势也挑战了传统的文书软体或绘图软体，当这些软体受限于仅能表现单一画面与单一状态的情况下，您很难把心目中最友善的互动方式表达清楚并设计出来。
Axure RP与其他的wireframe软体，最大的差异在于能够进行互动设计(Interaction Design)，且可以立即将结果呈现于prototype上，而不是只有文字叙述。
更棒的一点是，学习Axure RP的互动设计，您并不需要学习HTML或Java Script语法，只要透过一些设定与操作，便可以完成多样而创新的互动介面设计。
在Axure RP设计出来的Prototype中，最简单的互动设计是网页连结，透过滑鼠的click来串起使用者与网站的互动流程。
然而，真正发挥Axure RP在互动设计上的惊人特色，并不是只有连结这么简单的互动，您可以藉由学习Dynamic Panel (动态面板)物件的操作与控制，来做到更丰富更友善的互动介面设计。
2. 认识Dynamic Panel WidgetDynamic Panel (动态面板) 这种物件是专门用在设计Prototype动态功能的Widget，Dynamic Panel可以包含一或多个状态(State)，每个状态本身是一个小页面，藉由控制状态(State)的顺序或隐藏/显示Dynamic Panel来达成互动介面的整个表现。
就像其他Widget一样，Dynamic Panel可以用拖放的方式从Wireframe窗格加入到画布中。
学习Dynamic Panel的互动设计之前，有2个重要的概念必须先认识：(1) Dynamic Panel (动态面板)：一种透明的物件，本身可以包含很多个状态(State)，而每个状态都是一个小网页。
被放置在最上层的状态就是该面板的长相。
(2) State (状态)：每个状态都是一个小网页，而这个小网页的边界与大小，与所属的Dynamic Panel 大小相同。
不同的State可以重叠在同一个Dynamic Panel里头，唯有被控制放在最上层的State，才会呈现于Prototype的画面中。
以Axure RP所设计出来的多样互动介面，大多藉由各种触发事件(Event)来控制Dynamic Panel显示或消失，或控制哪个State在最上层来模拟出实际的互动介面。
3. 编辑Dynamic Panel 的State(状态)已经摆放到画布中的Dynamic Panel，直接在上头快速点滑鼠左键两下，会开启「Dynamic Panel State Manager」对话方块。
在这个对话视窗中，您可以新增State、更改State名称、调整State排序、移除State与编辑State。
在「Dynamic Panel State Manager」对话方块中选择一个Panel State，然后按下【Edit State】钮，会开启这个Panel State的Wireframe以供设计。
或者您可以选择【Edit All States】钮，一口气把所有的状态页面通通开启。
开启后，您就可以像设计其他Wireframe一样的设计状态页面(State)，每个状态页面的侧边蓝色虚线外框就表示Dynamic Panel 的边界。
4. 预设Dynamic Panel的显示/隐藏Dynamic Panel 可以预设为隐藏(Hidden)，作法是在Dynamic Panel 物件上按滑鼠右键，并选择「Edit Dynamic Panel->Set Hidden」，这样就可以隐藏Panel 的内容，而且Dynamic Panel的遮罩也会从蓝色变成黄色。
已经预设隐藏的Dynamic Panel，可以选择「Edit Dynamic Panel->Set Visible」来显示Dynamic Panel。
Dynamic Panel 可以藉由接下来所介绍的互动模式，动态控制在Prototype 中的显示或隐藏。
Axure RP提供互动设计的实现方式，都在「Interaction Case Properties」对话方块中设定(请参考初级互动设计)。
其中有5种互动方式(Action)是专门用来控制Dynamic Panel的，分别是:* Set Panel state(s) to State(s)：将某个Dynamic Panel的State设定为该Panel的显示状态* Show Panel(s)：显示(设为visible) 一或多个Dynamic Panel* Hide Panel(s)：隐藏一或多个Dynamic Panel* Toggle Visibility for Panel(s)：根据目前的显示状态来显示或隐藏Dynamic Panel* Move Panel(s)：移动Dynamic Panel，可根据绝对座标或相对座标来移动5. 示范-以Click来开关Dynamic Panel要了解Dynamic Panel的互动控制，我们先来模拟一个Click的效果- 当滑鼠Click页面上的矩形时，会出现一个讯息视窗，再Click一次时，又把讯息视窗隐藏起来。
换句话说，我们将藉由滑鼠Click来控制Dynamic Panel的显示与隐藏。
首先我们先在画布上放一个矩形物件。
接下来放置一个Dynamic Panel，并且编辑这个Panel唯一的预设状态(State1)。
在State1(状态)的wireframe上，随意加入一些文字，以供辨认。
再把Dynamic Panel的显示状态，设定为隐藏(Hidden)。
然后，在矩形物件上增加一个OnClick的Interaction Case。
先选择矩形物件，接着click两下“OnClick”，弹出「Interaction Case Properties」互动设计的对话方块。
分别针对这个对话方块中的Step 1- 3做互动设计的设定：step 1: Description - 预设为Case 1，不用变更。
step 2: Select Actions - 勾选Toggle Visibility for Panel(s)，此时在step 3会出现T oggle Visibility for Panel。
如下图：step 3: Edit the Action description (click an underlined value to edit) - 这句话的意思是，去点选有加底线的项目进一步编辑。
于是我们接着click Panel这个单字，然后会看到弹出一个「SelectPanels」对话方块，里头只有一个叫做”My First Panel”的项目，把它勾选起来。
此时在step 3会出现Toggle Visibility for My First Panel。
(如下图)如果您曾经给Dynamic Panel有意义的名称，就可以在Select Panel时看到被您命名过的Panel。
选择Dynamic Panel时，Dynamic Panel 会以Annotations & Interactions 窗格中所给予的Label 做为识别，如果没有指定的话，Dynamic Panel 会预设标示为”Unlabeled”。
接下来，就可以输出Prototype了，按下F5或选择「Generate > Prototype」，将刚刚设计过的简易互动介面，输出到浏览器上进一步检视，当滑鼠click时，您所设计的那个Dynamic Panel是否会消失/出现(如下图)。
当您顺利完成这个Dynamic Panel的设定之后，非常恭喜！您已经成功进阶到Axure RP中级互动设计了，随着Dynamic Panel的各种互动设计技巧的熟练，您将越来越能随心所欲地设计出各种丰富又兼具创意的互动介面。
Axure 中级互动设计2——鼠标移入移出等的互动设计1. 滑鼠移入移出(OnMouseEnter/OnMouseOut)在先前初级互动设计(Basic Interaction)一章中，介绍多种Axure RP支援的人机介面互动效果。
这里我们要介绍其中两个常见的触发事件(Event)：OnMouseEnter - 滑鼠的指标移动到物件之上OnMouseOut - 滑鼠的指标移动出物件之外有许多Widget可以使用OnMouseEnter 和OnMouseOut触发事件，当滑鼠移到Widget上时会触发OnMouseEnter事件，OnMouseOut事件则发生在滑鼠离开Widget 时被触发。
最常见的运用方式，则是合并Dynamic Panel来控制比较复杂的功能时，例如：浮动选单、滑过特效和自订tooltips等。
以左图的互动效果来当例子：当滑鼠移到图片上方时，会自动弹出说明文字框(Dynamic Panel)，当滑鼠移出图片时，说明文字框就会消失。
这个互动设计就可透过OnMouseEnter 和OnMouseOut触发事件结合Dynamic Panel的控制来达成，设计方式如下图所示。
2. 变换图像(Rollover Image)Image Widget 以及Button Shape Widget可直接利用Axure RP的功能来设计Rollover Image 和Rollover Style，不需要使用到OnMouseEnter、OnMouseOut和Dynamic Panel。
变换图像(Rollover Image)想要建立变换影像的话，请在Image Widget上按右键，选择「Edit Image->Import Rollover Image」，然后选择一个影像当作变换影像，一旦影像选定后，您可以在Wireframe中，利用滑鼠滑过影像上的黑白色方块来预览变换影像。
3. 变换样式(Rollover Style)在Axure RP里头，Rectangle，Placeholder，Button Shape这三种Widget可以直接设定变换样式(Rollover Style)，而不需要去特别指定OnMouseEnter / OnMouseOut的触发事件，就可以做到变换样式。
想要建立变换样式的话，请在Rectangle / Placeholder / Button Shape上按右键，选择「Edit Edit Button Shape->Edit Rollover Style」。