AxureRP教程–进度条效果

进度条效果非常常见,很多软件加载或者页面加载的时候,抑或计时进度显示,如下载上传的进度指示等,都会用到进度条效果。用AxureRP来实现进度条效果,最简单的就是用动态面板来实现,不过这个基本上无论用哪种方法都是要用到动态面板组件的,因为这里涉及到状态改变了,前面我有说过,但凡涉及状态转换或小页面切换效果的时候都需要用到动态面板,这里介绍两种实现方式,一种是最简单的,一种是别人做的示例,个人感觉很复杂,要是在设计的时候思路不清楚的话,第二种很难出效果的。

因为进度条效果实际上也是给人一种视觉差上的效果,因此只要设置好合适的时间差和恰当的状态转换页,就能在动态面板状态切换的时候给人以连贯的进度条效果。所以最简单的实现方式就是,利用一个动态面板,根据演示进度条的长度,等分成若干等份,这里建议等份不要太少,尽量多一些,这样整个效果会比较的平顺。分成了多少个等份就设计多少个动态面板状态页,每个状态页上进度条的填充长度都根据所分比例来设置,唯一要注意的就是顺序,一定要顺序增加或者顺序减少(顺序减少的进度条也是有应用的,如页面倒计时关闭等),这样设置好之后,通过按钮或其他的组件事件去触发让动态面板进行状态转换的动作,间隔等待时间视效果所需决定,以上就是进度条效果的实现原理。

这个设置其实是很简单的,与前面介绍的很多例子有共同之处,只不过状态页的设计不一样而已,因此动态面板的功能还是很多的,利用其基础特性,再加上灵活的状态页设计,就能组合出各种效果。这个方法对熟悉动态面板组件的朋友设置起来应该很容易了,不熟悉的朋友可以看一下源文件。

第二种方法很复杂,这里不做过多的介绍,利用的是动态面板的移动特性,利用两个动态面板的移动产生的遮蔽效果来完成进度条的效果,个人感觉实现难度有点大,需要花很多时间进去,对于快速原型设计的理念来说,这种方式不大合适,毕竟有更简单的实现方式,这里提供这种方法的源文件供大家参考。

 

点此查看演示

点此下载源文件

点此下载第二个示例(需AxureRP 6.0版本)



无觅相关文章插件,快速提升流量

评论已关闭!