Axure 实例 - 下拉式刷新

Pull-Refresh[下拉式刷新]与之前的 Drawer Menu[抽屉式菜单]一样,都是目前移动应用中比较流行的交互设计。Pull-Refresh 最早出现在 Tweetie 中,后来这款应用被 Twitter 收购,随后被注册成了专利。当然这个只是防御性质,否则 Pull-Refresh 也不会像现在这样四处开花了。这次的实例就要利用 Axure 新增的 OnDrag 事件来模拟这种效果。

预览 | 下载

要求:
1、向下拉动屏幕出现[可刷新]的提示。
2、刷新要有加载过程。
3、刷新完成后屏幕归位。

拖入一个与手机模型屏幕同尺寸的 Dynamic Panel,命名为[mask],其主要的作用是作为后续所有元素的容器,因为要把操作的可视范围限定在屏幕的空间内。

在[mask]中拖入一个稍高于屏幕尺寸的 Dynamic Panel,命名为[screen],高出的部分是用于存放下拉时出现的刷新提示,高度自定,这里我设了 50px,同时将[screen]的位置坐标调整为 x0,y-50,目的是将刷新提示放置在可视范围之外。

在[screen]中拖入一个与屏幕同尺寸的 Dynamic Panel,命名为[content],添加两个 State,分别命名为[content-1][content-2],用于存放刷新前和刷新后的内容,同时把底色调为白色之外的任意色,目的是与刷新区域做一个区别。

在[screen]中再拖入一个与屏幕同宽,高为 50px 的 Dynamic Panel,命名为[refresh],添加两个 State,分别命名为[drag][drag drop],用来存放刷新前和加载时的不同状态提示。

为[mask]添加 OnDrag 事件,并设置动作 Move Panel,拖动方式为 with drag y,即只能沿纵轴方向移动。

为[mask]添加 OnDragDrop 事件,并设置动作:
1. Set Panel state to State,将[refresh]的 State 改为[drag drop],实现加载提示。

2. Wait Time,为加载过程设置一个延迟时间,比如 1000ms。

3. Set Panel state to State,将[content]的 State 改为[content-2],实现刷新后的效果。

好了,现在下拉刷新的效果已经可以实现了,但刷新后如何让被下拉的屏幕归位呢?这里就需要用到一个小技巧了。

拖入一个与屏幕同宽,高为 50px 的 Image Map Region 放置在屏幕的上方,命名为[header]保持它的下边缘与[mask]的上边缘有 2px~3px 的交集,用于判断[mask]的拖动位置,从而让其自动归位。由于 Image Map Region 只是一个图片热点,所以在预览时是不会被看到的。

然后在[mask]的 OnDragDrop 事件中添加一个触发条件,用于判断[mask]的 area of widget 是否超出了[header]的范围。

在条件下设置动作:
1. Wait Time,由于之前的加载过程需要 1000ms,所以这里也要设置一个相同的延迟时间用以归位。

2. Move Panel,让[mask]在加载结束后沿纵轴方向移动 −50px,即将高为 50px 的刷新区域再移动至可视范围之外,实现自动归位的效果。

3. Set Panel state to State,最后将[refresh]的 State 再改回[drag],以便于再次刷新时的文案的正确。

全部完成后的事件列表如下:

搞定,需要注意的是动作的设置要遵从应有的顺序,否则就出乱子了。

  • http://yiliudesign.com/ Yi Liu

    学习了~