【案例分享 | 旅游出行app】Axure制作五星评分的交互效果（最详细）

嗨，大家好！今天给大家介绍，如何用axure制作五星评分的交互效果。

【案例预览地址含下载】电脑打开链接：https://85bmae.axshare.com/

【完整案例作品预览含下载】：https://fx2z9z.axshare.com

一、案例介绍

【视频教程】：哔哩哔哩视频

首先，让我们来看下效果，进入界面，点击对应星星图标可以进行评分。我们看下如何制作。

【效果预览】：

二、案例步骤

首先，我们先从阿里图标库下载一个未选中状态下星星图标；接着修改下图标颜色，做为选中状态下的星星图标，并下载下来，然后将下载好的二个图标拖入到axure中。

我们复制出四个未选中状态的图标，调整一下它们的间距。将其编组，并命名为”状态1“

然后再复制”状态1“的图标，将第一个图标替换为选中状态，然后编组并命名为”状态2“；接着再复制一份替换后的图标，将第二个图标替换为选中状态，编组并命名为”状态3“；依次类推，直到全部图标全部替换为选中状态下的图标。

现在，全选”状态1“下的图标，右击将其转换为“动态面板”，双击进入到动态面板中，再新建五个面板状态，一共六个面板状态。然后分别将”状态2“放入对应的动作面板，State2中；将”状态3“放入对应的动作面板，State3中“。依次类推，直到将所有的状态放入到对应的动态面板中，这样动态面板的内容已经创建好了。

然后我们开始做点击各图标，展示对应的动态面板内容。

接着我们创建一个热区，调整下尺寸，并放在第一个图标上，给第一个图标，新建”鼠标点击时“的交互事件，设置其面板状态显示为”State 2“。这样点击第一个图标，会显示”State2“的内容，然后再复制一个热区到第二个图标上，修改面板状态为”State3“；依次类推，直到设置完最后一个图标的面板状态。

通过以上步骤，我们已经完成了效果制作。现在让我们预览一下效果。可以看到，效果已经实现。

以上就是本次教程的全部内容。下一个视频再见啦！