在QQ使用中我們可以選擇添加聯(lián)系人，新建一個(gè)討論組，已添加過(guò)的聯(lián)系人不能重復(fù)添加，交互中會(huì)使用Axure里面的中繼器、變量、函數(shù)。

交互效果

1.鼠標(biāo)移入、點(diǎn)擊聯(lián)系人，顯示懸停和選中樣式。

2.鼠標(biāo)點(diǎn)擊聯(lián)系人，該聯(lián)系人頭像、姓名添加到已選聯(lián)系人列表中。已添加過(guò)的聯(lián)系人不重復(fù)添加。

一、原型制作

步驟1：

添加4個(gè)矩形到編輯區(qū)分別制作如下

1）制作討論組1面板，設(shè)置大?。簑:480，h:390；

2）調(diào)整位置大小w:480，h:30，制作標(biāo)題欄，設(shè)置顏色：綠色，

3）調(diào)整位置大小w:480，h:40，放在底部，并設(shè)置顏色為灰色；

4）制作確定、取消按鈕；

添加單行文框到編輯區(qū)制作搜索框，添加單行文本標(biāo)簽到編輯區(qū)，編輯文字：已選聯(lián)系人：1/50，命名：統(tǒng)計(jì)；添加單行文本標(biāo)簽到標(biāo)題欄編輯文字：創(chuàng)建討論組；

添加水平線到編輯區(qū)設(shè)置線寬：20，線條顏色：灰色，旋轉(zhuǎn)并組合兩條水平線，制作指向標(biāo)識(shí)

步驟2：

添加矩形到編輯區(qū)，制作聯(lián)系人列表，設(shè)置位置與大小：x:36.y :95，w:210，h:280，把矩形轉(zhuǎn)換成動(dòng)態(tài)面板，設(shè)置“按需顯示縱向滾動(dòng)條”

打開(kāi)動(dòng)態(tài)面板狀態(tài)1編輯區(qū)，添加1個(gè)樹(shù)部件，新增加2個(gè)一級(jí)樹(shù)節(jié)點(diǎn)設(shè)置為三個(gè)組：最近聯(lián)系人、我的好友、Arduino ；

在2級(jí)樹(shù)節(jié)點(diǎn)圖標(biāo)中導(dǎo)入QQ頭像，并編輯聯(lián)系人的信息

步驟3：

添加矩形到編輯區(qū)，制作已選聯(lián)系人列表，設(shè)置位置與大小：x:289.y :95，w:204，h:280，把矩形轉(zhuǎn)換成動(dòng)態(tài)面板，設(shè)置“按需顯示縱向滾動(dòng)條”

打開(kāi)動(dòng)態(tài)面板狀態(tài)1編輯區(qū)，添加1個(gè)中繼器，打開(kāi)中繼器編輯區(qū)，在中繼器數(shù)據(jù)集里刪除中繼器里面的行，新增加三列，每列分別命名：mig、name、do；

1）添加一個(gè)矩形，調(diào)整位置與大小：x:22.y :0，w:158,h:18,命名：name；

2）添加圖片部件，調(diào)整位置與大?。簒:0.y :5， w:18,h:18,命名：mig；

3) 添加圖片部件，調(diào)整位置與大小：x:183.y :11，w:15,h:12,命名：do；

步驟4：

在“中繼器項(xiàng)目交互”標(biāo)簽下雙擊“每項(xiàng)加載時(shí)”，打開(kāi)用例編輯器

動(dòng)作1：選擇“部件文字”，第四步選擇“name”，將文本設(shè)置為值，點(diǎn)擊后面的“fx”，點(diǎn)擊插入變量...選擇中繼器數(shù)據(jù)集下面的“Item.name”

動(dòng)作2：選擇“設(shè)置圖像”，第四步選擇“mig”，默認(rèn)：圖像，點(diǎn)擊“導(dǎo)入”導(dǎo)入QQ頭像；

選擇“設(shè)置圖像”，第四步選擇“do”，默認(rèn)：圖像，點(diǎn)擊“導(dǎo)入”導(dǎo)入默認(rèn)關(guān)閉按鈕，鼠標(biāo)懸停時(shí)：點(diǎn)擊“導(dǎo)入”導(dǎo)入鼠標(biāo)懸停時(shí)關(guān)閉按鈕

二、設(shè)置所有2級(jí)樹(shù)節(jié)點(diǎn)“鼠標(biāo)懸停時(shí)、選中”時(shí)的交互樣式

步驟5：

選中樹(shù)節(jié)點(diǎn)“張三”在部件屬性中點(diǎn)擊“鼠標(biāo)懸停時(shí)”打開(kāi)設(shè)置交互樣式窗口，設(shè)置填充顏色“FFF3C4”，應(yīng)用到“該節(jié)點(diǎn)、同級(jí)節(jié)點(diǎn)和所有的節(jié)點(diǎn)”；切換“選中”標(biāo)簽下，設(shè)置填充顏色“E8F9FF”，應(yīng)用到“該節(jié)點(diǎn)、同級(jí)節(jié)點(diǎn)和所有的節(jié)點(diǎn)”

步驟6：

其它兩組聯(lián)系人也是同樣設(shè)置。

三、設(shè)置所有2級(jí)樹(shù)節(jié)點(diǎn)“鼠標(biāo)單擊時(shí)”事件

步驟7：

打開(kāi)聯(lián)系人動(dòng)態(tài)面板編輯區(qū)，選中聯(lián)系人“張三”，雙擊“鼠標(biāo)單擊時(shí)”打開(kāi)用例編輯器

編輯條件：選擇“變量值”不包含·值·點(diǎn)擊后面的“fx”，打開(kāi)編輯值窗口，

新增局部變量：LVAR1=部件·當(dāng)前部件

點(diǎn)擊插入變量...選擇部件下面的“text”，再選中“This”，選擇“LVAR1”；（設(shè)置條件“if 變量 OnLoadVariable 不包含 "[[LVAR1.text]]”）

動(dòng)作1：選擇“設(shè)置變量值”

第四步：選擇“OnLoadVariable”，設(shè)置變量值為，點(diǎn)擊值后面的“fx”，打開(kāi)編輯值窗口，新增局部變量：LVAR1=部件·當(dāng)前部件
點(diǎn)擊插入變量...選擇字符串函數(shù)下面的的“concat('string')”，選中“LVAR”選擇“OnLoadVariable”，再選中“'string'，選擇部件下面的“text”，再選中“This”，選擇“LVAR1”（設(shè)置值為：[[OnLoadVariable.concat(LVAR1.text)]]）

動(dòng)作2：選擇“新增行”

第四步：選擇“中繼器”，點(diǎn)擊新增行打開(kāi)編輯器“name”下面的“fx”，打開(kāi)編輯值窗口，新增局部變量：LVAR1=部件·當(dāng)前部件，點(diǎn)擊插入變量...，選擇局部變量“LVAR1

步驟8：

其它所有聯(lián)系人設(shè)置同樣的“鼠標(biāo)單擊時(shí)”事件，選中聯(lián)系人復(fù)制、粘貼此事件即可