首页
限免课
实战课
免费好课
课程库
经验
问答
会员课程
首页 |经验 |ui |经验详情

学会Axure复杂交互功能

更新时间:2023-11-20

调皮扯手机

ui

1469

如何实现Axure的复杂功能操作呢?我们可以用用Axure中的全局变量+中继器+动态面板,实现动态查询功能。下面为大家详细介绍。

简单四步即可实现:

1、设置一个全局变量,将全局变量通过提交按钮传递到链接页面;

2、在中继器中放入商品列表;

3、将不同的中继器列表放入不同的动态面板状态中;

4、在商品列表页面的页面载入事件中添加不同的情形进行判断。

具体操作步骤如下:

1、设置一个全局变量,将全局变量通过提交按钮传递到链接页面:添加全局变量“点击横向菜单中的【项目】-->【全局变量设置】-->输入全局变量名称;给提交按钮添加鼠标单击时页面传值事件“点击【交互】-->【新建交互】-->【单击时】-->【设置变量值】-->【目标】中选择变量值为第二步中设置的全局变量名称-->【设置为】中选择‘元件文字’-->【元件】中选择第一步中拖入的文本输入框-->点击完成按钮”;

学会Axure复杂交互功能

2、在中继器中放入商品列表:在页面拖入Axure默认元件【中继器】-->双击拖入的中继器元件à删除中继器中的矩形元件;

在中继器中拖入Axure默认元件【图片】-->拖入Axure默认元件【文本标签】-->将文本标签放在图片下方并重命名为“价格”-->在价格下方拖入【文本段落】;

为中继器数据表的列标题赋值,在右侧样式面板中的数据列表中,给表头中的列标题重命名,第一列标题命名为“image”,第二列标题命名为“price”,第三列标题命名为“details”;

将中继器中的元件与数据表的列表题进行关联,点击样式面板右侧的交互,为每项加载时事件,选择元件动作【设置文本】-->目标栏选择拖入的“文本标签”,设置为栏选择“文本”,点击值后面的fx符号,点击弹框中的【插入变量和函数】,选择中继器数据集中的“item.price”.重复以上操作将元件文本段落与数据表中的details 关联上,图片元件关联时,元件动作选择【设置图片】即可;

在中继器数据表中输入价格和详细信息,image对应的列中在表格中点击鼠标右键导入图片即可。


学会Axure复杂交互功能

3、将不同的中继器列表放入不同的动态面板状态中:在页面拖入Axure默认元件【动态面板】-->添加状态1为衣服面板-->添加状态2为口罩面板-->添加状态3为查询不到数据面板;

将衣服列表的中继器放在状态1中,将口罩列表的中继器放在状态2中.在状态3中放入图标和提示语;

学会Axure复杂交互功能

4、在商品列表页面的页面载入事件中添加不同的情形进行判断:在商品列表页面的【页面载入时】事件中添加三个情形,情形1:如果搜索时设置的全局变量值包含了衣服,则设置面板状态到衣服面板.情形2:如果搜索时设置的全局变量包含了口罩,则设置面板状态到口罩面板.情形3:如果搜索时设置的全局变量既不包含口罩也不包含衣服,则设置面板状态到状态3;

学会Axure复杂交互功能

熟能生巧,由浅到深学习,你也可以成为一名优秀的交互设计师。

上一篇 下一篇

相关课程

ONLINE COURSES
  • 女生学计算机可以从事什么职业

    女生学计算机可以从事什么职业

    讲师:JennyZ

  • 设计类前景较好的专业有哪些

    设计类前景较好的专业有哪些

    讲师:奇思无止境

  • UI作品集怎么做

    UI作品集怎么做

    讲师:行动者帆帆

  • 元宇宙对设计师有哪些影响

    元宇宙对设计师有哪些影响

    讲师:奇思无止境

免费好课

FREE GOOD COURSES
MORE
  • C4D模型制作技术

    C4D模型制作技术

    3小时15分钟47秒

  • 品牌物料设计课

    品牌物料设计课

    3小时57分钟38秒

  • 网游手绘武器制作课

    网游手绘武器制作课

    3小时55分钟44秒

  • 砸掉培训机构饭碗的AE系统课

    砸掉培训机构饭碗的AE系统课

    19分钟20秒

  • 高分动画电影《落凡尘》主创分享

    高分动画电影《落凡尘》主创分享

    29分钟2秒

  • 游戏3d设计师模型基础课

    游戏3d设计师模型基础课

    3小时49分钟53秒

Copyright © 2015 - 2021北京云创科讯软件有限公司

京ICP备16013396号-1

经营许可证京ICP证161220号

课程咨询电话 18516802937

  • 在线咨询
  • 插件下载
  • 职业测评
  • 素材下载
  • 微信咨询
学习在线解答