Axure案例教程:如何制作微信原型交互效果?

2018-07-1909:52:55原型设计Comments3,551 views字数 920阅读模式

先铺上效果给大家看:点击体验文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

PS:笔者用Google浏览器无法查看本案例的交互,不知道什么原因,知道的同学请留言喔!文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

由于页面过多,只上了部分效果图。开头已经说明,笔者尽自己最大的能力模仿微信的交互,并没有完全一样,望大家能够体谅。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

一、效果截图

启动页:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

微信页:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

通讯录:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

发现页:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

朋友圈:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

我:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

订阅号:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

表情:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

二、实现

具体效果及操作见原型地址,在文章头部,本文将着重说说朋友圈发布及刷新的实现过程。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

1. 朋友圈的效果实现

分析:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

  • 界面下拉回弹后,上方出现图案旋转,图案旋转后隐藏,新的内容出现,并且排在首位;
  • 发布信息,点击右上角相机,灯箱效果出现相册发布—选取照片—填充内容—发布内容—回到朋友圈界面;
  • 笔者将是通过中继器来实现交互效果;

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

三、实现步骤:

1. 给朋友圈元件组合添加如下交互:

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

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

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

具体元件和微信朋友圈界面是一致的,或者打开我的原型链接查漏补缺,因为实在是太多元件了,这里就不一一标注了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

需要注意的是,要设置两个动态面板,形成嵌套关系,即是要移动的内容放到第二个的动态面板中,第一个动态面板所设置的大小等于所显示的内容。切记,第二层的大小一定要大于第一层的大小。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

3. 交互效果如下:

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

4. 拖动时:

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

事件一:为了让动态面板能够垂直拖动,并且设置了上下边界,防止页面不见。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

事件二:当上滑的页面高度大于朋友圈的背景图片所呈现的顶部菜单样式,值“-309”是页面下滑的位置,由于页面是上滑,所以是负的,你可根据你的具体大小来设至。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

事件三:如果上滑的页面高度小于朋友圈的背景图片,呈现原来的顶部菜单样式,所以隐藏。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

5. 拖动结束时:

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

事件一:如果页面下滑的高度大于0,要是页面回到初始位置;还需显示旋转组合,并且使它旋转触动旋转事件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

6. 旋转事件里的交互:

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

7. 添加行的内容:

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

8. 添加排序的内容:

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

事件二:同理,当页面上滑到底部时,需要回到页面底部。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

9.  朋友圈里的内容显示交互和元件如下:

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

中继器里的元件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

中继器元件的交互文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

10. 相机胶卷页的交互如下:

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

这里提及的“+”是信息发布页里的元件;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

10. 信息发布页的交互如下:

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

添加行里的内容文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

添加排序的交互文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

Axure案例教程:如何制作微信原型交互效果?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

总结

其实原型的制作过程并不复杂,虽然操作步骤很多,但其交互效果还是及其简单的,如果大家感兴趣的话可以一起交流。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4173.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/4173.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定