主要内容

在QQ使用中我们可以选择添加联系人，新建一个讨论组，已添加过的联系人不能重复添加，交互中会使用Axure里面的中继器、变量、函数。

交互效果

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

2.鼠标点击联系人，该联系人头像、姓名添加到已选联系人列表中。已添加过的联系人不重复添加。

一、原型制作

步骤1：

添加4个矩形到编辑区分别制作如下

1）制作讨论组1面板，设置大小：w:480，h:390；

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

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

4）制作确定、取消按钮；

添加单行文框到编辑区制作搜索框，添加单行文本标签到编辑区，编辑文字：已选联系人：1/50，命名：统计；添加单行文本标签到标题栏编辑文字：创建讨论组；

添加水平线到编辑区设置线宽：20，线条颜色：灰色，旋转并组合两条水平线，制作指向标识

步骤2：

添加矩形到编辑区，制作联系人列表，设置位置与大小：x:36.y :95，w:210，h:280，把矩形转换成动态面板，设置“按需显示纵向滚动条”

打开动态面板状态1编辑区，添加1个树部件，新增加2个一级树节点设置为三个组：最近联系人、我的好友、Arduino ；

在2级树节点图标中导入QQ头像，并编辑联系人的信息

步骤3：

添加矩形到编辑区，制作已选联系人列表，设置位置与大小：x:289.y :95，w:204，h:280，把矩形转换成动态面板，设置“按需显示纵向滚动条”

打开动态面板状态1编辑区，添加1个中继器，打开中继器编辑区，在中继器数据集里删除中继器里面的行，新增加三列，每列分别命名：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；

步骤4：

在“中继器项目交互”标签下双击“每项加载时”，打开用例编辑器

动作1：选择“部件文字”，第四步选择“name”，将文本设置为值，点击后面的“fx”，点击插入变量...选择中继器数据集下面的“Item.name”

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

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

二、设置所有2级树节点“鼠标悬停时、选中”时的交互样式

步骤5：

选中树节点“张三”在部件属性中点击“鼠标悬停时”打开设置交互样式窗口，设置填充颜色“FFF3C4”，应用到“该节点、同级节点和所有的节点”；切换“选中”标签下，设置填充颜色“E8F9FF”，应用到“该节点、同级节点和所有的节点”

步骤6：

其它两组联系人也是同样设置。

三、设置所有2级树节点“鼠标单击时”事件

步骤7：

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

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

新增局部变量：LVAR1=部件·当前部件

点击插入变量...选择部件下面的“text”，再选中“This”，选择“LVAR1”；（设置条件“if 变量 OnLoadVariable 不包含 \"[[LVAR1.text]]”）

动作1：选择“设置变量值”

第四步：选择“OnLoadVariable”，设置变量值为，点击值后面的“fx”，打开编辑值窗口，新增局部变量：LVAR1=部件·当前部件点击插入变量...选择字符串函数下面的的“concat(\'string\')”，选中“LVAR”选择“OnLoadVariable”，再选中“\'string\'，选择部件下面的“text”，再选中“This”，选择“LVAR1”（设置值为：[[OnLoadVariable.concat(LVAR1.text)]]）

动作2：选择“新增行”

第四步：选择“中继器”，点击新增行打开编辑器“name”下面的“fx”，打开编辑值窗口，新增局部变量：LVAR1=部件·当前部件，点击插入变量...，选择局部变量“LVAR1

步骤8：

其它所有联系人设置同样的“鼠标单击时”事件，选中联系人复制、粘贴此事件即可