在使用QQ时，我们可以选择添加联系人和创建新的讨论组。已经添加的联系人不能重复添加。交互中将使用Axure中的中继器、变量和函数。

互动效果

1.将鼠标移入，点击联系人，显示悬停和选中的样式。

2。用鼠标点击联系人，联系人照片和姓名将被添加到所选联系人列表中。添加的联系人将不会重复添加。

一、原型制作

第一步:

将四个矩形添加到编辑区域，并使它们如下

1)制作讨论组1的面板，设置尺寸:w:480，h:390；

2)调整位置大小w:480，h:30，制作标题栏，设置颜色:绿色。

3)调整位置大小w:480，h:40，放在底部，颜色设置为灰色；

4)制作确定和取消按钮；

在编辑区添加单行文本框做搜索框，在编辑区添加单行文字标签，编辑文字:选中联系人:1/50，姓名:统计；在标题栏中添加单行文本标签以编辑文本:创建讨论组；

在编辑区添加一条水平线，设置线宽:20，线条颜色:灰色。旋转并组合两条水平线，制作一个指向标志。

在编辑区添加一个矩形，制作联系人列表，设置位置和大小:x:36.y :95，w:210，h:280，将矩形变成动态面板，设置“按需显示垂直滚动条”

打开动态面板的状态1编辑区，添加一个树部件，添加两个一级树节点，设置三个组:最近联系人、我的朋友、arduino

在二级树节点图标中导入QQ头像，编辑联系方式。

在编辑区添加一个矩形，列出选中的联系人，设置位置和大小:x:289.y :95，w:204，h:280，将矩形转换成动态面板，设置“根据需要显示垂直滚动条”

打开动态面板状态1，添加一个repeater，打开repeater的编辑区，删除repeater数据集中repeater中的行，新增三列，分别命名为mig，name和do；

1)添加一个矩形，调整其位置和大小:x:22.y :0，w:158，h:18，命名为name；

2)添加图片部分并调整位置和大小:x:0.y :5，w:18，h:18，命名为mig；

3)添加图片部分并调整位置和大小:x:183.y :11，w:15，h:12，命名为do；

在“Repeater Project Interaction”选项卡下，双击“当每一项加载时”打开用例编辑器。

动作一:选择“组件文本”，步骤四:选择“名称”，将文本设置为一个值，点击后面的“fx”，点击插入变量...并在repeater数据集下选择“Item.name”。

动作二:选择“设置图片”，第四步:选择“mig”，默认:图片，点击“导入”导入QQ头像；

选择“设置图像”，第四步，选择“做”，默认:图像，点击“导入”导入默认关闭按钮，鼠标悬停时点击“导入”导入关闭按钮。

第五步:

选择树节点“张三”，在part属性中点击“鼠标悬停时”打开设置交互样式窗口，设置填充颜色“FFF3C4”应用于“本节点、对等节点和所有节点”；切换“选定”选项卡，设置填充颜色“E8F9FF”并将其应用于“此节点、对等节点和所有节点”

其他两组联系人的设置相同。

三。设置所有二级树节点的“当鼠标点击”事件

第七步:

打开联系人动态面板的编辑区，选择联系人“张三”，双击“鼠标点击时”打开用例编辑器。

编辑条件:选择“变量值不包含值”，点击后面的“fx ”,打开编辑值窗口。

新的局部变量:lvar 1 = component current component

单击插入变量...选择零件下的“text”，然后选择“This”和“lvar 1”；(设置条件“如果变量OnLoadVariable不包含“[LVAR1.text]]”)

操作1:选择“设置变量值”

第四步:选择“OnLoadVariable”，将变量值设置为，点击值后的“fx”打开编辑值窗口，添加一个局部变量:LVAR1= part current part
点击插入变量...选择“串联(& # 39；)下的字符串函数。字符串& # 39；)，选择LVAR，选择OnLoadVariable，然后选择& # 39；字符串& # 39；，选择零件下的“text”，然后选择“This”，选择“LVAR1”(设置值为[[onload variable . concat(lvar 1 . text)])。

操作2:选择“添加新行”

第四步:选择“Repeater”，点击添加行打开编辑器“name”下的“fx”，打开编辑值窗口，添加局部变量:LVAR1= part current part，点击插入变量...并选择局部变量“LVAR1”

所有其他联系人设置相同的“鼠标点击时”事件，选择该联系人复制粘贴该事件。