Axure学习教程:利用动态面板制作滑动条

2024-02-0210:12:03原型设计Comments1,560 views字数 1526阅读模式

预览地址:https://ws8zsg.axshare.com文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

一、准备阶段

先制作一个335*36的矩形(命名为:分母),将矩形的4个角的圆角设置为18;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

在矩形分母上方,制作一个100*36的矩形(命名为:分子),矩形分子左侧的两个圆角设置为18,将其颜色改为蓝色,并增加1像素的边框效果(如图);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

Axure学习教程:利用动态面板制作滑动条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

注意:这里的边框效果选色时最好是纯色,不设置透明度的。不然之后会出现一些无法解释的后果(坏笑一下)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

因为需要拖动,那我们这边增加一个拖动的载体:制作一个36*36的圆,去掉边框;为了后续看到的圆会更立体些,可以增加移量为0*0、范围为5的投影效果;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

Axure学习教程:利用动态面板制作滑动条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

差点忘记了,还需要在最上方增加一个表单元件中的文本框,将该元件禁用后,把其元件样式改为文本段落(如图),删除系统默认的交互样式,并将字体的对齐方式改为居中(为啥要将元件的样式改为文本段落,这个在之后讲解交互的时候再透露);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

Axure学习教程:利用动态面板制作滑动条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

准备工作已经完成了,接下来就该开始设计交互效果了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

二、交互设计

在预览的地址中,可以看到滑块需要跟随移动。所以我们需要选中圆,然后鼠标右击,将其转换为动态面板,并在交互中选择【拖动时】的交互:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

  • 拖动时,我们需要水平移动圆的位置,设置动态面板跟随水平移动;
  • 因为我们需要圆在分母的范围内进行移动,那再给圆设置一个左右的限制。左侧:需大于等于分母的左边位置;右侧:需要小于等于分母的右边位置(如图);

Axure学习教程:利用动态面板制作滑动条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

左侧函数:[[LVAR1.left]] ;右侧函数:[[LVAR1.right]]。其中“LVAR1”为局部变量,指代分母(如图);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

Axure学习教程:利用动态面板制作滑动条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

移动的效果已经设置完成了,接下来需要让分子跟随圆移动的距离,改变长度。给动态面板增加设置分子尺寸的动作;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

  • 先要知道圆具体移动的多少距离要怎么算,需要有个静态的参照物,而滑动条中唯一是静态的就只有分母了,所以我们需要使用圆移动后的 X 坐标减去分母的 X 坐标,这就获得了偏移量(如图),x轴的函数为:[[This.x-LVAR1.x+18]] ;
  • Y轴由于没有变化,这里就直接使用了分子原来的高度36,锚点可以是左上或者左侧都可以;

Axure学习教程:利用动态面板制作滑动条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

前面有提到,不要给分子的描边颜色增加透明度,是因为增加透明度后,在你移动后,分子的样式会发生变形,至于原因,我也不知道,这只是我踩到的坑。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

接下来,我们需要对文本的内容进行设置了,给动态面板再增加一个设置文本的动作:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

  • 数值占比,具体计算:用分子的宽度 除以 分母的宽度,再乘以100,然后取整;所以我们这里需要用到取整的函数 toFixed(decimalPoints) (如图);

Axure学习教程:利用动态面板制作滑动条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

  • 设置局部变量“LVAR1” 为分子,“LAVR2”为分母;整体的函数为:[[((LVAR1.width-18)/(LVAR2.width-36)*100).toFixed(decimalPoints)]](如图);

Axure学习教程:利用动态面板制作滑动条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

再注意一个细节:我的分子位置就到圆形的一半,如果要是和圆形右对齐的话,在缩到最右侧的时候,分子也是会出现变形,所以我这边在计算时,需要将分子的长度减去18,分母的宽度减去36;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

到这一步就可以算是完成了滑动条的设计了,可以先预览下效果,但你可能会发现停留在文字上方的时候,就会变得特别难拖动了,别急,还有两个步骤;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

三、优化升级

前面之所以使用表单元件文本框,是因为文本框可以设置一个文本改变时的交互动作,你预览现在的效果,能看到数值是从0到100;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

所以这里需要给文本框增加一个交互效果:文本改变时,将内容设置为数值:1(如图);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

Axure学习教程:利用动态面板制作滑动条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

这里需要增加一个判断条件,就是当数值等于0的时候,我们需要将数值强行设置为1;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

最后,将素材全选后,鼠标右键将其转换为动态面板,再为动态面板增加拖动时的交互,动作设置为触发动态面板1的拖动效果,就有了原型预览里体验到的效果了(如图)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

Axure学习教程:利用动态面板制作滑动条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

作者:阿幸文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/59024.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/59024.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定