文章分享了如何利用Axure制作微信朋友圈的原型，一起來看看吧。

背景介紹

微信朋友圈，一個神奇的地方，如同生活中的另一片大陸，在那里總是會有你感興趣的地方，在不同的人眼中，朋友圈是不一樣的，在產品人的眼中，朋友圈充滿了許多的設計亮點，領先的產品理念，一個朋友圈包含了人性、群體、社交等多種考慮。

功能介紹

實現朋友圈的圖文發布效果，包括相冊選擇圖，朋友圈的圖文刪除等功能，以往都給大家共享源文件，這次就不分享源文件了，（小伙伴們自己努力實現效果吧，最愛海賊）

1、利用中繼器實現圖文展示，并可上下滑動

主要用到了中繼器如何添加行，如何顯示數據，動態面板如何實現上下滑動等。

1.1、效果預覽

1.2、實現原理

拖入一個中繼器，根據朋友圈的布局，添加中繼器中的元素，并填充數據，具體實現步驟如下圖所示：

數據填充之后，返回瀏覽，發現中繼器顯示的仍然是默認內容，那是因為我們尚未設置中繼器的相關事件，中繼器只有設置了每項加載事件，才會顯示相應數據內容，設置方法如下圖：

設置完成后，再返回瀏覽，發現中繼器中填充的數據已經成功顯示，那么列表內容眾多，一屏幕顯示不完，必須可以上下滑動才可以，這時候就用到了動態面板的一個屬性，鼠標右鍵點擊動態面板，在彈出框中依次選擇滾動條>自動顯示垂直滾動條，設置完成后，滾動鼠標滑輪，即可實現頁面滾動效果。

2、實現點擊右上角相機圖標，彈出功能菜單

這里主要用到了動態面板的一些屬性效果

2.1、效果預覽

2.2、實現步驟

首先拖入一個動態面板，命名為d_cover，設置三個狀態，分別為change_photo(選擇圖片)、photo_list(相冊列表)、push_photo(發送圖片)，具體如下圖。

默認d_cover隱藏并位于最底層，點擊右上角相機圖標，顯示d_cover，并置于最頂層，點擊取消，隱藏d_cover。（n1,n2,n3，為樓主測試所用，可以不用理會）

3、實現相冊選取圖片，并展示到發布頁面，點擊發送，添加新的數據到中繼器中,實現最新添加的信息排布在最上方

主要用到了選中/未選中，全局變量等

3.1、最終效果預覽

3.2、實現步驟

首先創建三個全局變量，命名為num1，num2，num3，分別對應喬巴，索隆，烏索普。設置變量初始值為：0，默認規則：0為未選中狀態，1為選中狀態。

設置選中按鈕的事件

設置完成按鈕的事件，將按鈕的點擊結果傳遞到發布頁面（注意，只能選擇兩張圖片）

設置發布按鈕的事件，實現最終信息的發布

信息發布后，實現最新的信息排布在最上方，這里用到了中繼器的排序，添加一個根據時間的排序。

本文由 @神奈川00 原創發布于人人都是產品經理。未經許可，禁止轉載。