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

苏米客

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

Axure RP 教程:Axure中实现多组条件判断情形(Case)的使用和设置

10月前 1874 0

在原型设计中,多条件的执行交互动作是比较常见的,例输入内容验证、登录状态判断跳转等等,那么不得不需要了解在Axure中实现多组条件判断主要涉及到情形(Case)的使用和设置;接下来苏米就详细的如何使用情形实现多条件的判断,以及判断逻辑是怎样的;

添加情形

在Axure中,当你为一个交互事件(如"失去焦点时")添加动作时,你可以添加多个情形。每个情形可以有自己的条件和对应的动作。

  • 点击"新建交互"后,选择触发事件(如"失去焦点时")

  • 点击"启用情形"按钮来添加第一个情形

  • 之后,你可以继续点击"添加情形"按钮来添加更多情形

设置情形条件

每个情形可以有一个或多个条件。你可以在情形设置窗口中添加这些条件。

  • 点击"添加条件"来设置条件

  • 可以添加多个条件,并选择它们之间的关系("匹配所有条件"或"匹配任何条件")

设置情形之间的逻辑关系

Axure默认会按照情形的顺序从上到下执行,并在满足条件的第一个情形处停止。但你可以通过以下方式改变这个行为:

  • 右键点击情形,选择"切换"选项

  • 这将改变情形的逻辑关系,允许多个"如果(if)"情形同时存在

示例:多组条件判断

以年龄验证为例,接下来演示一下如何通过实例来创建多条件判断的几种情形;

首先我们在画布中放入文本框和文本标签元件,进行相应的设置,文本标签需要双击进入编辑状态,删除原有的文字,并且为文本框和文本标签元件分别命名。

添加完我们选中画布中的文本框元件,[新建交互],选择[失去焦点时],完成这个交互事件的设置之后,我们在交互事件的名称后方点击[启用情形]按钮,进行情形的设置;

在情形设置的窗口中,我们先输入情形的名称“输入正确时”。再进行[添加条件]的设置。

第一个条件依次选择元件文本:当前>文本,文本之后的输入框中输入“0”,点击[添加行]按钮,

添加第二个条件,依次选择元件文本:当前 <=文本,文本之后的输入框中输入“150”。

再次点击[添加情形]按钮,添加另一种情形,情形的名称是“输入错误时”,因为与第一种情形条件互斥,我们不用添加任何条件,直接点击确定按钮;

最后添加情形的反馈,点击[添加动作]按钮,[设置文本]到[提示]元件,文本内容为“输入错误”;

最后分析一下,如果在交互场景中需要不同条件的判断,如何设置多组条件判断:

情形1:输入为空

  • 条件:元件文本 等于 ""(空字符串)

  • 动作:设置提示文本为"请输入年龄"

情形2:输入不是数字

  • 条件:元件文本 不匹配正则表达式 "^[0-9]+$"

  • 动作:设置提示文本为"请输入有效的数字"

情形3:年龄太小

  • 条件:元件文本转换为数字 < 18

  • 动作:设置提示文本为"年龄必须大于或等于18岁"

情形4:年龄太大

  • 条件:元件文本转换为数字 > 150

  • 动作:设置提示文本为"请输入有效年龄(不超过150岁)"

情形5:输入正确

  • 条件:无(作为"否则"情况)

  • 动作:设置提示文本为"输入正确"

通过这种方式,你可以实现更复杂和精确的输入验证,处理各种可能的输入情况。Axure会按顺序检查每个情形,执行第一个满足条件的情形对应的动作。

这种多组条件判断的方法使得交互设计更加灵活和强大,能够处理更复杂的用户输入场景。

总结

通过熟练运用这些技巧,您可以在Axure中创建更加复杂和智能的交互原型,提高用户体验设计的质量和精确度。这种多条件判断的方法特别适合于表单验证、数据输入检查等场景,能够大大提升原型的真实感和交互性。

声明:本站原创文章文字版权归本站所有,转载务必注明作者和出处;本站转载文章仅仅代表原作者观点,不代表本站立场,图文版权归原作者所有。如有侵权,请联系我们删除。
#Axure RP #Axure教程 #Axure情形教程 
收藏 1
推荐阅读
  • Axure RP 教程:Axure中继器中按钮文字添加页面链接或外链设置方法
  • Axure RP 教程:常用样式之元件样式管理器
  • Axure入门教程:将Adobe XD设计导入Axure
  • Axure RP 无法发布预览页面问题?无法正常预览页面怎么办?怎么解决?
  • 组件库Fontawesome字体图标使用说明
评论 (0)
请登录后发表评论
分类精选
Axure RP 教程:Axure中实现多组条件判断情形(Case)的使用和设置
1875 10月前
Axure RP 教程:快速制作页面跳转,Axure RP跳转链接教程
1780 1年前
Axure RP 教程:制作滚动字幕效果,文字滚动的动态效果
1766 1年前
Axure RP 教程:Axure 预览与发布生成HTML文件
1700 1年前
Axure RP 教程:Axure中继器的增、删、改、查操作教程
1698 1年前
Axure入门教程:将Adobe XD设计导入Axure
1688 1年前
Axure RP 教程:Axure中继器中按钮文字添加页面链接或外链设置方法
1659 1年前
在Axure RP中快速创建可视化统计图,加载图表元件库 Axhub Charts
1658 1年前
Axture元件库教程(二):一键复制Iconfont图标到Axure
1658 1年前
Axure RP 无法发布预览页面问题?无法正常预览页面怎么办?怎么解决?
1454 1年前

文章目录

关注「苏米客」公众号

订阅推送更及时,手机查看更方便
分类排行
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模板 申请友联