【前言】
產(chǎn)品經(jīng)理是站在上帝身邊的人。(上帝了解人性跳纳,懂得如何運(yùn)用群體的特性去駕馭人類忍饰,產(chǎn)品終究是聯(lián)系人與思想的媒介,虛無縹緲的道貫穿在產(chǎn)品經(jīng)理和用戶之間寺庄,隔著一層薄薄的紗喘批,隱約可見,霎那間很近铣揉,轉(zhuǎn)身就又很遠(yuǎn))
一款好的產(chǎn)品是建立在一切近乎完美的情景下開發(fā)出來的饶深。
產(chǎn)品是有靈性的,你懷著什么樣的心情創(chuàng)造它逛拱,那么它就會(huì)以相同的姿態(tài)對(duì)待你的用戶敌厘。
產(chǎn)品是需要養(yǎng)的。
【微信聊天】
微信的出現(xiàn)讓聊天變得更加便捷朽合,更便宜俱两。讓人可以專注的去思考聊天的內(nèi)容。這里也要感謝QQ曹步,感謝QQ許多年的陪伴宪彩。
【實(shí)現(xiàn)微信聊天效果】
在Axure中實(shí)現(xiàn)微信聊天效果,需要對(duì)中繼器讲婚,動(dòng)態(tài)面板尿孔,變量,函數(shù)等有一定的認(rèn)識(shí)筹麸,同時(shí)可以將這些知識(shí)融會(huì)貫通使用活合。
【聊天機(jī)制】
A選擇給B發(fā)送信息,輸入信息后物赶,點(diǎn)擊發(fā)送白指,提示發(fā)送成功,B收到A發(fā)送的信息酵紫,并可以回復(fù)A告嘲。
【實(shí)現(xiàn)步驟】
1错维、創(chuàng)建聊天界面
首先拖入一個(gè)中繼器,按照下圖所示的方式布置中繼器的內(nèi)容:
![](http://yidou.oss-cn-shanghai.aliyuncs.com/chat_2017.3.27/chat_list/data_chat_2017.3.27.png)
圖片命名為photo_head橄唬,標(biāo)題命名為name需五,內(nèi)容命名為content,時(shí)間命名為time轧坎,然后創(chuàng)建中繼器內(nèi)容中的字段,并填充內(nèi)容:
![](http://yidou.oss-cn-shanghai.aliyuncs.com/chat_2017.3.27/chat_list/data1_chat_2017.3.27.png)
填充完畢后泽示,設(shè)置中繼器數(shù)據(jù)顯示所必須的事件:
![](http://yidou.oss-cn-shanghai.aliyuncs.com/chat_2017.3.27/chat_list/thing_chat_2017.3.27.png)
注意缸血,time=[[Now.gethours()]]:[[Now.getminutes]]表示當(dāng)前的時(shí)間,單位為時(shí):分械筛,至此捎泻,完成中繼器中數(shù)據(jù)內(nèi)容的顯示。
![](http://yidou.oss-cn-shanghai.aliyuncs.com/chat_2017.3.27/chat_list/xs_chat_2017.3.27.png)
2埋哟、實(shí)現(xiàn)點(diǎn)擊消息列表笆豁,進(jìn)入消息詳情,點(diǎn)擊返回赤赊,返回消息列表
首先闯狱,拖入一個(gè)大小為375x667的動(dòng)態(tài)面板,命名為d_talk抛计,在狀態(tài)1里面繪制聊天頁(yè)面哄孤,為中繼器的每一行設(shè)置點(diǎn)擊事件,點(diǎn)擊時(shí)吹截,令動(dòng)態(tài)面板d_talk瘦陈,向上滑動(dòng)顯示。實(shí)現(xiàn)效果如下:
![](http://yidou.oss-cn-shanghai.aliyuncs.com/chat_2017.3.27/chat_tk/tk_chat_2017.3.27.gif)
3波俄、實(shí)現(xiàn)聊天界面和消息列表一一對(duì)應(yīng)
通過分析晨逝,需要實(shí)現(xiàn)點(diǎn)擊某一個(gè)人的消息,那么進(jìn)入聊天界面后懦铺,頭部標(biāo)題顯示此人的名字捉貌,這里用到了全局變量。首先創(chuàng)建一個(gè)全局變量num1冬念,設(shè)置當(dāng)點(diǎn)擊中繼器的item時(shí)昏翰,令num1的值和item當(dāng)前行數(shù)值相等。
![](http://yidou.oss-cn-shanghai.aliyuncs.com/chat_2017.3.27/chat/data_thing_2017.3.28.png)
如圖:1代表的是由消息列表跳轉(zhuǎn)至聊天界面 2表示num1代表當(dāng)前被點(diǎn)擊的行刘急。
命名d_talk中的頭部標(biāo)題為2_name(即“微信”兩個(gè)字)棚菊,設(shè)置d_talk顯示時(shí)的事件:
![](http://yidou.oss-cn-shanghai.aliyuncs.com/chat_2017.3.27/chat/d_talk_thing_2017.3.28.png)
4、實(shí)現(xiàn)自己說話顯示效果
首先確定叔汁,輸入文字后统求,聊天界面應(yīng)該顯示自己的頭像和說話的內(nèi)容检碗。
創(chuàng)建一個(gè)中繼器,命名為2_chat码邻,用來顯示自己說的話折剃。具體布局如下圖所示:
![](http://yidou.oss-cn-shanghai.aliyuncs.com/chat_2017.3.27/chat/2_chat_2017.3.28.png)
![](http://yidou.oss-cn-shanghai.aliyuncs.com/chat_2017.3.27/chat/nothing_2017.3.28.png)
為發(fā)送按鈕設(shè)置點(diǎn)擊事件:當(dāng)點(diǎn)擊發(fā)送按鈕時(shí)己莺,添加行到2_chat中奏甫,如下圖所示:
![](http://yidou.oss-cn-shanghai.aliyuncs.com/chat_2017.3.27/chat/2_list_2017.3.28.png)
至此,可實(shí)現(xiàn)顯示自己的話的效果凌受,如下圖所示:
![](http://yidou.oss-cn-shanghai.aliyuncs.com/chat_2017.3.27/chat/suolong_2017.3.28.gif)
5阵子、實(shí)現(xiàn)即時(shí)通訊效果
再拖入一個(gè)聊天面板,其他具體設(shè)置和d_talk類似胜蛉,點(diǎn)擊發(fā)送挠进,設(shè)置顯示對(duì)方人的話,完成設(shè)置后誊册,效果如下:
![](http://yidou.oss-cn-shanghai.aliyuncs.com/chat_2017.3.27/chat/xg_2017.3.28.gif)
【Demo預(yù)覽】
微信即時(shí)通訊demo