大家好，我是大明同学。
这期内容，我们来探讨Axure中下载进度条的设计与交互技巧。
下载进度条
创建下载所需的元件
下载按钮
1.在元件库中拖出一个按钮元件，在样式窗格将按钮命名为“按钮”，宽设为100，高设为40，填充颜色设置为蓝色（#0052D9），圆角设为20，输入文本“下载”。
进度条
1.在元件库中拖出一个矩形元件，在样式窗格将按钮命名为“灰色”，宽设为100，高设为8，填充颜色设置为灰色（#F2F2F2），线段设为0，圆角设为4，输入文本“下载”。
2.复制“灰色”进度条粘贴到画布上，在样式窗格修改一下元件名称 “蓝色”，填充颜色蓝色 （#0052D9）。
3.将蓝色进度条和灰色进度条重叠放置。
文本标签（用于展示下载进度）
1.在元件库中拖出一个文本标签，输入初始值 0
2.在元件库中拖出一个文本标签，输入“%”
创建交互
创建下载按钮的交互
1.选中下载按钮，在交互窗格中新建交互，单击时，显示/隐藏 显示 “灰色”、“蓝色”、“0”“%”元件。
2.添加动作，设置文本， 当前，“暂停”。
3.选中 “灰色”、“蓝色”、“0”“%”元件，设置为隐藏。
预览效果
点击预览，在预览页面，点击下载按钮会显示 “灰色”、“蓝色”、“0”“%”元件。
创建进度条的交互
1.选中蓝色进度条，在样式窗格将宽值设为0。
2.选中“0”文本标签元件，在交互窗格创建交互，显示时，设置文本 当前 插入变量或函数，添加局部变量，LVA1=元件文字 当前 插入变量 ：[[LVAR1 + 1]]
看一下完整交互。
3.添加动作 触发事件，当前 显示时。
4.启用情形 情形 1：如果 文字于 当前小于 100
看一下完整交互 。
5.添加动作 等待 50毫秒
预览效果
点击预览，在预览页面，点击下载按钮，文本会从0到100增长。
创建进度条的交互
1.选中蓝色进度条，在交互窗格中新建交互，显示时，设置尺寸 当前 宽值 插入变量或函数 [[This.width + 1]]
2.添加动作 等待 50毫秒，触发事件 当前 显示时。
3.启用情形 情形1 值 [[This.width]] 小于 值 100
看一下完整交互 。
预览效果
点击预览，在预览页面，点击下载按钮，蓝色进度条会从0到100增长。
创建下载按钮（暂停）的交互
1.选中下载按钮，在交互窗格 单击时交互 启用情形 情形1：如果 文字于 当前 等于 下载。
看下完整交互 。
情形2：否则 如果 当前 等于 暂停。
在元件库拖入一个矩形，在样式窗格中命名为“暂停”并设为 隐藏。
2.选中下载按钮，在情形2下添加动作，设置文本 暂停 为 1
3.选中文本标签 “0”在交互窗格 显示时交互 添加情形 情形2：元件文字 暂停 等于 文本 1
4.在情形 2下 添加动作 设置文本 当前 插入变量或函数，添加局部变量 LVAR1 等于 元件文字 当前 插入变量 [[LVAR1]]
看一下完整交互
创建蓝色进度条的交互
1.选中蓝色进度条，在交互窗格，显示时交互 添加情形 情形2：元件文字 暂停 等于 文本 1 ，设置尺寸 当前 宽度 为 [[This.width]]
预览效果
点击预览，在预览页面，点击下载按钮，在点击暂停时，文本和蓝色进度条会暂停。
创建下载按钮（暂停）的交互
1.选中下载按钮（暂停）在交互窗格，情形2，设置文本 添加目标 下载按钮 值为 下载。
2.在情形1 添加动作 触发事件 “0”、“蓝色”进度条的显示时事件。
3.在情形1 设置文本 添加目标 暂停 文本 值 0。
预览效果
点击预览，在预览页面，暂停状态点击下载 可以继续下载。
创建文本“0”到100的交互状态
1.选中 文本“0”元件，在交互窗格 显示时 添加情形 情形3：否则 如果 文字于 当前 等于 100 设置文本 下载 为 完成。
预览效果
预览地址：https://7oypbw.axshare.com
OK，这期内容到这里就结束了。
我是大明同学
下期见
