写了几个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里面，也就是说动态面板其实是一个多层的容器，容器的每一层可以包含多个元件。
我们可以在动态面板管理器中（软件界面的右下角，没有的话在导航栏-视图选项中勾选）去给动态面板添加多个状态，同时能够调整这些状态的顺序，来达到不同的显示效果。动态面板默认显示动态面板管理器中最上面的那个状态。
动态面板的介绍先到这里，在之后的教程里，我们再去慢慢的熟悉它的用法和特点。
阅读(...) 评论()您的位置：
Axure教程 | 为原型设计添加点动画效果
作者：Axure原型设计工场
　　应用交互效果中，动画效果是应用的锦上添花效果，比起死板的页面切换，动画过渡效果还是会让人感觉自然，不那么生硬，也是一款优秀应用的加分项。我们以几个例子来说明一下如何应用axure里的动画效果。
　　幻灯片效果
　　我们要做的是一个自动轮播的幻灯片效果，也就是会自动从第一张片子开始，停留几秒后自动切换到下一个片子，显示到最后一个时再返回到第一个片子。几个着关键点说明如下：
　　1. 自动轮播
　　需要使用到动态面板的两个重要事件，“载入时”和“动态面板状态改变时”，状态切换时的动画效果设置如下：
　　并且注意勾选上“从最后一个到第一个自动跳转”
　　2. 左右滑动
　　我们还可以给动态面板添加左右滑动事件，这两个事件是动态面板特有的，这样可以模拟手指向左或向右滑动。
　　3. 指示器的动态效果
　　在切换片子的时候，我们希望下方的指示器也能自动指示当前选中的片子，并且有动态的移动效果。这里为了处理方法通用，使用了一点小小的技巧，用一个变量来控制当前的索引，然后索引整除3，根据得出的余数移动指示器的位置。
　　自定义下拉弹出菜单
　　axure自带的菜单样式太丑了，我们完全可以自己实现一个下拉弹出菜单，可以设置自己想要的样式。下面的例子是单击按钮时，如果菜单没显示，则向下弹出菜单，如果显示了，则向上收起菜单。
　　1)弹出菜单
　　我们使用了同一个按钮来控制弹出和隐藏，因此需要在事件上添加条件判断，判断的依据就是下拉菜单动态面板是否处于显示状态。
　　2)隐藏菜单
　　如果我们不添加动画效果的话，菜单的显示和隐藏就太突然了，有了动画效果，体验效果会好很多。
　　3)TAB属性页面
　　TAB的实现一般都是通过动态面板的方式，这里不说动态面板的用法，只说一下动态面板按钮上方的红色线是如何移动的。
　　给TAB的三个按钮添加事件，单击后，切换到指定状态，然后移动这个红色的线到当前点击的按钮位置。
　　4)下拉刷新
　　下拉刷新效果常见于信息流的更新，例如手机QQ消息下拉刷新、微博客户端消息下拉刷新，它主要对应下面几个过程：
　　1)开始下拉
　　在下拉到一定距离时，指示箭头方向变化，文字更新为“释放更新”
　　2)下拉到临界点
　　下拉到临界点时，会在“下拉刷新”和“释放更新”之间切换
　　3)释放
　　超过下拉临界点后，再往下拉时显示状态不会变化，这时释放后并不会立即还原，而是显示一下当前“正在更新”状态，更新完成后，列表位置还原到初始位置。
　　4)刷新
　　在释放后，系统请求数据完成后，就会刷新界面上的显示数据了。
　　用到的事件主要是“拖动动态面板时”和“结束拖动动态面板时”：
　　几个示例说完了，稍微小结一下：
　　动画效果虽然可有可无，但是一个小小的动画会给你的交互增色不少，不需要太炫，过渡自然就行了。也不要搞得到处都是动画效果，只在必要的地方添加即可。
(转载请保留)
互联网的一些事，已超50万小伙伴关注！关于使用Axure RP开展原型开发的一些心得体会 - 综合当前位置:& &&&关于使用Axure RP开展原型开发的一些心得体会关于使用Axure RP开展原型开发的一些心得体会&&网友分享于：&&浏览：0次关于使用Axure RP进行原型开发的一些心得体会Axure RP（Axure Rapid Prototyping）是一款快速实现、准确表达、带有交互效果且易于上手的原型设计工具。
本人在曾参与某系统需求分析时开始接触Axure RP，初步掌握了一定的开发基础，成功制作出系统需求原型，对需求分析工作产生了积极效应。在此经验的基础上，后续又在其他项目中进行了较为成功的运用，并获得了良好的效果。
就个人的经验而言，使用Axure RP进行原型开发，一旦掌握了一定的开发技巧后，加上一个良好的规划，那么很多东西都可以信手拈来。好的东西需要分享并使更多人获益，给实际工作带来效益，这样才能得以体现其价值。对此，本人在此分享使用Axure RP进行原型开发的一些经验，与各位一起探讨，也希望更多人能够分享自身使用Axure RP的相关经验。
Axure RP就其本身而言，其实仅是一个工具，大部分人都可以很快学习并掌握之，但要做出好的原型，会用只是一个最基本要求，关键是要有一套良好的原型开发思想，这套开发思想除了要有整体规划之外，还需要充分结合实际业务需求，在理解需求的基础上进行开发。
目前本人使用的Axure RP版本为6.5.0.3012，该版本可以通过互联网获得。关于Axure RP的安装及基本使用，有相应的教程，例如：Axure_rp_6.5_基础教程、
Axure.RP.6.Prototyping.Essentials等，大家通过认真学习这些教程自然可以达到事半功倍的效果。因此，这些基础性内容不再这里提及，这里要谈的是本人在之前的几个项目中是如何完成快速原型开发的。
一、了解原型设计开发的特点。
首先我们需要对原型开发工具具有相对深入的了解，明确原型工具能做什么，不能做什么。其实只要关注好部件、母版、动态面板，并学会灵活运用部件属性，那么原型的效果就基本出来了。
其次就是要明确我们需要做哪类原型，是网页版的，客户端版的，还是手机版的，等等，因为每一类原型的设计要求都是不一样的。如果我们是开发Web版的原型，那么我们都知道网页尺寸的设计与浏览器及操作系统的尺寸是息息相关的，也许我们需要知道一般情况下Windows XP的任务栏高度为30px，而Windows 7的任务栏高度为40px；我们需要知道一些主浏览器的界面参数（状态栏、菜单栏、滚动条高度等）；我们也需要知道系统分辨率的设计对原型的影响（安全分辨率为px，可建议的大分辨率为px）；我们还需要知道网页的宽度与首屏高度等等。如果我们是开发手机版的原型，也许我们需要知道诸如Android、IOS等的设计尺寸。
当然，就我们目前所涉及的系统而言，一般的原型开发都是基于Web版本的，因此我们需要重点关注这一块的设计即可。
二、做好原型的总体规划。
在动手进行正式的原型开发之前，一定要结合实际需求及已开发过的类似系统做好原型的框架规划，包括原型整体风格、色调、布局、展现形式等。个人认为，至少要做到并做好以下几个方面：
（1） 原型设计开发要有统一理念。这个统一主要是指要有统一的界面布局，例如每一个子页面的风格都应该是相同或相近的，各类组件（例如文本框、下拉选择框、表格、消息提示框等）都应该是一致的。又例如所有界面的重置按钮或关闭按钮的样式、事件等都应该是一致的。
（2） 原型设计开发要有对称思想。这里关系到原型界面的布局问题，例如页面底部摆放的按钮应该是总体居中并向两边分散排列的。一个信息提示框的文字正常情况下应该是居中显示的，诸如此类。
（3） 原型设计开发要注意细节。做一个原型其实不难，但要做一个用户体验好的原型就相对困难了。这里说的困难其实很多时候都不是技术上的难题，而是跟我们愿不愿意做好交互体验，愿不愿意注意每一个细节等有关。好的界面原型，很多时候并不是说其有多花俏，而是每一处细节都做到极致，细到每一个文字如何描述、控件如何展现、每一个表格的高度及表头背景色是否一致等都做得很到位。其实，这个对我们而言还真不是什么难事，难就难在我们愿不愿意花时间去处理这些细节问题。很多时候，细节问题关注到了，整体效果就出来了，客户的满意度也就提升了。此外，在原型开发时，如果可能，一定要给每一个页面、每一个母版、每一个动态面板、每一个部件进行适当的命名，这对于复杂原型的开发更是如此，同时也有利于多人协作开发。当然这更是一个良好的习惯，好的习惯常常会帮助我们将事情做好。
（4） 原型设计开发要有产品意识。做原型开发也许有时候仅仅是一个草图，但更多时候是希望能够做出一个贴近真实系统的原型。毕竟，如果仅是为了做一个草图，还不如一张纸和一支笔来得方便快捷。因此，做原型的设计开发要时刻有产品意识，或许我们可以认为我们是在创造产品，而产品是提供给客户的，应该将产品瑕疵降到尽可能低。因此，在时间许可的情形下，我们应该追求精益求精。
（5） 原型设计开发要保持更新。这里有两层含义，一是项目开发过程中会存在需求变更的情形，此时涉及到变更的原型也应随之更新；二是开发出来的原型应与对应的文档保持一致性，特别是在数据项方面。
对于原型规划，具体到实操层面，就是要明确整个原型整个界面风格，大概有多少功能模块，菜单如何展现，哪些需要做成弹出窗口，哪些需要做成嵌套窗口，哪些需要以页面形式开发，哪些又需要以动态面板进行展现，哪些需要做成部件，而哪些又需要做成母版。
三、设计并形成原型部件库。
一套系统，或者是一系列类似的系统，其原型部件都应该有统一的标准。这套标准就包括了表单、文本框、下拉选择框、复选框、单选按钮、按钮等方方面面。那么这一套的标准其实风格也应该是高度统一的。例如，互联网行业有很成熟的开发框架，往往会涉及到一些常用的下拉框、选择框等基础性元素，类似这些基本元素都可以做成部件，以方便后续复用。
我们在设计制作部件时，不妨可以多参考一些优秀的部件库，这些部件库可以在Axure官方网站上获取。下图所列就是一些常用的部件库。
其实，只要我们用心，自己也可以制作出一套非常实用的部件。例如，要制作一个普通按钮，可以使用矩形即可完成，可以将调整矩形形状，可以配置悬停样式、鼠标按下样式、选中样式、禁用样式等，部分示例图如下：
四、分类设计原型母版。
为使得原型开发真正达到快速构建的目的，在原型开发过程中尽可能地将公共部分提取并转换为母版，之后在设计开发每一个原型页面时采用组装的方式将会大大提供开发效率，同时有利于后续一些基础数据的修改。
就个人经验而言，母版主要划分为两大类，一类是系统公共组件，另一类是系统业务母版。公共组件包括：按钮、文本框、下拉选择框、日期选择框、标签页、对话框、组合框、分页控件、各类表格、页面标题区域、页面底部区域，等等。其中，每一类组件又可以根据实际业务场景及相应的大小要求而设计多套。单拿表格组件来说，就可以设计出横向展现的普通表格、纵向展现的普通表格、带序号的横向表格、带复选框的横向表格、带单选按钮的横向表格，等等。而且这些表格的标题、字体大小、背景颜色、线条颜色都应该根据系统整体风格配置好。
另外，通常一个系统里面都有查询统计的影子，因此将一些常用的查询条件母版化也是非常可行的。而根据个人经验，查询条件的栏目一般为两栏四列或者三栏六列，这样整体布局会相对合理。
五、灵活运用动态面板。
动态面板是展示在页面不跳转的情况下所能实现的各种交互状态，通过动态面板可以实现高级的交互功能，实现原型的高保真度。从另一个角度来看，动态面板的每一种状态其实可以看做是一个页面，我们可以在该状态下设计所需要的原型效果。通过对动态面板进行隐藏、显示或切换到不同状态从而实现我们所需要的交互效果。
一般情况下，我们知道动态面板可以实现诸如Tab页签的切换效果、鼠标触发式和点击触发式的下拉菜单效果、鼠标触发式的浮窗效果、JS的鼠标点击弹层效果等等。而很多时候，为了使得整个原型做得更为形象逼真，整一个系统都可以通过动态面板来实现，特别是对于制作手机原型更是如此。
一个应用系统原型网页版和手机版均全部采用动态面板实现，其目录布局如下：
采用整个动态面板来设计原型的好处在于交互效果更好、操作更流畅、用户体验当然也会更好。
总的来说，进行原型开发，应有必要的积累，并且在进行原型开发时应在条件许可的条件下做到更加严谨一点、细心一点、友好一点。除此之外，应在平时进行必要的积累，可以多学习一些优秀的设计（例如/nav、/等），然后结合实际业务需求和系统实际应用，设计一套或多套适合于项目甚至行业的原型，并在后续其他类似项目的开发过程中以此为基础不断优化、不断完善、不断提高。
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有如何利用axure实现移动端页面拖动展示效果_马特要杀不_新浪博客
如何利用axure实现移动端页面拖动展示效果
当一位有PC端原型设计经验的产品人员，设计移动端产品原型时，遇到的第一个问题可能就是页面拖动的效果了。我们在设计PC端产品时，利用鼠标滚轮进行整个页面的展示，然后到了移动端，利用手指进行拖动，滑动展示整个页面。两种交互方式截然不同。
axure制作移动端产品原型时，会遇到很多难题，建议产品同事尝试一些诸如mockplus等更适合移动端的原型设计工具。当然，axure是完全可以实现移动端交互的，只是我们需要利用动态模板、坐标定位等等方式灵活的实现目标。
接下来进入主题，跟大家分享一下​【如何利用axure实现移动端页面拖动展示效果】
打开axure前，大家不妨先设想一下任务的实现方法：
​1、移动端显示的页面是固定尺寸的，里面的整体页面可能会超出固定尺寸范围，所以我们需要建立一个动态模板，使其成为固定尺寸的页面，而将超长的整体页面放入其中。
2、整体页面必须可以被拖拽，所以整体页面又是一个动态面板
3、在我们使用移动端产品，进入页面后，向下拖拽，一般页面会被下拉，而且上方会出现【放开刷新】的提示​；同理，我们手指上滑，页面被拖至底部，再不停上滑，页面会被上拉，手指放开后，页面下滑至原位。所以我们axure中对整体页面的动态模板需要设置离开顶部或者离开底部时，自动返回原位的交互
这三个实现方法，是我们实现拖动交互的主要思路。接着我们就具体看一下如何在axure中实现目标。​
1、准备工作：打开axure，新建文档，添加一张iphone的背景素材，顶部添加的wifi和电量的信息，以及顶部导航栏（这些素材百度都可以找到，ios8
UIkit），准备工作完毕
​2、🔽添加一个动态面板，这个面板相当于我们的屏幕，所以名字可以称为“固定页面”
​3、🔽动态面板内再添加一个动态面板，这第二个面板相当于我们要展示的内容，需要拖动才能展示整个内容，长度自然也比“固定页面”要长，可以称之为“长内容”
4、​🔽长内容的面板内添加正文内容，这里我添加了一张图片
5、​🔽​接下来先实现长面板的拖动功能，在固定页面内对长内容面板添加onDrag交互，交互的内容是move，而且move
with y,也就是长面只能沿着Y轴拖动
​6、​🔽拖动功能已经实现，我们可以先预览一下已经完成的效果（点击axure操作栏的Preview按钮），尝试着上下拖动图片，结果符合预期，只是拖动后，图片不能复位，那么接下去就要实现复位的功能
​7、🔽为了实现复位，我们需要在固定页面的顶部和底部添加两个判断用的矩形。顶部的矩形我们暂且称之为“上离开判断区域”，顾名思义，当长内容面板向下拖动，离开“上离开判断区域”，长内容需要move到原始的"0,0"坐标，这个交互我们称之为“下拉复位”。判断区域可以设置为透明，与长内容同宽，高度为象征性的2px
​​8、🔽选择长内容面板，在onDrag动作中添加新的交互“下拉复位”，增加触发条件：当area
of widget 长内容 & &is not over
& &area of widget
上离开判断区域。那么首先wait 400ms，接着move 长内容，编辑结果 move to X：0
& & Y：0。
注意：编辑完下拉复位后，这里有一个很重要的改动，在交互栏中，右击将“下拉复位”的else
if条件更改为if。必须这样做，不然下拉复位的动作无法实现。至于这样做的原因，就留给大家思考吧。
​9、🔽上拉复位的动作完成后，我们还要实现下拉复位。首先我们添加一个判断框，边框与填充均为透明，尺寸为长内容的宽度与象征性的2px，定位于固定页的底部
​10、🔽在实现下拉复位的时候，我们给长内容的复原位定为X：0和Y：0，这个很容易理解，长面板向上复位时肯定移动到（0,0）的位置。但现在实现上拉复位，我们需要计算长面板的高度，这是因为长面板拖到底部后，固定页面显示的是长面板的下部分内容。这里可能有些费解，看我的截图也许能帮助理解
11、​🔽经过上一步的操作，我们得知当整个长内容显示到最底部时，整个长内容的定位为（0，-295），接下去就和实现下拉复位一样了，在交互栏onDrag动作中添加交互“上拉复位”，添加触发条件
&&当area of widget
长内容 & &is not over
& &area of widget
下离开判断区域。那么首先wait 400ms，接着move 长内容，编辑结果 move to X：0
& & Y：-295。
编辑完上拉复位后​​，在交互栏中，右击将“上拉复位”的else
if条件更改为if。
​12、​🔽所有条件编辑完毕，查看一下交互栏onDrag动作中的所有交互
13、​🔽大功告成，赶紧运行一下观察效果
​总结：
利用axure实现移动端最基本的上拉与下拉动作是如此复杂，所以我还是建议利用其它原型工具制作移动端原型。然而即便如此，axure还是有其优势，实现静态的页面要比其它原型工具都要便利。
这次的功能实现，还有很多能提升的提升的地方，比如​复位的时候，我们可以添加动效，使得复位时页面的移动更加平滑。诸如此类的改进，还是留给热爱axure的大家去探索吧。
马特要杀不
博客等级：
博客积分：0
博客访问：4,187
关注人气：0
荣誉徽章：