Axure模擬微信聊天效果

移動互聯網 Axure 微信 產品經理 人人都是產品經理 2017-04-04
Axure模擬微信聊天效果

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

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

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

產品是需要養的。

微信聊天

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

實現微信聊天效果

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

聊天機制

A選擇給B發送信息,輸入信息後,點擊發送,提示發送成功,B收到A發送的信息,並可以回覆A。

實現步驟

1、創建聊天界面

首先拖入一箇中繼器,按照下圖所示的方式佈置中繼器的內容:

圖片命名為photo_head,標題命名為name,內容命名為content,時間命名為time,然後創建中繼器內容中的字段,並填充內容:

Axure模擬微信聊天效果

填充完畢後,設置中繼器數據顯示所必須的事件:

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

Axure模擬微信聊天效果

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

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

Axure模擬微信聊天效果

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

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

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

命名d_talk中的頭部標題為2_name(即“微信”兩個字),設置d_talk顯示時的事件:

Axure模擬微信聊天效果

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

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

創建一箇中繼器,命名為2_chat,用來顯示自己說的話。具體佈局如下圖所示:

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

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

Axure模擬微信聊天效果

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

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

Axure模擬微信聊天效果

5、實現即時通訊效果

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

Axure模擬微信聊天效果

Demo預覽:

作者:神奈川00(微信號公眾號 藝鬥空間 )

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

相關推薦

推薦中...