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

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

一款好的產(chǎn)品是建立在一切近乎完美的情景下開發(fā)出來的。

產(chǎn)品是有靈性的，你懷著什么樣的心情創(chuàng)造它，那么它就會以相同的姿態(tài)對待你的用戶。

產(chǎn)品是需要養(yǎng)的。

微信聊天

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

實現(xiàn)微信聊天效果

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

聊天機(jī)制

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

實現(xiàn)步驟

1、創(chuàng)建聊天界面

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

圖片命名為photo_head，標(biāo)題命名為name，內(nèi)容命名為content，時間命名為time，然后創(chuàng)建中繼器內(nèi)容中的字段，并填充內(nèi)容：

填充完畢后，設(shè)置中繼器數(shù)據(jù)顯示所必須的事件：

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

2、實現(xiàn)點擊消息列表，進(jìn)入消息詳情，點擊返回，返回消息列表

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

3、實現(xiàn)聊天界面和消息列表一一對應(yīng)

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

如圖：1代表的是由消息列表跳轉(zhuǎn)至聊天界面 ?2表示num1代表當(dāng)前被點擊的行。

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

4、實現(xiàn)自己說話顯示效果

首先確定，輸入文字后，聊天界面應(yīng)該顯示自己的頭像和說話的內(nèi)容。

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

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

為發(fā)送按鈕設(shè)置點擊事件：當(dāng)點擊發(fā)送按鈕時，添加行到2_chat中，如下圖所示：

[[LVAR1]]指的是輸入框2_et中輸入的內(nèi)容。

至此，可實現(xiàn)顯示自己的話的效果，如下圖所示：

5、實現(xiàn)即時通訊效果

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

Demo預(yù)覽：

微信即時通訊demo

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

本文由 @神奈川00 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。