Axure设计之单选框教程(中继器)

简介: 在Axure RP中,通过结合中继器的强大功能,我们可以轻松实现动态加载的单选框列表,不仅可以根据数据自动调整选项宽度,还能实时更新选中状态。本教程将引导你完成一个使用中继器制作动态单选框列表的项目,包括案例分析、设计思路及详细的实现步骤。

在Axure RP中,通过结合中继器的强大功能,我们可以轻松实现动态加载的单选框列表,不仅可以根据数据自动调整选项宽度,还能实时更新选中状态。本教程将引导你完成一个使用中继器制作动态单选框列表的项目,包括案例分析、设计思路及详细的实现步骤。

一、案例分析

Axure设计之单选框教程.gif

最终效果是一个动态生成的单选框列表,其中每个选项都通过中继器从数据中加载。每个选项显示不同的文本(xx:选项文本),并基于数据中(xz:选中状态)的值(1表示选中,0表示未选中)自动设置选中状态。同时,每个单选框的宽度会根据其显示的文本长度自适应调整,以确保用户界面的整洁与美观。用户点击任何单选框时,将更新数据中对应行的xz字段值,从而实时反映选中状态的变化。

二、设计思路

数据源准备:首先定义好中继器的数据结构,包括id(唯一标识)、xx(选项文本)、xz(选中状态,0或1)。

中继器设置:使用中继器来动态加载这些选项,并为每个选项创建一个矩形(或按钮)作为单选框的视觉表现。

动态宽度调整:在中继器的“每项加载时”事件中,根据xx字段的文本长度动态调整矩形的宽度。

选中状态设置:同样在“每项加载时”事件中,根据xz字段的值设置矩形的选中状态(如改变背景色或边框颜色)。

交互事件:为每个矩形添加点击事件,当点击时更新中继器中对应行的xz字段,并重新加载中继器以刷新所有选项的选中状态。

三、实现步骤

1. 创建中继器

1.1、在Axure画布上拖入一个中继器控件。
1.2、双击中继器进入编辑模式,设置其数据项为id、xx、xz。
1.3、准备好数据,并设置中继器的数据加载方式。
image.png

2. 设计单选框样式

2.1、在中继器内部,为每个数据项创建一个矩形(或按钮)作为单选框。
2.2、为矩形添加文本字段,并绑定到xx字段。
image.png

3. 动态宽度调整

3.1、在中继器的“每项加载时”事件中,添加“设置尺寸”操作。
3.2、使用“宽度”属性,并通过表达式动态计算文本长度对应的宽度(可能需结合字体大小、间距等因素进行调整)。
image.png

4. 选中状态设置

4.1、同样在“每项加载时”事件中,添加条件逻辑。
4.2、如果xz字段的值为1,则设置矩形的选中样式(如改变背景色),如果值为0,则恢复默认样式。

5. 添加交互事件

5.1、为每个矩形添加“单击时”事件。
5.2、在点击事件中,使用中继器动作的“更新行”动作,将当前选项xz字段更新选中状态的值,接着使用“更新行”动作,将数据中其他项xz字段更新为未选中状态的值。
image.png

通过以上步骤,你就能够使用Axure RP中的中继器控件创建一个动态加载、宽度自适应、实时更新选中状态的单选框列表了。这样的设计不仅提高了用户体验,也展示了Axure在原型设计领域的强大功能。

相关文章
【每日教程】用中继器做一个三级菜单(含标签)
【每日教程】用中继器做一个三级菜单(含标签)
|
移动开发 缓存 JavaScript
2021最新阿里代码规范(前端篇)
2021最新阿里代码规范(前端篇)
60704 11
2021最新阿里代码规范(前端篇)
|
9月前
|
缓存 前端开发 Java
深入理解 Java 类加载器:双亲委派机制的前世今生与源码解析
本文深入解析Java类加载器与双亲委派机制,从Bootstrap到自定义加载器,剖析loadClass源码,揭示类加载的线程安全、缓存机制与委派逻辑,并探讨SPI、Tomcat、OSGi等场景下打破双亲委派的原理与实践价值。(238字)
980 8
深入理解 Java 类加载器:双亲委派机制的前世今生与源码解析
|
容器
Axure设计之下拉多选框制作教程A(中继器)
本文详细讲解了如何使用Axure制作动态交互的下拉多选器组件,以实现高保真原型设计。组件功能包括:下拉选项滚动显示、选中状态高亮、鼠标悬停效果、箭头图标切换、已选项删除等。通过选择框、中继器和动态面板的结合,完成从创建到交互设置的全流程。适合Web设计师和产品经理提升原型交互性,确保需求清晰传达。文内附案例预览图、在线演示链接及组件下载地址,方便学习与复用。
2196 8
|
机器学习/深度学习 人工智能 Kubernetes
Argo Workflows 加速在 Kubernetes 上构建机器学习 Pipelines
Argo Workflows 是 Kubernetes 上的工作流引擎,支持机器学习、数据处理、基础设施自动化及 CI/CD 等场景。作为 CNCF 毕业项目,其扩展性强、云原生轻量化,受到广泛采用。近期更新包括性能优化、调度策略增强、Python SDK 支持及 AI/大数据任务集成,助力企业高效构建 AI、ML、Data Pipelines。
1267 0
Axure设计之多级菜单导航教程(中继器)
在数字化时代,优化产品设计,提升用户界面交互,是产品设计着重考虑的点。针对传统菜单导航复杂繁琐的问题,本设计提出了一套灵活的菜单导航方案,结合中继器与动态面板,实现一键搜索、菜单收藏、多级菜单导航、点击展开收缩等交互功能,旨在提升领导满意度,增强产品设计体验。
1309 2
|
11月前
|
人工智能 Java API
Java AI智能体实战:使用LangChain4j构建能使用工具的AI助手
随着AI技术的发展,AI智能体(Agent)能够通过使用工具来执行复杂任务,从而大幅扩展其能力边界。本文介绍如何在Java中使用LangChain4j框架构建一个能够使用外部工具的AI智能体。我们将通过一个具体示例——一个能获取天气信息和执行数学计算的AI助手,详细讲解如何定义工具、创建智能体并处理执行流程。本文包含完整的代码示例和架构说明,帮助Java开发者快速上手AI智能体的开发。
3566 8
|
前端开发 Java Nacos
🛡️Spring Boot 3 整合 Spring Cloud Gateway 工程实践
本文介绍了如何使用Spring Cloud Alibaba 2023.0.0.0技术栈构建微服务网关,以应对微服务架构中流量治理与安全管控的复杂性。通过一个包含鉴权服务、文件服务和主服务的项目,详细讲解了网关的整合与功能开发。首先,通过统一路由配置,将所有请求集中到网关进行管理;其次,实现了限流防刷功能,防止恶意刷接口;最后,添加了登录鉴权机制,确保用户身份验证。整个过程结合Nacos注册中心,确保服务注册与配置管理的高效性。通过这些实践,帮助开发者更好地理解和应用微服务网关。
2626 0
🛡️Spring Boot 3 整合 Spring Cloud Gateway 工程实践
|
数据处理 UED
Axure中继器教程及案例详解
Axure RP 是一款强大的原型设计工具,广泛应用于产品设计、UI/UX 设计及交互设计中。中继器(Repeater)作为 Axure 中的一个重要元件,以其强大的数据处理和动态交互能力,成为设计师们不可或缺的工具。本文将从中继器基础、进阶、高级应用,以及分页控制、合计、列表拖动、列表滑动删除、表内修改等方面,详细介绍中继器的使用方法和案例。
717 7
Axure中继器教程及案例详解
|
UED
Axure中继器实战篇:让数据展示和交互设计更上一层楼!
Axure中继器实战篇:让数据展示和交互设计更上一层楼!
912 0

热门文章

最新文章