產品經理是站在上帝身邊的人。(上帝瞭解人性,懂得如何運用群體的特性去駕馭人類,產品終究是聯繫人與思想的媒介,虛無縹緲的道貫穿在產品經理和用戶之間,隔著一層薄薄的紗,隱約可見,霎那間很近,轉身就又很遠)
一款好的產品是建立在一切近乎完美的情景下開發出來的。
產品是有靈性的,你懷著什麼樣的心情創造它,那麼它就會以相同的姿態對待你的用戶。
產品是需要養的。
微信聊天
微信的出現讓聊天變得更加便捷,更便宜。讓人可以專注的去思考聊天的內容。這裡也要感謝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(微信號公眾號 藝鬥空間 )
本文由 @神奈川00 原創發佈於人人都是產品經理。未經許可,禁止轉載。