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

交互效果

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

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

一、原型制作

步驟1：

添加4個矩形到編輯區(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)計；添加單行文本標(biāo)簽到標(biāo)題欄編輯文字：創(chuàng)建討論組；

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

步驟2：

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

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

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

步驟3：

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

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

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

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

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

步驟4：

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

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

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

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

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

步驟5：

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

步驟6：

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

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

步驟7：

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

編輯條件：選擇“變量值”不包含·值·點擊后面的“fx”，打開編輯值窗口，

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

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

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

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

動作2：選擇“新增行”

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

步驟8：

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