【基础】超简单的5星评分实现方式

我们知道很多网站、APP等的评价系统都有按星级评分的功能,一共5个星级,依次代表1~5分。且不论这些系统背后的复杂逻辑,单纯从用户打分的角度来讲,似乎是一个非常简单的功能,但对于一个看起简单的功能,用Axure画出它的原型时,却会有多种方式。这篇文章就是要教给大家一个超级简单的实现方式。

1、解析5星评分效果

这里我用一张图来说明:

两点交互说明:

1)鼠标放在某颗星上时,其对应的1个后1组星星高亮显示(如上图对应关系),鼠标离开后,高亮效果消失,恢复为初始态。

2)鼠标点击某颗星星时,锁定星星的高亮显示,鼠标离开后,高亮效果不会消失。

2、原型设计思路

对于这个原型的设计,可能很多小伙伴都会觉得很简单,通常的思路是绘制5个星星形状,然后在每个星星上设置鼠标悬停和点击的事件,这不失为一种方法,但这种方式需要添加过多的事件,操作起来比较繁琐。

而我的思路则是,分别把1星、2星、3星、4星和5星画成5个不同的形状,因为星星的数量不同,所以这5个形状是不同的,这也是与上面思路的最大区别。另外针对这5个形状的鼠标悬停和点击事件,是需要复制即可,相比起来操作步骤就简单的多了。

3、原型制作过程
(1)绘制5星形状

1星的形状可以通过矩形变形来实现(拖入一个矩形,然后在矩形的属性里面选择形状),2星到5星的形状则是通过形状的布尔运算来实现(比如2星就是用两个1星的形状进行布尔运算,然后得到1个2星的形状)

使用同样的方法可以绘制出3星、4星、5星的形状,然后设置5个形状的鼠标悬停效果和选中效果(设置填充色)

最后将1星到5星这5个形状进行叠加放在一起,5星放在最下面,4星放在5星上面,3星放在4星上面,2星放在3星上面,1星放在2星上面,最终的效果就成了下面这样

这时候绘制形状的工作就完成了,此时预览一下效果,已经可以显示鼠标悬停在某个星星上时,对应的1颗或1组星星高亮显示了,接下来我们给形状添加点击事件,实现高亮效果的锁定。

(2)添加交互事件

添加交互事件的过程,就体现出了这个实现方法的简便之处,因为我只需要给1个形状(比如1星)设置好了交互事件后,就可以完全复制到另外4个形状上,而不需要分别单独去设置。

我给1星设置的交互事件是:鼠标单击时,设置所有形状的(1星、2星、3星、4星、5星)的选中状态为“false”,然后设置This(当前元件)的选中状态为“true”

剩下的2星、3星、4星、5星的交互事件则可以完全复制1星的交互事件,到此为止,5星评分的原型就做完了。当然这只是评分系统最基本的功能,由此还可以延伸出更复杂的设计,那就留个小伙伴们自行去探索吧。

评论(0 个评论)

发表回复

您的电子邮箱地址不会被公开。