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

90 評(píng)論 52056 瀏覽 182 收藏 9 分鐘

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

先鋪上效果給大家看:點(diǎn)擊體驗(yàn)

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

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

一、效果截圖

啟動(dòng)頁(yè):

微信頁(yè):

通訊錄:

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

朋友圈:

我:

訂閱號(hào):

表情:

二、實(shí)現(xiàn)

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

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

分析:

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

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

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

2. 相冊(cè)界面添加如下元件:

具體元件和微信朋友圈界面是一致的,或者打開(kāi)我的原型鏈接查漏補(bǔ)缺,因?yàn)閷?shí)在是太多元件了,這里就不一一標(biāo)注了。

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

3. 交互效果如下:

4. 拖動(dòng)時(shí):

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

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

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

5. 拖動(dòng)結(jié)束時(shí):

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

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

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

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

事件二:同理,當(dāng)頁(yè)面上滑到底部時(shí),需要回到頁(yè)面底部。

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

中繼器里的元件

中繼器元件的交互

10. 相機(jī)膠卷頁(yè)的交互如下:

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

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

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

添加排序的交互

總結(jié)

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

 

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 樓主做的非常棒。請(qǐng)問(wèn)能否提供一份原文件學(xué)習(xí)一下,萬(wàn)分感謝!!??!

    來(lái)自山東 回復(fù)
  2. 想就職pm,最近剛學(xué)完基本操作,老師能給一下源文件嘛Rzengfei@163.com

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

      來(lái)自廣東 回復(fù)
  3. 老師,我最近正在學(xué)習(xí)做高保真原型圖,想要一份源文件,可以嗎?謝謝~
    2538943627@qq.com

    來(lái)自湖北 回復(fù)
    1. 鏈接:https://pan.baidu.com/s/1llfN6YORzTvW8mK1DMReyA
      提取碼:x3qo

      來(lái)自廣東 回復(fù)
  4. 老師 能把你做的原件發(fā)給我嘛?我好好學(xué)習(xí)學(xué)習(xí)
    http://www.2805485185@qq.com謝謝

    回復(fù)
  5. 老師,想學(xué)習(xí)一下,
    773038965@qq.com,謝謝

    來(lái)自陜西 回復(fù)
  6. 老師你好,能否學(xué)習(xí)一下源文件,824304445@qq.com

    來(lái)自北京 回復(fù)
  7. 網(wǎng)盤(pán)鏈接過(guò)期了 作者大大能發(fā)源文件學(xué)習(xí)一下嗎?謝謝?。?! 972169092@qq.com

    來(lái)自福建 回復(fù)
  8. 已打賞 作者能發(fā)一份嗎最好只有朋友圈功能

    來(lái)自福建 回復(fù)
    1. 鏈接:https://pan.baidu.com/s/1llfN6YORzTvW8mK1DMReyA
      提取碼:x3qo

      來(lái)自廣東 回復(fù)
  9. 感謝分享,做的很不錯(cuò)

    來(lái)自廣東 回復(fù)
  10. 感覺(jué)樓主做的非常細(xì),非常棒。能夠提供一份資料學(xué)習(xí)嗎,本人小白,剛剛轉(zhuǎn)行做產(chǎn)品,萬(wàn)分感謝?。。?!530679211@qq.com

    來(lái)自上海 回復(fù)
  11. 鏈接過(guò)期了 ??

    來(lái)自湖北 回復(fù)
  12. 樓主好棒,自己剛剛掌握基本操作,想練練手。不知道可以求一份來(lái)學(xué)習(xí)一下么?感謝~

    回復(fù)
  13. 已發(fā)你郵箱,請(qǐng)查收,謝謝打賞

    來(lái)自廣東 回復(fù)
    1. 來(lái)自廣東 回復(fù)
  14. 挺不錯(cuò),尤其是動(dòng)效設(shè)計(jì),學(xué)習(xí)了

    來(lái)自上海 回復(fù)
  15. 同樣作為小白,佩服你。還是需要落實(shí)到動(dòng)手上面才行啊,我的話太飄了,老是在概念和想法的層面游離??磥?lái)要多向你學(xué)習(xí)了。

    來(lái)自廣東 回復(fù)
  16. 贊一個(gè),比我厲害多了。。。不過(guò)我們公司現(xiàn)在還沒(méi)有用過(guò)如此高保真的原型,重要的還是滿足需求啦

    來(lái)自四川 回復(fù)
  17. 有什么意義……

    來(lái)自上海 回復(fù)
  18. 求教,效果圖怎么弄的,左邊展示交互 右邊有備注說(shuō)明

    來(lái)自浙江 回復(fù)
  19. 膩害膩害,像大佬學(xué)習(xí)?。?!

    來(lái)自江蘇 回復(fù)
  20. Axure RP Extension for Chrome

    來(lái)自北京 回復(fù)
  21. 你的Axure用的比我好太多了,得像你學(xué)

    來(lái)自廣東 回復(fù)
  22. 請(qǐng)問(wèn)各個(gè)元件的尺寸是怎么定義的?

    來(lái)自江蘇 回復(fù)
  23. 為什么總有人喜歡迷戀高保真呢~~~你要研究的是里面的頁(yè)面邏輯,要把更多的時(shí)間放在看不見(jiàn)的地方,當(dāng)然,你做的這個(gè)很好,但耗費(fèi)時(shí)間也很?chē)?yán)重?。?!后期如果有需求更改,你會(huì)很累的?。?!

    來(lái)自江蘇 回復(fù)
  24. 看了你的原型,整體交互、界面都特別好,點(diǎn)贊。具體的原型是否要做成交互式還要看公司的具體情況,開(kāi)發(fā)們也許更喜歡看注釋和備注比較豐富的原型。 ??

    來(lái)自北京 回復(fù)
  25. 用火狐瀏覽器兼容

    回復(fù)
  26. 請(qǐng)問(wèn)你是在哪里學(xué)的軟件呢?有什么推薦書(shū)籍,視頻嗎?我正在學(xué)習(xí)AXURE ~我只會(huì)簡(jiǎn)單交互~好心塞~

    來(lái)自黑龍江 回復(fù)
    1. 做的過(guò)程有看小樓一夜聽(tīng)春語(yǔ)的《Axure PR8實(shí)戰(zhàn)手冊(cè)》

      來(lái)自廣東 回復(fù)
    2. 嗯嗯~謝謝~

      來(lái)自黑龍江 回復(fù)
  27. 贊一個(gè),哈哈哈,我最近也在畫(huà)微信原型,也是小白一個(gè),大佬能給一份原型觀摩一下嘛? ??

    來(lái)自廣東 回復(fù)
    1. 來(lái)自廣東 回復(fù)
    2. 怎么打不開(kāi)

      來(lái)自廣東 回復(fù)
    3. 我試過(guò)可以打開(kāi) 你再試試 ??

      來(lái)自廣東 回復(fù)
    4. 文件過(guò)期了

      來(lái)自河南 回復(fù)
  28. 很喜歡相冊(cè)封面上的那把傘,意境很深。當(dāng)然原型交互很不錯(cuò)哦!99個(gè)贊!

    來(lái)自浙江 回復(fù)
  29. 點(diǎn)贊,花了不少時(shí)間吧

    來(lái)自四川 回復(fù)
    1. 還好,不斷摸索,不斷前行!

      回復(fù)
  30. 小白能畫(huà)出這樣的原型,不錯(cuò)的

    來(lái)自浙江 回復(fù)
    1. 謝謝

      回復(fù)