axure进度条怎么做(手把手教你制作axure进度条)

   2023-01-31 互联网0
核心提示:大家好,我是日常君,经常会和大家分享一些产品日常的工作心得。今天和大家分享一个AXURE进度条动画的制作流程。进度条的动画涉及到了动态面板、参数变量等较为进阶的功能使用,是很好的学习案例。这里就用AXURE来制作一个实际工作中制作的原型。

axure进度条怎么做(手把手教你制作axure进度条)

大家好,我是日常君,经常会和大家分享一些产品日常的工作心得。今天和大家分享一个AXURE进度条动画的制作流程。进度条的动画涉及到了动态面板、参数变量等较为进阶的功能使用,是很好的学习案例。这里就用AXURE来制作一个实际工作中制作的原型。

实际需求:某金融端是一个专业投资者使用的证券金融终端,主要提供全面、可靠的授权研究报告,以及基于研报数据衍生出专业的一致预期数据,还有高效的股票分析工具。目前在版本升级时,用户不了解新版本更新了什么内容,因此我们需要在升级的整个过程中让用户了解新版本的升级内容。

自动完成下载后提示版本更新内容

点击立即安装更新,则将安装更新,就到了我们安装页面,到了本文正题:

安装完成后,即进度到了100%之后,将出现安装完成按钮:

下面是制作进度条效果的步骤:

1. 页面载入时设置进度条:

新建一个页面,添加一个进度条背景(bg):

使用图形原件

添加一个进度条(jdt),采用动态面板,高度以bg一致,宽度随意:

将jdt设置为隐藏

设置页面载入时,

其中第二步将进度条初始化为ba的1%宽度。

2. 设置进度条动画和百分比数值

当页面载入时,会改变进度条状态,因此可以通过设置动态面板变化时触发的动作,如下:

但页面载入时仅触发一次,而后的进度条自动变宽,则需要通过设置“改变大小时”的动作来实现循环:

3. 100%进度后出现“完成打开”按钮,让用户查看更新的内容之后,用户点击才能登陆软件。就有让用户主动关注更新内容的机会:

 
标签: 页面 内容 用户
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与爱美生活网(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

点击排行