在Axure中實現微信聊天效果，需要對中繼器，動態面板，變量，函數等有一定的認識，同時可以將這些知識融會貫通使用。

產品經理是站在上帝身邊的人。（上帝了解人性，懂得如何運用群體的特性去駕馭人類，產品終究是聯系人與思想的媒介，虛無縹緲的道貫穿在產品經理和用戶之間，隔著一層薄薄的紗，隱約可見，霎那間很近，轉身就又很遠）

一款好的產品是建立在一切近乎完美的情景下開發出來的。

產品是有靈性的，你懷著什么樣的心情創造它，那么它就會以相同的姿態對待你的用戶。

產品是需要養的。

微信聊天

微信的出現讓聊天變得更加便捷，更便宜。讓人可以專注的去思考聊天的內容。這里也要感謝QQ，感謝QQ許多年的陪伴。

實現微信聊天效果

在Axure中實現微信聊天效果，需要對中繼器，動態面板，變量，函數等有一定的認識，同時可以將這些知識融會貫通使用。

聊天機制

A選擇給B發送信息，輸入信息后，點擊發送，提示發送成功，B收到A發送的信息，并可以回復A。

實現步驟

1、創建聊天界面

首先拖入一個中繼器，按照下圖所示的方式布置中繼器的內容：

圖片命名為photo_head，標題命名為name，內容命名為content，時間命名為time，然后創建中繼器內容中的字段，并填充內容：

填充完畢后，設置中繼器數據顯示所必須的事件：

注意，time=[[Now.gethours()]]:[[Now.getminutes]]表示當前的時間，單位為時：分，至此，完成中繼器中數據內容的顯示。

2、實現點擊消息列表，進入消息詳情，點擊返回，返回消息列表

首先，拖入一個大小為375×667的動態面板，命名為d_talk，在狀態1里面繪制聊天頁面，為中繼器的每一行設置點擊事件，點擊時，令動態面板d_talk，向上滑動顯示。實現效果如下：

3、實現聊天界面和消息列表一一對應

通過分析，需要實現點擊某一個人的消息，那么進入聊天界面后，頭部標題顯示此人的名字，這里用到了全局變量。首先創建一個全局變量num1，設置當點擊中繼器的item時，令num1的值和item當前行數值相等。

如圖：1代表的是由消息列表跳轉至聊天界面 ?2表示num1代表當前被點擊的行。

命名d_talk中的頭部標題為2_name（即“微信”兩個字），設置d_talk顯示時的事件：

4、實現自己說話顯示效果

首先確定，輸入文字后，聊天界面應該顯示自己的頭像和說話的內容。

創建一個中繼器，命名為2_chat，用來顯示自己說的話。具體布局如下圖所示：

這里面的兩個元件分別命名為2_et ，img，中繼器中默認不添加任何內容。（這一點很重要，待會還會用到）

為發送按鈕設置點擊事件：當點擊發送按鈕時，添加行到2_chat中，如下圖所示：

[[LVAR1]]指的是輸入框2_et中輸入的內容。

至此，可實現顯示自己的話的效果，如下圖所示：

5、實現即時通訊效果

再拖入一個聊天面板，其他具體設置和d_talk類似，點擊發送，設置顯示對方人的話，完成設置后，效果如下：

Demo預覽：

微信即時通訊demo

作者：神奈川00（B站 搜索：神奈川00 ）

本文由 @神奈川00 原創發布于人人都是產品經理。未經許可，禁止轉載。