起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure RP 9 教程：模擬微信系列——消息對話效果
如何用Axure RP 9做出微信的消息對話效果呢？就在模擬微信系列教程。
今天給大家簡單演示一個模擬微信教程，接下來會逐步完善模擬微信的更多細節。
本次教程我們模擬的內容，包括模擬利用中繼器實現消息對話，同時顯示最新一條消息的收到時間或者發送時間。
一、框架搭建
因為接下來會更深層的去做一些內容，因此本次我們先搭建好一些框架，以便后期繼續增加新的交互：我們需要一個動態面板，里面添加五個狀態，分別用來顯示四個一級菜單和對話頁面。
我們需要四個中繼器，用于實現消息對話的效果，同時微信的導航菜單放置在動態面板外邊?？紤]到有些頁面不會看到微信底部菜單，因此在進入這些頁面的時候需要將底部菜單隱藏或者置底。
由于是模擬微信，因此我們需要模擬雙方信息交互的效果，所以我們需要兩個微信面板。在這里我們需要注意，因為頁面內放置兩個面板會導致元件數量翻倍，因此我們要對需要設置的元件命名，方便我們管理。
同樣，我們需要區分元件歸屬于用戶1還是用戶2，因此個人建議在元件命名的時候，在名稱后邊寫上該元件歸屬于用戶1還是用戶2。
目前我們采用這種結構，后期再增加更多交互的時候可能會進行調整，不過這都是后話，不著急。
二、交互步驟教程
1. 單選效果
如圖所示，我們看到我們點擊一個菜單的時候，該菜單點亮；點擊另外一個菜單的時候，另一個菜單點亮，而之前點亮的菜單取消點亮。這個過程其實叫選中與取消選中。
同時，四個菜單同時只能選中一個，因此這四個菜單是作為一個選項組出現的，就像Radio Button（單選框）。
操作步驟：
我們選擇菜單（icon+text），新建交互里面設置選中效果；選中時，選擇顏色，我們這里對底部菜單選中時設置了“愛心綠色”。
接下來我們選擇一個已經設置好選中效果的icon，按下Ctrl+C，選擇其他的需要同樣效果的icon，按下Ctrl+Alt+V，這就是Axure RP 9的格式刷（Mac系統也是這幾個按鍵，來回嘗試就試出來了）。
接下來，我們設置鼠標點擊時，選中當前元件。
這樣，就實現了鼠標單擊的時候，菜單變成我們設置好的綠色。
但是同樣也有問題，我們點擊多個菜單的時候，大家都會變成綠油油的可愛樣子，這顯然不是正常狀態的。我們要的是每次點擊之后只有一個是綠的。
這時候我們只需要選中四個菜單，點擊右鍵，選擇設置為選項組，這樣，這四個菜單就只能同時選中一個了。
不適用選項組也可以，我們可以做成點擊一個菜單時，其他菜單取消選中就可以了。當前我就是這樣做的，結果被總監一頓罵，讓我買本Axure教程去看，倔強的選擇了自己寫一本。
2. 消息對話效果
如文章開頭gif圖所示，我們看到我們發送一條對話的時候，在我們自己的列表內，消息在右邊；在對方的列表內，我的消息就在左邊。因為，我們需要兩個微信頁面來模擬該效果。同樣，我們選擇用中繼器，因為中繼器可以增加新的內容。
操作步驟：
在動態面板的消息內容狀態頁面內設置交互，我們需要添加兩個中繼器，添加消息輸入框和發送btn。
先講中繼器，我們中繼器內需要三個元件，一個是用戶頭像，一個是消息對話框，一個是用于美化的小箭頭。
如圖所示：
重點是消息對話框，給消息對話框命名，方便設置的時候選取。我們選中中繼器，將中繼器數據清空，只留下一列text即可，然后為中繼器設置交互；每項加載時，設置文字到消息對話框，內容為[[Item.text]]，其中text就是中繼器的內容列text。
如圖所示：
這時候，中繼器的數據設置完成。
如果我們在中繼器樣式里面增加數據，會發現里面的對話框會新增一個，對話框內容就是我們新增的內容。
接下來，我們設置發送消息的交互。我們選中之前做好的元件：發送btn，設置成鼠標點擊時，為中繼器新增行，在text上增加函數，[[A]],A為局部變量，代表的是輸入框的文本。
如圖所示：
對上邊的交互再解釋一下，我為交互過程做了略微的修飾：當輸入框內容為空時，讓消息發送失敗，因此在發送btn上增加了判斷條件。
另外，每次發送完成后，讓已經輸入的消息清空，便于下次發送消息。因此設置了輸入框清空的交互，下邊又添加了設置時間。不過因為設置時間本期做的不夠好，因此這里就先不講了。
這個時候，我們中繼器發消息做完了，那么接下來怎么實現微信之間消息互通呢？
這里用的方法，很原始，就是發送btn控制多個中繼器的方式。我們點擊發送按鈕，同時控制兩個中繼器，在兩個用戶的微信面板內同時發送消息即可——這個沒法截圖，就不給大家看圖了。
下載鏈接：https://pan.baidu.com/s/1e6EnOv-PiNDnJBnLjMwLPg
密碼:01j1
作者：王得宇AIPM，公眾號：他們已經在路上了
本文由 @王得宇AIPM 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
非常有用的分享，謝謝前輩
哈，看完還是不太會？你可能需要從Axure基礎開始學
這里推薦你加Axure實戰班的助教小可愛@CC-起點學院（微信：qidiancc520），回復關鍵詞：大禮包
??
領取適合產品新人的原型設計大禮包哦，cc還會不定期分享Axure免費視頻課程呢！