【Axure教程】滑动评分条

259 篇文章 24 订阅
71 篇文章 3 订阅

评分控件是原型中常用的控件,主要有星级评分控件和评分条控件,由于axure自带的元件库里并没有高保真的评分条控件,所以本期教程主要介绍如果制作评分条控件,方便我们日后的使用。

【原型预览】

https://axhub.im/ax9/4775bc9596a9e89f/#g=1

【原型下载】

方式1:加入原型分享群后,可免费分享该原型,请咨询微信522073109

方式2:https://weidian.com/item.html?itemID=4296566017

一、制作完成后的评分条控件应具备以下效果:

  • 滑块可以在评分区域内左右滑动

  • 随着滑块滑动,根据元快所在位置,自动计算分数

  • 点击滑条,让元快到达点击的位置,并自动计算分数

  • 根据分数的高低,整个评分条控件变色,低分区变成红色,正常去为蓝色,高分区为绿色。

原型演示地址:https://1t8juj.axshare.com

二、制作材料

制作材料全部都是用axure原生的的材料,具体包括以下材料:

  • 灰色滑条:背景滑条,使用矩形制作,圆角设置为最大,位置置底

  • 蓝色滑条:使用矩形制作,圆角设置为最大,交互样式选中时为绿色,禁用时为红色,稍后我们通过选中和禁用的交互令其变色。位置位于灰色滑条上方

  • 透明滑条:仅用于交互处理,使用矩形制作,圆角设置为最大,选择透明颜色,需要和灰色滑条大小一致,放置在蓝色滑条上方

  • 滑块:使用圆形制作,调整边框线大小,设置边框线为蓝色,交互样式选中时边框线为绿色,禁用时边框线为红色。

  • 分值:使用矩形制作,右键变换形状为成提示框形状,交互样式选中时为绿色,禁用时为红色。

  • 动态面板:将滑块和分值放置在动态面板内,因为只有动态面板才能实现拖动效果,将动态面板置于顶层。

如下图所示摆放:

三、制作交互

1)滑动效果——移动事件

拖动动态面板时,跟随鼠标水平移动动态面板,这里需要设置左右边界,左侧边界要大于灰色滑条的x坐标值-滑块的坐标值-滑块宽度的一半;右侧边界要小于灰色滑条的x坐标值+灰色滑条的宽度+滑块的坐标值+滑块宽度的一半,这样滑块就可以在滑条内水平拖动了。

2)调整蓝色滑条的宽度——设置尺寸

拖动动态面板时,我们需要根据滑块的位置,设置蓝色滑条的尺寸,高度是不变的,所以设置为target.height;宽是改变的,所以设置为蓝色滑条的宽=动态面板的坐标值-蓝色滑条的x坐标值+滑块的坐标值+滑块宽度的一半。

3)计算分值——设置文本

拖动动态面板时,我们还需要根据滑块的位置,计算分值,首先我们要计算滑块所在位置占滑条的比例=动态面板的x坐标值+滑块的坐标值+滑块宽度的一半-灰色滑条的x坐标值,然后除以灰色滑条的宽度。

计算出比例以后我们乘以满分值(例如100),最后用tofixed的函数取整数就可以。

4)变色效果——选中、禁用事件

计算分数完成后,我们根据不同的分值,设置蓝色滑条的颜色。

案例中是低于33分边红色,33-66是蓝色,66以上为绿色,你们可以根据实际需要设置交互,具体交互如下:

如果分值<33,禁用分值、滑块、蓝色滑动条,因为前面设置了这三个的禁用颜色为红色,所以满足这个条件就会变红,如果不满足该条件,启用分值、滑块、蓝色滑动条,启用后将恢复原样。

如果分值>66,选中分值、滑块、蓝色滑动条,因为前面设置了这三个的选中颜色为绿色,所以满足这个条件就会变绿,如果不满足该条件,取消选中分值、滑块、蓝色滑动条,取消选中后将恢复原样。

5)点击滑条移动滑块到指定位置

先移动动态面板到鼠标点击的地方,这里就要用到Cursor.x,就是鼠标所在位置的x坐标,再减去动态面板一半的宽度。

在设置蓝色滑条的尺寸,蓝色滑条的宽=动态面板的坐标值-蓝色滑条的x坐标值+滑块的坐标值+滑块宽度的一半。

然后设置分值,和之前计算分值的方式是一致的,先计算滑块所在位置占滑条的比例=动态面板的x坐标值+滑块的坐标值+滑块宽度的一半-灰色滑条的x坐标值,然后除以灰色滑条的宽度。计算出比例以后我们乘以满分值(例如100),最后用tofixed的函数取整数就可以。

最后同样是根据分值来变色,条件、交互和上面完全一致,我们直接复制过来即可:

如果分值<33,禁用分值、滑块、蓝色滑动条,因为前面设置了这三个的禁用颜色为红色,所以满足这个条件就会变红,如果不满足该条件,启用分值、滑块、蓝色滑动条,启用后将恢复原样。

如果分值>66,选中分值、滑块、蓝色滑动条,因为前面设置了这三个的选中颜色为绿色,所以满足这个条件就会变绿,如果不满足该条件,取消选中分值、滑块、蓝色滑动条,取消选中后将恢复原样。

以上就是高保真滑动评分条的制作方法了,感兴趣的同学们可以动手试试,谢谢您的阅读。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梓贤Vigo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值