本教程需要一定的Axure使用基礎，重要知識點：中繼器、動態面板、函數的使用。

前言

一般聊天界面一般包含下列元素：

• 導航欄及其操作按鈕。
• 聊天氣泡，包含聊天雙方的氣泡、頭像、消息發送時間、發送狀態。
• 消息輸入框。

基本操作簡要邏輯是：在輸入框輸入一段文字，點擊【發送】按鈕，聊天列表就會出現一條新的消息。

由此Axure實現思路則是：輸入文字，點擊【發送】在中繼器里更新一條新的數據。

Let’s do it?。?！

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

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

一、布置基本頁面

基本界面

1.布置好導航欄

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

• 獲取焦點時鍵盤展開，失去焦點時鍵盤收起。
• 指定提交按鈕——發送。
• 輸入框沒內容時，發送按鈕禁用，有內容時，啟用。

二、配置中繼器

中繼器元素構成

要注意下：

1.聊天氣泡分為對方的消息氣泡和我的消息氣泡，如何在一個中繼器里呈現呢？

2.消息內容有長有短，怎么根據內容的長短適配氣泡大小呢？

問題1：其實在聊天列表里，不論是誰發送了什么樣的信息，本質上是在一個列表里面插入了一條數據，而這個列表的單元項可以不同的形式展現。所以用用動態面板可以完美解決問題。對于不同的消息類型，展示不同的面板狀態。

如下：

聊天氣泡4種類型

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

確定展示形式之后，設置中繼器以下數據項：

• type——為氣泡類型標記數據，根據這個數據的值加載為對應的氣泡類型
• text——氣泡內容
• time——消息發送時間
• lo——loading圖標展示狀態(稍后說明)
• times——時間顯示狀態（稍后說明）

問題2：可以在加載中繼器時通過函數length獲取到文字長度，再根據單個文字的寬高，計算氣泡應有的大小，然后根據求得的值設置氣泡尺寸。

計算方式：

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

205是氣泡最大寬度，14是單個字的寬度，20是氣泡首尾填充寬度，item.text.length獲取字數。

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

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

13是每一行的能顯示的文字字數，18是每一行的高度，20是上下填充高度，Math.ceil()則是向上取整，因為13除不盡。只要有一個小數說明多了至少一個字，則需要加一行。

三、中繼器賦值

1.氣泡賦值

載入時賦值事件

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

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

設置中繼器行間

3.時間控件顯示判定

由于時間控件不是一直顯示的，5分鐘內連續對話的，則不在信息氣泡之間顯示時間，只在第1條信息氣泡頂端顯示時間。通過判斷新的消息與上一條的消息的時間間隔，來控制是否顯示時間。當時間間隔大于5分鐘時，展示時間控件，當時間間隔小于5分鐘時，隱藏時間控件。

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

這里我想到了一個簡單的方式，當用戶點擊【發送】按鈕時，獲取當前時間，與上一條信息的發送時間（存于全局變量中）對比，若時間間距小于5分鐘，設置時間顯示狀態為0，否則為1，同時也添加時間和信息內容、面板類型數據。所以數據項times的意義就在于標記時間控件的顯示狀態。下面則是在時間控件上添加的事件。

判斷時間是否顯示

注：隱藏時時間控件時，聊天氣泡、loading圖片、頭像應該均往上移動，避免不必要的間隙。

4.loading控件展示控制

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

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

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

判斷是否展示loading按鈕

最后將中繼器建立為動態面板，命名為消息列表，設置為自動調整為內容尺寸。這樣動態面板的尺寸就會根據消息氣泡的多少自動調整高度。

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

三、發送消息

1.輸入框

前面已經說過輸入框的基本交互，但還需要補充一些。

輸入框事件

獲取焦點時，消息列表上移。移動的距離是[[-A.height+290]]A是局部變量元件消息列表。height則是消息列表的高度。

局部變量

同理[[-A.height+520]]則是鍵盤收起來時的消息列表移動的距離。

值得注意的是，一定要添加邊界。防止當消息列表沒那么長，收起鍵盤時，消息列表不會出現以下情況。

沒有添加邊界時收起鍵盤

2.發送按鈕

發送按鈕事件

a.給發送按鈕添加事件，點擊【發送】按鈕，將輸入框內容、當前時間、loading狀態、氣泡類型等數據插入中繼器。

添加行到中繼器

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

輸入框內容：text==[[text]]

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

loading狀態為展示：lo==1

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

lasttime為全局變量，為上一條消息的發送時間，waittime也為全局變量，為等待時間，gettime（）則是獲取當前時間，如果times等于1說明間隔時間超過等待時間，展示時間控件。否則不展示時間控件。

b.清空輸入框。

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

d.將當前發送消息的時間賦值給lasstime。

四、其他事件

1.將鍵盤和消息列表選中，生成一個新的動態面板。加入下面事件。此事件的目的是限制聊天列表的滾動范圍。

動態面板加入事件

最終演示效果：

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

作者：OIMIL，微信公眾號：用戶體驗筆記

本文由 @OIMIL 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash ，基于 CC0 協議