Axure绘制星级评分

相信大家在日常的原型绘制中会经常使用到星级评分的功能，比如电商中的订单评价、外卖中的订单评价、骑手评价等

那么如何使用axure绘制这样的效果呢？下面开始整个绘制过程的演示

一、效果展示

 

二、功能解析

主要分为①星级选择模块②重新评分按钮；

主要实现功能为：

①五星主要实现悬停时自动显示选中的效果，停留在某一星时则自动显示前边的星效果

②当点击选中某一星时，自动选中前边的星；且当选中时，不支持再点击星级选中的效果

③点击重新评分，则可重新进行选择

三、原型绘制

1.绘制星级选择模块

先拖入一个矩形，点击右上角的自定义形状小黑点，选择五角星

将五角星设置成合适的大小，我这里设置了20*20，并设置其选中效果，即选中时更换其边框颜色和填充颜色

按住ctrl拖动4个一样的星

2.绘制星级的交互效果

由于我们要实现，在未选中星级时，支持用户点击选择星级；在选中星级时，不支持点击选择星级；所以我们在这里将星级选择模块转化成动态面板，设置未选择和已选择状态

2.1首先我们来编辑已选择中的内容

双击选择动态面板中的已选择状态，依次为5颗星进行命名，star-on-1，star-on-2，star-on-3，star-on-4，star-on-5

2.2编辑未选择状态下的交互效果

①我们首先为每个星都进行命名

在这里依次命名为star-off-1、star-off-2、star-off-3、star-off-4、star-off-5

②设置鼠标移入时的交互效果

当鼠标移入第一颗星时，设置第一颗星为选中，其他四颗星为不选中状态

依次为后边的星添加鼠标移入时的交互效果，移入时选中前边的星，取消选中后边的星

③设置鼠标单击时的交互效果

单击时，将动态面板状态设置为已选中，且选中第一颗星

依次为后边的星添加点击交互事件

3.绘制重新评分按钮

①绘制按钮

拖入一个矩形，调整大小及位置

②添加交互效果

当点击时，将动态面板设置为未选择状态，且将所有的已选择和未选择下的星全部都设置为未选中

到这里星级评分的功能就绘制完毕了，如果有什么疑问大家可以在评论区讨论交流呦~