2023年【Axure 教程】中繼器你過來我們“聊聊”

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

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

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

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

這個實(shí)現(xiàn)起來特別簡潔，但需要你有一些想象力，并且了解中繼器的一些屬性，接下來我們開頭動手實(shí)現(xiàn)。

一、小明視角

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

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

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

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

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

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

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

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

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

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

此時先不焦急寫發(fā)送消息的規(guī)律，我們先把小紅的視角畫出來。

二、小紅視角

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

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

接下來我們要開頭寫對話規(guī)律了。

三、對話規(guī)律

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

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

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

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

【time】直接按格式拼接一個時間：

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

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

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

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

四、定位最新談天

最終我們再來做發(fā)送或收到消息后自動定位最新消息的功能，這塊無論從小明視角還是小紅視角都是一樣的，由于收發(fā)是同時發(fā)生的，所以需要同時對兩個【定位器】做掌握：

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