小楼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：手机页面的横向换页功能。
……
动态面板拖动的作用非常重要，结合与之有关的系统自带变量能做出各种各样的效果。
比如，axure本身是没有随机数功能的，但是在拖动动态面板的时候，是可以实现随机数的功能的，这个将在之后的随机骰子案例中详细介绍，当然如果你axure的使用经验相对丰富，现在可以去小楼元件中下载随机色子元件进行参考。
4、多状态效果
动态面板的多状态效果，是在网站原型中应用非常普遍的，太大大减少了动态面板的数量。比如：隐藏一个面板，显示另外一个动态面板的效果，就可以用统一个动态面板的不同状态来实现；还有动态面板的滑进滑出效果有时也可以通过状态更换来实现，比如：小楼axurerp教程（四）动态面板滑动效果，就是分别用动态面板滑动与动态面板状态切换来实现的。在网页的原型中选项卡效果也可以通过动态面板状态切换来实现。
动态面板的不同状态还能实现图片轮播效果、图形转动效果等。
在axure中可以把元件或多个元件转换成动态面板，其实是把这些元件放在了一个动态面板的状态1里面，也就是说动态面板其实是一个多层的容器，容器的每一层可以包含多个元件。
我们可以在动态面板管理器中（软件界面的右下角，没有的话在导航栏-视图选项中勾选）去给动态面板添加多个状态，同时能够调整这些状态的顺序，来达到不同的显示效果。动态面板默认显示动态面板管理器中最上面的那个状态。
动态面板的介绍先到这里，在之后的教程里，我们再去慢慢的熟悉它的用法和特点。
Axure8.0基础教程手册 目录 基础1.添加元件到画布 ------------------------------------------------------------------------------- 4 基础2.添加元件名称 ---------------------------------------------------------------------------------- 4 基础3.设置元件位置/尺寸--------------------------------------------------------------------------- 5 基础4.设置元件默认角度 ---------------------------------------------------------------------------- 6 基础5.设置元件颜色与透明 ------------------------------------------------------------------------- 6 基础6.设置形状或图片圆角 ------------------------------------------------------------------------- 7 基础7.设置矩形仅显示部分边框 ------------------------------------------------------------------- 7 基础8.设置线段/箭头/边框样式 ------------------------------------------------------------------- 8 基础9.设置元件文字边距/行距 --------------------------------------------------------------------- 8 基础10.设置元件默认隐藏 -------------------------------------------------------------------------- 9 基础11.设置文本框输入为密码 -------------------------------------------------------------------- 9 基础12.设置打开选择文件窗口 ------------------------------------------------------------------ 10 基础13.限制文本框输入字符位数 --------------------------------------------------------------- 11 基础14.设置文本框提示文字 --------------------------------------------------------------------- 11 基础15.设置文本框回车触发事件 --------------------------------------------------------------- 11 基础16.设置鼠标移入元件时的提示------------------------------------------------------------- 12 基础17.设置矩形为其他形状 --------------------------------------------------------------------- 12 基础18.设置自定义形状 --------------------------------------------------------------------------- 13 基础19.设置形状水平/垂直翻转 ----------------------------------------------------------------- 14 基础20.设置列表框的内容 ------------------------------------------------------------------------ 14 基础21.设置元件默认选中/禁用 ----------------------------------------------------------------- 14 基础22.设置单选按钮唯一选中 ------------------------------------------------------------------ 15
Axure RP 8.0函数大全Axure函数手册用法及说明Axure RP 8.0函数大全是根据小楼老师的《Axure RP 8 函数速查表》整理而来，方便大家查询。这些函数不用去记，大概了解他们的用途即可。需要的时候再来查一下就可以了。 在做课件的时候，将所有的函数用途和参数注解，整理了一份表格资料。后来，觉得这个东西挺有用，所以，分享给大家当做参考资料。 函数能够提高原型的制作效率，但也容易导致画蛇添足。如果是单纯的学习，建议通过一些有趣味的原型，多加锻炼使用。这样在实际应用中，才能够手到拈来，随心所欲。如果是用于工作，在不熟悉函数使用的情况下，尽量避免纠结于某个函数的使用，以免影响工作效率，得不偿失。扎实学习，灵活使用。这句话不仅适用于函数，也适用于Axure以及其他的任何工具。 Axure函数的基本语法 在axure交互设计时，函数可以用在条件公式和需要赋值的地方，其基本语法是用双方括号包含，变量值和函数用英文句号连接。 例如：[[LVAR. Width]] 表示变量LVAR的宽度。 [[This. Width]] 当前元件的宽度 元件函数 This用途：获取当前元件对象。当前元件是指当前添加交互动作的元件。 Target用途：获取目标元件对象。目标元件是指当前交互动作控制的元件。 x用途：获取元件对象的X轴坐标值。
y用途：获取元件对象的Y轴坐标值。 width用途：获取元件对象的宽度值。 height用途：获取元件对象的高度值。 scrollX用途：获取元件对象的水平滚动距离（当前仅限动态面板）。scrollY用途：获取元件对象的垂直滚动距离（当前仅限动态面板）。text用途：获取元件对象的文本文字。 name用途：获取元件对象的自定义名称。 top用途：获取元件对象的上边界坐标值。 left用途：获取元件对象的左边界坐标值。 right用途：获取元件对象的右边界坐标值。 bottom用途：获取元件对象的下边界坐标值。 opacity用途：获取元件对象的不透明比例。 rotation用途：获取元件对象的旋转角度。 鼠标指针函数 Cursor.x用途：鼠标指针在页面中位置的X轴坐标。 Cursor.y用途：鼠标指针在页面中位置的Y轴坐标。 DragX用途：鼠标指针沿X轴拖动元件时的瞬间(0.01秒)拖动距离。DragY用途：鼠标指针沿Y轴拖动元件时的瞬间(0.01秒)拖动距离。TotalDragX用途：鼠标指针拖动元件从开始到结束的X轴移动距离。TotalDragY用途：鼠标指针拖动元件从开始到结束的Y轴移动距离。DragTime用途：鼠标指针拖动元件从开始到结束的总时长。
小楼axure 图文教程（十六）微信摇一摇效果 作者: 小楼一夜听春语分类:Axure教程发布时间: 2013-07-22 21:43?6没有评论编辑本教程axure原型百度云盘下载：小楼原创原型-微信摇一摇效果 本文出自诉客?产品经理的心声，转载时请注明出处及相应链接。 本来是想借着这个axure原型效果写一下拖动面板后通过变量让其他面板联动的的效果，结果做到一半，想起来，这个联动效果不用拖的，而是移动面板，糗P了。既然做了，就做下去吧，结果又碰到了一个软件的bug。我勒个去！ 说一下这个axure6.5中的bug，就是无论你在动态面板的哪个事件（拖动开始，拖动时，拖动结束）中，只要设置了变量值，那么在这些事件中的内部框架加载页面就会失效。本来简单实现的功能，又不得不在框架上加了一个动态面板状态。 其实在这个效果中，实现方法没什么值得过多说的，不过有些值的我们注意的地方是很有价值的。 先说实现过程： 我的想法是这样的，先说内容页，内容页在主页加载时就要加载到内部框架里，但是不能动，当摇动结束时，重新加载内容页，这时候再让它动。为了实现这个效果就要加个变量作为开关，主页加载时没有变量，这时候加载内容页就可以通过内容页的onloadpage事件判断变量没有值不作任何动作。当摇动结束时，给变量赋值，并且重新加载内容页，这个时候在内容页的onloadpage事件中就能判断变量被赋值，执行动态的效果。 那么过程就应该是在主页放上手机外壳元件，里面放个框架，然后把他们一起转换成动态面板，在打开主页时，就把摇一摇的界面加载到框架里，在拖动这个动态面板时，让面板可以随意拖动（摇一摇），当拖动结束时，给指定的变量复制，并把内容页重新加载到框架。、
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?教程axure??础（1）名词解释： 线框图：一般就是指?产品原型，比如：把线框图尽?快画出来和?把原型尽快?做出来是一?个意思。 axure?元件：也叫axu?re组件或?axure?部件，系统自带了?一部分最基?础常用的，网上也有很?多别人做好?的，软件使用到?一定阶段可?以考虑自己?制作元件，以便提高产?品原型的制?作速度。 生成原型：是指把绘制?好的原型通?过axur? e rp生成静?态的htm?l页面，检查原型是?否正确，同时，方便演示。建议生成时?选择用谷歌?浏览器打开?（第一次会有?提示安装相?关插件），ie会每次?都有安全提?示，不如谷歌浏?览器方便。 （一）Axure?rp的界面?
1-主菜单工具?栏：大部分类似?offic?e软件，不做详细解?释，鼠标移到按?钮上都有对?应的提示。 2-主操作界面?：绘制产品原?型的操作区?域，所有的用到?的元件都拖?到该区域。 3-站点地图：所有页面文?件都存放在?这个位置，可以在这里?增加、删除、修改、查看页面，也可以通过?鼠标拖动调?整页面顺序?以及页面之?间的关系。 4-axure?元件库：或者叫ax?ure组件?库、axure?部件库，所有软件自?带的元件和?加载的元件?库都在这里?，这里可以执?行创建、加载、删除axu?re元件库?的操作，也可以根据?需求显示全?部元件或某?一元件库的?元件。 5-母版管理：这里可以创?建、删除、像页面头部?、导航栏这种?出现在每一?个页面的元?素，可以绘制在?母版里面，然后加载到?需要显示的?页面，这样在制作?页面时就不?用再重复这?些操作。 6-页面属性：这里可以设?置当前页面?的样式，添加与该页?面有关的注?释，以及设置页?面加载时触?发的事件o?npage?load。 7-元件属性：这里可以设?置选中元件?的标签、样式，添加与该元?件有关的注?释，以及设置页?面加载时触?发的事件； A-交互事件:元件属性区?域闪电样式?的小图标代?表交互事件?；
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新手入门基础 名词解释： 线框图：一般就是指产品原型，比如：把线框图尽快画出来和把原型尽快做出来是一个意思。 axure元件：也叫axure组件或axure部件，系统自带了一部分最基础常用的，网上也有很多别人做好的，软件使用到一定阶段可以考虑自己制作元件，以便提高产品原型的制作速度。 生成原型：是指把绘制好的原型通过axurerp生成静态的html页面，检查原型是否正确，同时，方便演示。建议生成时选择用谷歌浏览器打开（第一次会有提示安装相关插件），ie会每次都有安全提示，不如谷歌浏览器方便。 （一） Axurerp的界面 1-主菜单工具栏：大部分类似office软件，不做详细解释，鼠标移到按钮上都有对应的提示。
2-主操作界面：绘制产品原型的操作区域，所有的用到的元件都拖到该区域。 3-站点地图：所有页面文件都存放在这个位置，可以在这里增加、删除、修改、查看页面，也可以通过鼠标拖动调整页面顺序以及页面之间的关系。 4-axure元件库：或者叫axure组件库、axure部件库，所有软件自带的元件和加载的元件库都在这里，这里可以执行创建、加载、删除axure元件库的操作，也可以根据需求显示全部元件或某一元件库的元件。 5-母版管理：这里可以创建、删除、像页面头部、导航栏这种出现在每一个页面的元素，可以绘制在母版里面，然后加载到需要显示的页面，这样在制作页面时就不用再重复这些操作。 6-页面属性：这里可以设置当前页面的样式，添加与该页面有关的注释，以及设置页面加载时触发的事件onpageload。 7-元件属性：这里可以设置选中元件的标签、样式，添加与该元件有关的注释，以及设置页面加载时触发的事件； A-交互事件:元件属性区域闪电样式的小图标代表交互事件； B-元件注释：交互事件左面的图标是用来添加元件注释的，在这里我们能够添加一些元件限定条件的注释，比如：文本框的话，可以添加注释指出输入字符长度不能超过20。 C-元件样式：交互事件右侧的图标是用来设置元件样式的，可以在这里更改原件的字体、尺寸、旋转角度等，当然也可以进行多个元件的
（一）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）上点击鼠标右键，选择右键菜单全部隐藏或全部显示，可以隐藏或显示页面中所有的动态面板。
Axure教程 axure新手入门基础（1） 2013-08-19 21:43Nairo分类：原型设计微信二维码 首先做个声明：此次教程里为了快速完成，借用了一些网上已有教程的图文，不是剽窃，只图方便。另外，因为汉化版本可能功能名称等略有差别，请自行理解。 名词解释： 线框图：一般就是指产品原型，比如：把线框图尽快画出来和把原型尽快做出来是一个意思。 axure元件：也叫axure组件或axure部件，系统自带了一部分最基础常用的，网上也有很多别人做好的，软件使用到一定阶段可以考虑自己制作元件，以便提高产品原型的制作速度。 生成原型：是指把绘制好的原型通过axure rp生成静态的html页面，检查原型是否正确，同时，方便演示。建议生成时选择用谷歌浏览器打开（第一次会有提示安装相关插件），ie会每次都有安全提示，不如谷歌浏览器方便。 （一） Axure rp的界面
1-主菜单工具栏：大部分类似office软件，不做详细解释，鼠标移到按钮上都有对应的提示。 2-主操作界面：绘制产品原型的操作区域，所有的用到的元件都拖到该区域。 3-站点地图：所有页面文件都存放在这个位置，可以在这里增加、删除、修改、查看页面，也可以通过鼠标拖动调整页面顺序以及页面之间的关系。 4-axure元件库：或者叫axure组件库、axure部件库，所有软件自带的元件和加载的元件库都在这里，这里可以执行创建、加载、删除axure元件库的操作，也可以根据需求显示全部元件或某一元件库的元件。
5-母版管理：这里可以创建、删除、像页面头部、导航栏这种出现在每一个页面的元素，可以绘制在母版里面，然后加载到需要显示的页面，这样在制作页面时就不用再重复这些操作。 6-页面属性：这里可以设置当前页面的样式，添加与该页面有关的注释，以及设置页面加载时触发的事件onpageload。 7-元件属性：这里可以设置选中元件的标签、样式，添加与该元件有关的注释，以及设置页面加载时触发的事件； A-交互事件:元件属性区域闪电样式的小图标代表交互事件； B-元件注释：交互事件左面的图标是用来添加元件注释的，在这里我们能够添加一些元件限定条件的注释，比如：文本框的话，可以添加注释指出输入字符长度不能超过20。 C-元件样式：交互事件右侧的图标是用来设置元件样式的，可以在这里更改原件的字体、尺寸、旋转角度等，当然也可以进行多个元件的对齐、组合等设置。 8 动态面板：这个是很重要的区域，在这里可以添加、删除动态面板的状态，以及状态的排序，也可以在这里设置动态面板的标签；当绘制原型动态面板被覆盖时，我们可以在这里通过点击选中相应的动态面板，也可以双击状态进入编辑。 Axure rp的界面就介绍到这里，界面中的各个区域基本上在做产品原型的过程中，使用都很频繁，所以建议不要关闭任何一个区域。如果不小心关闭了，可以通过主菜单工具栏—视图—重置视图来找回。
·页面载入时（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）：当动态面板从一个页面的加载中载入时。
axure案例 【篇一：axure案例】 下面是近收集到的最好的网页设计资源，希望大家能够喜欢。网页模板macbook pro retina 15 mockup (psd).stationary mockup templ 【篇二：axure案例】 用axure写产品需求文档实例-axure中文网 axure中文网axure官 方正版 快速原型设计工具 2015-12-22 分类：阅读(21824) 评论(10) 说来有些惭愧，写这篇文章是用来教大家写需求文档的。但其实， 我很少会写传统意义上的产品需求文档；甚至，我连word都很少用。用惯了axure的任意布局方式，再用word感觉非常别扭，尤其是 在添加图片时，简直感到捉急。当然，这不是我不用word写需求文档的根本原因。 简单来谈一下，为什么软件开发项目中，需要需求文档这么个东西？在稍微大一点的开发团队中，产品经理未必能向所有开发人员，传 达具体的产品开发需求。这时就需要一份文档来供所有的项目参与 人员阅读。而产品经理又常常爱拍脑袋、容易变卦，所以文档也是 开发人员约束产品经理的一项武器。在产品上线前的测试环节，测 试人员也同样会拿产品需求文档来验收产品质量。当团队进入新人时，文档也可以让新人更快地了解产品。 总的来说，产品需求文档有三个核心作用： 传达产品开发需求；保证各部门沟通有理有据产品质量控制有具体 标准由此可见，产品需求文档是必不可少的。那一份好的需求文档，就应该能准确传达出产品的开发需求。那么产品需求文档该用什么 方式写，才能更好地传达出产品开发需求呢？ 就我所见，行业大多产品经理都是用word axure原型的方式组成产 品需求文档。那这种方式，是否真的能方便地表达出产品需求？我 问了很多程序猿，他们在开发时，一般都是看着效果图和原型图写 代码，只有在遇到问题时，才会查看word文档。也就是说，开发需要一边写代码，一边看效果图，一边看原型，还要时不时查看文档。而且，大多数程序猿都不会逐字逐句去读产品经理的长篇大论。那 产品经理写word真的合适吗？这样的用户体验真的好吗？花费大量时间写word真的有价值吗？在axure画原型的同时，我们为什么 不能直接在旁边标注呢？这样岂不是方便快捷很多吗？
步骤一：打开Axure，为了更加形象我直接利用图片来制作，加入原型基本内容元素。 步骤二：加入弹出框，在这里我还是使用图片来制作（正常情况下可以用矩形工具在制作，原理都是一样的），鼠标右击：《转换》—《转换为动态面板》。 步骤三：因为该动态面板是需要点击后弹出显示，因此我们需要在默认情况下把它设置为隐藏，在转换为动态面板以后我们再次选中后鼠标右击《编辑动态面板》—《设为隐藏》。这时你会发现该动态面板就会被隐藏了，此时的隐藏不是完全意义上的隐藏，为了方便使用软件默认在其位置上显示成为一个背景色为黄色的透明图层。 步骤四：一个页面中可能会出现多个动态面板，因此我们可以将它命名，方便我们使用时方便辨认。命名的方式也很简单选中双击黄色透明区域在《动态面板标签》后的输入框内填写标签名称。（此步骤同样可以在步骤二结束后进行操作）。 步骤五：做好以上的准备工作以后就需要将按钮和动态面板关联起来因此该步骤也最为重要，该步骤总共分为六个小步骤。第一步：选中（鼠标左键点击一下）点击弹出事件的触发元素，这里当然就是如下图中的“点我就弹出”的按钮了，第二步：在Axure右边的工具栏上找到交互一栏，点击OnClick（其实这个就是一个鼠标点击的触发事件。如果需要实现弹出后再点击按钮关闭弹出框的操作话直接点击交互下面的添加事件），第三步：在弹出框中选中《显示动态面板》，第四步：点击下面的“Show Panel”，第五步：勾选我们刚才命名的动态面板，第六步：点击确定按
钮完成操作。 总结，至此我们就完成了添加动态面板的交互操作，是不是很简单，简简单单的增加互动元素会让你在演示原型的时候给观看者带去生动的演示，还等什么赶紧一起来试一下吧。如有有更为简单的地方欢迎大家在评论处补充。
小楼axure 图文教程（十一）新手入门基础（3）作者: 小楼一夜听春语分类:Axure教程发布时间: 2013-07-15 22:29?6没有评论编辑 本文出自诉客-产品经理的心声，转载时请注明出处及相应链接。 （三）Axurerp元件的触发事件 l OnClick（点击时）: 鼠标点击事件，除了动态面板的所有的其他元件的点击时触发。比如点击按钮。 l OnMouseEnter（鼠标移入时）: 鼠标进入到某个元件范围时触发，比如当鼠标移到某张图片时显示该图片的介绍。 l OnMouseOut（鼠标移出时）: 鼠标离开某个元件范围时触发。比如鼠标离开图片时，图片介绍消失。 l OnKeyUp（按键弹起时）: 文本框（单行与多行）编辑时，键盘按下某一个按键松开时触发，不支持其他axure元件。比如统计文本框输入的字数。 l OnFocus（获取焦点时）: 当一个元件通过点击或切换获取焦点时触发。比如搜索框编辑时，清空“请输入关键字”的提示。 l OnLostFocus（失去焦点时）: 当一个组件失去焦点时触发。比如用户名、密码的验证。 l OnChange（选中项改变时）:下拉列表框或列表框的选中项改变时触发，不支持其他元件。比如选择地址时，选择不同的省份，显示对应的省内城市。 动态面板专属事件 l OnMove（移动时）：当动态面板移动时触发。是指通过其他事件的触发控制面板移动时，比如当进度条移动时，进度比例的变化。
l The OnShow and OnHide events（显示或隐藏时）：当动态面板隐藏或显示时触发。比如图片显示时按钮文字是关闭图片，图片隐藏时按钮文字变为打开图片。 l OnPanelStateChange（状态改变时）：当动态面板更改面板的状态时触发。 比如通过改变动态面板状态实现的进度条效果，当状态改变时改变相应的进度比例。 l OnDragStart: Occurs when the drag begins（开始拖动面板时）：当开始拖动动态面板时触发。比如在动态面板拖动开始时，显示“拖动开始”的文字提示。 l OnDrag: Occurs as the panel is dragged（面板拖动时）：动态面板拖动时触发，比如拖动一块动态面板另外一块跟随移动。 l OnDragDrop: Occurs when the panel is dropped（面板拖动结束时）：当拖拽结束时触发。比如滑动解锁，面板拖动结束时根据滑块的位置设置相应的效果。
一、画原型前的准备工作 1.自建元件库 ?元件库作用 ●多人协作时使用同一元件库，可以保证风格一致 ●可以将除Axure自带以外的元件引入进来，以方便使用 ?元件库的创建及使用 ●在元件处可以创建元件库和载入元件库 ●页面名称为元件名称 ●文件名称为元件组名称 上图为：编辑元件库的界面
上图为：载入元件库后的界面 注：将元件库放到Axure的Library目录下并载入后，下次打开Axure会自动加载，放置到其他目录下需要每次手动载入才可以，所以大家需要将元件库的文件放置如下图所示目录下 2.控制好大框架母版的尺寸，建议尺寸1024*768 3.当有新项目需要画原型时可都在“基版.rp”上面进行设计，原因如下： ●“基版.rp”上维护了“修改日志”、“版本说明”等界面可以直接完善 ●“基版.rp”上配置了html、word的生成规则，可直接使用 ●“基版.rp”上配置了项目菜单下的页面样式和元件样式，可直接使用 ●“基版.rp”上配置了页面说明字段和元件说明字段，可以直接使用 二、基础元件注意事项 1.对于隐藏的元件，在需要显示时注意添加一条置于顶层的用例， 置顶有三种方法
1)添加显示用例时有置顶效果 2)有单独的置于顶层和置于底层用例 3)对于一些隐藏的弹出框，可以设置固定到浏览器中，设置固定到浏览器的操作中右下角有“始终保持顶层<仅限于浏览器中>”勾选后可以保证隐藏的元件在显示时始终处于置于顶层状态 2.对于一些不需要移动的元件可以将其锁定，以免移动其他元件时将不需要移动的移动了 3.一些公用的界面，如选择器弹出框，可以不用动态面板，直接画成界面，然后在浏览器的弹出窗口中打开。（需要告诉开发弹出效果，程序中应该在层中弹出，不应该在浏览器弹出窗口中打开） 这样做的好处在于：
小楼axure 图文教程（七）日历元件的制作（图像热区效果） 作者: 小楼一夜听春语分类: Axure教程发布时间: 2013-07-11 22:48 ?6没有评论编辑示例原型下载：小楼原创元件-日历 实现目标： 1、点击日历图标出现日期选择面板，点击其中一个预先设定好的日期，日期在文本框显示。 2、点击日历图标中的清空，则删除文本框中的日期。 3、点击今天则文本框日期显示为当前日期（通过变量实现，未接触过变量的同学可略过）。 4、点击关闭，则关闭日期选择面板。 最终效果如下：（看不到动态效果时，请点击图片。） 实现过程： 首先，准备一个文本框，一个日历图标，一个动态面板，一个日期选择面板的图片（示例用图是从百度图片下载的），把这些元件的标签都设置好（不会设置标签参看教程：小楼axure rp教程（一）文本框焦点效果）。 准备好这些，我们就可以开始制作了。
1、双击动态面板，再双击打开状态1，然后，把日期选择图片粘贴到里面，并拖动到左上角的位置，点右键—顺序–设置为最底层。 2、从元件库里面拖出四个图片热区，分别调整成合适的大小后覆盖在清空、今天、关闭三个按钮和要选择的日期数字上。 3、分别设置每个热区的鼠标点击事件。 A点击清空上的热区时，删除日期文本框的文字。
B点击今天上的热区时，调用系统日期变量[[Year]]-[[Month]]-[[Day]]，将当前日期填入文本框。如果要是填前一天的就是[[Year]]-[[Month]]-[[Day-1]]喽，当天是月初1号，就是[[Year]]-[[Month-1]]-[[Day-1]]。然后设置动态面板隐藏，可以加上500毫秒淡入淡出的动画效果。 （设置动态面板隐藏的图就不截了，不会的参照C步骤） C点击关闭上的热区时，设置隐藏动态面板。 D点击日期数字上的热区时，直接设置文本框的值等于对应的日期就可以了。然后隐藏动态面板。