Axure案例:如何制作微信原型?
笔者作为小白,将自己画的第一份原型铺出来,目的是为了和大家一起交流学习。本文是基于最新版本的微信来写的,将在最大程度上还原微信原型的交互效果。
先铺上效果给大家看:点击体验
PS:笔者用Google浏览器无法查看本案例的交互,不知道什么原因,知道的同学请留言喔!
由于页面过多,只上了部分效果图。开头已经说明,笔者尽自己最大的能力模仿微信的交互,并没有完全一样,望大家能够体谅。
一、效果截图
启动页:
微信页:
通讯录:
发现页:
朋友圈:
我:
订阅号:
表情:
二、实现
具体效果及操作见原型地址,在文章头部,本文将着重说说朋友圈发布及刷新的实现过程。
1. 朋友圈的效果实现
分析:
- 界面下拉回弹后,上方出现图案旋转,图案旋转后隐藏,新的内容出现,并且排在首位;
- 发布信息,点击右上角相机,灯箱效果出现相册发布—选取照片—填充内容—发布内容—回到朋友圈界面;
- 笔者将是通过中继器来实现交互效果;
三、实现步骤:
1. 给朋友圈元件组合添加如下交互:
2. 相册界面添加如下元件:
具体元件和微信朋友圈界面是一致的,或者打开我的原型链接查漏补缺,因为实在是太多元件了,这里就不一一标注了。
需要注意的是,要设置两个动态面板,形成嵌套关系,即是要移动的内容放到第二个的动态面板中,第一个动态面板所设置的大小等于所显示的内容。切记,第二层的大小一定要大于第一层的大小。
3. 交互效果如下:
4. 拖动时:
事件一:为了让动态面板能够垂直拖动,并且设置了上下边界,防止页面不见。
事件二:当上滑的页面高度大于朋友圈的背景图片所呈现的顶部菜单样式,值“-309”是页面下滑的位置,由于页面是上滑,所以是负的,你可根据你的具体大小来设至。
事件三:如果上滑的页面高度小于朋友圈的背景图片,呈现原来的顶部菜单样式,所以隐藏。
5. 拖动结束时:
事件一:如果页面下滑的高度大于0,要是页面回到初始位置;还需显示旋转组合,并且使它旋转触动旋转事件。
6. 旋转事件里的交互:
7. 添加行的内容:
8. 添加排序的内容:
事件二:同理,当页面上滑到底部时,需要回到页面底部。
9. 朋友圈里的内容显示交互和元件如下:
中继器里的元件
中继器元件的交互
10. 相机胶卷页的交互如下:
这里提及的“+”是信息发布页里的元件;
10. 信息发布页的交互如下:
添加行里的内容
添加排序的交互
总结
其实原型的制作过程并不复杂,虽然操作步骤很多,但其交互效果还是及其简单的,如果大家感兴趣的话可以一起交流。
本文由 @★亮^o^ 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自 Unsplash ,基于 CC0 协议
老师,我最近刚学完Axure基本操作,想要一份源文件学习学习,可以吗?
1924300837@qq.com,谢谢~
您好,可以有个源文件,学习一下吗
学习一下,大佬能发下源文件吗?谢过546109473@qq.com
大佬能发下源文件吗?谢过535014120@qq.com
大佬能发下源文件吗?谢过844690277@qq.com
同问,求源文件,谢谢1229131254@qq.com
您好,能发现源文件吗,谢谢
链接:https://pan.baidu.com/s/1llfN6YORzTvW8mK1DMReyA
提取码:x3qo—-链接过期了,可以麻烦再发下吗
大神求源文件啊,499481098@qq.com 跪谢~
能再发一下源文件吗?大神
大神,能发下源文件么1030896039@qq.com,看您之前发的下载地址文件不存在了
大神,求源文件包呢,技不如人,想参考一下大神作品
楼主,能再发一下源文件吗,之前发的过期了、 🙂
楼主,想学习一下,可以参考一下源文件吗?
求源文件,最近在学习Axure,想参考一下你的作品
楼主,按照你的下拉刷新新增一行设置,为什么我的出不来数据。。。好奇怪呀
我想求一份源文件包,自己练习下,之前你分享的链接都过期了,感恩~
我想求一份源文件包,自己练习下,之前你分享的链接都过期了,感恩~
最近正在学习 可以发一下原型吗
老师能不能给我分享一下那个微信原型的链接
非常感谢您
楼主我急需这个链接 能不能再发一下万分感谢2560359904@qq.com
楼主大大 求在分享一下源码文件,最近我在学做axure卡住了,万分感谢。。。。1690041406@qq.com
楼楼,你做的界面太好看了,求再分享一次呗!跪求跪求~~
楼主 我也想要一份原型 学习学习 链接不好用了 谢谢楼楼
老师,能发下作品看看吗?
楼主,您好。看了您做的效果,觉得很棒,我最近也在学习Axure这个软件,想借鉴您的作品学习一下。能否麻烦您发一份源文件,之前的分享链接都过期了,万分感谢
楼主,您好。看了您做的效果,觉得很棒,我最近也在学习Axure这个软件,想借鉴您的作品学习一下。能否麻烦您发一份源文件到我的邮箱:2358962181@qq.com,万分感谢
链接:https://pan.baidu.com/s/1llfN6YORzTvW8mK1DMReyA
提取码:x3qo
万分感谢
你可以分享一下吗?作者似乎没有上线
你可以分享一下吗?楼主没有回复诶
请问能不能再发一遍,已经过期了,求求了,万分感谢
你好,你的文章写的很棒,学习了很多。我想求一份源文件包,自己练习下,之前你分享的链接都过期了,麻烦发我邮箱吧1579269065@qq.com,感恩~
链接:https://pan.baidu.com/s/1llfN6YORzTvW8mK1DMReyA
提取码:x3qo
请问您可以分享一下吗、
老师,我也在做微信,用的墨刀,卡住了,Axure用的不熟,可以发一下资源借鉴一些吗?谢谢。邮箱2330222197@qq.com
链接:https://pan.baidu.com/s/1llfN6YORzTvW8mK1DMReyA
提取码:x3qo
请问您可以分享一下吗,之前楼主发的已经取消了
楼主做的非常棒。请问能否提供一份原文件学习一下,万分感谢!!!!ccszihan@163.com
链接:https://pan.baidu.com/s/1llfN6YORzTvW8mK1DMReyA
提取码:x3qo
链接过期了可以麻烦再发下吗
请问你有源文件了吗
1937819048@qq.com