登录 | 立即注册
群英荟萃 首页 产品狗 产品设计 查看内容

axure原型设计之拖动设计(如音量条)

2017-3-10 16:17| 发布者: xuyuanfan77| 查看: 56| 评论: 0

摘要: 我也是刚开始学习axure原型制作,主要是想要记录下来,形成自己的原型库,记录的过程,本身也是一种熟悉和思考,使用产品经理常用工具软件制作产品经理原型,借此也可以分享给需要的人作为参考;基本都会是控件里面 ...

我也是刚开始学习axure原型制作,主要是想要记录下来,形成自己的原型库,记录的过程,本身也是一种熟悉和思考,使用产品经理常用工具软件制作产品经理原型借此也可以分享给需要的人作为参考;基本都会是控件里面最简单的操作步骤。

这里分享动态面板之拖动。

第一步:拖入三个矩形和一个椭圆形控件 ,分别命名为【左触点】、【右触点】、【滑动条】、【圆球】;坐标,宽高如下:

  • 【左触点】——(0,0)(30,100)
  • 【右触点】——(400,0)(30,100)
  • 【滑动条】——(30,40)(370,20)
  • 【圆球】——(121,30)(40,40)

第二步:选中【圆球】和【滑动条】鼠标右击,转化为动态面板;如图所示,

第三步:进入动态面板的编辑页面,鼠标点击空白页面,右边属性栏——选择事件【拖动时】——选择【移动】——勾选【圆球】——移动选择【水平拖动】——设置界限如图所示;运行,一个简单的滑动条就成型了。

第四步:如果要让【圆球】接触触点,并做出相应的事件动作;可以如下设置;

这里做的动作是;如果圆球接触【左触点】或者【右触点】就会弹跳到坐标(185,0)

圆球接触【右触点】设置:

入动态面板的编辑页面,鼠标点击空白页面,右边属性栏——选择事件【拖动时】——双击添加第二个Case2——添加条件——编辑IF条件,具体如图所示——然后选择【移动】——勾选【圆球】——移动选择【绝对位置】,坐标为(185,0),动画为弹跳——设置界限如图所示;

圆球接触【左触点】设置,重新添加一个Case3,只需要把条件语句里面选择成【左触点】即可,其他的都是一样:

第五步:最后,观察一下右边属性框的事件页面,Case2和Case里面的条件语句都是Else If ;选中鼠标单击右键,选择切换成 If 语句;然后运行,就可以了。

(if 和 else if 的区别建议多设置几个动作体会一下其中的区别)


鲜花

握手

雷人

路过

鸡蛋
交流平台
群英荟萃交流群:群英荟萃1群
热门文章
产品经理面试的15个问题
产品经理面试的15个
- 1 -请罗列用户研究方法有哪些?如何进行
3种产品经理必须掌握的流程图
3种产品经理必须掌
刚入行的时候,我会火急火燎地画原型图,因
如何编写一份优秀的产品需求文档?(一)
如何编写一份优秀的
一、引言 1.0文档属性 1.1产品综述 1.2产品
2017年网页设计之十大趋势
2017年网页设计之十
又迎来了崭新的一年,让我们来了解网页设计
产品经理如何找工作
产品经理如何找工作
春天来了,又到了…找工作的季节 考虑到现

Archiver|手机版|小黑屋|群英荟萃 ( 粤ICP备16069393号-2

GMT+8, 2017-7-27 00:31 , Processed in 0.097005 second(s), 24 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部