Axure 9 实战案例，中继器的应用 1，绘制APP列表页(高交互)_中继器高级交互效果

作者：你好赵伟 | 2024-02-18 19:57:07

踩

中继器高级交互效果

前言

在Axure 9 实战案例专栏-基础篇中（了解更多>>），我们分别讲解了基本元件、动态面板、交互事件与母版的实战案例，相信学习过的同学，已经进入了实战阶段了吧；那么在Axure 9 实战案例专栏-进阶篇中（课程简介>>），我们将主讲中继器与变量函数的实战案例，与大家一起学习产品原型的高交互设计，助你快速提高实战能力。

在原型设计工作中，能大量减少工作时间，以及压缩RP文件大小的，除了母版还有中继器，尤其是在绘制列表页时，运用中继器可达到事半功倍的效果；所以进阶篇第一节教程我们首先来讲解一下，如何用中继器绘制APP列表页。

在这里插入图片描述

中继器列表效果图

我们先来看看APP列表页的效果图，大家可以看到列表页的主要组成包括：
①列表每行由不同的图片和用户昵称组成；
②点击某行可跳转到对应不同的页面。

在这里插入图片描述

列表页初稿

为了节省时间，这里我们提前把列表页初稿准备好了，下面我们来给大家讲解一下，如何用中继器绘制列表页。

第一步：绘制中继器基本元件

首先在左侧栏的元件中，拖入一个中继器到页面中，再双击中继器进入编辑状态；先删除中继器中默认的元件（全新设计更能遵循你的想法），然后依照自己的构思绘制出基础元件（这里是头像图片、用户名文本标签、背景矩形）。

在这里插入图片描述

拖入一个中继器到页面中

在这里插入图片描述

双击中继器进入编辑状态，绘制出基础元件（如头像图片、用户名文本标签、背景矩形）

这里我们可以对中继器的基础元件进行样式设置，比如图片设置圆角，文本标签设置字体、颜色、大小，背景矩形设置鼠标悬停样式等，在中继器加载时就会应用并展现该样式了。

第二步：设置中继器样式数据

首先在右侧栏样式里，在数据模块中创建2列数据，分别命名为name、pic（请尽量用英文，中文名称有时会读取出错）；然后在name列输入相应的用户名；再然后在pic列点击右键，选择导入图片，每行导入不同的图片。

在这里插入图片描述

在数据中创建2列数据，分别为name、pic

在这里插入图片描述

在name列输入相应的用户名

在这里插入图片描述

在pic列点击右键-导入图片

在这里插入图片描述

每行导入不同的图片

第三步：设置中继器每项加载

首先切换到右侧栏的交互，点击每项加载-设置文本的未选择任何目标（这里显示未选择任何目标，是因为我们在第一步删除了中继器的默认元件），选择用户名文本标签；然后点击值的fx，打开编辑文本弹窗，删除变量或函数框中的默认值，再点击插入变量或函数，在下拉菜单中选择中继器/数据集的Item.name列（这表示用户名的文本值设置为中继器Item.name列）。

在这里插入图片描述