今天教大家用Axure做一個聊天對話界面。該原型使用簡單，只需要填寫中繼器表格即可直接使用。有疑問或者喜歡該原型的小伙伴們可以在評論處給我留言哦。

其中效果包括：

• 查看不同人不同的聊天記錄
• 未查看聊天記錄提醒
• 對話內容文本框自適應中文字數，自動更改尺寸
• 發送新的聊天內容，即使更新列表（demo上做了10組對話記錄為上線，有需要的可以自行增加）

原型演示地址：https://muf9ia.axshare.com

效果演示

1. 查看聊天記錄

2. 發送對話內容

使用方法

制作完成后，只需要填寫一個“內容中繼器”既可以完成此效果，非常方便。中繼器內容包括頭像，名稱、日期，對話內容。

制作教程

1. 中繼器材料

列表中繼器材料：頭像圖片、名稱文本、最后一條聊天記錄文本、時間，提示紅點。

如下所示：

對話記錄中繼器材料：我的頭像和對話框，對方的頭像（圖片文件即可，交互是會重新設置）和對話框。如下所示

2. 列表中繼器表格制作

no：序號列，我們按順序1、2、3、4、5排列下去即可。中繼器每項加載時，按no升序排列。然后鼠標單擊列表中繼器里的內容時，設置其他當前行的序號為1，其他行的序號在原來的序號+1，這樣就可以點擊之后，讓他排到最前了、

picture：圖片，這里導入每個人的圖片。中繼器加載時，設置頭像圖片=picture

name：名稱，這里寫入每個人的名稱，中繼器加載時，設置名稱文本=name

time：時間，這里輸入最后對話時間，中繼器加載時，設置時間=tmie

number：這個是未查看的新信息，中繼器加載時，如果number=0隱藏提示紅點，否則設置紅點文本=number

textme1-10：這個是記錄我方對話記錄，后續會用到。這里需要做一個判斷，如果這條是最后一條，則設置最后一條聊天記錄等于此文本

text1-10：這個是對方的對話記錄，后續用到。這里需要做一個判斷，如果這條是最后一條，則設置最后一條聊天記錄等于此文本

3. 對話記錄中繼器表格制作

這個很簡單，只需要兩行，而且什么都不用填，交互的上后，列表中繼器會把內容傳過來。

who：指代我方還是對方，如果who=me，指代我方，隱藏對方頭像和對話框，如果不是who不等于me就是對方，隱藏我方頭像和對話框。

content：對話內容，設置我方和對方的文本框內容=content即可，因為另一個隱藏了，所以為了方便快捷，直接設置兩個都是，就可以不用分情況。然后這里要做一個自適應才美觀，首先用length函數計算出content的字符長度，再按照不同長度的字符設置文本框的尺寸即可。

4. 點擊列表進入詳細頁面

這個交互有點復雜，簡單的說一下思路，其實就是把列表中繼器里的text1-10和textme1-10，添加到對話記錄的中繼器里面。

實現方式是鼠標單擊列表某一行時，依次在對話記錄中繼器內添加行即可。text1-10，who為空，content=text；textme，who=me，content=textme

完成后隱藏列表中繼器，顯示對話記錄中繼器即可。

5. 發送消息

這里首先要做一個輸入框和按鈕，樣式如下：

點擊發送按鈕的時候，對話記錄中繼器新增一行，who=me，content=輸入框的內容。然后清空文本框文字即可。

最后還有最重要的一步，也是最難的一步。因為這個中繼器不會保存，所以我們返回到列表就沒有了，這時要把這里新增的信息更新到列表中繼器里面。因為這里都是我方發出去的，所以只需要更新行textme1-10的內容就可以了。這里需要做一個判斷，就是textme和text最后一組對話時哪組，然后更新內容到后面一組即可完成。

今天的分享到這里就結束了，喜歡原型或者有疑問的小伙伴們可以在下方評論處給我留言哦，我們下期見。

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

題圖來自 Unsplash，基于CC0協議