【Axure】实现点评网星星打分效果

我们常在各类点评网上看到星星打分结果,若何利用Axure快速实现这种结果?简单几步,让你轻松解决 。

【Axure】实现点评网星星打分效果

文章插图

需要这些哦
Axure RP 8
方式/
11.  新建文件,拖入一个矩形,点窜【属性】中的外形为星形 。

【Axure】实现点评网星星打分效果

文章插图

22. 借助对齐和分布东西,进行以下摆列 。

【Axure】实现点评网星星打分效果

文章插图

33. 将每行星星归并当作一个星星组:选中两个星星-->【样式】-->【连系】-->点窜名字,如星星2 。

【Axure】实现点评网星星打分效果

文章插图

44. 第3步完当作后页面概要布局如下:

【Axure】实现点评网星星打分效果

文章插图

5【【Axure】实现点评网星星打分效果】5.设置每行星星的【外形属性】:将星星全选-->【属性】-->【交互样式设置】下的【鼠标悬停】-->勾选【填充颜色】,设置填充颜色-->【交互样式设置】下的【选中】-->设置填充颜色同上 。

【Axure】实现点评网星星打分效果

文章插图

66. 将“星星1~星星5”这五个外形进行叠加放在一路,星星5放在最下面,星星1放在最上面-->对这五个外形进行左对齐摆列 。

【Axure】实现点评网星星打分效果

文章插图

77. 添加交互事务:选择星星1-->双击【属性】下的【鼠标单击时】-->如下设置选中状况 。

【Axure】实现点评网星星打分效果

文章插图

88. 直接复制星星的交互事务,给其他的星星行粘贴-->注重按照当前需要点亮的星星,点窜选中状况 。 如星星2点亮时,记得将刚复制过来的【星星2选中状况为“false”】改为【星星1选中状况为“false”】 。

【Axure】实现点评网星星打分效果

文章插图

99. 【F5】预览 。

【Axure】实现点评网星星打分效果

文章插图

10若是您感觉有效,记得在下方点击投票、点赞、存眷、留言,小编会定期送上更多的惊喜哦,您的撑持才是小编继续尽力的动力,么么哒 。

【Axure】实现点评网星星打分效果

文章插图


以上内容就是【Axure】实现点评网星星打分效果的内容啦,希望对你有所帮助哦!

    推荐阅读