Axure 教程:实现自主向中继器添加图文数据

国内新闻 阅读(1469)

每个人都是产品经理,我想昨天分享

虽然原型通常不需要复杂的交互,但有时最好以更现实的方式描述产品,使客户或开发比口头或文档描述更有效。 axure中继器可以帮助我们添加,删除和修改相同的内容。本文将实现图形数据到转发器的自动传输。

image.php?url=0MqWIYlJko

效果预览

image.php?url=0MqWIYeeMC

预览effect.gif

实施方法

分析,目标是将图形数据添加到左侧信息列表中。首先准备转发器作为存储库,然后将数据添加到转发器。

设置转发器步骤:

(1)在画布上添加转发器并命名为“教师库”

image.php?url=0MqWIYXCun

(2)设置界面模型

双击转发器以进入转发器并设置转发器接口模型。删除转发器自身的矩形组件,添加所需的组件,并单独命名组件。例如,下图显示了名为的组件:头像,名称,级别和简介。模板中的数据可以改变或不改变,最后转发器从数据表中读取数据。

image.php?url=0MqWIYX4i3

退出(关闭)转发器返回画布,可以在默认显示中看到3个数据,然后我们在样式数据中设置实际数据。

image.php?url=0MqWIY5RI5

(3)添加转发器数据

数据有4个组件,并添加和命名4列。头像采用图像格式,您需要右键单击才能导入图像。此示例添加两个数据,如下所示:

image.php?url=0MqWIYrefD

添加数据后,界面未更改。由于转发器此时不知道数据表中的数据代表什么,因此您需要建立通信以让它知道哪个图片是哪个以及它是哪个名称。

(4)读取数据

设置交互 - 加载时的动作:动态读取,因此设置变量值。

头像 - 设置图片:

image.php?url=0MqWIYkCiJ

名称|等级|简介设置文本:

image.php?url=0MqWIYM0Za

完成教师库设置,如图所示:

image.php?url=0MqWIY3OpX

此示例最终旨在实现,将您选择的文本数据和输入添加到教师库中。因此,设计一个功能区域来添加教师(基本组件,处理省略,注释命名),如图所示:

image.php?url=0MqWIYb0Tt

请注意,添加教师头像的组件是三个基本图像组件。 (我还没有找到如何将本地图像直接添加到转发器,所以这个例子使用了一组图像数据)

如何单击“确认添加”按钮并将右侧的图形信息添加到左侧教师库并显示?

最后,(行)数据被添加到教师库转发器中,因此您应选择转发器以在独立时添加行:将转发器头像添加到所选图片;将转发器名称添加到“名称文本框”文本中;中继级数据是“级别文本框”文本;加法器配置文件数据是“简介文本框”文本。

(1)添加文字

操作:独立时的“确认按钮” - 中继器 - 添加行添加名称(名称):

image.php?url=0MqWIYuytZ

添加级别(状态),介绍(con)和添加名称,过程略有,结果如下:

image.php?url=0MqWIYpRMb

image.php?url=0MqWIYL9RC

image.php?url=0MqWIYKCuM

此处已完成向转发器添加文本数据,并且可以实现预览。

(2)添加图片(本案例的关键点以实现目标)

首先,右键单击图像中的三个图像组件作为教师头像库。

image.php?url=0MqWIYKdUJ

image.php?url=0MqWIYSVCQ

在这种情况下,您需要选择要添加的任何一个,因此当您单击时,您需要首先确定选择了哪个图像。如何判断,首先在选中时设置图片,设置相应的全局变量,在添加时直接使用变量。添加图片并选择交互,如下所示。为了表达所选效果,添加设置大小。三个图像中的每一个都需要设置不同的变量值1,2和3,并且注意设置大小以注意互斥。

image.php?url=0MqWIYJd3h

需要选择三个图像(值)互斥,只能选择一个。选择3个图像,右选项组,并将“阿凡达图书馆”命名为(请注意,它不是一个组合),如下所示:

image.php?url=0MqWIY7d6f

此时,返回确认添加操作:场景逻辑是,如果选择图1,则添加图1,即,如果全局变量值mg_sel为1,则添加图1。如果mg_sel是2,则添加图2,如果mg_sel是3,则添加图3。因此,您需要在此处添加一个情境,如下所示:

image.php?url=0MqWIYUOhF

设置3种情况,对应的变量对应于在添加行中导入相应的图片,设置动作结果如下:

image.php?url=0MqWIYpTs3

完成预期的目标!

终于来到这里,恭喜,并实现了预期的目标!提醒大家,在制作过程中,你必须注意命名。只要您按照步骤操作,就可以达到预期目标。

你为什么写这篇文章,在添加图形的实现开始时,我认为就像添加文本一样,你可以直接在添加行中设置变量,结果已经研究了很长时间,没有实现。借鉴互联网上其他老年人的经验,利用其背后的逻辑,我们可以实现我们期望的目标。

但是,你会发现它仍然更复杂。在正常情况下,我们不需要在原型中设计如此复杂的交互式液滴。当然,练习次数也只需几分钟。

本文最初由