《Axure设计软件开关状态切换操作实例》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强交互产品,元件,界面设计,美观度等多维度案例或实操来进行更多的学习;此教程是由福到家在2021-07-05发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
Axure怎么设计APP开关状态切换?使用手机的时候,我们开启或关闭app的功能的时候,会出现一个滑动按钮,该怎么制作这个原型呢?下面我们就来看看详细的教程,需要的朋友可以参考下:
首先,来看一下演示动画
首先需要打开Axure软件,并在画板上创建两个图形:一个为300*40的矩形,需要在“样式”一栏中修改它的元件半径为60,背景填充颜色为灰色,线段类型为无none,并命名为beijing;一个为45*45的圆形,填充颜色为深灰色,线段类型为无none,并命名为anniu。
创建完以后需要把两个元件居中对齐。
(1)设置圆形anniu的交互动作(case 1)
当鼠标点击时,移动当前元件到绝对值X、Y
X=[[anniu.x+beijing.width-anniu.width]],需要定义Fx的局部变量anniu以及beijing
上面函数的意思为:按钮的X坐标值+后面矩形背景的宽度-按钮的宽度,因为元件的X坐标是以左边为基准的。
Y=[[target.y]],target不需要定义因为它的含义为“目标的” ; [[target.y]] 意为:移动后的Y坐标和移动前的一致。
动画为线性500ms
现在可以点击预览一下画面,然后你就会惊奇的发现还没有设置颜色变换。
所以我们还要设置anniu选中状态!因为选中状态可以切换颜色进行变化展示。
(2)改变选中交互设置
下面需要设置anniu、beijing的选中交互设置为改变填充颜色
如下图所示:
接着设置鼠标单击anniu的交互动作为选中状态于anniu、beijing为true;
(3)设置选中状态及交互条件(case 2)
然后设置鼠标单击anniu的case 2 的条件为当anniu的选中状态为true的情况下
移动当前元件到绝对值,X=[[anniu.x+anniu.width-beijing.width]],同样也需要进行Fx的定义。
Y=[[target.y]], 动画为线性500ms。
设置选中状态于anniu、beijing为flase,这样可以达到周而复始循环开关的效果。
(4)设置case 1的条件
要实现循环开关,则需要给case 1进行条件约束,保证case 1和case 2不互相进行干扰。因为要是不给case 1限制的话,当鼠标点击按钮后,元件会移动到指定位置完成第一步操作。但是再次点击按钮后,元件会继续往前移动,一直进行case 1 的动作而不运行case 2 的动作。
所以需要在case 1前设立条件如果anniu的元件状态为flase,这样就可以循环满足条件实现原型设计。
因为交互用例中没有直接改变目标颜色的交互操作,所以如果你想要更改目标颜色,不妨试试使用选中状态、禁用状态、鼠标按下以及鼠标悬停这些设置,通过设置状态变化从而切换显示颜色。
以上就是Axure设计软件开关状态切换操作实例的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 Axure制作APP折叠面板 axure手风琴制作教程操作实例
> 下一篇 Axure制作雷达效果操作实例
2022-08-24 09:29
2022-05-09 10:55
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论