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

前言

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

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

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

完成效果图

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

列表初稿

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

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

第一步：设置中继器列表交替色

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

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

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

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

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

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

第二步：设置中继器列表悬停色

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

中继器表格的悬停效果

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

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

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

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

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

结语

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

练习稿效果

在线预览

效果图在线预览：https://u.pmdaniu.com/L8A5p

相关课件

为了帮助各位同学，能快速理解和练习Axure案例，本专栏每篇教程都会提供RP格式课件下载。

链接：https://mosi.lanzoui.com/b01i339vg
密码：bxw6

（@默林如斯原创出品，未经许可，禁止转载，侵权必究）

《Axure 9 案例教程-进阶篇》：从实战案例的角度，讲解Axure 9 的进阶操作，帮助大家从案例中学习产品原型的高交互设计，助你快速提高实战能力！适合Axure准备进阶的同学！(提供Axure课件)
全部进阶教程：https://blog.csdn.net/congzi530/category_10760486.html

欢迎关注《产品经理知识与资源》专栏，这里专注原创Axure实战原型、Axure原型模板、Axure元件库、Axure图标库；2012年入行的原创实力保障！！点击前去关注>>