投稿

淘宝卖家等级评分图（淘宝用户等级评分图）

用户投稿 • • 营销资讯
淘宝卖家等级评分图（淘宝用户等级评分图）

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

淘宝卖家等级评分图（淘宝用户等级评分图）

那么如何使用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.绘制重新评分按钮

①绘制按钮

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

淘宝卖家等级评分图（淘宝用户等级评分图）

②添加交互效果

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

淘宝卖家等级评分图（淘宝用户等级评分图）

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

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 sumchina520@foxmail.com 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.yiheng8.com/95319.html
赞 (0)
用户投稿
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022年7月4日 pm11:13
下一篇 2022年7月4日 pm11:37

相关推荐

更新视频
一恒问答
我要提问
公众号