axure如何制作注册页面(Axure教程新建QQ讨论组3)(1)

主要内容


在QQ使用中我们可以选择添加分组联系人,批量添加,已添加过的联系人不能重复添加,在搜索框输入文字时切换到搜索联系人列表,本课来学习如何实现这个交互。交互中会使用Axure里面的中继器、变量、函数。


交互效果


1.点击联系人分组,批量添加分类下的所有联系人,已添加过的联系人不再重复添加。


2.检索输入框为文字输入状态时,切换到搜索联系人列表。



一、原型制作


步骤1:


此原型在前面新建QQ讨论组上面的基础上制作,把联系人和已选联系人两个动态面板分别命名为:联系人、已选联系人


axure如何制作注册页面(Axure教程新建QQ讨论组3)(2)


步骤2:


在联系人动态面板新增状态2,在状态2添加一个中继器,命名“筛选”,删除中继器里面的行,新增加二列,每列分别命名:mig、name


1)添加一个矩形,调整位置与大小:x:22.y :0,w:158,h:18,命名:name,线条颜色设置为无


2)添加图片部件,调整位置与大小:x:0.y :5, w:18,h:18,命名:mig


3)添加单行文本框,调整位置与大小x:179.y :0,w:2,h:25,命名:关键字判断,并设为隐藏


在数据集“name”列输入联系人的信息


在中继器项目交互下,双击每项加载时,打开用例编辑器


动作1:设置文本,第四步选择“name”将文本值设置为“Item.name”


动作2:设置图像,第四步选择“mig”默认“图像”导入QQ头像


axure如何制作注册页面(Axure教程新建QQ讨论组3)(3)



二、设置分组树节点“鼠标单击时”事件


步骤3:


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


编辑条件:选择“变量值”不包含·值·点击后面的“fx”,在编辑值窗口,新增局部变量:LVAR1=部件·1.1


点击插入变量...选择部件下面确的“text”,再选中“This”,选择“LVAR1”;(即设置条件“if 变量 OnLoadVariable 不包含 "[[LVAR1.text]]”)


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


第四步:选择“OnLoadVariable”,设置变量值为,点击值后面的“fx”,在编辑值窗口,新增局部变量:LVAR1=部件·1.1


点击插入变量...选择字符串函数下面的的“concat('string')”,选中“LVAR”选择“OnLoadVariable”,再选中“'string',选择部件下面的“text”,再选中“This”,选择“LVAR1”(设置值为:[[OnLoadVariable.concat(LVAR1.text)]])


动作2:选择“新增行”


第四步:选择“中继器”,点击新增行,点击“name”下面的“fx”,在编辑值窗口,新增局部变量:LVAR1=部件·1.1,点击插入变量...,选择部件下面确的“text”,再选中“This”,选择“LVAR1”(设置值为:[[LVAR1.text]])


设置用例2、用例3(复制、粘贴用例1),修改局部变量中(LVAR1=部件·1.2)对应的树节点为1.2、1.3即可


选中用例2、用例3,右键选择“切换IF/ELSE IF”


axure如何制作注册页面(Axure教程新建QQ讨论组3)(4)


步骤4:


其它两组联系人:我的好友、Arduino同样设置分组树节点“鼠标单击时”事件,重复步骤3


复制、粘贴步骤3用例1,修改用例条件局部变量对应后面的树节点部件名称即可,如2.1、2.1、3.1、3.2等


我的好友组中共有9名联系人即设置9个用例,并修改对应的树节点名称,Arduino组中有4个联系人即设置4个用例,并修改对应的树节点名称(该组联系人有多少个即分别设置多少个用例


除用例1外其它用例同样需要右键选择“切换IF/ELSE IF”


axure如何制作注册页面(Axure教程新建QQ讨论组3)(5)



三、设置搜索框“获得焦点时”事件


步骤5:


选中搜索输入框,双击“获得焦点时”事件,打开用例编辑器


动作:选择“设置面板状态”,第四步选择“联系人”,选择状态到状态2


axure如何制作注册页面(Axure教程新建QQ讨论组3)(6)



,