一篇文章掌握中继器的使用(附案例教程及原型下载).pdf

一篇文章掌握中继器的使用 （附案例教程及原型下载 ） 在Axure中 ，中继器可以与自建 件库搭配着来使用 ，中继器的优点是可以添加交互事件来实现想 要的动效 ，缺点则是制作起来相对复杂。自建 件库则能很好的解决这个缺点 ，因为可以将添加了 交互事件的中继器制作成自建 件 ，这样就只需要复杂一次 ，以后在需要使用的时候就可以直接 引用。 本文主要分为以下四 分 ，中继器案例、中继器是什么、中继器的基本构成以及中继器的案例实践 。 中继器案例 中继器是Axure中相对而言比较复杂的元件 ，上手难度相对较高 ，但是中继器的功能也是比较强 大的 ，除了可以直接进行复用和数据的批量操作 ，还可以对数据进行增加、删除、筛选、修改等 操作 ，掌握了中继器之后 ，能够做出很多我们常见的一些动效 ，先简单的看几个利用中继器做出来 的效果。 简单列表页 下图是利用中继器做出来的一个列表页 ，列表页在A pp中使用的情况非常多 ，比如图文列表 （常见 于各种A pp ，如微信聊天列表、今日头条列表、商品列表等 ）、文字列表 （个人信息、地址、商品 详情 ）、二级列表菜单等。 利用中继器制作列表页之后 ，可以将中继器做成自建 件 ，这样在进行列表页创建的时候就能够直 接拿来复用 ，另外利用中继器创建的列表页也无需进行重复排版 ，直接在中继器里修改数据即可。 添加与删除数据 下图为一个数据列表的添加与删除数据效果图 ，在实际的使用中可能是某一列表的添加与删除 ，比 如用户信息的添加与删除、比如外卖的地址信息的添加与删除等 ，除了纯文本的添加与删除 ，中继 器也能够实现图文列表的添加与删除。 排序与筛选 下图为简单的排序与筛选效果 ，Axure中继器中支持日期、数字和文本的排序 ，筛选则需要使用函数 ，利用中继器可以实现条件筛选的效果 ，比如在A pp中通过距离、价格、销量等数据来进行筛选。 分页与页面跳转 分页与切换是将列表页进行分页设置每页显示的数据量 ，然后进行上一页、下一页、首页、尾页等 这些页面之间的跳转操作。 动态搜索 动态搜索在一些搜索的页面用到的比较多 ，比如各种搜索框中都会通过关键字的匹配来实现动态的 搜索 ，从而减少用户的输入 ，以达到更好的用户体验 ，在Axure中就可以利用中继器实现这样的 效果。 看完中继器的可以实现的一些动效之后 ，有没有跃跃欲试 ，想直接尝试的小伙伴可以直接跳到文章 的中继器案例实践 分 ，接下来会先介绍一下中继器相关的知识 ，最后才是中继器案例实践。 中继器是什么 中继器 （英文名Repeat er ）是Axure RP 7.0推出的新功能 ，中继器相当于程序开发中的小型数据库 ，用于存放同种结构的数据 ，可对其中的数据进行删除 ，增加与更新 ，以及根据设定好的条件对呈 现的数据组进行过滤等操作 ，学习它的使用有助于我们快速设计一些复杂的交互界面。 中继器在Axure的默认 件库里 ，拖入到操作区中之后显示的是一个简单3行表格 ，在中继器外 无 法对中继器进行操作 ，双击后进入中继器内 进行操作 ，中继器内 的一个 件对应着外 元件的 一个纵列 ，对单一 件进行修改 ，则会在中继器外 的整个纵列产生修改。 中继器的基本构成 中继器主要分为数据集、交互、样式三大 分 数据集 数据集是中继器的数据来源 ，可以通过在数据集中添加数据 ，然后将数据赋值给中继器的具体元件 来实现赋值的效果 ，如果需要在中继器中添加图像 ，点击右键选择 【导入图像】即可。如下图所示 ，最上面是数据列的名称 ，只支持英文命名 ，中间的 分是中继器的数据 ，两侧分别是新增列与新 增行。 一个元件的数据值会对应中继器数据集中一列的数据 ，所以在命名的时候 ，最好将元件的名称与中 继器数据集中的列的名称保持一致 ，这样在进行赋值的时候会比较方便 ，在上图中可以看到我在对 元件进行命名的时候 ，元件的名称与中继器数据集的列名称是保持一致的。 交互 1. 数据赋值 在中继器的数据集中添加的数据 ，是不会自动填充到中继器里的 ，需要在中继器中添加交互之后 ， 才会将数据集中数据赋值给具体的元件。具体赋值操作如下 ，在中继器交互中的 【每项加载时】添 加用例 ，然后将中继器中数据列的值 ，赋给具体的元件。 在 【步骤1】中进行文本的设置 ，如果是设置图像 ，则选择设置图像即可 ，如果说需要将文本进行 其他的处理 ，比如字体、颜色等进行变更 ，则将 【步骤4 】中的值更换为富文本即可。 赋值后的结果如下图所示 ，其中 【删除】操作是富文本 ，标题为单独的元件 ，下方的红线区域为中 继器 分。 2. 添加交互