今天教大家用Axure做一個(gè)聊天對(duì)話界面。該原型使用簡(jiǎn)單，只需要填寫(xiě)中繼器表格即可直接使用。有疑問(wèn)或者喜歡該原型的小伙伴們可以在評(píng)論處給我留言哦。

其中效果包括：

• 查看不同人不同的聊天記錄
• 未查看聊天記錄提醒
• 對(duì)話內(nèi)容文本框自適應(yīng)中文字?jǐn)?shù)，自動(dòng)更改尺寸
• 發(fā)送新的聊天內(nèi)容，即使更新列表（demo上做了10組對(duì)話記錄為上線，有需要的可以自行增加）

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

效果演示

1. 查看聊天記錄

2. 發(fā)送對(duì)話內(nèi)容

使用方法

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

制作教程

1. 中繼器材料

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

如下所示：

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

2. 列表中繼器表格制作

no：序號(hào)列，我們按順序1、2、3、4、5排列下去即可。中繼器每項(xiàng)加載時(shí)，按no升序排列。然后鼠標(biāo)單擊列表中繼器里的內(nèi)容時(shí)，設(shè)置其他當(dāng)前行的序號(hào)為1，其他行的序號(hào)在原來(lái)的序號(hào)+1，這樣就可以點(diǎn)擊之后，讓他排到最前了、

picture：圖片，這里導(dǎo)入每個(gè)人的圖片。中繼器加載時(shí)，設(shè)置頭像圖片=picture

name：名稱，這里寫(xiě)入每個(gè)人的名稱，中繼器加載時(shí)，設(shè)置名稱文本=name

time：時(shí)間，這里輸入最后對(duì)話時(shí)間，中繼器加載時(shí)，設(shè)置時(shí)間=tmie

number：這個(gè)是未查看的新信息，中繼器加載時(shí)，如果number=0隱藏提示紅點(diǎn)，否則設(shè)置紅點(diǎn)文本=number

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

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

3. 對(duì)話記錄中繼器表格制作

這個(gè)很簡(jiǎn)單，只需要兩行，而且什么都不用填，交互的上后，列表中繼器會(huì)把內(nèi)容傳過(guò)來(lái)。

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

content：對(duì)話內(nèi)容，設(shè)置我方和對(duì)方的文本框內(nèi)容=content即可，因?yàn)榱硪粋€(gè)隱藏了，所以為了方便快捷，直接設(shè)置兩個(gè)都是，就可以不用分情況。然后這里要做一個(gè)自適應(yīng)才美觀，首先用length函數(shù)計(jì)算出content的字符長(zhǎng)度，再按照不同長(zhǎng)度的字符設(shè)置文本框的尺寸即可。

4. 點(diǎn)擊列表進(jìn)入詳細(xì)頁(yè)面

這個(gè)交互有點(diǎn)復(fù)雜，簡(jiǎn)單的說(shuō)一下思路，其實(shí)就是把列表中繼器里的text1-10和textme1-10，添加到對(duì)話記錄的中繼器里面。

實(shí)現(xiàn)方式是鼠標(biāo)單擊列表某一行時(shí)，依次在對(duì)話記錄中繼器內(nèi)添加行即可。text1-10，who為空，content=text；textme，who=me，content=textme

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

5. 發(fā)送消息

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

點(diǎn)擊發(fā)送按鈕的時(shí)候，對(duì)話記錄中繼器新增一行，who=me，content=輸入框的內(nèi)容。然后清空文本框文字即可。

最后還有最重要的一步，也是最難的一步。因?yàn)檫@個(gè)中繼器不會(huì)保存，所以我們返回到列表就沒(méi)有了，這時(shí)要把這里新增的信息更新到列表中繼器里面。因?yàn)檫@里都是我方發(fā)出去的，所以只需要更新行textme1-10的內(nèi)容就可以了。這里需要做一個(gè)判斷，就是textme和text最后一組對(duì)話時(shí)哪組，然后更新內(nèi)容到后面一組即可完成。

今天的分享到這里就結(jié)束了，喜歡原型或者有疑問(wèn)的小伙伴們可以在下方評(píng)論處給我留言哦，我們下期見(jiàn)。

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

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