主要內容

在QQ使用中我們可以選擇添加分組聯(lián)系人，批量添加，已添加過的聯(lián)系人不能重復添加，在搜索框輸入文字時切換到搜索聯(lián)系人列表，本課來學習如何實現這個交互。交互中會使用Axure里面的中繼器、變量、函數。

交互效果

1.點擊聯(lián)系人分組，批量添加分類下的所有聯(lián)系人，已添加過的聯(lián)系人不再重復添加。

2.檢索輸入框為文字輸入狀態(tài)時，切換到搜索聯(lián)系人列表。

一、原型制作

步驟1：

此原型在前面新建QQ討論組上面的基礎上制作，把聯(lián)系人和已選聯(lián)系人兩個動態(tài)面板分別命名為：聯(lián)系人、已選聯(lián)系人

步驟2：

在聯(lián)系人動態(tài)面板新增狀態(tài)2，在狀態(tài)2添加一個中繼器，命名“篩選”，刪除中繼器里面的行，新增加二列，每列分別命名：mig、name

1）添加一個矩形，調整位置與大?。簒: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”列輸入聯(lián)系人的信息

在中繼器項目交互下，雙擊每項加載時，打開用例編輯器

動作1：設置文本，第四步選擇“name”將文本值設置為“Item.name”

動作2：設置圖像，第四步選擇“mig”默認“圖像”導入QQ頭像

二、設置分組樹節(jié)點“鼠標單擊時”事件

步驟3：

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

編輯條件：選擇“變量值”不包含·值·點擊后面的“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）對應的樹節(jié)點為1.2、1.3即可

選中用例2、用例3，右鍵選擇“切換IF/ELSE IF”

步驟4：

其它兩組聯(lián)系人：我的好友、Arduino同樣設置分組樹節(jié)點“鼠標單擊時”事件，重復步驟3

復制、粘貼步驟3用例1，修改用例條件局部變量對應后面的樹節(jié)點部件名稱即可，如2.1、2.1、3.1、3.2等

我的好友組中共有9名聯(lián)系人即設置9個用例，并修改對應的樹節(jié)點名稱，Arduino組中有4個聯(lián)系人即設置4個用例，并修改對應的樹節(jié)點名稱（該組聯(lián)系人有多少個即分別設置多少個用例

除用例1外其它用例同樣需要右鍵選擇“切換IF/ELSE IF”

?

三、設置搜索框“獲得焦點時”事件

步驟5：

選中搜索輸入框，雙擊“獲得焦點時”事件，打開用例編輯器

動作：選擇“設置面板狀態(tài)”，第四步選擇“聯(lián)系人”，選擇狀態(tài)到狀態(tài)2