Axure案例:如何制作微信原型?

90 評論 52056 瀏覽 182 收藏 9 分鐘

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

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

PS:筆者用Google瀏覽器無法查看本案例的交互,不知道什么原因,知道的同學(xué)請留言喔!

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

一、效果截圖

啟動頁:

微信頁:

通訊錄:

發(fā)現(xiàn)頁:

朋友圈:

我:

訂閱號:

表情:

二、實現(xiàn)

具體效果及操作見原型地址,在文章頭部,本文將著重說說朋友圈發(fā)布及刷新的實現(xiàn)過程。

1. 朋友圈的效果實現(xiàn)

分析:

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

三、實現(xiàn)步驟:

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

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

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

需要注意的是,要設(shè)置兩個動態(tài)面板,形成嵌套關(guān)系,即是要移動的內(nèi)容放到第二個的動態(tài)面板中,第一個動態(tài)面板所設(shè)置的大小等于所顯示的內(nèi)容。切記,第二層的大小一定要大于第一層的大小。

3. 交互效果如下:

4. 拖動時:

事件一:為了讓動態(tài)面板能夠垂直拖動,并且設(shè)置了上下邊界,防止頁面不見。

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

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

5. 拖動結(jié)束時:

事件一:如果頁面下滑的高度大于0,要是頁面回到初始位置;還需顯示旋轉(zhuǎn)組合,并且使它旋轉(zhuǎn)觸動旋轉(zhuǎn)事件。

6. 旋轉(zhuǎn)事件里的交互:

7. 添加行的內(nèi)容:

8. 添加排序的內(nèi)容:

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

9.? 朋友圈里的內(nèi)容顯示交互和元件如下:

中繼器里的元件

中繼器元件的交互

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

這里提及的“+”是信息發(fā)布頁里的元件;

10. 信息發(fā)布頁的交互如下:

添加行里的內(nèi)容

添加排序的交互

總結(jié)

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

 

本文由 @★亮^o^ 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash ,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 老師,我最近剛學(xué)完Axure基本操作,想要一份源文件學(xué)習(xí)學(xué)習(xí),可以嗎?
    1924300837@qq.com,謝謝~

    來自廣東 回復(fù)
  2. 您好,可以有個源文件,學(xué)習(xí)一下嗎

    來自福建 回復(fù)
  3. 學(xué)習(xí)一下,大佬能發(fā)下源文件嗎?謝過546109473@qq.com

    來自上海 回復(fù)
  4. 大佬能發(fā)下源文件嗎?謝過535014120@qq.com

    來自江西 回復(fù)
  5. 大佬能發(fā)下源文件嗎?謝過844690277@qq.com

    來自湖南 回復(fù)
  6. 同問,求源文件,謝謝1229131254@qq.com

    來自廣東 回復(fù)
  7. 您好,能發(fā)現(xiàn)源文件嗎,謝謝

    來自北京 回復(fù)
  8. 鏈接:https://pan.baidu.com/s/1llfN6YORzTvW8mK1DMReyA
    提取碼:x3qo—-鏈接過期了,可以麻煩再發(fā)下嗎

    來自廣東 回復(fù)
  9. 大神求源文件啊,499481098@qq.com 跪謝~

    來自北京 回復(fù)
  10. 能再發(fā)一下源文件嗎?大神

    來自浙江 回復(fù)
  11. 大神,能發(fā)下源文件么1030896039@qq.com,看您之前發(fā)的下載地址文件不存在了

    回復(fù)
  12. 大神,求源文件包呢,技不如人,想?yún)⒖家幌麓笊褡髌?/p>

    來自廣東 回復(fù)
  13. 樓主,能再發(fā)一下源文件嗎,之前發(fā)的過期了、 ??

    來自四川 回復(fù)
  14. 樓主,想學(xué)習(xí)一下,可以參考一下源文件嗎?

    來自陜西 回復(fù)
  15. 求源文件,最近在學(xué)習(xí)Axure,想?yún)⒖家幌履愕淖髌?/p>

    來自廣東 回復(fù)
  16. 樓主,按照你的下拉刷新新增一行設(shè)置,為什么我的出不來數(shù)據(jù)。。。好奇怪呀

    來自廣東 回復(fù)
  17. 我想求一份源文件包,自己練習(xí)下,之前你分享的鏈接都過期了,感恩~

    來自四川 回復(fù)
  18. 我想求一份源文件包,自己練習(xí)下,之前你分享的鏈接都過期了,感恩~

    來自湖北 回復(fù)
  19. 最近正在學(xué)習(xí) 可以發(fā)一下原型嗎

    回復(fù)
  20. 老師能不能給我分享一下那個微信原型的鏈接
    非常感謝您

    回復(fù)
  21. 樓主我急需這個鏈接 能不能再發(fā)一下萬分感謝2560359904@qq.com

    回復(fù)
  22. 樓主大大 求在分享一下源碼文件,最近我在學(xué)做axure卡住了,萬分感謝。。。。1690041406@qq.com

    回復(fù)
  23. 樓樓,你做的界面太好看了,求再分享一次唄!跪求跪求~~

    來自福建 回復(fù)
  24. 樓主 我也想要一份原型 學(xué)習(xí)學(xué)習(xí) 鏈接不好用了 謝謝樓樓

    來自北京 回復(fù)
  25. 老師,能發(fā)下作品看看嗎?

    回復(fù)
  26. 樓主,您好??戳四龅男Ч?,覺得很棒,我最近也在學(xué)習(xí)Axure這個軟件,想借鑒您的作品學(xué)習(xí)一下。能否麻煩您發(fā)一份源文件,之前的分享鏈接都過期了,萬分感謝

    來自北京 回復(fù)
  27. 樓主,您好??戳四龅男Ч?,覺得很棒,我最近也在學(xué)習(xí)Axure這個軟件,想借鑒您的作品學(xué)習(xí)一下。能否麻煩您發(fā)一份源文件到我的郵箱:2358962181@qq.com,萬分感謝

    來自江蘇 回復(fù)
    1. 鏈接:https://pan.baidu.com/s/1llfN6YORzTvW8mK1DMReyA
      提取碼:x3qo

      來自廣東 回復(fù)
    2. 萬分感謝

      來自江蘇 回復(fù)
    3. 你可以分享一下嗎?作者似乎沒有上線

      來自廣東 回復(fù)
    4. 你可以分享一下嗎?樓主沒有回復(fù)誒

      來自陜西 回復(fù)
    5. 請問能不能再發(fā)一遍,已經(jīng)過期了,求求了,萬分感謝

      來自江蘇 回復(fù)
  28. 你好,你的文章寫的很棒,學(xué)習(xí)了很多。我想求一份源文件包,自己練習(xí)下,之前你分享的鏈接都過期了,麻煩發(fā)我郵箱吧1579269065@qq.com,感恩~

    回復(fù)
    1. 鏈接:https://pan.baidu.com/s/1llfN6YORzTvW8mK1DMReyA
      提取碼:x3qo

      來自廣東 回復(fù)
    2. 請問您可以分享一下嗎、

      來自江蘇 回復(fù)
  29. 老師,我也在做微信,用的墨刀,卡住了,Axure用的不熟,可以發(fā)一下資源借鑒一些嗎?謝謝。郵箱2330222197@qq.com

    回復(fù)
    1. 鏈接:https://pan.baidu.com/s/1llfN6YORzTvW8mK1DMReyA
      提取碼:x3qo

      來自廣東 回復(fù)
    2. 請問您可以分享一下嗎,之前樓主發(fā)的已經(jīng)取消了

      來自江蘇 回復(fù)
  30. 樓主做的非常棒。請問能否提供一份原文件學(xué)習(xí)一下,萬分感謝!?。?!ccszihan@163.com

    來自山東 回復(fù)
    1. 鏈接:https://pan.baidu.com/s/1llfN6YORzTvW8mK1DMReyA
      提取碼:x3qo

      來自廣東 回復(fù)
    2. 鏈接過期了可以麻煩再發(fā)下嗎

      來自廣東 回復(fù)
    3. 請問你有源文件了嗎

      來自江蘇 回復(fù)
    4. 來自江蘇 回復(fù)