axure原型设计之播放控制条

2017年3月17日 阅读:741

效果图:axure原型设计之播放控制条

看视频时或者听音频时,播放控制条基本是必备的控件,以方便用户随意快进快退到随意一个点,这也正是互联网便捷人性的体现。看似简简单单的播放控制条,若想将其原型制作成可拖动效果,还是得下一番功夫的,这篇文章就教大家如何使用axure原型工具制作播放控制条。

第一步:拖拉摆放控件

首先,拖拉一个动态面板(600X100)放在适当位置,命名为“面板1”;

然后,在“面板1”的state1面板状态中放置3个控件;

1、一个动态面板(10X30),命名为“面板2”,另外,因为只有动态面板才有拖动时用例,所以要在“面板2”的state1面板状态中放置一个黑框灰底矩形(10X30),命名为“控制点”;

2、一个黑框灰底矩形(600X10),命名为“控制条”;

3、一个黑框白底矩形(600X10),命名为“控制槽”。

第二步:为“面板2”设置拖动时用例

在拖动时用例中,添加2个移动动作。

1、移动“面板2”,移动设置为“水平拖动”,添加左侧边界大于等于0,添加右侧边界小于等于“控制槽”的宽度。

2、移动“控制条”,移动设置为“水平拖动”,添加左侧边界大于等于“控制点”的宽度减去“控制条”的宽度,添加右侧边界小于等于“控制槽”的宽度。

至此已经制作完成,预览时拖动“控制点”即可以看到效果。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

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

13条评论

  • 晓艳 2017年4月26日在下午6:31

    自己没检查出来的原因主要是没理解原理。现在理解了。

  • 晓艳 2017年4月26日在下午5:23

    我完全按照教程的步骤,可是做出来初始状态不对。要把控制条移到最右再移到最左后就对了。是哪一步有问题吗?我检查了很多遍,设置的确和楼主的一模一样呢。这是我做出来的效果: http://df19v1.axshare.com

    • 维度 2017年4月26日在下午5:40

      你的灰色条的初始位置好像不对

      • 晓艳 2017年4月26日在下午6:06

        哈。果然是灰色条的初始位置。灰色条虽然也是600×10, 但是应该有一部分是伸出来面板1. 这样才会有楼主教程中图二的样子。唉,我检查了快一个小时没找到原因。多谢指点哟。

  • Echo 2017年4月13日在上午11:10

    谢谢楼主大人的教程,但是有个问题,控制条和控制槽都是600*10,那怎么在图上显示的是一半白一半灰色呢?我画的是全灰啊,当然效果也没有达到,请问是什么原因?

    • Echo 2017年4月26日在下午5:43

      谢谢大神!!!已经做成功啦!太感激啦!

    • Tracy 2017年5月31日在下午3:49

      我做出来跟你曾经的情况一样,一开始显示是全灰的,请教一下,你是怎么解决的?感谢~

      • Echo 2017年6月1日在上午9:04

        注意控制点、控制条、控制槽的嵌套位置,他是有两个动态面板嵌套的

  • 静静 2017年4月12日在上午9:19

    作者你在第一步中
    一个黑框白底矩形(600X10),命名为“控制条”;
    一个黑框灰底矩形(600X10),命名为“控制槽”。
    与图中的控制槽和控制条颜色相反,
    实验了您说的方法没有作出您链接中的动效,希望您及时修改。

    • 维度 2017年4月12日在上午9:25

      多谢!已在博客中修改了

      • 静静 2017年4月13日在上午11:10

        谢谢分享,做成功了。

  • 楚权 2017年4月9日在下午5:32

    谢谢分享。
    我按你的步骤一步步操作,但最后没实现你想要的效果,控制条不能拖动。
    想麻烦你看一下哈~
    http://pan.baidu.com/s/1slbb4Qh

    • 维度 2017年4月9日在下午5:52

      你这个错的地方太多了,比如元件的摆放层次,控制点的用例,拖拉边界等都错了,你得看着文章和截图来做才行,这篇文章有个地方是我的错,已经在博客上更新了