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

前言

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

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

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

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

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

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

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

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

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

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

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

接着点击添加动作，选择设置图片，再选中头像图片；在设置DEFAULT图片中，点击箭头打开下拉菜单，选择菜单中的值；再点击值的fx，打开编辑值弹窗，在弹窗中点击插入变量或函数，在下拉菜单中选择中继器/数据集的Item.pic（这表示头像图片的值设置为中继器Item.pic列）。

第四步：设置多情形点击交互

通过以上3步，就基本实现中继器列表了，只是有时为了实现高交互原型，我们会为每行设置不同的点击交互。

首先我们在中继器列表页下，创建2个子页面，分别命名游客、注册用户，简单绘制以区别两个页面，用于实现点击交互；然后双击中继器进入编辑状态，选中中继器的背景矩形，再点击右侧栏交互中的新建交互。

接着点击单击时-打开链接-游客（表示点击背景矩形时打开游客页）；再点击启用情形，打开情形编辑弹窗，在弹窗中点击添加条件（创建行），设置第2个菜单为用户名、第3个菜单为包含、第5个菜单为用户。（这里的交互表示：当用户名的元件文字包含用户时，点击可打开游客页）

再接着依照同样的情形条件，设置当用户名的元件文字不包含用户时，点击可打开注册用户页。我们选中情形1的交互，复制粘贴为第2个情形；再点击第2个情形的情形条件，打开情形编辑弹窗，在弹窗中修改情形名称为情形2，修改第3个菜单为不包含；然后点击情形2-打开链接的游客，修改链接到为注册用户。

结语

OK了，通过前面四个步骤，就可以运用中继器绘制出高交互的的APP列表页了；如果你还有不理解的地方，可以下载文末的课件继续学习哦。

在线预览

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

相关课件

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

链接：https://mosi.lanzoui.com/b01i339uf
密码：hgd4

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

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

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

最后

以上就是隐形大炮为你收集整理的Axure 9 实战案例，中继器的应用 1，绘制APP列表页(高交互)的全部内容，希望文章能够帮你解决Axure 9 实战案例，中继器的应用 1，绘制APP列表页(高交互)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。