小编教你怎样制作axure进度条。

网上诸多有关Axure进度条制作的方法,但是步骤实在是太跳跃,很不容易搞明白。因此,笔者在这里总结一下Axure进度条制作的方法。

关于Axure进度条制作的方法,这篇文章讲得最全面!

下面示例在Axure7中操作,但是在Axure8里步骤也是一样的,建议更新至Axure8,因为其具有不少便利的新功能。

一、最简陋的进度条:用于说明原理

1、新建一个矩形,命名为“进度框”;

2、新建一个矩形,让它和之前的矩形大小一样,并重叠,填充黄色,命名为“进度条”;

3、对“进度条”右键,选择“转换成动态面板”,命名为“动态条”,设置宽度为1(因不能设置成0);

4、因进度条一般在页面载入时显示,所以选择“动态条”的载入时–设置面板尺寸–勾选“动态条”,按下图顺序设置宽度,点击fx–在弹出的界面添加局部变量–设置函数–确认,最后不要忘记勾选动画为线性,用时可以随意设置,这里设为5000毫秒;

LVAR1表示“进度框”这个部件,[[LVAR1.width]]则表示“进度框”的宽度。

5、最后点击发布-预览,便可以欣赏你刚刚完成的进度条了。

二、为进度条添加数字,更好地显示进度

1、进度条做好后,在进度条居中位置添加一个Label,设置文字居中显示,并隐藏,命名为“进度数字”;

2、对“进度数字”右键,选择“转换成动态面板”,命名为“动态数字”;

3、对“进度数字”做以下操作,载入时–显示–动态数字+进度数字;

4、对“进度数字”做下图操作,更多事件–显示–设置文本–进度数字–设置局部变量–设置函数–确认;

函数为:

[[Math.floor(LVAR2.width/LVAR1.width*100)]]%

原理为:

进度数字%=动态条的宽度/进度框的宽度*100%

其中Math.floor(X)表示对括号里的X取整。

做完前面4步,会发现显示数字是不会随进度条变化的,因此还需要设置数字显示的自循环。

5、还是在刚才的用例1里依次添加,等待0秒-隐藏This-显示This;

6、最后,点发布–预览,就可以看到带数字的进度条了。

三、各类进度条

抛开UI设计不谈,市面上大多数进度条的运行原理都是差不多的。

只要掌握了以上进度条以及数字添加的原理后,就可以举一反三,设计出形式各样的进度条。

下面是我用Axure做的几款进度条:

为达到旋转等效果,我将Axure7更新至了Axure8。

1、直线型进度条

通过Axure8的“”移动“样式,可以设置文字+水滴随着进度条而移动。

2、圆形进度条

用Axure8实现圆形进度条的方法有很多,下面说我自己的思路。

(1)通过Axure8的形状变换,制作一下5个组件,将其重叠成同一个圆环,“左动”、“右动”代表进度条,“z”、“y”代表用于遮挡的部分,“b”代表背景圆环,上下顺序如下图:

部件上下顺序

(2)页面交互–页面载入时–对“左动”进行设置–等待2000秒–隐藏“z”–对“右动”进行设置;

关于Axure进度条制作的方法,这篇文章讲得最全面!

对 “左动” 的设置

关于Axure进度条制作的方法,这篇文章讲得最全面!

对 “右动” 的设置

(3)前2步做完,进度条的部分就完成了,下面制作数字的显示,添加Label,命名为“数字”,设置好文字的样式,转换成动态面板,隐藏;

(4)设置文字的自循环,首先在动态面板的载入时–显示动态面板+数字;

(5)实际上进度条的载入分为了两段,其中间有一个事件就是“z”隐藏,于是便利用“z”作为条件来区分计算“数字”,在动态面板的显示时–case1–设置条件为 if 元件可见 z ==true –设置文本(这里使用的函数是 [[Math.floor(LVAR1.rotation/360*100)]]% ;LVAR1代表元件“左动”)–等待0秒–隐藏this–显示this;

(6)case2–设置条件为 if 元件可见 z ==false –设置文本(这里使用的函数是 [[Math.floor((LVAR1.rotation+180)/360*100)]]% ;LVAR1代表元件“右动”)–等待0秒–隐藏this–显示this;

3、文字型进度条

(7)发布–预览,就大功告成了。

四、小结

进度条的制作在Axure里应该算是比较简单的,只要理解了基本的原理,就能变换出各种不同样式的进度条。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/215463.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
创业小编创业小编管理团队
上一篇 2023年1月30日 13:08
下一篇 2023年1月30日 13:09

相关推荐

  • 小编分享外贸推广是什么。

    做外贸的小伙伴们都知道,喝到吐、跑断腿的传统推广方式并不适合我们外贸行业,在信息时代有多种多样的推广方可供我们选择,可是那么多的推广方式,哪一道才是你的菜呢?也许是搜索引擎,也许是B2B平台,更也许还有…

    2023年7月15日 创业分享
    00
  • 我来教你社群营销运营(不一样的营销思路!)

    1、裂变海报 裂变海报一定要遵循用户刷朋友圈的场景去进行设计。 所以我们在设计海报的时候,要考虑什么样的内容和图片点击率会更高。我们设计的海报有一个特点,就是主视觉的字会特别大,大到缩略图也能看清,配上…

    2022年11月21日
    00
  • 分享产品设计需求有哪些。

    我们听多了关于why和what的balabala,最后发现要么落不了地,要么最终效果和想要的完全不是一个东西。所以,本文作者想和你聊聊关于需求落地的那些事儿…… 产品设计3步曲-“2W1H” 任何一个伟大的产品的诞生都会经历这…

    2023年1月30日
    05
  • 小编分享自媒体采集平台都有哪些,有哪些渠道。

    自媒体是一种新的传播方式,也是互联网的产物,自媒体内容由之前的图文慢慢的转变成了视频和短视频的模式,而现在的自媒体平台很多,那么自媒体采集平台都有哪些?自媒体采集平台都有哪些?1、爆文采集网站易撰爆文采…

    2022年11月12日
    04
  • 分享搜狐广告如何投放。

    随着社会进步,人们的生活节奏也变得越来越快,无论是生活上还是工作上我们都只能从中摄取碎片化的时间来进行闲暇时间的消遣。移动互联网的出现给人们提供了利用碎片化的渠道,所以人们在对于阅读性平台的依赖性也…

    2022年12月31日
    05
  • 小编分享企业网站制作步骤有哪些。

    在现在这个网络经济时代,互联网已经变成大家生活学习工作的一部分,很多人每天都会使用电子产品浏览信息,比如:做饭时也会在网络上搜索菜谱,在乘坐交通工具时也会刷各个网站,浏览各个网络平台,互联网可以协助…

    2023年7月11日
    00
  • 教你杨财彬:微信营销两大裂变系统。

    对于裂变,想要做好业绩、想要规模化的任何人、任何团队或企业,裂变都一定是要解决的问题。如果不解决裂变,不管是个人业绩、团队还是企业, 永远做不大,永远无法规模化。 团队和企业那就更不用说了,裂变意味着…

    2022年12月14日
    02
  • 教你水滴手机有哪些。

    水滴屏和刘海屏同是全面屏,也有区分,相比于刘海屏,一方面水滴屏在外观上更加美观,符合人们的审美习惯,另一方面水滴屏大大提高了屏占比,使得视野更加开阔。水滴屏的出现,可以说是工业设计的进步也是科技的进…

    2023年7月21日 创业分享
    00

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息