摘要

本文将为您详细介绍基于 Axure 的中继器组件库中的 9 个独特组件，这些组件不仅能够极大地提升您的原型设计效率，还能为您的项目增添令人惊叹的交互效果和视觉呈现。

引言

在当今快速发展的数字产品设计领域，原型设计工具的革新不断推动着用户体验（UX）和用户界面（UI）设计的边界。Axure 作为一款功能强大的原型设计软件，以其强大的交互功能和高度的可定制性，成为了众多设计师和产品的首选工具。而在 Axure 的众多功能中，中继器（Repeater）组件无疑是一颗璀璨的明珠，它为设计师们提供了无限的设计可能。

1. 组件介绍

本次设计的组件均基于中继器来实现，通过使用中继器的排序、筛选、更新行等方法，实现了穿梭框、下拉选择框、动态表格、导航菜单、树形结构等组件，让你可以轻松的熟悉其设计原理，并可轻松根据自己的实际需求进行改造，下面一起来看看吧。

1.1 穿梭框

穿梭框（也称为穿梭选择框、双向选择框或穿梭组件）是一种在用户界面设计中常用的交互组件，主要用于在两个列表之间进行项目选择和移动。它通过直观的视觉和交互方式，帮助用户高效地完成多选、分类、筛选等操作，广泛应用于各种 Web 和移动应用场景中，如权限设置、标签分配、分类管理等。

1.1.1 基本结构与功能

穿梭框通常由三个主要部分组成：

• 源列表（Source List）：显示所有可选择的选项。用户可以从这个列表中选择一个或多个项目，然后将其移动到目标列表中。
• 目标列表（Target List）：显示用户已经选择的选项。用户可以将选中的项目从源列表移动到这里，也可以将项目从目标列表移回源列表。
• 操作按钮：用于在两个列表之间移动选中的项目。通常包括“添加”（>>）、“移除”（<<）。

1.1.2 主要特点

• 双向选择：用户可以在源列表和目标列表之间自由地移动项目，实现双向选择和调整。
• 多选支持：通常支持用户一次性选择多个项目进行移动，提高操作效率。
• 搜索与筛选：为了方便用户快速找到目标项目，穿梭框通常集成了搜索和筛选功能。用户可以通过输入关键词或选择筛选条件来过滤列表中的内容。

1.1.3 应用场景

• 权限管理：在用户权限设置中，穿梭框用于选择用户拥有的权限。用户可以从权限源列表中选择需要的权限，将其移动到已选权限列表中。
• 标签分配：在内容管理系统（CMS）或博客平台中，穿梭框用于为文章或内容添加标签。用户可以从标签源列表中选择合适的标签，将其分配给内容。
• 分类管理：在电商平台或产品管理系统中，穿梭框用于对产品进行分类。用户可以将产品从一个分类移动到另一个分类，或者创建新的分类。
• 批量操作：在数据处理或批量操作场景中，穿梭框可以用于选择需要处理的数据项。例如，在邮件营销中，用户可以选择要发送邮件的收件人列表。
  

1.2 下拉框

下拉框也称为下拉菜单或下拉选择框，是一种常见的用户界面（UI）组件，用于在有限的空间内展示多个选项供用户选择。它通过点击触发一个可展开的列表，用户可以从列表中选择一个或多个选项（视具体设计而定）。下拉框广泛应用于各种数字产品中，如网页表单、软件界面、移动应用等，以简化用户输入过程、提高界面整洁度和用户体验。

1.2.1 基本结构与功能

下拉框通常由以下几个部分组成：

• 触发器（Trigger）：通常是一个按钮或标签，显示当前选中的选项或一个默认的提示文本（如“请选择”）。用户点击触发器时，下拉列表会展开或收起。
• 下拉列表（Dropdown List）：当用户点击触发器后，会弹出一个包含多个选项的列表。用户可以通过鼠标或键盘导航来选择其中一个选项。选择完成后，下拉列表通常会自动收起，触发器会更新为用户选择的选项。
• 选项（Options）：下拉列表中的每一个可选项，通常以文本形式呈现。每个选项可以代表一个不同的值或状态，用户的选择将决定后续的操作或数据输入。

1.2.2 主要特点

• 节省空间：下拉框能够在有限的空间内展示大量选项，特别适用于选项数量较多但用户一次只能选择一个的场景。相比于单选按钮（Radio Buttons）等组件，下拉框在界面布局上更加节省空间。
• 简洁直观：用户通过点击触发器即可展开选项列表，操作简单直观。下拉列表的出现和消失具有明确的视觉提示，使用户能够轻松理解其功能和使用方法。
• 可扩展性：下拉框可以容纳任意数量的选项，从几个到几十个甚至更多。此外，还可以对选项进行分组、添加搜索功能或支持多选（多选下拉框），以满足不同的需求。
• 可访问性：现代的下拉框设计通常具有良好的可访问性，支持键盘导航（如使用上下箭头键进行选项导航，使用回车键进行选择）和屏幕阅读器等辅助技术的集成，方便不同用户群体的使用。

1.2.3 应用场景

• 表单输入：在网页表单或软件设置界面中，下拉框常用于收集用户的特定信息，如国家/地区、性别、日期（通过日期选择器下拉框）、职业等。例如，在用户注册表单中，用户可以通过下拉框选择自己的国家，而无需手动输入。
• 导航菜单：一些网站或应用使用下拉框作为导航菜单的一部分。当用户点击导航栏中的某个选项时，会弹出一个下拉列表，列出相关的子类别或页面链接，用户可以从中选择并跳转。
• 设置与配置：在软件或应用的设置界面中，下拉框用于选择不同的配置选项，如主题、语言、通知偏好等。例如，用户可以通过下拉框选择应用的语言版本，以便更方便地使用产品。
  数据过滤与筛选：在数据驱动的应用或仪表盘中，下拉框常用于对数据进行过滤和筛选。例如，在电商网站中，用户可以通过下拉框选择不同的商品类别、价格范围或品牌，以快速找到自己需要的商品。

普通下拉框效果图如下：

带复选框的下拉框效果图如下：

1.3 动态表格

动态表格是一种基于数据驱动的交互式表格组件，广泛应用于各种数字产品原型设计中。它能够根据数据源的变化，动态地生成、更新和展示表格内容，并提供丰富的交互功能，如排序、筛选、编辑等。

1.3.1 基本结构与功能

动态表格通常由以下几个核心部分组成，每个部分承担着不同的功能：

• 数据源（Data Source）：
  • 数据来源：动态表格的数据来源于其绑定的数据源。数据源可以是 Axure 内置的数据集，也可以是外部导入的 CSV、JSON、Excel 等格式的数据文件，甚至可以通过 API 接口从服务器实时获取数据。
  • 数据结构：数据源定义了表格中每一行（记录）的具体字段和内容。例如，一个员工信息表的数据源可能包含“姓名”、“年龄”、“部门”、“职位”等字段。
• 表格容器（Table Container）：
  • 中继器（Repeater）：在 Axure 中，动态表格通常由中继器组件实现。中继器是一个可重复的容器，每个中继器项代表表格中的一行数据。
  • 行与列：表格由多个行和列组成，每一行对应数据源中的一条记录，每一列对应数据源中的一个字段。例如，第一列显示“姓名”，第二列表示“年龄”，以此类推。
• 数据展示（Data Display）：
  • 文本标签（Text Labels）：用于显示数据源中的文本数据。例如，一个文本标签可以绑定到“姓名”字段，用于显示每行的员工姓名。
  • 输入框（Input Fields）：用于在表格中编辑数据。例如，一个输入框可以绑定到“年龄”字段，用户可以点击编辑该字段的值。
  • 下拉框（Dropdown Boxes）：用于选择数据。例如，一个下拉框可以绑定到“部门”字段，用户可以从预定义的部门列表中选择一个部门。
• 操作按钮（Action Buttons）：
  • 编辑按钮（Edit Button）：用于打开编辑模式，用户可以在编辑模式下修改表格中的数据。点击编辑按钮后，表格行会进入编辑状态，显示输入框或下拉框等编辑控件。
  • 删除按钮（Delete Button）：用于删除表格中的某一行数据。点击删除按钮后，会弹出确认提示，防止用户误操作。
  • 添加按钮（Add Button）：用于向表格中添加新行。用户点击添加按钮后，会在表格底部出现一个空白行，用户可以在其中输入新数据。
• 交互功能（Interactive Features）：
  • 排序（Sorting）：用户可以通过点击表头，对表格数据进行升序或降序排序。中继器支持多列排序，用户可以先按某一列排序，再按另一列进行二次排序。
  • 筛选（Filtering）：通过添加筛选条件，用户可以快速过滤出符合特定条件的数据。例如，在员工信息表中，用户可以筛选出特定部门的员工，或者筛选出年龄大于 30 岁的员工。
  • 分页（Paging）：对于大量数据的展示，动态表格支持分页功能。用户可以通过分页导航浏览不同的数据页，或者通过滚动条查看超出可视区域的数据。

1.3.2 主要特点

• 数据驱动：
  • 实时更新：动态表格的数据源发生变化时，表格会自动更新。例如，当用户通过表单提交新数据时，表格会立即显示新增的行；当数据源中的数据被修改时，表格中对应的单元格内容也会同步更新。
  • 灵活性高：数据源可以是静态的，也可以是动态的，甚至可以通过 API 接口从服务器获取数据。这为设计师提供了极大的灵活性，可以根据需求选择合适的数据源。
• 可重复使用：
  • 组件复用：动态表格作为一个可重复使用的组件，可以在不同的页面或模块中多次使用。例如，在用户管理模块和订单管理模块中，可以使用同一个动态表格组件，只需绑定不同的数据源即可。
  • 样式统一：通过统一设置动态表格的样式，可以确保表格在不同地方显示时具有一致的外观和风格，提高原型的整体美观性和专业性。
• 交互性强：
  • 丰富的交互事件：动态表格支持各种交互事件，如点击、双击、悬停、拖拽等。这些事件可以触发不同的交互行为，如打开编辑表单、显示详细信息、排序、筛选等。
  • 用户友好：动态表格的交互设计通常以用户为中心，提供直观的操作方式和及时的反馈。例如，点击“编辑”按钮后，表格会高亮显示当前编辑的行，并提供明确的保存和取消按钮。
• 可定制性强：
  • 样式自定义：设计师可以对动态表格的样式进行全面的自定义，包括字体、颜色、边框、背景等，以满足不同的设计需求。
  • 布局调整：可以调整表格的列宽、行高、对齐方式等布局属性，以及添加分页、滚动条等元素，以优化表格的展示效果。
• 响应式设计：
  • 适配不同设备：动态表格支持响应式设计，能够根据不同设备和屏幕尺寸自动调整表格的布局和样式。例如，在桌面设备上，表格可以显示较多的列和行；而在移动设备上，表格可以调整为单列显示，并提供分页或滚动功能。

1.3.3 应用场景

• 数据展示与管理：
  • 后台管理系统：在企业后台管理系统中，动态表格常用于展示和管理各种数据，如用户信息、订单信息、产品库存等。例如，用户管理模块可以使用动态表格展示所有用户的信息，并提供编辑、删除、禁用等操作。
  • 数据分析工具：在数据分析工具中，动态表格可以用于展示分析结果，如销售数据、用户行为数据等。用户可以通过排序、筛选等功能，对数据进行深入分析。
• 电子商务平台：
  • 产品列表：电商网站的产品列表页面可以使用动态表格展示产品信息，如产品名称、价格、库存、销量等。用户可以通过排序和筛选功能，快速找到自己需要的产品。
  • 购物车：购物车页面可以使用动态表格展示用户已添加的商品，包括商品名称、数量、价格等信息。用户可以对商品数量进行修改，或删除不需要的商品。
• 项目管理工具：
  • 任务列表：项目管理工具中，动态表格可以用于展示项目任务列表，包括任务名称、负责人、状态、截止日期等信息。团队成员可以通过表格对任务进行跟踪和管理。
  • 进度跟踪：动态表格可以用于展示项目的进度情况，如已完成的任务数、正在进行中的任务数、延期任务数等。通过颜色编码和图标标识，可以更直观地展示项目状态。
• 表单与配置：
  • 数据录入表单：在需要批量录入数据的场景中，动态表格可以提供便捷的输入方式。例如，在员工信息录入表单中，用户可以一次性添加多行员工数据，并进行编辑和删除操作。
  • 配置管理界面：在软件配置界面中，动态表格可以用于展示和管理配置项。例如，在网站设置页面中，管理员可以使用动态表格管理网站的导航菜单、页面模块等配置信息。
• 其他应用场景：
  • 报表生成：动态表格可以用于生成各种报表，如财务报表、销售报表等。用户可以通过筛选和排序功能，对报表数据进行查看和分析。
  • 日志查看：在日志管理工具中，动态表格可以用于展示系统日志、操作日志等。用户可以通过时间范围、关键字等条件，对日志进行筛选和查看。

1.4 导航菜单

多级导航菜单是一种常见的用户界面组件，用于在数字产品中组织和展示多层次的导航结构。它通过层级化的菜单项，帮助用户快速找到所需的功能、内容或页面。多级导航菜单广泛应用于网站、应用程序、后台管理系统等场景中，尤其适用于具有复杂信息架构的产品。

1.4.1 基本结构与功能

多级导航菜单通常由以下几个核心部分组成，每个部分承担着不同的功能：

• 菜单容器（Menu Container）：
  • 导航栏（Navigation Bar）：通常位于页面的顶部或侧边，作为菜单的容器。导航栏提供了一个固定的位置，方便用户随时访问菜单。
  • 主菜单（Main Menu）：导航栏中的顶级菜单项，通常以水平或垂直的方式排列。每个主菜单项代表一个主要的导航类别，如“首页”、“产品”、“服务”、“关于我们”等。
• 菜单项（Menu Items）：
  • 顶级菜单项（Top-level Menu Items）：主菜单中的每个项目，代表一个主要的导航类别。例如，在电商网站中，顶级菜单项可能包括“电子产品”、“服装”、“家居用品”等。
  • 子菜单项（Sub-menu Items）：每个顶级菜单项可以包含一个或多个子菜单项，形成多级菜单结构。例如，“电子产品”顶级菜单项下可以包含“手机”、“电脑”、“相机”等子菜单项。
  • 更深层级（Additional Levels）：根据需要，子菜单项还可以包含更多的子菜单项，形成三级、四级甚至更深层级的菜单结构。例如，“手机”子菜单项下可以包含“智能手机”、“功能手机”等更细分的类别。
• 交互功能（Interactive Features）：
  • 展开与折叠（Expand/Collapse）：用户可以通过点击顶级菜单项或子菜单项旁边的箭头图标或触发区域，来展开或折叠子菜单。例如，点击“电子产品”顶级菜单项，会展开显示其子菜单项“手机”、“电脑”、“相机”等。
  • 悬停显示（Hover Display）：在一些设计中，用户将鼠标悬停在顶级菜单项上时，会自动显示其子菜单。这种交互方式提供了一种快速浏览菜单的方式，但需要注意的是，在移动设备上无法使用鼠标悬停，因此需要提供其他替代方案。
  • 点击跳转（Click to Navigate）：用户点击菜单项后，页面会跳转到相应的内容页面或功能页面。例如，点击“手机”子菜单项，会跳转到手机产品列表页面。
• 视觉反馈（Visual Feedback）：
  • 选中状态（Selected State）：当前选中的菜单项会显示不同的样式，如不同的字体颜色、背景颜色、下划线等，以明确指示用户当前所在的位置。
  • 悬停效果（Hover Effect）：当用户将鼠标悬停在菜单项上时，菜单项会显示悬停效果，如背景颜色变化、字体颜色变化等，以增强用户体验。

1.4.2 主要特点

• 层级化结构：
  • 多级菜单：多级导航菜单可以包含多个层级的菜单项，能够有效地组织和展示复杂的信息架构。例如，一个大型电商网站可能有三级甚至四级菜单结构，以涵盖各种产品类别和子类别。
  • 清晰的层级关系：通过使用缩进、图标、颜色等视觉元素，可以清晰地展示菜单项之间的层级关系，帮助用户理解菜单的结构和导航路径。
• 可扩展性强：
  • 动态添加菜单项：多级导航菜单可以根据需要动态添加或删除菜单项。例如，在后台管理系统中，管理员可以根据产品线的变化，添加新的产品类别或子类别到菜单中。
  • 适应不同内容：多级导航菜单可以适应不同类型的内容和功能，无论是网站导航、应用程序菜单，还是后台管理系统的功能菜单，都能灵活应对。
• 交互性强：
  • 用户友好：多级导航菜单提供了直观的交互方式，用户可以通过点击、悬停等操作，快速找到所需的内容或功能。
  • 及时反馈：菜单项的展开、折叠、选中状态等都会提供及时的视觉反馈，使用户能够清楚地了解当前的操作状态和导航路径。
• 可定制性强：
  • 样式自定义：设计师可以对多级导航菜单的样式进行全面的自定义，包括字体、颜色、图标、布局等，以满足不同的设计需求和品牌风格。
  • 动画效果：可以添加各种动画效果，如展开/折叠动画、悬停动画等，以增强菜单的视觉吸引力和用户体验。

1.4.3 应用场景

• 网站导航：
  • 企业网站：在企业网站中，多级导航菜单用于展示公司的产品、服务、解决方案、关于我们、联系我们等主要信息。例如，“产品”顶级菜单项下可以包含不同的产品类别，每个类别下又可以包含更细分的子类别。
  • 电子商务网站：在电商网站中，多级导航菜单用于展示各种产品类别和子类别，以及相关的促销活动、优惠信息等。例如，“服装”顶级菜单项下可以包含“男装”、“女装”、“童装”等子类别，每个子类别下又可以包含更细分的服装类型。
• 应用程序菜单：
  • 移动应用：在移动应用中，多级导航菜单通常以折叠的形式显示，用户可以通过点击菜单图标来展开或折叠菜单。例如，在一款新闻应用中，菜单可能包含“头条新闻”、“国际新闻”、“国内新闻”、“体育新闻”等顶级菜单项，每个顶级菜单项下又可以包含更细分的新闻类别。
  • 桌面应用：在桌面应用中，多级导航菜单可以提供更复杂的导航结构。例如，在一款图像编辑软件中，菜单可能包含“文件”、“编辑”、“图像”、“视图”、“帮助”等顶级菜单项，每个顶级菜单项下又可以包含多个子菜单项。
• 后台管理系统：
  • 功能菜单：在后台管理系统中，多级导航菜单用于组织和管理各种功能模块。例如，一个电商后台管理系统可能包含“商品管理”、“订单管理”、“用户管理”、“数据分析”等顶级菜单项，每个顶级菜单项下又可以包含多个子菜单项，如“商品分类”、“商品列表”、“商品属性”等。
  • 权限控制：多级导航菜单还可以与用户权限控制结合使用，根据用户的权限级别，显示不同的菜单项。例如，普通用户可能只能看到“商品管理”、“订单管理”等基本功能，而管理员则可以访问所有功能模块。

左侧导航菜单效果图如下：

顶部+左侧导航菜单效果图如下：

1.5 树形结构

树形结构是一种层级化的数据展示和组织方式，广泛应用于各种数字产品中，如文件管理系统、组织架构图、知识库、分类目录等。它通过模拟自然界中树的结构，以节点（Node）和分支（Branch）的形式展示数据之间的关系，使用户能够清晰地理解数据的层次结构和从属关系。

1.5.1 基本结构与功能

树形结构通常由以下几个核心部分组成，每个部分承担着不同的功能：

• 节点（Node）：
  • 根节点（Root Node）：树形结构的起点，通常位于最顶层，代表整个树形结构的顶层分类或主题。例如，在文件管理系统中，根节点可能代表计算机的根目录（如 “C:”）。
  • 子节点（Child Node）：根节点或任何其他节点的下一级节点，代表对上一级节点的细分或从属。例如，在组织架构图中，“部门” 节点下可以有多个 “团队” 子节点。
  • 叶节点（Leaf Node）：没有子节点的节点，代表树形结构的末端。例如，在文件管理系统中，叶节点可能代表具体的文件或空文件夹。
• 分支（Branch）：
  • 父子关系（Parent-Child Relationship）：节点之间通过父子关系连接，形成树形结构的层级关系。每个节点（除根节点外）都有一个父节点和零个或多个子节点。例如，“部门” 节点是 “团队” 子节点的父节点，而 “团队” 子节点是 “部门” 节点的子节点。
  • 层级（Level）：树形结构中的层级数，从根节点开始计算。例如，根节点位于第 1 层，其子节点位于第 2 层，依此类推。
• 交互功能（Interactive Features）：
  • 展开与折叠（Expand/Collapse）：用户可以通过点击节点旁边的展开/折叠图标或触发区域，来展开或折叠子节点。例如，点击 “部门” 节点，可以展开显示其所有子节点 “团队”；再次点击，可以折叠子节点。
  • 选择与导航（Select & Navigate）：用户可以选择某个节点，并执行相应的操作，如查看详细信息、导航到相关页面等。例如，在文件管理系统中，用户可以选择一个文件夹节点，并点击 “打开” 按钮，进入该文件夹。
• 视觉反馈（Visual Feedback）：
  • 选中状态（Selected State）：当前选中的节点会显示不同的样式，如不同的字体颜色、背景颜色等，以明确指示用户当前选择的内容。
  • 悬停效果（Hover Effect）：当用户将鼠标悬停在节点上时，节点会显示悬停效果，如背景颜色变化、字体颜色变化等，以增强用户体验。
  • 连接线（Connecting Lines）：一些树形结构会使用连接线来连接父节点和子节点，以更清晰地展示节点之间的关系。

1.5.2 主要特点

• 层级化展示：
  • 清晰的层次关系：树形结构通过节点和分支的形式，清晰地展示了数据之间的层次关系和从属关系。例如，在组织架构图中，可以直观地看到公司各部门、各团队之间的层级关系。
  • 易于理解和导航：用户可以轻松地理解树形结构的层级关系，并通过展开/折叠节点、选择节点等方式，快速导航到所需的内容。例如，在文件管理系统中，用户可以逐级展开文件夹，找到目标文件。
• 可扩展性强：
  • 动态添加节点：树形结构可以根据需要动态添加或删除节点。例如，在知识库系统中，管理员可以随时添加新的文档类别或子类别到树形结构中。
  • 适应不同数据量：树形结构可以处理各种规模的数据集，从小型数据集到大型数据集，都能有效地进行组织和展示。
• 交互性强：
  • 用户友好：树形结构提供了直观的交互方式，用户可以通过点击、悬停、拖拽等操作，与树形结构进行交互。例如，点击节点旁边的 “+” 或 “-” 按钮，可以展开或折叠子节点。
  • 及时反馈：节点的展开、折叠、选中状态等都会提供及时的视觉反馈，使用户能够清楚地了解当前的操作状态和导航路径。

1.5.3 应用场景

• 文件管理系统：
  • 本地文件管理：在计算机操作系统中，树形结构用于展示文件目录结构，用户可以逐级展开文件夹，找到目标文件。
  • 云存储服务：在云存储服务（如 Google Drive、Dropbox 等）中，树形结构用于展示用户的文件存储结构，用户可以通过树形结构进行文件的上传、下载、删除、移动等操作。
• 组织架构图：
  • 企业组织架构：在企业管理系统中，树形结构用于展示公司的组织架构，包括各部门、各团队、各职位之间的关系。例如，可以清晰地看到 CEO 下属的各个副总裁，以及每个副总裁下属的各个部门。
  • 项目管理：在项目管理工具中，树形结构可以用于展示项目的组织结构，包括项目团队、项目任务、项目里程碑等。
• 知识库系统：
  • 文档分类：在知识库系统中，树形结构用于对文档进行分类和整理。例如，可以按照主题、部门、类型等对文档进行分类，用户可以通过树形结构快速找到所需的文档。
  • 产品文档：在产品文档管理系统中，树形结构可以用于展示产品的不同版本、模块、功能等，用户可以通过树形结构查看产品的详细信息。
• 分类目录：
  • 电商网站：在电商网站中，树形结构用于展示商品分类。例如，可以按照商品类别、品牌、价格区间等对商品进行分类，用户可以通过树形结构浏览和搜索商品。
  • 在线学习平台：在在线学习平台中，树形结构可以用于展示课程分类。例如，可以按照学科、语言、难度等级等对课程进行分类，用户可以通过树形结构查找和注册课程。

普通树形结构效果图如下：

带复选框的树形结构效果图如下：

1.6 城市选择

城市选择组件是数字产品中用于选择城市或地点的交互式界面元素，广泛应用于各种应用场景，如用户注册、电商配送地址设置、天气预报查询、旅行规划等。城市选择组件通常支持多种分类方式，如按字母分类、按省份分类以及无分类（全部城市）等，以满足不同用户的需求。

1.6.1 基本结构与功能

城市选择组件通常由以下几个核心部分组成，每个部分承担着不同的功能：

• 选择触发器（Selection Trigger）：
  • 输入框（Input Field）：用户可以在输入框中输入城市名称进行搜索，或者点击输入框旁边的下拉箭头，展开城市选择列表。例如，在电商平台中，用户可以在配送地址输入框中点击展开城市选择列表。
  • 下拉按钮（Dropdown Button）：通常是一个箭头图标或文本（如“请选择城市”），用户点击后可以展开城市选择列表。
• 城市选择列表（City Selection List）：
  • 无分类列表（Uncategorized List）：
    • 全部城市（All Cities）：以列表形式展示所有可选择的城市，按字母顺序排列。例如，从“A”开头的城市到“Z”开头的城市依次排列。
    • 搜索功能（Search Function）：在无分类列表中，搜索功能尤为重要。用户可以在搜索框中输入关键词，组件会实时过滤并显示匹配的城市。例如，输入“北京”，列表中会显示所有包含“北京”的城市选项。
  • 按字母分类（Alphabetical Classification）：
    • 字母索引（Alphabet Index）：在列表的一侧或顶部，提供字母索引（A-Z）。用户可以点击某个字母，快速跳转到以该字母开头的城市列表。例如，点击“B”，列表会跳转到以“B”开头的城市，如“北京”、“上海”、“广州”等。
    • 分组显示（Grouped Display）：城市按字母分组显示，每个字母对应一个分组。例如，A 组包含所有以“A”开头的城市，B 组包含所有以“B”开头的城市，以此类推。
  • 按省份分类（Provincial Classification）：
    • 省份列表（Provincial List）：首先展示一个省份列表，用户可以选择某个省份。例如，用户可以选择“广东省”。
    • 城市列表（City List）：选择省份后，展开该省份下的城市列表。例如，选择“广东省”后，列表会显示“广州”、“深圳”、“东莞”等城市。
    • 多级菜单（Multi-level Menu）：一些城市选择组件采用多级菜单的形式，先选择省份，再选择城市，甚至可以选择区县。例如，用户可以先选择“广东省”，然后选择“广州市”，最后选择“越秀区”。

1.6.2 主要 特点

• 多分类方式：
  • 灵活选择：城市选择组件支持多种分类方式，用户可以根据自己的需求选择合适的分类方式。例如，对于熟悉字母排序的用户，可以选择按字母分类；对于熟悉地理位置的用户，可以选择按省份分类。
  • 无缝切换：用户可以在不同的分类方式之间无缝切换。例如，用户可以先按字母分类浏览城市，如果找不到目标城市，可以切换到按省份分类继续查找。
• 搜索功能：
  • 快速定位：搜索功能使用户能够快速定位到特定的城市。例如，用户可以直接输入城市名称或关键词，组件会实时过滤并显示匹配的城市选项。
  • 智能提示：一些高级的城市选择组件提供智能提示功能，根据用户的输入历史或热门搜索，提供相关的城市建议。
• 用户友好：
  • 直观易用：城市选择组件通常采用简洁直观的界面设计，用户可以轻松理解和使用。例如，按字母分类的索引和按省份分类的层级结构，都提供了清晰的导航路径。
  • 及时反馈：用户的操作会得到及时的视觉反馈，例如，选中某个城市时，选项会高亮显示；展开或折叠列表时，会有动画效果提示。

1.6.3 应用场景

• 用户注册与登录：
  • 地址设置：在用户注册或用户资料设置中，城市选择组件用于选择用户的所在城市。例如，在电商平台中，用户需要设置配送地址，城市选择组件可以帮助用户快速选择城市。
  • 个性化推荐：根据用户选择的城市，提供个性化的内容推荐。例如，在新闻应用中，根据用户所在城市，推荐本地新闻。
• 电商平台：
  • 配送地址：在电商平台的结算页面，城市选择组件用于选择配送地址的城市。例如，用户在填写收货地址时，可以通过城市选择组件快速选择城市。
  • 商品筛选：在商品列表页面，城市选择组件可以用于筛选商品。例如，用户可以选择某个城市，查看该城市的可用商品。
• 旅行与地图应用：
  • 目的地选择：在旅行规划应用中，城市选择组件用于选择旅行目的地。例如，用户可以搜索并选择目标城市，查看该城市的旅游景点、住宿信息等。
  • 地图定位：在地图应用中，城市选择组件可以用于快速定位到某个城市。例如，用户可以输入城市名称或选择按省份分类，快速找到目标城市。
• 天气预报应用：
  • 城市选择：在天气预报应用中，城市选择组件用于选择用户想要查看天气的城市。例如，用户可以通过搜索或按字母分类选择城市，查看该城市的天气预报。
• 其他应用场景：
  • 招聘网站：在招聘网站中，城市选择组件用于选择职位所在的城市。例如，用户可以搜索并选择目标城市，查看该城市的招聘信息。
  • 在线教育平台：在在线教育平台中，城市选择组件可以用于选择课程所在的城市。例如，用户可以选择某个城市，查看该城市的线下课程。

2. 实现原理简介

2.1 导航菜单实现原理

元件示例：

中继器每项加载时：

点击展开：

点击收缩：

2.2 动态表格实现原理

元件示例：

中继器每项加载时：

日期输入筛选：

姓名输入筛选：

分页数量选择：

选择性别时：

3. 总结

使用中继器实现上述组件的总结

在 Axure 原型设计中，中继器（Repeater） 是一个功能极其强大的组件，它为设计师提供了一种高效、灵活、可扩展的组件实现方式。通过数据驱动的设计理念，中继器使得我们能够轻松构建各种复杂的交互式组件，如动态表格、多级导航菜单、树形结构和城市选择组件等。其强大的功能和高度的灵活性，使得我们能够根据不同的需求和应用场景，定制出符合用户需求的界面元素。

使用中继器不仅提高了原型设计的效率，还增强了原型的交互性和真实感。它使得设计师能够更专注于用户体验和功能实现，而无需过多关注底层的实现细节。因此，掌握中继器的使用技巧，对于每一个 Axure 设计师来说，都是至关重要的。