Axure教程:原型設計之微信朋友圈效果(中繼器、動態面板、變量高級用法)

86 評論 52329 瀏覽 181 收藏 6 分鐘

文章分享了如何利用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 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 老師能發一下源碼學習嗎?謝謝老師了――1690041406@qq.com

    回復
  2. 老師還發源文件嗎?972169092@qq.com 非常謝謝?。?!

    來自福建 回復
  3. 樓主大大,現在還能給源文件嗎,603415719@qq.com 不勝感激

    來自北京 回復
  4. 老師,求發源文件,w5630789@qq.com,非常感謝?。?/p>

    來自廣東 回復
  5. 老師,求發源文件,1220395374@qq.com謝謝老師

    來自江蘇 回復
  6. 平時基本不在線,偶爾登錄,留言未及時回復的,可以直接給我發郵件,779124046@qq.com.

    來自河南 回復
  7. 大神,求源文件785091235@qq.com 非常感謝. 想學習學習

    來自浙江 回復
  8. 老師我也想要這個原型,能發給我郵箱么809977248@qq.com

    來自天津 回復
  9. 能發給我一份學習一下嗎?謝謝~!~!~郵箱:43553225@qq.com

    來自北京 回復
  10. 能發給我一份學習一下嗎?謝謝~!~!~郵箱:yang756560744@qq.com

    來自北京 回復
  11. 能發給我一份學習一下嗎?謝謝哦,郵箱:171953634@qq.com

    來自浙江 回復
  12. 大神,跪求源文件!拜托啦,十萬火急呢?。?!1184107908@qq.com 非常感謝!!

    來自廣東 回復
  13. 樓主大神求一份源文件,新人學習好多地方不懂,想更進一步地學習一下934466401@qq.com 萬分感謝

    回復
  14. 樓主,可以發送份源碼不,或者公布出來,讓我們新人學習一下。498879930@qq.com

    來自上海 回復
    1. 已發送

      來自河南 回復
  15. 樓主,求發源文件,578260634@qq.com,謝謝

    來自浙江 回復
    1. 已發送

      來自河南 回復
  16. 樓主大大,現在還能給源文件嗎,1047735386@qq.com 不勝感激

    來自廣東 回復
    1. 已發

      來自河南 回復
  17. 大神,求源文件1826353222@qq.com 非常感謝

    來自四川 回復
  18. 大神,求源文件1826353222@qq.com

    來自四川 回復
    1. 已發

      來自河南 回復
  19. 教程寫的不好

    來自廣東 回復
  20. 老師求一份源文件,中繼器那塊和圖片變量傳送那塊一直搞不懂,求教,謝謝! littermore@163.com

    來自廣東 回復
  21. 老師您好,我在做圖片傳送以及后邊時間排序中繼器那塊一直搞了好久沒搞明白,能麻煩給我發一份源文件嗎?

    來自廣東 回復
  22. 求一份源文件。。這個沒法跟著操作呀。謝謝。373090757@qq.com

    來自四川 回復
  23. 大神 能發一份源文件給我嗎?謝謝!408967884@qq.com

    來自北京 回復