快好知 kuaihz

Axure:模拟微信文章浮窗效果

本文主要是模拟微信文章的浮窗效果,并分为三个步骤来制作,一起来看看~

背景介绍:微信最近出了一个新的功能:文章浮窗。打开阅读的文章,选择了浮窗效果,就会悬浮在页面上,单击悬浮按钮,会再次打开文章,免去了文章和聊天页面之间来回切换的痛苦。

本次目标:模拟微信文章的浮窗效果。

实现 1:点击x符号,文章缩为悬浮按钮;

实现 2:点击悬浮按钮,文章重新打开;

实现 3:整体效果流畅,相似度90%以上。

适合人群:具有一定Axure基础的产品/交互人员。

学习时间:

新手:10~15min

一般:8~10min

高手:5~8min

骨灰:3~5min

页面构成:

事件构成:

步骤1:页面绘制

首先绘制静态的聊天页面和文章页面,具体展示效果如下图所示:

步骤2:文章转浮窗

将静态的文章页面转换为动态面板命名为:01_浮窗

给动态面板01_浮窗设置两个状态:文章、浮窗

文章状态里面存放文章静态页面

浮窗状态里面存放悬浮按钮

为x符号设置点击事件(参照上图事件设置),具体设置如下:

注意缩小时,文章缩小的速度要比外框的快,这样看起来,整个文章缩小的动作才是一个圆角矩形。

步骤3:浮窗转文章

首先,单击悬浮窗按钮,切换动态面板状态为文章

然后,设置文章的尺寸恢复到原来的尺寸大小375×667

恢复外框的尺寸为396×694且在文章完全恢复大小之前,隐藏外框

注意外框变大的速度要比文章的速度快,具体设置如下图所示:

最终效果:

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:效果  效果词条  模拟  模拟词条  文章  文章词条  Axure  Axure词条  
原型

 【win+mac】用局域网内部分...

用axure做好原型,本文作者想分享给你~WIN下建立局域网篇用axure做好原型,想分享给别人,有几个方法:生成本地文件,发送本地文件,但是文件有更新,就要重...(展开)

原型

 Axure7.0教程(二)中继器...

本教程案例下载:axure7.0教程_小楼作品(二)中继器的使用(2)在上一节教程axure7.0教程(一)中继器的使用(1)中我们初步讲解了,如何使用中继器的...(展开)

原型

 Axure:运用视觉差和动态看板...

如何运用视觉差和动态看板状态切换,制作banner立体切换效果。如下图所示:鼠标向左滑动切换下一张图片,向右滑动显示上一张图片,动态效果为立体翻转样式。思路:利...(展开)