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

背景介紹

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

功能介紹

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

1、利用中繼器實(shí)現(xiàn)圖文展示，并可上下滑動(dòng)

主要用到了中繼器如何添加行，如何顯示數(shù)據(jù)，動(dòng)態(tài)面板如何實(shí)現(xiàn)上下滑動(dòng)等。

1.1、效果預(yù)覽

1.2、實(shí)現(xiàn)原理

拖入一個(gè)中繼器，根據(jù)朋友圈的布局，添加中繼器中的元素，并填充數(shù)據(jù)，具體實(shí)現(xiàn)步驟如下圖所示：

數(shù)據(jù)填充之后，返回瀏覽，發(fā)現(xiàn)中繼器顯示的仍然是默認(rèn)內(nèi)容，那是因?yàn)槲覀兩形丛O(shè)置中繼器的相關(guān)事件，中繼器只有設(shè)置了每項(xiàng)加載事件，才會(huì)顯示相應(yīng)數(shù)據(jù)內(nèi)容，設(shè)置方法如下圖：

設(shè)置完成后，再返回瀏覽，發(fā)現(xiàn)中繼器中填充的數(shù)據(jù)已經(jīng)成功顯示，那么列表內(nèi)容眾多，一屏幕顯示不完，必須可以上下滑動(dòng)才可以，這時(shí)候就用到了動(dòng)態(tài)面板的一個(gè)屬性，鼠標(biāo)右鍵點(diǎn)擊動(dòng)態(tài)面板，在彈出框中依次選擇滾動(dòng)條>自動(dòng)顯示垂直滾動(dòng)條，設(shè)置完成后，滾動(dòng)鼠標(biāo)滑輪，即可實(shí)現(xiàn)頁面滾動(dòng)效果。

2、實(shí)現(xiàn)點(diǎn)擊右上角相機(jī)圖標(biāo)，彈出功能菜單

這里主要用到了動(dòng)態(tài)面板的一些屬性效果

2.1、效果預(yù)覽

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

首先拖入一個(gè)動(dòng)態(tài)面板，命名為d_cover，設(shè)置三個(gè)狀態(tài)，分別為change_photo(選擇圖片)、photo_list(相冊(cè)列表)、push_photo(發(fā)送圖片)，具體如下圖。

默認(rèn)d_cover隱藏并位于最底層，點(diǎn)擊右上角相機(jī)圖標(biāo)，顯示d_cover，并置于最頂層，點(diǎn)擊取消，隱藏d_cover。（n1,n2,n3，為樓主測試所用，可以不用理會(huì)）

3、實(shí)現(xiàn)相冊(cè)選取圖片，并展示到發(fā)布頁面，點(diǎn)擊發(fā)送，添加新的數(shù)據(jù)到中繼器中,實(shí)現(xiàn)最新添加的信息排布在最上方

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

3.1、最終效果預(yù)覽

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

首先創(chuàng)建三個(gè)全局變量，命名為num1，num2，num3，分別對(duì)應(yīng)喬巴，索隆，烏索普。設(shè)置變量初始值為：0，默認(rèn)規(guī)則：0為未選中狀態(tài)，1為選中狀態(tài)。

設(shè)置選中按鈕的事件

設(shè)置完成按鈕的事件，將按鈕的點(diǎn)擊結(jié)果傳遞到發(fā)布頁面（注意，只能選擇兩張圖片）

設(shè)置發(fā)布按鈕的事件，實(shí)現(xiàn)最終信息的發(fā)布

信息發(fā)布后，實(shí)現(xiàn)最新的信息排布在最上方，這里用到了中繼器的排序，添加一個(gè)根據(jù)時(shí)間的排序。

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