今天給大家送上模擬微信系列第二篇，我們使用簡(jiǎn)單的函數(shù)組合來(lái)達(dá)到我們想要的顯示效果，只要懂得其原理，我們就可以使用axure提供的函數(shù)做更多的效果。另外，我們展示使用更多的交互來(lái)滿足微信消息列表消息的變化效果。

效果圖

第一，我們注意消息列表后邊的消息變化，顯示的時(shí)間是HH：MM，正常我們使用Axure自帶的函數(shù)是沒(méi)法顯示小時(shí)：分鐘這樣的時(shí)間效果的，因此我們使用小技巧，函數(shù)組合來(lái)實(shí)現(xiàn)更滿足微信效果的時(shí)間顯示方式。

第二，我們做一個(gè)小細(xì)節(jié)，讓每次收到新消息或者發(fā)送新消息的時(shí)候，在微信列表上都能看到最新的一條消息。

制作原理

我們知道，在使用axure函數(shù)的時(shí)候，需要將函數(shù)用[[]]框起來(lái)，而我們的案例是將兩個(gè)函數(shù)用[[]]框起來(lái)后，中間使用其他的符號(hào)連接起來(lái)。另外，我們接上一篇文章，我們點(diǎn)擊發(fā)送btn的時(shí)候，把消息帶到消息列表的位置，以滿足更細(xì)致的交互需求。

本案例其實(shí)比較簡(jiǎn)單，下邊就直接講操作步驟吧。（感覺(jué)相對(duì)熟練的鐵子們已經(jīng)會(huì)了，哈哈）

操作步驟：函數(shù)組合

在發(fā)送btn處增加一個(gè)交互，設(shè)置文本，讓顯示時(shí)間的位置顯示文本[[Now.getHours()]]:[[Now.getMinutes()]]，一個(gè)是獲取當(dāng)前時(shí)間的小時(shí)數(shù)，一個(gè)是獲取當(dāng)前時(shí)間的分鐘數(shù)，中間用冒號(hào)連接，這樣顯示的效果就成了HH：MM這樣的效果，更符合微信現(xiàn)有的顯示方式。

本案例中，我們頁(yè)面中有兩個(gè)微信列表，那么就需要注意，點(diǎn)擊任意一個(gè)發(fā)送按鈕的時(shí)候，需要將時(shí)間帶到兩個(gè)微信列表的時(shí)間位置。（本案例中還增加了每次發(fā)完消息，消息輸入框自動(dòng)清空和無(wú)法發(fā)送空白消息的交互，大家可以自行研究）

操作步驟：消息列表

在發(fā)送btn處，點(diǎn)擊發(fā)送，每次都把發(fā)送的消息內(nèi)容帶到微信消息列表對(duì)應(yīng)的位置即可，帶文字的方式也很簡(jiǎn)單，只要一個(gè)局部變量即可，這一步驟在之前的很多案例中都有提到。

總結(jié)一下，局部變量就是在這一個(gè)交互里面設(shè)置的變量，該變量只對(duì)這一個(gè)交互負(fù)責(zé)，一般使用局部變量來(lái)記元件文字，元件選中狀態(tài)等居多，我們下邊直接展示交互即可。

同樣需要注意，我們案例中有兩個(gè)微信列表，我們?cè)谠O(shè)置交互的時(shí)候需要考慮兩個(gè)用戶的微信列表同步變化，因此在設(shè)置文字的時(shí)候需要分別選擇兩個(gè)用戶微信列表的對(duì)應(yīng)的元件。

結(jié)語(yǔ)

每一期的原型都會(huì)保留之前的交互，因此只要下載最新一期的原型即可涵蓋之前設(shè)置的交互，下載鏈接：

https://pan.baidu.com/s/11_xbtWHTkXgPewTQFHw4Rg

密碼：rxlg

溫馨提示：該文件需要使用Axure 9打開哦。

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

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

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