筆者作為小白，將自己畫(huà)的第一份原型鋪出來(lái)，目的是為了和大家一起交流學(xué)習(xí)。本文是基于最新版本的微信來(lái)寫(xiě)的，將在最大程度上還原微信原型的交互效果。

先鋪上效果給大家看：點(diǎn)擊體驗(yàn)

PS：筆者用Google瀏覽器無(wú)法查看本案例的交互，不知道什么原因，知道的同學(xué)請(qǐng)留言喔！

由于頁(yè)面過(guò)多，只上了部分效果圖。開(kāi)頭已經(jīng)說(shuō)明，筆者盡自己最大的能力模仿微信的交互，并沒(méi)有完全一樣，望大家能夠體諒。

一、效果截圖

啟動(dòng)頁(yè)：

微信頁(yè)：

通訊錄：

發(fā)現(xiàn)頁(yè)：

朋友圈：

我：

訂閱號(hào)：

表情：

二、實(shí)現(xiàn)

具體效果及操作見(jiàn)原型地址，在文章頭部，本文將著重說(shuō)說(shuō)朋友圈發(fā)布及刷新的實(shí)現(xiàn)過(guò)程。

1. 朋友圈的效果實(shí)現(xiàn)

分析：

• 界面下拉回彈后，上方出現(xiàn)圖案旋轉(zhuǎn)，圖案旋轉(zhuǎn)后隱藏，新的內(nèi)容出現(xiàn)，并且排在首位；
• 發(fā)布信息，點(diǎn)擊右上角相機(jī)，燈箱效果出現(xiàn)相冊(cè)發(fā)布—選取照片—填充內(nèi)容—發(fā)布內(nèi)容—回到朋友圈界面；
• 筆者將是通過(guò)中繼器來(lái)實(shí)現(xiàn)交互效果；

三、實(shí)現(xiàn)步驟：

1. 給朋友圈元件組合添加如下交互：

2. 相冊(cè)界面添加如下元件：

具體元件和微信朋友圈界面是一致的，或者打開(kāi)我的原型鏈接查漏補(bǔ)缺，因?yàn)閷?shí)在是太多元件了，這里就不一一標(biāo)注了。

需要注意的是，要設(shè)置兩個(gè)動(dòng)態(tài)面板，形成嵌套關(guān)系，即是要移動(dòng)的內(nèi)容放到第二個(gè)的動(dòng)態(tài)面板中，第一個(gè)動(dòng)態(tài)面板所設(shè)置的大小等于所顯示的內(nèi)容。切記，第二層的大小一定要大于第一層的大小。

3. 交互效果如下：

4. 拖動(dòng)時(shí)：

事件一：為了讓動(dòng)態(tài)面板能夠垂直拖動(dòng)，并且設(shè)置了上下邊界，防止頁(yè)面不見(jiàn)。

事件二：當(dāng)上滑的頁(yè)面高度大于朋友圈的背景圖片所呈現(xiàn)的頂部菜單樣式，值“-309”是頁(yè)面下滑的位置，由于頁(yè)面是上滑，所以是負(fù)的，你可根據(jù)你的具體大小來(lái)設(shè)至。

事件三：如果上滑的頁(yè)面高度小于朋友圈的背景圖片，呈現(xiàn)原來(lái)的頂部菜單樣式，所以隱藏。

5. 拖動(dòng)結(jié)束時(shí)：

事件一：如果頁(yè)面下滑的高度大于0，要是頁(yè)面回到初始位置；還需顯示旋轉(zhuǎn)組合，并且使它旋轉(zhuǎn)觸動(dòng)旋轉(zhuǎn)事件。

6. 旋轉(zhuǎn)事件里的交互：

7. 添加行的內(nèi)容：

8. 添加排序的內(nèi)容：

事件二：同理，當(dāng)頁(yè)面上滑到底部時(shí)，需要回到頁(yè)面底部。

9.? 朋友圈里的內(nèi)容顯示交互和元件如下：

中繼器里的元件

中繼器元件的交互

10. 相機(jī)膠卷頁(yè)的交互如下：

這里提及的“+”是信息發(fā)布頁(yè)里的元件；

10. 信息發(fā)布頁(yè)的交互如下：

添加行里的內(nèi)容

添加排序的交互

總結(jié)

其實(shí)原型的制作過(guò)程并不復(fù)雜，雖然操作步驟很多，但其交互效果還是及其簡(jiǎn)單的，如果大家感興趣的話可以一起交流。

本文由 @★亮^o^ 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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