10+年产品经理聊聊产品、测测产品,产品人交流学习成长平台,按 Ctrl+D 收藏我们
留言板 小程序 交流群 关于我

苏米客

  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源
  • 登录
  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源

Axure RP 教程:动态面板之表单多级联动效果制作

5月前 859 0

级联效果是在表单应用中很常见的一种高级的操作交互,像地区选择、商品分类、表单填写、数据筛选等场景都会应用到,那么在Axure RP原型设计中如何实现,选择什么样的组件实现,今天苏米就分享一下动态面板进阶教程实现表单多级联动效果制作;

在Axure RP中,使用动态面板制作多级联动效果的应用场景非常广泛,主要包括:

  1. 地区选择:例如在医疗预约系统中,用户需要依次选择地区、医院、科室和医生。
  2. 商品分类:电商平台中,用户在选择商品时,可能需要根据大类筛选出小类,再根据小类筛选出具体的商品型号或规格。
  3. 表单填写:在一些复杂的表单中,用户的选择可能会影响后续需要填写的内容,例如在保险理赔系统中,用户选择不同的事故类型可能会触发不同的问题和信息收集。
  4. 数据筛选:在数据分析或报表工具中,用户可能需要根据多个维度进行数据筛选,例如选择时间范围、地区、产品类别等来查看特定数据

制作级联交互效果

第一步:创建动态面板

创建动态面板命名为“医生“

Axure8.0教程:动态面板多级联动

创建四个面板,其分别命名为:选择地区,选择医院,选择科室和选择医生

其面板内容分别如图:

01、选择地区

Axure8.0教程:动态面板多级联动
02、选择医院

Axure8.0教程:动态面板多级联动

03、选择科室

Axure8.0教程:动态面板多级联动

04、选择医生

Axure8.0教程:动态面板多级联动

第二步:添加交互

01、动态面板默认为”选择地区“,进入”选择地区“面板点击某个地区时,选择”设置面板状态“,触发”鼠标点击事件“,勾选”医生“动态面板,选择”选择状态“为选择医院,如图

Axure8.0教程:动态面板多级联动

Axure8.0教程:动态面板多级联动

02、进入”选择医院“面板点击医院,选择”设置面板状态“,触发”鼠标点击事件“,勾选”医生“动态面板,选择”选择状态“为选择科室,如图

Axure8.0教程:动态面板多级联动

03、进入”选择科室“面板点击科室,选择”设置面板状态“,触发”鼠标点击事件“,勾选”医生“动态面板,选择”选择状态“为选择医生,如图

Axure8.0教程:动态面板多级联动

多级联动功能已经完成

如果想重新选择,可以选择相应的项并触发相应的”鼠标点击事件“,其操作与上边相似,如图:

Axure8.0教程:动态面板多级联动

总结

使用Axure RP的动态面板来制作多级联动效果,可以有效地模拟复杂的交互流程和数据依赖关系。这种设计模式在实际的产品设计中非常实用,它不仅能够提升用户体验,还能减少用户的操作步骤,使得用户界面更加直观和易于理解。通过动态面板的状态管理和事件触发,设计师可以创建出流畅的交互原型,为开发团队提供清晰的设计指导,同时也为用户测试和验证提供了便利。多级联动效果的实现,体现了Axure RP在原型设计中的强大功能和灵活性。

声明:本站原创文章文字版权归本站所有,转载务必注明作者和出处;本站转载文章仅仅代表原作者观点,不代表本站立场,图文版权归原作者所有。如有侵权,请联系我们删除。
#Axure RP #动态面板 #多级联动 #Axure RP教程 
收藏 1
推荐阅读
  • Axure RP 教程:如何导入阿里云Datav地图,实现Axure地图可视化交互效果
  • Axure PR进阶教程:输入数值控制滑块与拖动滑块动态显示数值交互设计
  • Axure RP 教程:修改默认预览浏览器,指定浏览器预览,F5快速预览设置
  • Axure RP 教程:快速制作页面跳转,Axure RP跳转链接教程
  • Axure RP 教程:如何快速创建全局和页面辅助线,原型辅助线的原型高效必备技能
评论 (0)
请登录后发表评论
分类精选
Axure RP 教程:Axure中实现多组条件判断情形(Case)的使用和设置
1686 9月前
Axure RP 教程:制作滚动字幕效果,文字滚动的动态效果
1612 11月前
Axure RP 教程:Axure中继器的增、删、改、查操作教程
1593 11月前
Axure RP 教程:快速制作页面跳转,Axure RP跳转链接教程
1558 11月前
Axure RP 教程:Axure 预览与发布生成HTML文件
1549 11月前
在Axure RP中快速创建可视化统计图,加载图表元件库 Axhub Charts
1519 11月前
Axure入门教程:将Adobe XD设计导入Axure
1519 11月前
Axure RP 教程:Axure中继器中按钮文字添加页面链接或外链设置方法
1514 11月前
Axture元件库教程(二):一键复制Iconfont图标到Axure
1503 11月前
Axure RP 无法发布预览页面问题?无法正常预览页面怎么办?怎么解决?
1348 11月前

文章目录

关注「苏米客」公众号

订阅推送更及时,手机查看更方便
分类排行
1 Axure PR进阶教程:输入数值控制滑块与拖动滑块动态显示数值交互设计
2 Axure RP 教程:如何导入阿里云Datav地图,实现Axure地图可视化交互效果
3 Axure RP 教程:Axure视频播放功能,高保真原型实现视频交互的详细操作步骤
4 Axure RP 教程:动态面板之表单多级联动效果制作
5 Axure RP 教程:动态面板之Tab标签导航页面切换效果制作
6 Axure RP 教程:动态面板之水平拖动及展开收起如何实现
7 Axure RP 教程:元件操作之快速创建单选按钮组或选项组
8 Axure RP 教程:常用样式之元件样式管理器
9 Axure RP 教程:常用样式之页面样式管理器
10 Axure RP 教程:Axure 支持哪些类型的页面布局,如何创建自定义布局
©2015-2024 苏米客XMSUMI 版权所有 · WWW.XMSUMI.COM 闽ICP备14005900号-6
免费影视APP 花式玩客 免费字体下载 产品经理导航 Axure RP 10 免费Axure模板 Axure原型设计 Axure元件库下载 原创Axure模板 申请友联