qq怎么建讨论组 qq怎么样创建讨论组
后台回复 1 免费送你《产品经理入门资料包》
主要内容
本文将详细介绍如何使用Axure制作QQ讨论组创建页面的原型，包含交互效果和具体步骤。
交互效果
1. 鼠标悬停和点击联系人时，显示相应的样式变化。
2. 点击联系人后，该联系人的头像和姓名将被添加到已选联系人列表中，同时避免重复添加。
一、原型制作
步骤1：创建页面基础结构
1. 添加四个矩形到编辑区，分别用于制作以下内容：
- 讨论组面板（大小：w:480，h:390）
- 标题栏（大小：w:480，h:30，颜色：绿色）
- 底部栏（大小：w:480，h:40，颜色：灰色）
- 确定按钮和取消按钮
2. 添加一个单行文框作为搜索框，并添加一个单行文本标签显示已选联系人数量，命名为“统计”。
3. 在标题栏中添加一个单行文本标签，显示“创建讨论组”。
4. 添加水平线制作指向标识，设置线条宽度为20，颜色为灰色。
步骤2：制作联系人列表
1. 添加一个矩形到编辑区，作为联系人列表，设置位置与大小：x:36, y:95, w:210, h:280。
2. 将矩形转换为动态面板，并设置“按需显示纵向滚动条”。
3. 打开动态面板状态1编辑区，添加一个树部件。
4. 新增加三个一级树节点，分别代表“最近联系人”、“我的好友”、“Arduino”。
5. 在二级树节点图标中导入QQ头像，并编辑联系人的信息。
步骤3：制作已选联系人列表
1. 添加一个矩形到编辑区，作为已选联系人列表，设置位置与大小：x:289, y:95, w:204, h:280。
2. 将矩形转换为动态面板，并设置“按需显示纵向滚动条”。
3. 打开动态面板状态1编辑区，添加一个中继器。
4. 在中继器数据集中删除原有行，并新增加三列，分别命名为“mig”、“name”、“do”。
5. 在中继器编辑区添加以下部件：
- 矩形（大小：x:22, y:0, w:158, h:18，命名：name）
- 图片部件（大小：x:0, y:5, w:18, h:18，命名：mig）
- 图片部件（大小：x:183, y:11, w:15, h:12，命名：do）
步骤4：设置中继器交互
1. 在“中继器项目交互”标签下双击“每项加载时”，打开用例编辑器。
2. 添加以下动作：
- 设置“部件文字”，选择“name”，将文本设置为“Item.name”。
- 设置“mig”部件的图像，导入QQ头像。
- 设置“do”部件的图像，导入默认关闭按钮，并设置鼠标悬停时显示关闭按钮。
二、设置所有二级树节点交互样式
步骤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：
对其它所有联系人设置同样的“鼠标单击时”事件，可以选中联系人复制、粘贴此事件即可。
