中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

一、效果截圖

啟動頁：

微信頁：

通訊錄：

發現頁：

朋友圈：

我：

訂閱號：

表情：

二、實現

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

1. 朋友圈的效果實現

分析：

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

三、實現步驟：

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

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

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

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

3. 交互效果如下：

4. 拖動時：

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

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

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

5. 拖動結束時：

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

6. 旋轉事件里的交互：

7. 添加行的內容：

8. 添加排序的內容：

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

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

中繼器里的元件

中繼器元件的交互

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

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

10. 信息發布頁的交互如下：

添加行里的內容

添加排序的交互

總結

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

本文由 @★亮^o^ 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash ，基于 CC0 協議