养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

Axure如何实现新增数据效果--Axure基础教程

时间:2024-09-22 04:22:31

今天继续跟大家分享Ax掼鸿乡羰ure的相关经验。我们在设计原型的时候,经常会用到表格以及对表格的操作,再给用户演示的时候如果能够演示数据操作,会给人趑虎钾缫更加真实的感受,今天就跟大家分享如何实现添加数据,后续继续推出修改及删除数据的操作。

Axure如何实现新增数据效果--Axure基础教程

工具/原料

Axure

方法/步骤

1、首先打开软件,新建一个页面,准备好几个输入框。输入框一定要命好名字,要不然后期维护很混乱,制作的过程中也容易出现错误。

Axure如何实现新增数据效果--Axure基础教程

2、添加按钮,用于实现添加动作。拖拽一个按钮,修改按钮的名称,根据需要重命名。

Axure如何实现新增数据效果--Axure基础教程

3、添加中继器,如图所示。中继器是Axure中比较高级的元件,能够实现很多以假乱真的效果。

Axure如何实现新增数据效果--Axure基础教程

4、双击中继器,添加矩形,根据你要添加的数据多少添加对应数量的矩形。矩形对应中继器列数据的展示水貔藻疽,中继器中数据有几列,就添加几个矩形即可。

Axure如何实现新增数据效果--Axure基础教程

5、添加数据。在右侧的面板中有中继续数据设置的面板,可以添加行和列,第一行输入我们的列名,如图所示。

Axure如何实现新增数据效果--Axure基础教程

6、添加交互效果--加载时。点击属性面板中的交互效果,选择加芙囹买乐载时,双击后在弹出的面板中,将中继器中的矩形与中继器的列名一一对应起来,如图所示。

Axure如何实现新增数据效果--Axure基础教程

7、添加数据按钮交互效果设置。选中按钮,在属性面板--交互--单击时。双击打开交互效果设置面板。

Axure如何实现新增数据效果--Axure基础教程

8、添加动作--数据集--增加行。如图所示选择添加行,选中中继器,在中继器的下方有一个添加行的按钮,单击打开。

Axure如何实现新增数据效果--Axure基础教程

9、设置中继器公式。点击列后面的fx按钮,打开公式设置界面,点击添加局部变量,将第一步中的输入框设置为局部变量,如图:注意对应关系。

Axure如何实现新增数据效果--Axure基础教程

Axure如何实现新增数据效果--Axure基础教程

10、按照规则输入公式,在[[输入你的变量名]]。如图所示,输入正确的变量名后,点击确定,按照这个方式,依次将后面几列的公式都设置好。

Axure如何实现新增数据效果--Axure基础教程

Axure如何实现新增数据效果--Axure基础教程

11、点击预览,在输入框中数据数据,点击添加按钮,查看效果。

Axure如何实现新增数据效果--Axure基础教程

Axure如何实现新增数据效果--Axure基础教程

Axure如何实现新增数据效果--Axure基础教程

© 一点知识