主要内容

在QQ使用中我們可以選擇添加聯系人，新建一個讨論組，已添加過的聯系人不能重複添加，交互中會使用Axure裡面的中繼器、變量、函數。

交互效果

1.鼠标移入、點擊聯系人，顯示懸停和選中樣式。

2.鼠标點擊聯系人，該聯系人頭像、姓名添加到已選聯系人列表中。已添加過的聯系人不重複添加。

一、原型制作

步驟1：

添加4個矩形到編輯區分别制作如下

1）制作讨論組1面闆，設置大小：w:480，h:390；

2）調整位置大小w:480，h:30，制作标題欄，設置顔色：綠色，

3）調整位置大小w:480，h:40，放在底部，并設置顔色為灰色；

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

添加單行文框到編輯區制作搜索框，添加單行文本标簽到編輯區，編輯文字：已選聯系人：1/50，命名：統計；添加單行文本标簽到标題欄編輯文字：創建讨論組；

添加水平線到編輯區設置線寬：20，線條顔色：灰色，旋轉并組合兩條水平線，制作指向标識

步驟2：

添加矩形到編輯區，制作聯系人列表，設置位置與大小：x:36.y :95，w:210，h:280，把矩形轉換成動态面闆，設置“按需顯示縱向滾動條”

打開動态面闆狀态1編輯區，添加1個樹部件，新增加2個一級樹節點設置為三個組：最近聯系人、我的好友、Arduino ；

在2級樹節點圖标中導入QQ頭像，并編輯聯系人的信息

步驟3：

添加矩形到編輯區，制作已選聯系人列表，設置位置與大小：x:289.y :95，w:204，h:280，把矩形轉換成動态面闆，設置“按需顯示縱向滾動條”

打開動态面闆狀态1編輯區，添加1個中繼器，打開中繼器編輯區，在中繼器數據集裡删除中繼器裡面的行，新增加三列，每列分别命名：mig、name、do；

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

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

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

步驟4：

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

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

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

選擇“設置圖像”，第四步選擇“do”，默認：圖像，點擊“導入”導入默認關閉按鈕，鼠标懸停時：點擊“導入”導入鼠标懸停時關閉按鈕

二、設置所有2級樹節點“鼠标懸停時、選中”時的交互樣式

步驟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：

其它所有聯系人設置同樣的“鼠标單擊時”事件，選中聯系人複制、粘貼此事件即可

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!