2023年【Axure 教程】中繼器你過(guò)來(lái)我們“聊聊”

【Axure教程】中繼器，你過(guò)來(lái)，我們“聊聊”中繼器除了做表格的增刪改查，還能做什么？今日給你供應(yīng)一種新的思路，教你用中繼器來(lái)模擬一個(gè)高保真的對(duì)話談天界面。

你好，我是不務(wù)正業(yè)的產(chǎn)品經(jīng)理，我又帶來(lái)了一款最新的“無(wú)聊”作品，用中繼器做的一個(gè)高保真的對(duì)話談天界面。

中繼器是Axure中一個(gè)神級(jí)元件，沒(méi)有它做不了的設(shè)計(jì)，只怕做設(shè)計(jì)的人缺乏足夠的想象力，今日，我給你帶來(lái)這款“無(wú)聊”的談天作品的設(shè)計(jì)教程，先來(lái)看看最終效果（體驗(yàn)傳送門）：

左邊的界面是小明看到的視角，右邊是小紅看到的視角，從小明視角發(fā)出去的信息，顯示在右側(cè)，而小紅視角收到的同一條信息，是顯示在左側(cè)，留意這里還有個(gè)小細(xì)節(jié)，就是當(dāng)列表消息超過(guò)界面高度的時(shí)候，兩個(gè)視角在收發(fā)消息時(shí)，列表會(huì)滑動(dòng)到列表最底部，定位在最新的消息上。

這個(gè)實(shí)現(xiàn)起來(lái)特別簡(jiǎn)潔，但需要你有一些想象力，并且了解中繼器的一些屬性，接下來(lái)我們開(kāi)頭動(dòng)手實(shí)現(xiàn)。

一、小明視角

首先我們來(lái)畫(huà)左邊的界面，也就是小明的視角，談天窗口的框架基本上都長(zhǎng)一個(gè)樣，所以你想自己畫(huà)也行，從其他談天軟件截個(gè)圖來(lái)改改也行，總之這個(gè)沒(méi)有什么難度，主要是談天窗體的內(nèi)容值得好好說(shuō)一說(shuō)。

首先是下圖框選的地方需要用一個(gè)【動(dòng)態(tài)面板】裝起來(lái)，并且動(dòng)態(tài)面板【滾動(dòng)條】設(shè)置為【垂直滾動(dòng)】，這樣當(dāng)談天列表超過(guò)窗口高度時(shí)才能上下滑動(dòng)。

在動(dòng)態(tài)面板內(nèi)，放了兩個(gè)東西，一個(gè)是中繼器，一個(gè)是定位器，定位器的作用是為了實(shí)現(xiàn)上述我說(shuō)的，在消息列表超過(guò)窗口高度時(shí)，列表可以自動(dòng)滑動(dòng)到最底下，定位到最新消息，這里我用的是一個(gè)【熱區(qū)】的組件，可以用動(dòng)態(tài)面板或矩形改一下透亮?????度之類的，確保在前端不會(huì)顯示出來(lái)就行，詳細(xì)這個(gè)定位器怎么用，后續(xù)我會(huì)介紹：

中繼器的數(shù)據(jù)表是這樣設(shè)計(jì)的：

其中【msg】用來(lái)存放信息內(nèi)容，【time】用來(lái)存放發(fā)送時(shí)間，【send】用來(lái)存放發(fā)送人的名字，也就是【xiaoming】或【xiaohong】。

我們?cè)俅蜷_(kāi)中繼器，里面放了一個(gè)“對(duì)話”，由于我們現(xiàn)在做的是小明的視角，所以上面那條是小紅發(fā)過(guò)來(lái)的消息，下面是小明發(fā)出去的消息，都各自放在一個(gè)【動(dòng)態(tài)面板】中，對(duì)話內(nèi)容分別是頭像、發(fā)送時(shí)間和發(fā)送內(nèi)容，這里頭像我們是固定的，直接找個(gè)圖片上傳即可，時(shí)間和內(nèi)容任憑寫(xiě)點(diǎn)文字就行，待會(huì)我們會(huì)從中繼器獵取數(shù)據(jù)：

這樣界面就畫(huà)完了，我們接下來(lái)寫(xiě)談天內(nèi)容的讀取規(guī)律。

我們先返回找到【中繼器】，然后給中繼器添加【每項(xiàng)加載】大事，如下：

這里需要先做一個(gè)推斷，推斷【send】是【xiaoming】還是【xiaohong】，假如是【xiaoming】，就顯示【xiaoming】的對(duì)話（動(dòng)態(tài)面板），并隱蔽【xiaohong】的對(duì)話（動(dòng)態(tài)面板），留意這里的顯示和隱蔽需要推動(dòng)和拉動(dòng)元件下方的元件，否則界面會(huì)很難看；假如【send】是【xiaohong】，則是反過(guò)來(lái)，最終再將時(shí)間和內(nèi)容對(duì)應(yīng)的元件【設(shè)置文本】為【time】和【msg】即可。

這樣我們就可以將談天列表加載出來(lái)，最終的效果就是這樣的：

此時(shí)先不焦急寫(xiě)發(fā)送消息的規(guī)律，我們先把小紅的視角畫(huà)出來(lái)。

二、小紅視角

做完了小明的視角，小紅的視角就比較簡(jiǎn)潔了，可以直接復(fù)制粘貼小明的視角進(jìn)行修改即可，只要要把對(duì)話的視角對(duì)調(diào)一下就可以了，這里的對(duì)調(diào)不是簡(jiǎn)潔的上下位置對(duì)調(diào)，而是把整體的內(nèi)容對(duì)調(diào)，比如頭像，比如原本綠色消息命名為【ming_msg】，這里應(yīng)當(dāng)改為【hong_msg】：

這樣我們就得到小紅的視角：

接下來(lái)我們要開(kāi)頭寫(xiě)對(duì)話規(guī)律了。

三、對(duì)話規(guī)律

之所以要把對(duì)話規(guī)律放在最終寫(xiě)，是由于我們現(xiàn)在頁(yè)面上有小明和小紅兩個(gè)視角，中繼器也有兩個(gè)，我們要寫(xiě)對(duì)話，就得同時(shí)更新兩個(gè)中繼器。

我們先寫(xiě)小明視角的發(fā)送規(guī)律，首先我們要加一個(gè)推斷，就是當(dāng)輸入框內(nèi)的文字不為空的時(shí)候，才觸發(fā)對(duì)話，觸發(fā)對(duì)話很簡(jiǎn)潔，就是直接往兩個(gè)中繼器中添加數(shù)據(jù)，然后把輸入框的內(nèi)容清空即可：

這是兩個(gè)中繼器添加行的數(shù)據(jù)：

其中的【msg】直接獵取輸入框的值：

【time】直接按格式拼接一個(gè)時(shí)間：

最終由于我們的消息是通過(guò)小明發(fā)出去的，所以【send】直接寫(xiě)【xiaoming】即可。

小紅視角的發(fā)送按鈕也是復(fù)制小明的改一下即可，留意需要修改兩處地方：

第一處：往中繼器中添加的【msg】應(yīng)改成小紅視角的輸入框的內(nèi)容；

其次處：往中繼器中添加的【send】應(yīng)改成【xiaohong】。

四、定位最新談天

最終我們?cè)賮?lái)做發(fā)送或收到消息后自動(dòng)定位最新消息的功能，這塊無(wú)論從小明視角還是小紅視角都是一樣的，由于收發(fā)是同時(shí)發(fā)生的，所以需要同時(shí)對(duì)兩個(gè)【定位器】做掌握：

首先由于列表在收發(fā)消息時(shí)高度是動(dòng)態(tài)的，所以我們?cè)邳c(diǎn)擊發(fā)送的時(shí)候，需要給兩個(gè)定位器重