今天教大家用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最後一組對話時哪組，然後更新內容到後面一組即可完成。
今天的這裡就結束了，喜歡原型或者有疑問的小夥伴們可以在下方評論處給我留言哦，我們下期見。
題圖來自 Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
