為了方便閱讀，可下載原型對(duì)照原型閱讀更容易理解。原型地址：

鏈接：https://pan.baidu.com/s/1VIHyaPrQpBVG7kaKavWCSA? ? 密碼：xs9v

一、布置基本頁(yè)面

基本界面

1.布置好導(dǎo)航欄

2.布置好輸入框和鍵盤，并添加以下事件：

• 獲取焦點(diǎn)時(shí)鍵盤展開，失去焦點(diǎn)時(shí)鍵盤收起。
• 指定提交按鈕——發(fā)送。
• 輸入框沒(méi)內(nèi)容時(shí)，發(fā)送按鈕禁用，有內(nèi)容時(shí)，啟用。

二、配置中繼器

中繼器元素構(gòu)成

要注意下：

1.聊天氣泡分為對(duì)方的消息氣泡和我的消息氣泡，如何在一個(gè)中繼器里呈現(xiàn)呢？

2.消息內(nèi)容有長(zhǎng)有短，怎么根據(jù)內(nèi)容的長(zhǎng)短適配氣泡大小呢？

問(wèn)題1：其實(shí)在聊天列表里，不論是誰(shuí)發(fā)送了什么樣的信息，本質(zhì)上是在一個(gè)列表里面插入了一條數(shù)據(jù)，而這個(gè)列表的單元項(xiàng)可以不同的形式展現(xiàn)。所以用用動(dòng)態(tài)面板可以完美解決問(wèn)題。對(duì)于不同的消息類型，展示不同的面板狀態(tài)。

如下：

聊天氣泡4種類型

這里我另外創(chuàng)建了一個(gè)汽車商品卡片類型和發(fā)送之后的消息樣式類型（模擬淘寶發(fā)送商品信息）。

確定展示形式之后，設(shè)置中繼器以下數(shù)據(jù)項(xiàng)：

• type——為氣泡類型標(biāo)記數(shù)據(jù)，根據(jù)這個(gè)數(shù)據(jù)的值加載為對(duì)應(yīng)的氣泡類型
• text——?dú)馀輧?nèi)容
• time——消息發(fā)送時(shí)間
• lo——loading圖標(biāo)展示狀態(tài)(稍后說(shuō)明)
• times——時(shí)間顯示狀態(tài)（稍后說(shuō)明）

問(wèn)題2：可以在加載中繼器時(shí)通過(guò)函數(shù)length獲取到文字長(zhǎng)度，再根據(jù)單個(gè)文字的寬高，計(jì)算氣泡應(yīng)有的大小，然后根據(jù)求得的值設(shè)置氣泡尺寸。

計(jì)算方式：

寬：[[Math.min((14*Item.text.length+20),205)]]

205是氣泡最大寬度，14是單個(gè)字的寬度，20是氣泡首尾填充寬度，item.text.length獲取字?jǐn)?shù)。

14*item.text.length+20則是計(jì)算一行字所需要的氣泡寬度，Math.min(X,Y)則是求兩者間最小值，所以這句話意思是當(dāng)寬度值超過(guò)205時(shí)，寬度為205，小于205時(shí)，則展示為實(shí)際寬度。

高：[[((Math.ceil(Item.text.length/13))*18+20)]]

13是每一行的能顯示的文字字?jǐn)?shù)，18是每一行的高度，20是上下填充高度，Math.ceil()則是向上取整，因?yàn)?3除不盡。只要有一個(gè)小數(shù)說(shuō)明多了至少一個(gè)字，則需要加一行。

三、中繼器賦值

1.氣泡賦值

載入時(shí)賦值事件

載入時(shí)，判斷中繼器數(shù)據(jù)列表type字段，根據(jù)這個(gè)字段的值顯示為不同氣泡類型，然后將數(shù)據(jù)賦值給指定控件。

2.設(shè)置中繼器行間距，避免聊天氣泡顯得擁擠。

設(shè)置中繼器行間

3.時(shí)間控件顯示判定

由于時(shí)間控件不是一直顯示的，5分鐘內(nèi)連續(xù)對(duì)話的，則不在信息氣泡之間顯示時(shí)間，只在第1條信息氣泡頂端顯示時(shí)間。通過(guò)判斷新的消息與上一條的消息的時(shí)間間隔，來(lái)控制是否顯示時(shí)間。當(dāng)時(shí)間間隔大于5分鐘時(shí)，展示時(shí)間控件，當(dāng)時(shí)間間隔小于5分鐘時(shí)，隱藏時(shí)間控件。

如何獲取新消息與上一條消息之間的間隔時(shí)間呢？

這里我想到了一個(gè)簡(jiǎn)單的方式，當(dāng)用戶點(diǎn)擊【發(fā)送】按鈕時(shí)，獲取當(dāng)前時(shí)間，與上一條信息的發(fā)送時(shí)間（存于全局變量中）對(duì)比，若時(shí)間間距小于5分鐘，設(shè)置時(shí)間顯示狀態(tài)為0，否則為1，同時(shí)也添加時(shí)間和信息內(nèi)容、面板類型數(shù)據(jù)。所以數(shù)據(jù)項(xiàng)times的意義就在于標(biāo)記時(shí)間控件的顯示狀態(tài)。下面則是在時(shí)間控件上添加的事件。

判斷時(shí)間是否顯示

注：隱藏時(shí)時(shí)間控件時(shí)，聊天氣泡、loading圖片、頭像應(yīng)該均往上移動(dòng)，避免不必要的間隙。

4.loading控件展示控制

a.由于loading圖標(biāo)一般只展示一瞬間，顯示完成后則隱藏，不必再顯示，所以需要一個(gè)數(shù)字標(biāo)記loading圖標(biāo)展示情況。

b.loading按鈕的位置跟隨氣泡右對(duì)齊。

則在loading控件上添加如下事件。

判斷是否展示loading按鈕

最后將中繼器建立為動(dòng)態(tài)面板，命名為消息列表，設(shè)置為自動(dòng)調(diào)整為內(nèi)容尺寸。這樣動(dòng)態(tài)面板的尺寸就會(huì)根據(jù)消息氣泡的多少自動(dòng)調(diào)整高度。

自此，中繼器總算配置完了~~~

三、發(fā)送消息

1.輸入框

前面已經(jīng)說(shuō)過(guò)輸入框的基本交互，但還需要補(bǔ)充一些。

輸入框事件

獲取焦點(diǎn)時(shí)，消息列表上移。移動(dòng)的距離是[[-A.height+290]]A是局部變量元件消息列表。height則是消息列表的高度。

局部變量

同理[[-A.height+520]]則是鍵盤收起來(lái)時(shí)的消息列表移動(dòng)的距離。

值得注意的是，一定要添加邊界。防止當(dāng)消息列表沒(méi)那么長(zhǎng)，收起鍵盤時(shí)，消息列表不會(huì)出現(xiàn)以下情況。

沒(méi)有添加邊界時(shí)收起鍵盤

2.發(fā)送按鈕

發(fā)送按鈕事件

a.給發(fā)送按鈕添加事件，點(diǎn)擊【發(fā)送】按鈕，將輸入框內(nèi)容、當(dāng)前時(shí)間、loading狀態(tài)、氣泡類型等數(shù)據(jù)插入中繼器。

添加行到中繼器

第二種氣泡類型：type==2

輸入框內(nèi)容：text==[[text]]

獲取當(dāng)前的小時(shí)、分鐘：time==[[Now.getHours()+”:”+Now.getMinutes()]]

loading狀態(tài)為展示：lo==1

times==[[(Now.getTime()-lasttime)/waittime]]

lasttime為全局變量，為上一條消息的發(fā)送時(shí)間，waittime也為全局變量，為等待時(shí)間，gettime（）則是獲取當(dāng)前時(shí)間，如果times等于1說(shuō)明間隔時(shí)間超過(guò)等待時(shí)間，展示時(shí)間控件。否則不展示時(shí)間控件。

b.清空輸入框。

c.移動(dòng)消息列表，由于新增了一條消息，列表則上移展示出最新的消息。

d.將當(dāng)前發(fā)送消息的時(shí)間賦值給lasstime。

四、其他事件

1.將鍵盤和消息列表選中，生成一個(gè)新的動(dòng)態(tài)面板。加入下面事件。此事件的目的是限制聊天列表的滾動(dòng)范圍。

動(dòng)態(tài)面板加入事件

最終演示效果：

這樣就基本就完成啦，共享的原型里還有一些文章沒(méi)有講到的Axure小技巧大家可以參考參考~

作者：OIMIL，微信公眾號(hào)：用戶體驗(yàn)筆記

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

題圖來(lái)自 Unsplash ，基于 CC0 協(xié)議