Axure动态面板的使用
简单的说，动态面板就是展示在页面不跳转的情况下所能实现的交互状态
1、什么是Axure的动态面板
按照Axure官方网站的解释：动态面板控件（Dynamic Panel）可以让你实现高级的交互功能，实现原型的高保真度。动态面板包含有多个状态（states），每个状态可包含一系列控件（你可以把一个状态理解成一个独立的页面）。任何时候都只有一个状态（页面）是可见的，或整个动态面板可以被隐藏。结合交互动作，可以让动态面板的状态进行隐藏、显示和改变。像添加其它控件一样，可以在控件面板中拖放动态面板控件到线框图中。
简单的说，动态面板就是展示在页面不跳转的情况下所能实现的交互状态。而动态面板的每一个状态都可以看作是产生的一个新的交互结果。
2、Axure的动态面板可以用来做什么
1）tab式页签的切换效果：Axure的官方给出的实例就是这个，AlipayUED的同学按照官方给出的做法制作了一个3tab的原型，不愿看英文说明的同学可以直接参照这篇博客。2）鼠标触发式和点击触发式的下拉菜单效果：这个可以结合Axure的默认组件中的“垂直菜单”、“水平菜单”来实现，常用于导航的原型制作。
3）鼠标触发式的浮窗效果：类似“Alt”的效果，常用于浏览提示和触发式广告。
4）JS的鼠标点击弹层效果：这个是目前使用被广泛使用的效果之一。
5）注册表单中的根据焦点判断提示的效果：当焦点在输入框内的时候提示该表单栏目填写规范，当焦点离开输入框的时候根据填写的结果提示正确或者错误原因，这个需要动用高级设计交互编辑功能结合Axure的逻辑条件和设置变量功能来实现。
….and so on…
3、如何使用Axure的动态面板
1）动态面板属于Axure的一个组件，在组件栏中选中它，直接拖到你希望它出现的位置。不用担心，即使在添加完状态之后它的位置也是可以随时改变的。
2）在动态面板上点击右键——编辑动态面板——管理动态面板状态。在弹出的窗口里输入动态面板的标签名称（默认是Unlabeled）、添加新的状态。当然，也可以在界面的右下角找到“动态面板管理”模块来对动态面板进行操作。
友情提示：
a）默认的动态面板的状态是显示（蓝色），我们可以把他设置成隐藏（黄色）。
b）状态页面中的蓝色虚线外框表示动态面板的边界范围，超过这个边界范围外的内容在最终生成原型时将不可见。
c）为了不影响其他交互的制作，可以点击“动态面板管理”模块右侧的淡蓝色小方块在隐藏
或显示之间切换。或者，你可以在顶部的页面名称（如Home）上点击鼠标右键，选择右键菜单全部隐藏或全部显示，可以隐藏或显示页面中所有的动态面板。
3）双击添加完的动态面板状态（State1、2、…），会在Axure的工作区打开一个新标签。现在，把这个新标签当作是一个全新的页面来设计就OK了，不过，记住不要超过蓝色虚线外框。
4）给动态面板添加交互。Axure5.5中常用在动态面板上的交互行为包括：Set Panel state to State（设置动态面板的状态切换）、Show Panel（显示动态面板）、Hide Panel（隐藏动态面板）、Toggle Visibility for Panel（切换动态面板可见属性）、Move Panel（移动动态面板到一个设定的位置（x*y））、Bring Panel to Front（将动态面板置于最前）。交互行为的添加与添加其他组件的交互一样，没有什么好解释和介绍的。
5）生成HTML发布到web上、生成CHM分发给其他团队成员、建立Axure协作共享、…. 友情提示：
a）使用Axure汉化版本会让你使用更轻松，虽然汉化的还不是非常完全，但是对于英文不好的同学来说已经是莫大的帮助了，向汉化的平生一笑同学致敬！
b）如果看Axure官方的使用说明很费劲，可以参考目前陈良泳同学翻译的快速原型设计，翻译质量很不错！
c）从Axure5开始，可以创建自己的组建库和导入别人做好的组建库了，官方提供了一套雅虎的组件，个人觉得已经完全够用了。
d）模块和组件是2个完全不同的概念，模块的后缀是.rp而组件的后缀是.rplib。模块和组件之间是可以相互转化的，你可以利用组件去创建一些自己常用的模块如网站头部、底部等；你也可以把模块里的内容分拆成组件单个使用。
e）在生成chm格式的时候页面名称不要使用中文，中文名称的页面在chm里会显示成乱码。
Axure使用介绍文档 目录 一、Axure rp 的界面 (2) 二、Axure rp的线框图元件 (3) 三、Axure rp的元件触发事件 (4) 四、Axure rp的条件生成 (6) 五、系统函数与变量 (8) 六、动态面板的使用 (14) 七、母版的使用 (20) 八、中继器的使用 (28)
一、Axure rp 的界面 （界面显示各个区域可在主菜单工具栏-视图中找到） 1、菜单工具栏：同大部分软件类似，可选择Axure各个功能的工具区。 2、操作界面：绘制产品的操作区，所有元件、部件可拖与此区域操作。 3、站点地图：页面文件存放区域，可增加、删除、修改、查看页面；可设置页面级别。 4、元件库（部件库）：主要分为流程图和线框图；可拖动元件库里的元件到操作界面进行产品绘制；为提高效率，元件库也可自行导入已经可使用的元件。 5、母版：母版的使用主要针对于顶部导航、底部导航，多个页面中重复出现的元素，可先绘制与母版中，再拖动到需使用的页面（比起重复操作，修改扩展行也更强）。 6、页面属性：可设置当前页面的注释、交互、与样式。 7、元件交互与注释：可对操作页面中用到的元件或元件与元件之间的交互事件进行设置（如动态面板显示与隐藏、鼠标点击事件、鼠标移入移出事件等）。8、元件属性和样式：可设置选中元件的基本样式与属性。
9、部件管理（动态面板管理）：该区域可对已设置的动态面板状态进行操作，可添加、删除、进行排序，也可双击动态面板进入编辑。 二、Axure rp的线框图元件 1、图片：图片元件拖入编辑时，可双击载入本地磁盘的图片，载入图片是Axure 会自动提示将大图进行优化，避免原型文件过大；载入的图片可以选择原图大小也可以保持元件大小。 2、文本：标题1、标题2、单行文本、多行文本都属于文本类型的元件，在网页中的名称为lable，主要用于文字描述、文本链接等功能 3、矩形：矩形可用作背景、按钮等元件使用；双击矩形可输入文本；拖入矩形时默认是直角矩形，可通过左右拖动左上角的黄色小三角来改变圆角半径；也可通过右键选择形状来改变当前形状。 4、占位符：顾名思义，主要用于替代一些没有交互或交互比较简单的区域。
Axure交互原型设计：动态面板之弹出对话框Axure交互原型设计:动态面板之弹出对话 框 动态面板的功能很强大，了解了动态面板的原理，便可以运用自如。在目前的工作中，我把经常使用动态面板制作的交互总结了一下，希望与大家讨论并分享。 动态面板在交互中常常用在: 使用动态面板制作轮播图。 () 使用动态面板制作tab页面切换。() 使用动态面板制作弹出对话框。 使用动态面板…… 为了好理解，我使用员工信息维护时禁用某员工作为例子。该例子中还涉及到全局变量的使用。 期望效果: 单击禁用时候，弹出禁用原因选择的对话框。 选择原因提交后，弹框消失。 列表中的状态变从“在职”变为“禁用”，操作中的按钮“禁用”变为按钮“撤销禁用”。(全局变量的使用)
制作步骤 制作一个列表，可用矩形来做。 在列表下方制作添加一个动态面板，大小为希望显示的弹框的大小。 为该动态面板添加名称:jinyong。 添加状态State1的页面内容。 将动态面板初始设为隐藏。
添加交互。 1)单击“禁用”按钮的时候弹出jinyong的动态面板。 2)单击对话框中的“提交”，隐藏jinyong的动态面板。
3)单击对话框中的“取消”，隐藏jinyong的动态面板。(同2)“提交”的交互) 4)以下为使用变量的步骤。 添加一个全局变量A(以下为添加变量，运用变量的 步骤)
5)为以下2个矩形命名。
6)当点击“禁用”按钮弹出“jinyong”动态面板，点击提 交后，设置变量A=1，且重新刷新当前页面。 7)加载页面时，设置条件:变量A=1，则列表中的状态变从“在职”变为“禁用”，操作中的按钮“禁用”变为按钮“撤销禁用”，具体的交互如下图设置。
Axure动态面板的使用 1、什么是Axure的动态面板 按照Axure官方网站的解释：动态面板控件（Dynamic Panel）可以让你实现高级的交互功能，实现原型的高保真度。动态面板包含有多个状态（states），每个状态可包含一系列控件（你可以把一个状态理解成一个独立的页面）。任何时候都只有一个状态（页面）是可见的，或整个动态面板可以被隐藏。结合交互动作，可以让动态面板的状态进行隐藏、显示和改变。像添加其它控件一样，可以在控件面板中拖放动态面板控件到线框图中。 简单的说，动态面板就是展示在页面不跳转的情况下所能实现的交互状态。而动态面板的每一个状态都可以看作是产生的一个新的交互结果。 2、Axure的动态面板可以用来做什么 1）tab式页签的切换效果：Axure的官方给出的实例就是这个，AlipayUED的同学按照官方给出的做法制作了一个3tab的原型，不愿看英文说明的同学可以直接参照这篇博客。 2）鼠标触发式和点击触发式的下拉菜单效果：这个可以结合Axure的默认组件中的“垂直菜单”、“水平菜单”来实现，常用于导航的原型制作。 3）鼠标触发式的浮窗效果：类似“Alt”的效果，常用于浏览提示和触发式广告。 4）JS的鼠标点击弹层效果：这个是目前使用被广泛使用的效果之一。 5）注册表单中的根据焦点判断提示的效果：当焦点在输入框内的时候提示该表单栏目填写规范，当焦点离开输入框的时候根据填写的结果提示正确或者错误原因，这个需要动用高级设计交互编辑功能结合Axure的逻辑条件和设置变量功能来实现。 ….and so on… 3、如何使用Axure的动态面板 1）动态面板属于Axure的一个组件，在组件栏中选中它，直接拖到你希望它出现的位置。不用担心，即使在添加完状态之后它的位置也是可以随时改变的。 2）在动态面板上点击右键——编辑动态面板——管理动态面板状态。在弹出的窗口里输入动态面板的标签名称（默认是Unlabeled）、添加新的状态。当然，也可以在界面的右下角找到“动态面板管理”模块来对动态面板进行操作。 友情提示： a）默认的动态面板的状态是显示（蓝色），我们可以把他设置成隐藏（黄色）。 b）状态页面中的蓝色虚线外框表示动态面板的边界范围，超过这个边界范围外的内容在最终生成原型时将不可见。 c）为了不影响其他交互的制作，可以点击“动态面板管理”模块右侧的淡蓝色小方块在隐藏或显示之间切换。或者，你可以在顶部的页面名称（如Home）上点击鼠标右键，选择右键菜单全部隐藏或全部显示，可以隐藏或显示页面中所有的动态面板。 3）双击添加完的动态面板状态（State1、2、…），会在Axure的工作区打开一个新标签。现在，把这个新标签当作是一个全新的页面来设计就OK了，不过，记住不要超过蓝色虚线外框。 4）给动态面板添加交互。Axure5.5中常用在动态面板上的交互行为包括：Set Panel state to State（设置动态面板的状态切换）、Show Panel（显示动态面板）、Hide Panel（隐藏动态面板）、Toggle Visibility for Panel（切换动态面板可见属性）、Move Panel（移动动态面板到一个
（一）Axure rp的界面 1-主菜单工具栏：大部分类似office软件，不做详细解释，鼠标移到按钮上都有对应的提示。 2-主操作界面：绘制产品原型的操作区域，所有的用到的元件都拖到该区域。3-站点地图：所有页面文件都存放在这个位置，可以在这里增加、删除、修改、查看页面，也可以通过鼠标拖动调整页面顺序以及页面之间的关系。 4-axure元件库：或者叫axure组件库、axure部件库，所有软件自带的元件和加载的元件库都在这里，这里可以执行创建、加载、删除axure元件库的操作，也可以根据需求显示全部元件或某一元件库的元件。
5-母版管理：这里可以创建、删除、像页面头部、导航栏这种出现在每一个页面的元素，可以绘制在母版里面，然后加载到需要显示的页面，这样在制作页面时就不用再重复这些操作。 6-页面属性：这里可以设置当前页面的样式，添加与该页面有关的注释，以及设置页面加载时触发的事件onpageload。 7-元件属性：这里可以设置选中元件的标签、样式，添加与该元件有关的注释，以及设置页面加载时触发的事件； A-交互事件:元件属性区域闪电样式的小图标代表交互事件； B-元件注释：交互事件左面的图标是用来添加元件注释的，在这里我们能够添加一些元件限定条件的注释，比如：文本框的话，可以添加注释指出输入字符长度不能超过20。 C-元件样式：交互事件右侧的图标是用来设置元件样式的，可以在这里更改原件的字体、尺寸、旋转角度等，当然也可以进行多个元件的对齐、组合等设置。 8 动态面板：这个是很重要的区域，在这里可以添加、删除动态面板的状态，以及状态的排序，也可以在这里设置动态面板的标签；当绘制原型动态面板被覆盖时，我们可以在这里通过点击选中相应的动态面板，也可以双击状态进入编辑。Axure rp的界面就介绍到这里，界面中的各个区域基本上在做产品原型的过程中，使用都很频繁，所以建议不要关闭任何一个区域。如果不小心关闭了，可以通过主菜单工具栏—视图—重置视图来找回。
小楼axure教程 （五）动态面板的用途 小楼一夜听春语分类: Axure教程发布时间: 2013-07-09 22:24?61条评论编辑 小楼axure教程 （五）动态面板的用途 写了几个Axure教程之后发现，可能教程的起点有些高了，过分的去讲效果的实现，而忽略了axure功能以及基础元件的使用，那么从这个教程开始，把这些逐渐的展开讲解。 关于动态面板 动态面板是axure原型制作中使用非常频繁的一个元件，主要用途就是实现一些动态的交互效果。所以，如果动态面板使用不熟悉的话，对axure原型的制作会有很大的影响，那么动态面板都能做什么呢？主要有以下几个方面： 1、隐藏与显示 2、滑动效果 3、拖动效果 4、多状态效果 以上这些效果都在移动面板的元件属性里面体现。那通过这几个属性都能实现什么样的功能呢？简单的举几个例子。 1、显示隐藏效果 我们经常在做原型的时候，需要点击按钮后出现一些界面上没有的元素，比如：
登录功能在不填写用户名时点击登录按钮，显示出要求用户填写用户名的提示。 情景B： 当我们需要在用户的某一个操作时，弹出一个提示框。当用户点击提示框的确定按钮时提示框消失。 诸如以上情景都需要用到动态面板的显示隐藏效果。 动态面板初始状态是隐藏还是显示，可以通过右键单击动态面板—编辑选项—设为显示（或）设为隐藏来实现。 2、动态面板的滑动效果 与显示隐藏效果不同，动态面板的滑动效果一般是通过其他交互事件来激发的，可能是点击某个按钮，也可能是页面加载时实现。比如： 情景A： 情景B： 点击登录按钮，登录面板的弹出收起效果。 一般滑动效果都需要有复杂的激发过程，比如通过页面的onpageload事件。现在，在此不做过多讲解，以后通过案例来进行介绍，则更易懂一些。 3、动态面板的拖动效果 动态面板的拖动效果，对于移动互联网产品原型来说是必须的，主要用于APP的产品原型。用来实现面板被拖动时产生的一些效果。 情景A： 手机的滑动解锁功能。
如何用Axure制作Tab页签 1、什么是Axure的动态面板 按照Axure官方网站的解释：动态面板控件（Dynamic Panel）可以让你实现高级的交互功能，实现原型的高保真度。动态面板包含有多个状态（states），每个状态可包含一系列控件（你可以把一个状态理解成一个独立的页面）。任何时候都只有一个状态（页面）是可见的，或整个动态面板可以被隐藏。结合交互动作，可以让动态面板的状态进行隐藏、显示和改变。像添加其它控件一样，可以在控件面板中拖放动态面板控件到线框图中。 简单的说，动态面板就是展示在页面不跳转的情况下所能实现的交互状态。而动态面板的每一个状态都可以看作是产生的一个新的交互结果。 2、Axure的动态面板可以用来做什么 1）tab式页签的切换效果：Axure的官方给出的实例就是这个，AlipayUED的同学按照官方给出的做法制作了一个3tab的原型，不愿看英文说明的同学可以直接参照这篇博客。 2）鼠标触发式和点击触发式的下拉菜单效果：这个可以结合Axure的默认组件中的“垂直菜单”、“水平菜单”来实现，常用于导航的原型制作。 3）鼠标触发式的浮窗效果：类似“Alt”的效果，常用于浏览提示和触发式广告。 4）JS的鼠标点击弹层效果：这个是目前使用被广泛使用的效果之一。
5）注册表单中的根据焦点判断提示的效果：当焦点在输入框内的时候提示该表单栏目填写规范，当焦点离开输入框的时候根据填写的结果提示正确或者错误原因，这个需要动用高级设计交互编辑功能结合Axure的逻辑条件和设置变量功能来实现。 ….and so on… 3、如何使用Axure的动态面板 1）动态面板属于Axure的一个组件，在组件栏中选中它，直接拖到你希望它出现的位置。不用担心，即使在添加完状态之后它的位置也是可以随时改变的。 2）在动态面板上点击右键——编辑动态面板——管理动态面板状态。在弹出的窗口里输入动态面板的标签名称（默认是Unlabeled）、添加新的状态。当然，也可以在界面的右下角找到“动态面板管理”模块来对动态面板进行操作。 友情提示： a）默认的动态面板的状态是显示（蓝色），我们可以把他设置成隐藏（黄色）。 b）状态页面中的蓝色虚线外框表示动态面板的边界范围，超过这个边界范围外的内容在最终生成原型时将不可见。 c）为了不影响其他交互的制作，可以点击“动态面板管理”模块右侧的淡蓝色小方块在隐藏或显示之间切换。或者，你可以在顶部的页面名称（如Home）上点击鼠标右键，选择右键菜单全部隐藏或全部显示，可以隐藏或显示页面中所有的动态面板。
·页面载入时（OnPageLoad）：当页面启动加载时。 ·窗口改变大小时（OnWindowResize）：当浏览器窗口大小改变时。 ·窗口滚动时（OnWindowScroll）：当浏览器窗口滚动时。 ·鼠标单击时（OnClick）：页面中的任何部件被点击时（不含空白处）。·鼠标双击时（OnDoubleClick）：当页面中的任何部件被双击时（不含 空白处）。 ·鼠标右键单击时（OnContextMenu）：当页面中的任何部件被鼠标右键点击时（不含空白处）。 ·鼠标移动时（OnMouseMove）：当鼠标在页面任何位置移动时。 ·按键按下时（OnKeyDown）：当键盘上的按键按下时。 ·键弹起时（OnKeyUp）：当键盘上的按键释放时。 自适应视图更改时（OnAdaptiveViewChange）：当自适应视图更改时。 部件事件： ·鼠标单击时（OnClick）：当部件被点击。 ·鼠标移入时（OnMouseEnter）：当光标移入部件范围。 ·鼠标移出时（OnMouseOut）：当光标移出部件范围。 ·鼠标双击时（OnDoubleClick）：当时鼠标双击时。 ·鼠标右键单击时（OnContextMenu）：当鼠标右键点击时。 ·鼠标按键按下时（OnMouseDown）：当鼠标按下且没有释放时。 ·鼠标按键释放时（OnMouseUp）：当一个部件被鼠标点击 , 这个事件由 鼠标按键释放触发。 ·鼠标移动时（OnMouseMove）：当光标在一个部件上移动时。 ·鼠标悬停超过 2 秒时（OnMouseHover）：当光标在一个部件上悬停超
·鼠标点击并保持超过 2 秒时（OnLongClick）：当一个部件被点击并且 鼠标按键保持超过 2 秒时。 ·按键按下时（OnKeyDown）：当键盘上的键按下时。 ·按键弹起时（OnKeyUp）：当键盘上的键弹起时。 ·移动（OnMove）：当面板移动时。 ·显示（OnShow）：当面板通过交互动作显示时。 ·隐藏（OnHide）：当面板通过交互动作隐藏时。 ·获取焦点（OnFocus）：当一个表单获取焦点时。 ·失去焦点时（OnLostFocus）：当一个部件失去焦点时。 ·选项改变时（OnSelectionChange）：当一个下拉列表被选中时 , 这是 条件的典型应用。 ·选中状态改变时（OnCheckedChange）：当复选框或单选按钮被选中时。·文字改变时（OnTextChange）：当单行文本框或多行文本框中的文字 被添加或删除时。 ·动态面板状态改变时（OnPanelStateChange）：当动态面板被设置了“设置面板状态”动作时。 ·开始拖动时（OnDragStart）：当一个拖动动作开始时。 ·正在拖动时（OnDrag）：当一个动态面板正在被拖动时。 ·结束拖动时（OnDragDrop）：当一个拖动动作结束时。 ·向左拖动结束时（OnSwipeLeft）：当一个面板向左拖动结束时。 ·向右拖动结束时（OnSwipeRight）：当一个面板向右拖动结束时。 ·载入时（OnLoad）：当动态面板从一个页面的加载中载入时。
实例一：鼠标悬停时改变文字颜色和背景颜色 1. 选中带文本的矩形如图，点击交互样式面板中的“鼠标悬停”，弹出“设置交互样式”对话框； 2. 选中“字体颜色”和“颜色填充”，随便选两种颜色，点击确定；
3. 点击预览，效果如下： 总结：交互样式触发的事件类型只有四个，控制的元件属性也比较少，知道它能在哪些情况下改变哪些样式就够了。 第二分钟：理解交互 交互：在由触发一个或多个事件而产生的某一场景内做出相应动作产生相应效果的过程。相当于广义化的交互样式，但不能代替交互样式，因为部分功能“如改变组件内文字的颜色等”只能通过交互样式来实现。在Axure 8.0中的面板如下： 实例二：鼠标悬停时改变文字内容（该效果无法通过上述交互样式实现） 1. 选中文本标签如图，双击交互面板中的“鼠标移入时”，弹出“设置交互样式”对话框；
2. 依次点击“设置文本”，选择要设置文本的元件，编辑文本为“已触碰”，并点击确认，如图： 3. 回到工作窗口中，双击交互面板中的“鼠标移出时”，与步骤２一样依次点击“设置文本”，选择要设置文本的元件，编辑文本为“未触碰”，并点击确认； 4. 点击预览，效果如下： 总结：交互的触发事件和动作效果比较繁杂，其中涉及不少与变量相关的问题，这个也视项目的复杂程度而定。交互很多情况下是在控制其他元件的变化，这是与交互样式最大的不同之处。 第三分钟：掌握交互联动（1） 交互样式与交互样式联动：两个元件中，在一个元件的交互样式产生效果的同时另一个元件的交互
样式也随之产生效果 实例三：在实例１的基础上完成有断层的悬停效果 1. 在实例一中的矩形上叠加一个灰色带状的矩形如图： 2. 我们想要实现当鼠标悬停在大矩形的同时小矩形的填充色由灰色变成白色，这需要用到交互样式，所以我们按照实例一的方法设置好交互样式后，效果如下，可以看到当大矩形变蓝后小矩形还是灰色的： 3. 这时我们需要在两个矩形之间建立交互样式联动，那么我们将二者组合起来，并在组合上右键，点击“允许触发鼠标交互”； 4. 点击预览，效果如下，可以看到二者已完美同步：
步骤一：打开Axure，为了更加形象我直接利用图片来制作，加入原型基本内容元素。 步骤二：加入弹出框，在这里我还是使用图片来制作（正常情况下可以用矩形工具在制作，原理都是一样的），鼠标右击：《转换》—《转换为动态面板》。 步骤三：因为该动态面板是需要点击后弹出显示，因此我们需要在默认情况下把它设置为隐藏，在转换为动态面板以后我们再次选中后鼠标右击《编辑动态面板》—《设为隐藏》。这时你会发现该动态面板就会被隐藏了，此时的隐藏不是完全意义上的隐藏，为了方便使用软件默认在其位置上显示成为一个背景色为黄色的透明图层。 步骤四：一个页面中可能会出现多个动态面板，因此我们可以将它命名，方便我们使用时方便辨认。命名的方式也很简单选中双击黄色透明区域在《动态面板标签》后的输入框内填写标签名称。（此步骤同样可以在步骤二结束后进行操作）。 步骤五：做好以上的准备工作以后就需要将按钮和动态面板关联起来因此该步骤也最为重要，该步骤总共分为六个小步骤。第一步：选中（鼠标左键点击一下）点击弹出事件的触发元素，这里当然就是如下图中的“点我就弹出”的按钮了，第二步：在Axure右边的工具栏上找到交互一栏，点击OnClick（其实这个就是一个鼠标点击的触发事件。如果需要实现弹出后再点击按钮关闭弹出框的操作话直接点击交互下面的添加事件），第三步：在弹出框中选中《显示动态面板》，第四步：点击下面的“Show Panel”，第五步：勾选我们刚才命名的动态面板，第六步：点击确定按
钮完成操作。 总结，至此我们就完成了添加动态面板的交互操作，是不是很简单，简简单单的增加互动元素会让你在演示原型的时候给观看者带去生动的演示，还等什么赶紧一起来试一下吧。如有有更为简单的地方欢迎大家在评论处补充。
一、画原型前的准备工作 1.自建元件库 ?元件库作用 ●多人协作时使用同一元件库，可以保证风格一致 ●可以将除Axure自带以外的元件引入进来，以方便使用 ?元件库的创建及使用 ●在元件处可以创建元件库和载入元件库 ●页面名称为元件名称 ●文件名称为元件组名称 上图为：编辑元件库的界面
上图为：载入元件库后的界面 注：将元件库放到Axure的Library目录下并载入后，下次打开Axure会自动加载，放置到其他目录下需要每次手动载入才可以，所以大家需要将元件库的文件放置如下图所示目录下 2.控制好大框架母版的尺寸，建议尺寸1024*768 3.当有新项目需要画原型时可都在“基版.rp”上面进行设计，原因如下： ●“基版.rp”上维护了“修改日志”、“版本说明”等界面可以直接完善 ●“基版.rp”上配置了html、word的生成规则，可直接使用 ●“基版.rp”上配置了项目菜单下的页面样式和元件样式，可直接使用 ●“基版.rp”上配置了页面说明字段和元件说明字段，可以直接使用 二、基础元件注意事项 1.对于隐藏的元件，在需要显示时注意添加一条置于顶层的用例， 置顶有三种方法
1)添加显示用例时有置顶效果 2)有单独的置于顶层和置于底层用例 3)对于一些隐藏的弹出框，可以设置固定到浏览器中，设置固定到浏览器的操作中右下角有“始终保持顶层<仅限于浏览器中>”勾选后可以保证隐藏的元件在显示时始终处于置于顶层状态 2.对于一些不需要移动的元件可以将其锁定，以免移动其他元件时将不需要移动的移动了 3.一些公用的界面，如选择器弹出框，可以不用动态面板，直接画成界面，然后在浏览器的弹出窗口中打开。（需要告诉开发弹出效果，程序中应该在层中弹出，不应该在浏览器弹出窗口中打开） 这样做的好处在于：
Axure动态面板的使用 简单的说，动态面板就是展示在页面不跳转的情况下所能实现的交互状态 1、什么是Axure的动态面板 按照Axure官方网站的解释：动态面板控件（Dynamic Panel）可以让你实现高级的交互功能，实现原型的高保真度。动态面板包含有多个状态（states），每个状态可包含一系列控件（你可以把一个状态理解成一个独立的页面）。任何时候都只有一个状态（页面）是可见的，或整个动态面板可以被隐藏。结合交互动作，可以让动态面板的状态进行隐藏、显示和改变。像添加其它控件一样，可以在控件面板中拖放动态面板控件到线框图中。 简单的说，动态面板就是展示在页面不跳转的情况下所能实现的交互状态。而动态面板的每一个状态都可以看作是产生的一个新的交互结果。 2、Axure的动态面板可以用来做什么 1）tab式页签的切换效果：Axure的官方给出的实例就是这个，AlipayUED的同学按照官方给出的做法制作了一个3tab的原型，不愿看英文说明的同学可以直接参照这篇博客。2）鼠标触发式和点击触发式的下拉菜单效果：这个可以结合Axure的默认组件中的“垂直菜单”、“水平菜单”来实现，常用于导航的原型制作。 3）鼠标触发式的浮窗效果：类似“Alt”的效果，常用于浏览提示和触发式广告。 4）JS的鼠标点击弹层效果：这个是目前使用被广泛使用的效果之一。 5）注册表单中的根据焦点判断提示的效果：当焦点在输入框内的时候提示该表单栏目填写规范，当焦点离开输入框的时候根据填写的结果提示正确或者错误原因，这个需要动用高级设计交互编辑功能结合Axure的逻辑条件和设置变量功能来实现。 ….and so on… 3、如何使用Axure的动态面板 1）动态面板属于Axure的一个组件，在组件栏中选中它，直接拖到你希望它出现的位置。不用担心，即使在添加完状态之后它的位置也是可以随时改变的。 2）在动态面板上点击右键——编辑动态面板——管理动态面板状态。在弹出的窗口里输入动态面板的标签名称（默认是Unlabeled）、添加新的状态。当然，也可以在界面的右下角找到“动态面板管理”模块来对动态面板进行操作。 友情提示： a）默认的动态面板的状态是显示（蓝色），我们可以把他设置成隐藏（黄色）。 b）状态页面中的蓝色虚线外框表示动态面板的边界范围，超过这个边界范围外的内容在最终生成原型时将不可见。 c）为了不影响其他交互的制作，可以点击“动态面板管理”模块右侧的淡蓝色小方块在隐藏
小楼axure教程（五）动态面板的用途 作者: 小楼一夜听春语分类: Axure教程发布时间: 2013-07-09 22:24 ?61条评论编辑小楼axure教程（五）动态面板的用途 写了几个Axure教程之后发现，可能教程的起点有些高了，过分的去讲效果的实现，而 忽略了axure功能以及基础元件的使用，那么从这个教程开始，把这些逐渐的展开讲解。 关于动态面板 动态面板是axure原型制作中使用非常频繁的一个元件，主要用途就是实现一些动态的 交互效果。所以，如果动态面板使用不熟悉的话，对axure原型的制作会有很大的影响， 那么动态面板都能做什么呢？主要有以下几个方面： 1、隐藏与显示 2、滑动效果 3、拖动效果 4、多状态效果 以上这些效果都在移动面板的元件属性里面体现。
那通过这几个属性都能实现什么样的功能呢？简单的举几个例子。 1、显示隐藏效果 我们经常在做原型的时候，需要点击按钮后出现一些界面上没有的元素，比如： 情景A：登录功能在不填写用户名时点击登录按钮，显示出要求用户填写用户名的提示。 情景B：当我们需要在用户的某一个操作时，弹出一个提示框。当用户点击提示框的确定按钮时提示框消失。 诸如以上情景都需要用到动态面板的显示隐藏效果。 动态面板初始状态是隐藏还是显示，可以通过右键单击动态面板—编辑选项—设为显示（或）设为隐藏来实现。 2、动态面板的滑动效果 与显示隐藏效果不同，动态面板的滑动效果一般是通过其他交互事件来激发的，可能是点击某个按钮，也可能是页面加载时实现。比如： 情景A：网站上的一些滚动文字的效果。 情景B：点击登录按钮，登录面板的弹出收起效果。 一般滑动效果都需要有复杂的激发过程，比如通过页面的onpageload事件。现在，在此不做过多讲解，以后通过案例来进行介绍，则更易懂一些。 3、动态面板的拖动效果 动态面板的拖动效果，对于移动互联网产品原型来说是必须的，主要用于APP的产品原型。用来实现面板被拖动时产生的一些效果。 情景A：手机的滑动解锁功能。 情景B：手机页面的纵向浏览功能。 情景C：手机页面的横向换页功能。
AxureRP8使用技巧 定制搜索输入框 制作搜索框/输入框的下拉列表跟随提示，分三种形式。 案例一：搜索框/输入框一 案例二：搜索框/输入框二 案例三：搜索框/输入框三 一为基础，案例三以案例二为基础。 1、通过中继器的数据管理功能，在中继器显示前添加筛选动作，然后加载筛选出的各项。 注：在数据集添加数据列“SearchOption”。 2、在中继器数据集页面，添加数据列和数据。 3、在中继器数据集页面，在矩形框中，设置或增加显示数据列的元件（如文本标签、矩形、图片等）及名称。 4、回到主页面，添加中继器的交互事件，在“每项加载时”事件中，针对各数据列对应的元件设置文字显示。 5、在文本输入框元件为中继器“添加筛选”： 选中文本输入框，选择交互事件“文本改变时”，在添加动作中选择中继器的“添加筛选”，然后在配置动作中选择中继器，设置动作条件。 最后编辑条件，也就是中继器的筛选要求，将符合条件的数据项选出。使用字符串函数indexOf判断中继器的数据项是否包含文本框中的数据，如 [[Item.SearchOption.indexOf(LVAR1)>=0]]其中LVAR1是为文本输入框的文字设置
的局部变量。 1.搜索框/输入框一 方法与步骤： 1、从元件库拖入【文本框】和【中继器】，将【中继器】设置为“隐藏”。
2、选中【中继器】，在属性中设置名称（Name）为“RPL_SearchOption“。如下图。 说明：此处【中继器】中的数据为步骤3中设置的数据集，【中继器】初始状态为空。 3、双击【中继器】，进入中继器配置页面。在“数据集”中将第1列改名为“SearchOption”，并添加数据行。如下图。设置完成后，可以调整矩形框长、宽，返回原页面查看效果和调整元件位置。
第4章用Axure动态面板制作动态效果 动态面板元件是一个动态的、由面板组成的元件。它可以让原型呈现动态的效果，而不是沉闷的静态页面，并且它能实现软件的高级交互效果。 动态面板元件是Axure模拟很多动态效果的主要工具，如要模拟淘宝的广告轮播，可以将几张图摞在一起，轮流移动到最上面来显示，单击一个圈，就把对应的图，移动到最上面。 动态面板模拟海报轮播效果 4.1 动态面板的使用 动态面板元件里包含多种状态，可以把动态面板理解为装载这些状态的容器。 我们在上学的时候，经常把作业本摞成一摞，只能看到最上面一本的封面。这一摞作业本就是动态面板，每本作业就是动态面板中的一个状态，只有最上面的一个状态是可见的，其他状态都是隐藏的。动态面板的图标形象地表达动态面板元件的功能。
作业本和动态面板图标 下面就以学生作业本为例，来学习动态面板的使用。 4.1.1 创建动态面板并命名 （1）打开Axure RP 9软件，将工程保存并命名为“动态面板演示操作”，拖曳一个“动态面板”到工作区域。 拖曳动态面板 （2）在检视区域的说明面板输入动态面板的名称“一摞作业本”，这样方便完成对动态面板元件的查找。 动态面板名称 4.1.2 编辑动态面板状态 小明的作业本 小刚的作业本 小虎的作业本 状态（State ）1 状态（State ）2 状态（State ）3 实战演练 实战演练
（1）双击动态面板，弹出动态面板编辑框，它默认提供一种状态State1（State为动态面板默认的状态名称），就像一摞作业本里至少有一个作业本，一个动态面板至少有一种状态。 动态面板名称 （2）单击State1状态，弹出动态面板状态管理对话框，在这里可以添加动态面板状态、复制面板状态以及删除面板状态。 动态面板状态管理 （3）单击添加状态选项，可以新增一个动态面板的状态，单击相应状态名称就可以对状态重新命名，把两个状态分别命名为“小明的作业本”和“小刚的作业本”。
【剖析Axure】中继器+动态面板，制作带搜索功能的下拉框 （制作好之后可以放入自己的组件库，工作时直接使用） 前言：中继器及动态面板的使用，前面的课程里有单独的教程专门来介绍，还不会的学员可到我的主页中查看学习，本课教程需要有这两个元件的使用基础。 在Axure自带的元件库中，下拉列表框或文本输入框都是简单的功能，适合做无交互的界面或线框图，如果要做高保真，复杂的功能则需要自己重新设计，比如：模糊搜索，多级关联。本文就分享一下模糊搜索功能的下拉框或文本框的制作。 制作的实例为：通过在文本框中输入搜索关键字，从下拉列表搜出想要的省份，并选择。 一、原理剖析 其实原理非常简单，需要用到中继器，为中继器设置相应的字段，然后再使用indexof 函数，这个函数在讲中继器的时候有介绍他的作用及用法，这里再引用一下：[[https://www.doczj.com/doc/9b182558.html,.indexOf(key)>-1||Item.xiaoxie.indexOf(key)>-1||Item.daxie.indexOf(key)>-1]]，赋予变量key的值为搜索文本框这个元件输入的内容，https://www.doczj.com/doc/9b182558.html,.indexOf(key)>-1，代表key的值在name这个字段中存在的位置，第一个字的位置是0，如果存在则返回该位置的值，一定是≥0的，不存在则为-1，因此这句话如果＞-1成立的话（写成≥0也可以），就能搜索出来，第二句和第三句的意思一样的，中间两竖的运算符“||”代表“或”的意思，整句代码就代表：搜索框输入的内容只要在这三个字段中有一个成立就能搜索并选取出来。 二、设计步骤 Step1：所需元件的位置及尺寸的排列布局 需要用到的元件其实就两个：文本框和中继器。如果需要制作更高保真的效果，可对文本框进行自定义，然后选项比较多的话可以通过动态面板，设置显示垂直滚动栏的方式控制选项展示的高度。 文本框和中继器的布局采用上下排列即可，为了美观，设置两者的宽度相同。记得为元件取名。 Step2：设置中继器的基本单元 在介绍中继器的时候提到，中继器最后展示的结果是由基本单元通过垂直及水平重复来实现的。这里的基本单元只要一个矩形元件即可，用于记录身份名字。也可以再加一个文字标签元件，用于记录该省份的拼音首字母，放好位置并设置好字体大小及颜色，
小楼axure教程（五）动态面板的用途小楼一夜听春语分类： Axure教程发布时间： 2013-07-09 22： 24?61条评论编辑小楼axure教程（五）动态面板的用途写了几个Axure教程之后发现，可能教程的起点有些高了，过分的去讲效果的实现，而忽略了axure功能以及基础元件的使用，那么从这个教程开始，把这些逐渐的展开讲解。 关于动态面板是axure原型制作中使用非常频繁的一个元件，主要用途就是实现一些动态的交互效果。 所以，如果动态面板使用不熟悉的话，对axure原型的制作会有很大的影响，那么动态面板都能做什么呢？主要有以下几个方面： 1、隐藏与显示 2、滑动效果 3、拖动效果 4、多状态效果以上这些效果都在移动面板的元件属性里面体现。 那通过这几个属性都能实现什么样的功能呢？简单的举几个例子。 1、显示隐藏效果我们经常在做原型的时候，需要点击按钮后出现一些界面上没有的元素，比如： 情景A： 登录功能在不填写用户名时点击登录按钮，显示出要求用户填写用户名的提示。 情景B：
当我们需要在用户的某一个操作时，弹出一个提示框。 当用户点击提示框的确定按钮时提示框消失。 诸如以上情景都需要用到动态面板的显示隐藏效果。 动态面板初始状态是隐藏还是显示，可以通过右键单击动态面板—编辑选项—设为显示（或）设为隐藏来实现。 2、动态面板的滑动效果与显示隐藏效果不同，动态面板的滑动效果一般是通过其他交互事件来激发的，可能是点击某个按钮，也可能是页面加载时实现。 比如： 情景A： 网站上的一些滚动文字的效果。 情景B： 点击登录按钮，登录面板的弹出收起效果。 一般滑动效果都需要有复杂的激发过程，比如通过页面的onpageload事件。 现在，在此不做过多讲解，以后通过案例来进行介绍，则更易懂一些。 3、动态面板的拖动效果，对于移动互联网产品原型来说是必须的，主要用于APP的产品原型。 用来实现面板被拖动时产生的一些效果。 情景A： 手机的滑动解锁功能。 情景B：