axure7.0 Gmail进度条制作

     一、主要用于：

      操作网站、等待加载图片、加载页面、上传文件等步骤的时候，都会有一个进度条出现，。进度条像用户传递了大约要等待的时间，以避免用户焦急。。

二、制作原理：

     蓝色条形填充进度条的页面可以看成是一个覆盖蓝色条形的矩形覆盖移动的过程，为使原型看起来更真实一些，我们将前一部分运行更慢，后一部分运行更快。

 分解进度条，主要有三个矩形，两个动态面板组成，

第一层为线框层：包括矩形1；

第二层：蓝色填充层： 动态面板bar和蓝色填充矩形框2；

第三层：覆盖移动层： 动态面板 screen和矩形框3

成品效果图

三、实操制作：

1、线框层：添加矩形部件，作为进度条边框；矩形部件属性如下：

名称

部件种类

坐标

尺寸

填充颜色

边框

1

Rectangle

x20：y50w300：h25

#FFFFFF

#A1A9B7

2、蓝色填充层：添加矩形部件到state1

添加动态面板bar，放置于矩形部件中，动态面板部件属性如下

名称

部件种类

坐标

尺寸

bar

Dynamic Panel

x22：y52w300：h25双击动态面板编辑state1

名称

部件种类

坐标

尺寸

填充颜色

2

Rectangle

x0：y0w300：h25

#D4E4FF

完成蓝色矩形框制作，接下来我们需要添加一个覆盖物，并且设置覆盖物的移动时间和方向。

3、添加动态面板screen，并编辑state1；screen属性如下

名称

部件种类

坐标

尺寸

screen

Dynamic Panel

x22：y52w300：h25编辑screen面板state1，添加矩形部件

名称

部件种类

坐标

尺寸

填充颜色

3

Rectangle

x0：y0w300：h25

#FFFFFF

4、回到home页面，添加一个文本框部件，如图：

5、移动覆盖物设置：

   当我们打开这个页面时，开始移动screen面板，让充当覆盖物的白色矩形从左向右移出进度条，漏出下面蓝色矩形来。

  

       screen需要向右移动300个像素，从而让整个蓝色矩形漏出来。之前说过整个一定过程为先慢后快。那我们设定在前100个像素用10秒，后200像素移动10秒。

       为home页面添加OnPageload事件：

设置完成，点击axure中preview键/F5,进行页面预览。