Axure学习之10分制评分效果

学习Axure已经有一段时间了，日常工作中只是用Axure的一些基本元件，画一些基本的原型图，偶尔也涉及一些简单的交互，至于高逼格的高保真原型图，在如今的工作中，根本没有使用的必要。因此，学习画一些比较复杂的交互案例，纯粹是因为兴趣。

• 系统环境：windows 10

• 软件版本：Axure 8.0 汉化版

• 基本思路：制作案例所需素材图片，包括鼠标选中和未选中时的两种颜色的图片，通过设置『鼠标单击时』、『鼠标移入时』、『鼠标移出时』的『设置选中』动作，当鼠标移入时，鼠标所在图片及其之前的图片被选中，呈现出被选中效果；鼠标移出时，选中效果消失；鼠标单击时，选中该位置以及之前的图片，即可实现我们平时见到的那种评分效果。

  
  
  

  最终的运行效果图

• 步骤：
  1.首先处理素材图片，如图所示，网上直接down下来的灰色和红色两种心形图片。因为是要做成10分制评分效果，这里需要把一个心形平均分隔成两部分，比较简单的方法是使用Axure 8.0的『分隔图片』操作，很容易就把一个心形分割成两个部分。

  
  
  

  素材图片
  
  

  2.图片分割好后，选中图片，右键单击选择『交互样式...』，选择『选中』时的交互，勾选『图片』前的复选框，导入切割好与灰色图片相对应的红色心形图片。这样就可以实现图片点击选中时的换色效果，这个效果也可以用动态面板实现，不过这样做实现起来比较简单。依次处理其他的几颗心形图片。

  
  
  

  选中换色后的图片
  
  此时在浏览器预览，可以看到当鼠标滑到图片上时，该图片及其之前的图片都是选中状态，当鼠标移除时，只有第一张图片是选中状态，当然，这样还是不够的，我们还要接着往下做。
  3.选中第一个半颗心形图片，点击『鼠标移入时』，在『添加动作』栏，选择『设置选中』，结果如下图所示，第一张图片就设置状态1为true，其他为false；第二张图片就设置状态1和状态2都为true，其他为false；其中1,2,3,4,5，...是每张图片的名称。再选择动作『设置文本』，将文本框内容设置为『非常差』，依次设置其他的九张图片。

第一张图片的鼠标移入时的动作

4.选中第一个半颗心形图片，点击『鼠标单击时』，在『配置动作』栏，选择『添加全局变量』，添加全局变量『score』，然后设置score值为1,；在『添加动作』栏，选择『设置选中』，第一张图片就设置状态1为true，其他为false；第二张图片就设置状态1和状态2都为true，其他为false；其中1,2,3,4,5，...是每张图片的名称。再选择动作『设置文本』，将文本框内容设置为『非常差』，依次设置其他的九张图片。

第一张图片的鼠标单击时的动作

5.选中第一个半颗心形图片，点击『鼠标移出时』，在弹出框上方点击『添加条件』按钮，在弹出框填写信息如下：

添加的if条件

然后在设置动作，设置动作与『鼠标移入时』类似，结果如下：

第一张图片的鼠标移出时的部分动作

如上所示，一直设置到score值为10 ，最后再添加一个else条件，即如果鼠标移出时没有选择任何一张图片，就设置所有图片值都为false，文字显示为默认文字.

没有单击选中图片时

复制图片1的『鼠标移出时』用例，粘贴给其他9个用例。
6.至此，该实例已经全部完成，预览即可看到效果。

因为文章缺少动态图片，表述起来不够直观，浏览者可能不那么容易看懂。后期gif图片制作好后再上传图片。5分制评分效果也可以类似的做出来，只是心形图片就不用切割成两个部分了。同时后面的提示文字文本框也可以显示score的值，类似的浏览者可以自己模拟做出来。