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

先鋪上效果給大家看：點擊體驗

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

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

一、效果截圖

啟動頁：

微信頁：

通訊錄：

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

朋友圈：

我：

訂閱號：

表情：

二、實現(xiàn)

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

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

分析：

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

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

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

2. 相冊界面添加如下元件：

具體元件和微信朋友圈界面是一致的，或者打開我的原型鏈接查漏補缺，因為實在是太多元件了，這里就不一一標注了。

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

3. 交互效果如下：

4. 拖動時：

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

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

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

5. 拖動結(jié)束時：

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

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

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

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

事件二：同理，當頁面上滑到底部時，需要回到頁面底部。

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

中繼器里的元件

中繼器元件的交互

10. 相機膠卷頁的交互如下：

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

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

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

添加排序的交互

總結(jié)

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

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

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