欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

微信看一看下拉刷新Axure原型设计

发布时间:2017:09:06 14:04:01 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1327个文字,预计阅读时间4分钟
导语
看一看是微信最新开放不久的功能,以前是隐藏在搜索框下方“朋友圈热文”。进入后可以查看推送给自己感兴趣的文章。在文章列表里,下拉后释放,会自动更新些新的文章。在等待

看一看是微信最新开放不久的功能,以前是隐藏在搜索框下方“朋友圈热文”。进入后可以查看推送给自己感兴趣的文章。在文章列表里,下拉后释放,会自动更新些新的文章。在等待的过程中,上方有三个小圆圈来回切换的动画:

微信看一看下拉刷新Axure原型设计

这种切换非常类似微博的下拉刷新操作,今天我们通过动态面板+中继器的方式实现这种下拉刷新的效果。

点击这里查看在线演示效果。

一、界面布局

1.添加标题栏

(1)添加一个矩形,大小为480*56,背景颜色为#38393E,文字左对齐,左边距60,,左边空出的位置用来放返回箭头图标。双击矩形,设置文字内容为“看一看”,文字颜色为白色,大小18。


微信看一看下拉刷新Axure原型设计

(2)从微信里截图,取一下标题栏的返回图标,粘贴过来,调整好大小,放在左边。


微信看一看下拉刷新Axure原型设计

(3)添加个矩形框,大小480*600,放在标题栏下方,作为内容背景。


微信看一看下拉刷新Axure原型设计

(4)添加个中继器,命名msg_list,用来显示文章列表,后面说明中继器中的元件布局。


微信看一看下拉刷新Axure原型设计

(5)为了响应下拉操作,我们选择中继器,右键转换为动态面板,命名为list,调整list大小为480*600,动态面板背景设置为白色,设置动态面板自动显示垂直滚动条属性。


微信看一看下拉刷新Axure原型设计

(6)添加一个灰色圆形,取消边框,大小为8*8。复制两个,并将第一个圆形背景设置为橙色,三个水平分布。


微信看一看下拉刷新Axure原型设计

(7)选择三个小圆形,右键转换为动态面板,命名为index,然后复制状态1为状态2、状态3。


微信看一看下拉刷新Axure原型设计

(8)双击动态面板的状态2,设置第2个圆形为橙色。同理设置动态面板状态3,设置第3个圆形为橙色。


微信看一看下拉刷新Axure原型设计

(9)选择动态面板list,右键设置为最上层,把指示器动画index挡住。


微信看一看下拉刷新Axure原型设计

(10)设置中继器的布局样式,双击msg_list打开,以下面的布局为例。

删除默认的矩形框,添加两个文本标签,一个图片,一个水平分割线,布局示意如下:


微信看一看下拉刷新Axure原型设计

分别命名为title、author、image。

界面布局部分已经准备完毕。

下面添加事件处理,处理下拉事件,列表数据自动添加,以及指示器index的切换动画。

二、事件处理

1.动态面板list的拖动事件

(1)拖动时事件:选择动态面板list,双击“拖动时”事件。


微信看一看下拉刷新Axure原型设计

添加移动操作,选择当前元件,设置移动方向为“垂直拖动”。

(2)移动结束时事件:在拖动结束时,显示动态面板指示器index,显示消息加载动画。


微信看一看下拉刷新Axure原型设计

在鼠标松开后,先移动到距离顶部(0,110)的位置,等待1秒钟,为了显示后面的加载动画。然后再移动到最初的位置(0,56)。移动的方式为“绝对位置”,动画效果为缓慢退出,时间为300毫秒

2. 动态面板index通过循环显示3个状态来显示加载动画

将动态面板list向下拖一点,显示出动态面板index。

(1)选择动态面板index,添加载入时事件,设置状态为State2。

这样设置的目的是触发它的状态改变时事件,后面通过状态改变时事件来设置自动循环显示3个状态。


微信看一看下拉刷新Axure原型设计

(2)添加状态改变时事件,设置选择状态为”Next“,勾选向后循环,循环间隔为300毫秒。


微信看一看下拉刷新Axure原型设计

(3)修改中继器”每项加载时“事件,两个标签分别显示标题和名称,图片显示缩略图。

先来修改中继器的表格数据,修改Column0为title,添加author和image,准备好如下数据(图片以人人都是产品经理网站上原型帖子的缩略图为例):


微信看一看下拉刷新Axure原型设计

添加”每项加载时“事件处理:


微信看一看下拉刷新Axure原型设计

设置标签分别显示中继器的title和author,设置图片image的default值为Item.image。

(4)在刷新动画显示完成之后,往列表里添加数据,这里模拟再往中继器里添加3条和之前一样的数据。

选择动态面板list,双击“拖动结束时”事件,在后面添加一个“添加行”动作,用来添加数据。


微信看一看下拉刷新Axure原型设计

三、预览效果

一切就绪,按下F5预览一下效果。


微信看一看下拉刷新Axure原型设计
如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:电商O2O用户设计分析

下一篇:点融理财4.0app设计改版总结

  • 18900 文章总数
  • 2417658访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信