如何用Axure RP 9做出微信的消息對(duì)話效果呢？就在模擬微信系列教程。

今天給大家簡(jiǎn)單演示一個(gè)模擬微信教程，接下來會(huì)逐步完善模擬微信的更多細(xì)節(jié)。

本次教程我們模擬的內(nèi)容，包括模擬利用中繼器實(shí)現(xiàn)消息對(duì)話，同時(shí)顯示最新一條消息的收到時(shí)間或者發(fā)送時(shí)間。

一、框架搭建

因?yàn)榻酉聛頃?huì)更深層的去做一些內(nèi)容，因此本次我們先搭建好一些框架，以便后期繼續(xù)增加新的交互：我們需要一個(gè)動(dòng)態(tài)面板，里面添加五個(gè)狀態(tài)，分別用來顯示四個(gè)一級(jí)菜單和對(duì)話頁(yè)面。

我們需要四個(gè)中繼器，用于實(shí)現(xiàn)消息對(duì)話的效果，同時(shí)微信的導(dǎo)航菜單放置在動(dòng)態(tài)面板外邊?？紤]到有些頁(yè)面不會(huì)看到微信底部菜單，因此在進(jìn)入這些頁(yè)面的時(shí)候需要將底部菜單隱藏或者置底。

由于是模擬微信，因此我們需要模擬雙方信息交互的效果，所以我們需要兩個(gè)微信面板。在這里我們需要注意，因?yàn)轫?yè)面內(nèi)放置兩個(gè)面板會(huì)導(dǎo)致元件數(shù)量翻倍，因此我們要對(duì)需要設(shè)置的元件命名，方便我們管理。

同樣，我們需要區(qū)分元件歸屬于用戶1還是用戶2，因此個(gè)人建議在元件命名的時(shí)候，在名稱后邊寫上該元件歸屬于用戶1還是用戶2。

目前我們采用這種結(jié)構(gòu)，后期再增加更多交互的時(shí)候可能會(huì)進(jìn)行調(diào)整，不過這都是后話，不著急。

二、交互步驟教程

1. 單選效果

如圖所示，我們看到我們點(diǎn)擊一個(gè)菜單的時(shí)候，該菜單點(diǎn)亮；點(diǎn)擊另外一個(gè)菜單的時(shí)候，另一個(gè)菜單點(diǎn)亮，而之前點(diǎn)亮的菜單取消點(diǎn)亮。這個(gè)過程其實(shí)叫選中與取消選中。

同時(shí)，四個(gè)菜單同時(shí)只能選中一個(gè)，因此這四個(gè)菜單是作為一個(gè)選項(xiàng)組出現(xiàn)的，就像Radio Button（單選框）。

操作步驟：

我們選擇菜單（icon+text），新建交互里面設(shè)置選中效果；選中時(shí)，選擇顏色，我們這里對(duì)底部菜單選中時(shí)設(shè)置了“愛心綠色”。

接下來我們選擇一個(gè)已經(jīng)設(shè)置好選中效果的icon，按下Ctrl+C，選擇其他的需要同樣效果的icon，按下Ctrl+Alt+V，這就是Axure RP 9的格式刷（Mac系統(tǒng)也是這幾個(gè)按鍵，來回嘗試就試出來了）。

接下來，我們?cè)O(shè)置鼠標(biāo)點(diǎn)擊時(shí)，選中當(dāng)前元件。

這樣，就實(shí)現(xiàn)了鼠標(biāo)單擊的時(shí)候，菜單變成我們?cè)O(shè)置好的綠色。

但是同樣也有問題，我們點(diǎn)擊多個(gè)菜單的時(shí)候，大家都會(huì)變成綠油油的可愛樣子，這顯然不是正常狀態(tài)的。我們要的是每次點(diǎn)擊之后只有一個(gè)是綠的。

這時(shí)候我們只需要選中四個(gè)菜單，點(diǎn)擊右鍵，選擇設(shè)置為選項(xiàng)組，這樣，這四個(gè)菜單就只能同時(shí)選中一個(gè)了。

不適用選項(xiàng)組也可以，我們可以做成點(diǎn)擊一個(gè)菜單時(shí)，其他菜單取消選中就可以了。當(dāng)前我就是這樣做的，結(jié)果被總監(jiān)一頓罵，讓我買本Axure教程去看，倔強(qiáng)的選擇了自己寫一本。

2. 消息對(duì)話效果

如文章開頭gif圖所示，我們看到我們發(fā)送一條對(duì)話的時(shí)候，在我們自己的列表內(nèi)，消息在右邊；在對(duì)方的列表內(nèi)，我的消息就在左邊。因?yàn)?，我們需要兩個(gè)微信頁(yè)面來模擬該效果。同樣，我們選擇用中繼器，因?yàn)橹欣^器可以增加新的內(nèi)容。

操作步驟：

在動(dòng)態(tài)面板的消息內(nèi)容狀態(tài)頁(yè)面內(nèi)設(shè)置交互，我們需要添加兩個(gè)中繼器，添加消息輸入框和發(fā)送btn。

先講中繼器，我們中繼器內(nèi)需要三個(gè)元件，一個(gè)是用戶頭像，一個(gè)是消息對(duì)話框，一個(gè)是用于美化的小箭頭。

如圖所示：

重點(diǎn)是消息對(duì)話框，給消息對(duì)話框命名，方便設(shè)置的時(shí)候選取。我們選中中繼器，將中繼器數(shù)據(jù)清空，只留下一列text即可，然后為中繼器設(shè)置交互；每項(xiàng)加載時(shí)，設(shè)置文字到消息對(duì)話框，內(nèi)容為[[Item.text]]，其中text就是中繼器的內(nèi)容列text。

如圖所示：

這時(shí)候，中繼器的數(shù)據(jù)設(shè)置完成。

如果我們?cè)谥欣^器樣式里面增加數(shù)據(jù)，會(huì)發(fā)現(xiàn)里面的對(duì)話框會(huì)新增一個(gè)，對(duì)話框內(nèi)容就是我們新增的內(nèi)容。

接下來，我們?cè)O(shè)置發(fā)送消息的交互。我們選中之前做好的元件：發(fā)送btn，設(shè)置成鼠標(biāo)點(diǎn)擊時(shí)，為中繼器新增行，在text上增加函數(shù)，[[A]],A為局部變量，代表的是輸入框的文本。

如圖所示：

對(duì)上邊的交互再解釋一下，我為交互過程做了略微的修飾：當(dāng)輸入框內(nèi)容為空時(shí)，讓消息發(fā)送失敗，因此在發(fā)送btn上增加了判斷條件。

另外，每次發(fā)送完成后，讓已經(jīng)輸入的消息清空，便于下次發(fā)送消息。因此設(shè)置了輸入框清空的交互，下邊又添加了設(shè)置時(shí)間。不過因?yàn)樵O(shè)置時(shí)間本期做的不夠好，因此這里就先不講了。

這個(gè)時(shí)候，我們中繼器發(fā)消息做完了，那么接下來怎么實(shí)現(xiàn)微信之間消息互通呢？

這里用的方法，很原始，就是發(fā)送btn控制多個(gè)中繼器的方式。我們點(diǎn)擊發(fā)送按鈕，同時(shí)控制兩個(gè)中繼器，在兩個(gè)用戶的微信面板內(nèi)同時(shí)發(fā)送消息即可——這個(gè)沒法截圖，就不給大家看圖了。

下載鏈接：https://pan.baidu.com/s/1e6EnOv-PiNDnJBnLjMwLPg

密碼:01j1

作者：王得宇A(yù)IPM，公眾號(hào)：他們已經(jīng)在路上了

本文由 @王得宇A(yù)IPM 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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