Axure 9 实战案例，中继器的应用 2，列表的交替色和悬停色_axure中继器选中颜色改变

作者：Gausst松鼠会 | 2024-02-18 19:59:47

踩

axure中继器选中颜色改变

Hello！欢迎来到Axure 9 实战案例专栏（进阶篇）。课程简介>>

在上一篇教程，我们讲解了如何使用中继器绘制原型列表页（了解更多>>），相信大家已经运用上了吧？是不是觉得既好玩又省时间呢？

本篇我们继续带来中继器的教程，让我们一起来学习一下，中继器列表如何实现交替色和悬停色。

在这里插入图片描述

完成效果图

我们先来看看APP列表页的效果图，大家可以看到列表页的颜色交互主要包括：
①列表每隔一行显示为浅灰色，呈现斑马线状；
②鼠标移至某行上，该行显示淡蓝色悬停色。

在这里插入图片描述

列表初稿

为了节省时间，这里我们提前把列表初稿准备好了。（注：列表的标题行也可以溶合到中继器中，即在数据的第一行添加上标题，只是就不能给标题行单独设置背景色了，如果追求高保真原型设计，通常是把标题行独立出来；另外，某些固定不变的元素，可以直接添加到列表中，而不需要添加到数据里，比如图中的<删除>按钮。）

下面我们来给大家讲解一下，如何实现中继器的交替色和悬停色。

首先选中中继器列表，在右侧栏的样式中，勾选背景里的交替颜色；然后点击颜色，打开颜色设置弹窗，设置背景颜色为白色（默认为透明）；再点击交替，继续打开颜色设置弹窗，设置交替颜色为浅灰色（默认为透明）。

温馨提示：中继器中的元件填充色必须是透明色，不然会遮挡了中继器的背景色

在这里插入图片描述

选中中继器列表，再勾选交替颜色

在这里插入图片描述

点击颜色，打开颜色设置弹窗，设置为白色

在这里插入图片描述

点击交替，打开颜色设置弹窗，设置为灰色

这一步的设置是比较简单的，只要知道了选项的位置和设置方法，一学就会了。而常见的列表背景色是白色（#FFFFFF），交替色是浅灰色（如#FAFAFA）。

在演示如何设置悬停色前，我们需要提前说明一件事情，那就是在绘制中继器列表时，需要使用矩形，不能用表格。因为表格不能实现连续的鼠标悬停效果，直白点说就是只有第一次悬停时会变色，再移动鼠标时就没效果了（如下图所示）。

在这里插入图片描述

中继器表格的悬停效果

回到正题上来，首先双击中继器进入编辑状态，选中全部矩形，在右侧栏的交互中，点击<添加类似"鼠标悬停"的交互样式>，再点击菜单中的<鼠标悬停的样式>，勾选填充颜色，然后点击右侧的色块，打开颜色设置弹窗，设置悬停颜色为蓝色。

在这里插入图片描述

选中中继器的全部矩形，再点击右侧栏交互的<添加类似"鼠标悬停"的交互样式>

在这里插入图片描述

点击<鼠标悬停的样式>，勾选填充颜色，再设置悬停颜色为蓝色

接着保持选中全部矩形，设置为组合，将全部矩形组合起来，然后在右侧栏的交互中，勾选<触发内部元件鼠标交互样式>（这一项是关键，勾选后才能最终实现中继器列表行的悬停效果）。

在这里插入图片描述

组合全部矩形，再勾选<触发内部元件鼠标交互样式>

OK了，通过以上简单2个步骤，就可以给中继器列表设置出交替色和悬停色了；如果你还有不理解的地方，可以下载文末的课件继续学习哦。

在这里插入图片描述

练习稿效果