axure原型设计之进度条

2017年3月15日 阅读:891

效果图:axure原型设计之进度条

进度君是个好东西,因为人在等待的时候总是容易产生一种焦急的心态,所以为了能给用户带来更好的产品体验,进度君出现了。进度君的出现,很容易转移用户的注意力,并且向用户提供事情进展的信息,让用户的等待有了盼头,从而改变了用户等待时的心态。

今天就好好讲讲如何使用axure原型工具设计进度条。主要有以下3步:

第一步:拖放摆好以下3个控件

1、480X20的白底灰框矩形,命名为“边框”,放合适位置即可;

2、1X20的灰底灰框矩形,命名为“进度条”,放“边框”的最左侧;

3、一个文本标签,命名为“百分比”,放“边框”的正中间,初始状态设置为隐藏。

第二步:设置“进度条”的载入时用例

在“进度条”载入时设置其尺寸的宽为“边框”的宽,高为20,锚点为左侧,动画为线性,时间为5000毫秒。

第三步:设置“百分比”的载入时用例和显示时用例

首先,设置“百分比”载入时显示当前原件

然后,设置“百分比”显示时执行4步动作:

1、设置文本文字为“进度条”宽度占“边框”宽度的百分比

2、等待0毫秒

3、隐藏当前元件

4、显示当前元件

Yes,bingo!点击预览就可以了。这是我的第4篇关于axure原型设计系列的文章,也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去。

作者:维度
转载请注明出处:http://weidublog.com/index.php/2017/03/15/109/

3条评论

  • 小伙子 2017年7月24日在下午4:07

    你好,我做的进度条只加载一小段,其中百分比显示为NaN%取不到值是怎么回事啊

  • 王洪亮 2017年7月19日在下午3:42

    为什么最后这个需要加上 隐藏和显示呢

    • 维度 2017年7月19日在下午9:39

      需要不断地循环触发隐藏和显示的交互用例