Axure模擬微信聊天效果
在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預覽:
作者:神奈川00(B站 搜索:神奈川00 )
本文由 @神奈川00 原創發布于人人都是產品經理。未經許可,禁止轉載。
花了3個小時做出來了,鏈接:https://www.wulihub.com.cn/go/WX0V3Z/start.html,都忘得差不多了
大神可以發份源文件嗎
這個教程比較老了,可以看最新的教程:https://space.bilibili.com/33148634
最后怎么設置顯示兩個人的對話框
大神能發份源文件么,1030896039@qq.com
這個教程比較老了,可以看最新的教程:https://space.bilibili.com/33148634
我有一個地方沒有做出來,就是相互聊天的時候,那個氣泡怎么設置的?
大佬可不可以分享一份原型給我,1426668524@qq.com
大神求原型 1481455895@qq.com
請問你要有這份原型嗎,可不可以分享一份給我1426668524@qq.com
大神求源文件 ?
聊天列表中點擊一個進入單獨聊天時,手機的狀態欄是不變的,動態面板切換僅限于app內
學習了!感覺作展示也是妥妥的
請問怎么讓對話框里面輸入內容的藍色背景隨字數增加而自動變化
求大神源文件,學習axure不久,對中繼器和動態面板不熟,1211339619@qq.com
不熟就多在網上看,多練
求大牛源文件,對中繼器和動態面板搞不清楚,謝謝!
厲害!學習了
真的很棒,原來用Axure也是做到這么像啊??
很厲害??