Axure教程:原型設計之微信朋友圈效果(中繼器、動態面板、變量高級用法)
文章分享了如何利用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 原創發布于人人都是產品經理。未經許可,禁止轉載。
能給一份源文件嗎
大神,能給我一份源文件嗎,1070703105@qq.com,謝謝了
跪求大神源文件~ 836336483@qq.com
求大神源文件啊 ?
574493701@qq.com
感謝大神分享份源文件學習下 879676752@qq.com ??
求大神原文件 197078117@qq.com
求大神源文件~~。 y.zwen@foxmail.com
樓主,2.2點擊相機,彈不出來拍攝、從手機相冊選取、取消這些,這是怎么回事啊 ??
看看是不是沒有設置動態面板置于頂層引起的。
樓主的博客鏈接進半天進不去,1043108692@qq.com,目前真在學習過程中,源文件請樓主賜一份
求樓主發份源文件,謝謝 1249494@qq.com
求教樓主一個問題:中繼器的某一列的數求和相加, 怎么實現?
這個問題描述的不太清楚,有示例圖的話,最好放個你想要實現效果的說明示例圖。
謝謝回復,已經解決了
源文件不再一一發送了,需要的小伙伴,直接去個人博客上下載,myyidou.com
樓主這個博客是什么博客,鏈接??進不去
求樓主發份源文件,謝謝 2791962269@qq.com
3.2部分不是太明白,求發源文件1209893853@qq.com,謝謝。
已發送
大神沒有收到哦~~可否再麻煩發一遍 ??
求大神的源文件,謝謝 18345171500@163.com
麻煩樓主發下源文件學習下,謝謝大神~654923035@qq.com
已發送
麻煩大神給我發一份源文件 感謝zhou909274@126.com
已發送
新手,求樓主發份源文件,謝謝,1031241477@qq.com
已發送,注意查收
樓主方便發一下源文件么?謝謝了!!1019500385@qq.com
已發送,注意查收
樓主太屌了
能否也發我一份源文件??研究了好久 沒做出預期效果??a1009244369@qq.com 感謝~
已發送,注意查收
求源文件!試著做了一下,部分交互沒做出來效果,想看一下源文件。78338988@qq.com 萬分感謝!
已發送,注意查收
樓主,新手學中繼器,求源文件,萬分感謝,956466661@qq.com
已發送,注意查收
不是很明白,1308480895@qq.com,求發,謝謝。
已發送
已收到,謝謝,并關注公眾號了
對中繼器不太明白,可以發一份源文件嗎?1211339619@qq.com
已發送,注意查收
好的,謝謝!?。?/p>
樓主方便發一下源文件么?我中繼器那塊用的不是很好。謝謝了!!892399577@qq.com
已發送
謝謝?。?!
花這么多時間來做這個功能會不會浪費時間
沒有多長時間吧,也就是下班時候,用了大概40分鐘吧,關鍵是要寫下步驟,單純實現功能要快的多,20分鐘左右。
我中繼器不太會用,想請求一份源文件可以嗎?sky94aitt@vip.qq.com
可以
源文件已經發送至你的個人郵箱,注意查收
實現的效果很一般
要那么復雜干什么,大道至簡。
求教.
拖動效果是怎么做的?
拖動效果,利用的是兩個動態面板,將拖動事件設置在外層的動態面板上,移動內層的動態面板,然后設定一個拖動邊界就可以了。
感謝大牛回復~
不過還是沒明白,我在你原型上沒有拖動動作啊,我用鼠標滾動就可以移動你頁面的內容了. 是使用”滾動時”這個事件嗎?但是我這邊似乎必須有滾動條才能用”滾動時”觸發移動效果.
求指導~方便給個源文件或者留個微信號嗎? 我的郵箱winkat@vip.qq.com,微信 zydsbruce
感謝,感謝.
好的,沒問題。
源文件已經發送至你的個人郵箱,注意查收