快好知 kuaihz

Axure教程:原型设计之播放控制条

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

第一步:拖拉摆放控件

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

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

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

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

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

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

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

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

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

至此已经制作完成,预览时拖动“控制点”即可以看到效果。

效果图:http://hjchbk.axshare.com

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:原型  原型词条  播放  播放词条  控制  控制词条  教程  教程词条  设计  设计词条  
原型

 Axure教程 | web端的验...

上一篇文章给大家分享了如何制作web端的注册和登录,没有看过的小伙伴“点击这里”。今天给大家带来了的是升级版本,如何制作“验证码”。为什么会出现“验证码”这种反...(展开)

原型

 Axure 教程:轻松导出图标字...

近几年图标字体使用非常广泛,它的优点是可以自定义图标颜色、大小等参数,且图标不会失真。本文将教你轻松导出图标字体中的所有图标,任你所用。一、问题来源最近在集中整...(展开)